|
|
@@ -1,25 +1,25 @@ |
|
|
|
<template>
|
|
|
|
<view class="page">
|
|
|
|
<view class="title imgContenBox">
|
|
|
|
<view class="title">
|
|
|
|
<!-- 提示文字 -->
|
|
|
|
<image
|
|
|
|
v-show="uploadState == 1"
|
|
|
|
src="../../assets/text/uploadText.png"
|
|
|
|
mode="aspectFit" /><image
|
|
|
|
aspectFit
|
|
|
|
v-show="uploadState == 2"
|
|
|
|
src="../../assets/text/uploadText2.png"
|
|
|
|
mode="aspectFit" /><image
|
|
|
|
v-show="uploadState == 3"
|
|
|
|
src="../../assets/text/uploadText3.png"
|
|
|
|
mode="aspectFit"
|
|
|
|
/></view>
|
|
|
|
<text class="tips">照片不符合规范,请重新上传</text>
|
|
|
|
<text v-show="false" class="tips">添加一张正面照片</text>
|
|
|
|
<text v-show="false" class="tips">数字形象生成中</text>
|
|
|
|
</view>
|
|
|
|
<!-- 上传图片和展示 -->
|
|
|
|
<view class="uploadBox imgContenBox scan">
|
|
|
|
<!-- 扫描线 -->
|
|
|
|
<view class="scan-line"></view>
|
|
|
|
<image
|
|
|
|
class="scan-border"
|
|
|
|
src="../../assets/img/scanBorder.png"
|
|
|
|
mode="aspectFit"
|
|
|
|
/>
|
|
|
|
<!-- 上传按钮 -->
|
|
|
|
<image
|
|
|
|
class="addImg"
|
|
|
|
v-show="!showImgUrl"
|
|
|
|
src="../../assets/icon/uploadImg.png"
|
|
|
|
src="../../assets/icon/add.png"
|
|
|
|
alt=""
|
|
|
|
@click="chooseImage"
|
|
|
|
/>
|
|
|
@@ -32,19 +32,40 @@ |
|
|
|
mode="aspectFit"
|
|
|
|
/>
|
|
|
|
</view>
|
|
|
|
<view class="bottonBox">
|
|
|
|
<up-button
|
|
|
|
type="primary"
|
|
|
|
text="上传我的照片"
|
|
|
|
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
|
|
|
|
@click="toCloseStyle"
|
|
|
|
></up-button>
|
|
|
|
<view @click="toCloseStyle" class="uploadBtn">
|
|
|
|
<text>上传我的照片</text>
|
|
|
|
<view class="free">
|
|
|
|
<image src="../../assets/icon/blackBG.png" mode="aspectFit" />
|
|
|
|
<text>新用户免费制作</text>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="tips">请按照样片上传您五官清晰的正面照片</view>
|
|
|
|
<view class="demoImgBox">
|
|
|
|
<view class="demoImg1"></view>
|
|
|
|
<view class="demoImg2"></view>
|
|
|
|
<view class="demoImg1"></view>
|
|
|
|
<!-- 底部盒子 -->
|
|
|
|
<view class="bottomBox">
|
|
|
|
<view class="tips2">请按照样片上传您五官清晰的正面照片</view>
|
|
|
|
<view class="demoImgBox">
|
|
|
|
<view class="imgBox">
|
|
|
|
<image src="../../assets/img/img1.png" mode="aspectFit" />
|
|
|
|
<view class="icon">
|
|
|
|
<image src="../../assets/icon/error.png" mode="aspectFit" />
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="imgBox">
|
|
|
|
<image
|
|
|
|
class="rightImg"
|
|
|
|
src="../../assets/img/img2.png"
|
|
|
|
mode="aspectFit"
|
|
|
|
/>
|
|
|
|
<view class="icon">
|
|
|
|
<image src="../../assets/icon/correct.png" mode="aspectFit" />
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="imgBox">
|
|
|
|
<image src="../../assets/img/img3.png" mode="aspectFit" />
|
|
|
|
<view class="icon">
|
|
|
|
<image src="../../assets/icon/error.png" mode="aspectFit" />
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
@@ -117,24 +138,48 @@ function toCloseStyle() { |
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.page {
|
|
|
|
position: relative;
|
|
|
|
min-height: 100vh;
|
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
|
.bgc {
|
|
|
|
position: absolute;
|
|
|
|
width: 750rpx;
|
|
|
|
height: 750rpx;
|
|
|
|
transform: scale(1.5);
|
|
|
|
top: 187rpx;
|
|
|
|
left: 0;
|
|
|
|
object-fit: cover;
|
|
|
|
z-index: -2;
|
|
|
|
backdrop-filter: blur(3px);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.title {
|
|
|
|
width: 100%;
|
|
|
|
height: 80rpx;
|
|
|
|
image {
|
|
|
|
// min-width: 40%;
|
|
|
|
height: 80rpx;
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
.tips {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
color: #fff;
|
|
|
|
font-size: 44rpx;
|
|
|
|
font-weight: 900;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.uploadBox {
|
|
|
|
position: relative;
|
|
|
|
width: 600rpx;
|
|
|
|
height: 600rpx;
|
|
|
|
border: 5rpx solid #000;
|
|
|
|
width: 420rpx;
|
|
|
|
height: 560rpx;
|
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
border-radius: 50rpx;
|
|
|
|
margin-bottom: 50rpx;
|
|
|
|
image {
|
|
|
|
max-width: 30%;
|
|
|
|
max-height: 30%;
|
|
|
|
.scan-border {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
width: 360rpx;
|
|
|
|
height: 480rpx;
|
|
|
|
}
|
|
|
|
.addImg {
|
|
|
|
width: 80rpx;
|
|
|
|
height: 80rpx;
|
|
|
|
}
|
|
|
|
.showImg {
|
|
|
|
max-width: 90%;
|
|
|
@@ -173,15 +218,88 @@ function toCloseStyle() { |
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.buttonBox {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
// 上传
|
|
|
|
.u-button {
|
|
|
|
// width: 70% !important;
|
|
|
|
.uploadBtn {
|
|
|
|
position: relative;
|
|
|
|
margin-top: 75rpx;
|
|
|
|
width: 520rpx;
|
|
|
|
height: 100rpx;
|
|
|
|
line-height: 100rpx;
|
|
|
|
text-align: center;
|
|
|
|
background: #ff4f00;
|
|
|
|
border-radius: 50rpx;
|
|
|
|
font-size: 30rpx;
|
|
|
|
color: #fff;
|
|
|
|
font-weight: 900;
|
|
|
|
.free {
|
|
|
|
position: absolute;
|
|
|
|
top: -25rpx;
|
|
|
|
right: -80rpx;
|
|
|
|
width: 185rpx;
|
|
|
|
height: 50rpx;
|
|
|
|
image {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
left: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
z-index: 1;
|
|
|
|
}
|
|
|
|
text {
|
|
|
|
position: absolute;
|
|
|
|
top: -25rpx;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, 0);
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
font-size: 22rpx;
|
|
|
|
font-weight: 900;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.tips {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
margin-bottom: 20rpx;
|
|
|
|
// 底部盒子
|
|
|
|
.bottomBox {
|
|
|
|
flex: 1;
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-end;
|
|
|
|
padding: 0 0 90rpx 0;
|
|
|
|
.tips2 {
|
|
|
|
margin-top: 20rpx;
|
|
|
|
margin-bottom: 15rpx;
|
|
|
|
font-size: 22rpx;
|
|
|
|
}
|
|
|
|
.demoImgBox {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: flex-end;
|
|
|
|
padding: 0 20rpx;
|
|
|
|
width: 100%;
|
|
|
|
.imgBox {
|
|
|
|
position: relative;
|
|
|
|
image {
|
|
|
|
width: 180rpx;
|
|
|
|
height: 180rpx;
|
|
|
|
}
|
|
|
|
.rightImg {
|
|
|
|
width: 200rpx;
|
|
|
|
height: 200rpx;
|
|
|
|
}
|
|
|
|
.icon {
|
|
|
|
position: absolute;
|
|
|
|
top: -8rpx;
|
|
|
|
right: -8rpx;
|
|
|
|
width: 36rpx;
|
|
|
|
height: 36rpx;
|
|
|
|
image {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|