| @@ -1,7 +1,7 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="showImgBox imgContenBox" | |||
| ><image src="../../assets/img/img1.jpg" mode="aspectFit" | |||
| ><image src="../../assets/img/img1.png" mode="aspectFit" | |||
| /></view> | |||
| <text class="name">风格名称</text> | |||
| <view class="buttonBox"> | |||
| @@ -2,7 +2,7 @@ | |||
| <view class="page"> | |||
| <view class="topBox"> | |||
| <view class="imgContenBox"> | |||
| <image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||
| <image src="../../assets/img/img2.png" mode="aspectFit" /> | |||
| </view> | |||
| <up-button | |||
| type="primary" | |||
| @@ -18,7 +18,7 @@ | |||
| :key="item" | |||
| @click="goLookPhoto" | |||
| > | |||
| <image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||
| <image src="../../assets/img/img2.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| <!-- 生成中的底部栏 --> | |||
| @@ -31,11 +31,21 @@ | |||
| > | |||
| </view> | |||
| <!-- 显示风格列表内容 --> | |||
| <view v-show="showListActive == 1" class="showStyleList"> | |||
| <scroll-view | |||
| :scroll-y="true" | |||
| v-show="showListActive == 1" | |||
| class="showStyleList" | |||
| > | |||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||
| <view class="top"> | |||
| <text>风格名称</text> | |||
| <text>生成时间</text> | |||
| <text class="name">风格名称</text> | |||
| <view class="time"> | |||
| <text>生成时间</text> | |||
| <!-- 更多 --> | |||
| <view class="moreBox"> | |||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <scroll-view :scroll-x="true" class="imgListBox"> | |||
| <view v-for="item in 6" :key="item" class="item"> | |||
| @@ -47,7 +57,34 @@ | |||
| </view> | |||
| </scroll-view> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| <!-- 显示视频列表内容 --> | |||
| <scroll-view | |||
| :scroll-y="true" | |||
| v-show="showListActive == 2" | |||
| class="showVideoList" | |||
| > | |||
| <view v-for="item in 7" :key="item" class="showListItem"> | |||
| <image | |||
| class="showImg" | |||
| src="../../assets/img/avatar.png" | |||
| mode="aspectFit" | |||
| /> | |||
| <view class="videoInfo"> | |||
| <view class="name">视频名称</view> | |||
| <view class="time">生成时间</view> | |||
| </view> | |||
| <!-- 播放按钮 --> | |||
| <view class="playIcon"> | |||
| <image src="../../assets/icon/play.png" mode="aspectFit" /> | |||
| </view> | |||
| <!-- 更多 --> | |||
| <view class="moreBox"> | |||
| <image src="../../assets/icon/more.png" mode="widthFix" /> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| <!-- 显示邀请列表内容 --> | |||
| <view class="InviteBox" v-show="showListActive == 3"> | |||
| <scroll-view :scroll-y="true" class="showInviteList"> | |||
| @@ -145,7 +182,7 @@ const tabList = ref([ | |||
| { name: "我的邀请", id: 3 }, | |||
| { name: "消费记录", id: 4 }, | |||
| ]); | |||
| const showListActive = ref(3); | |||
| const showListActive = ref(1); | |||
| function clickTabHandle(e) { | |||
| showListActive.value = e.id; | |||
| } | |||
| @@ -232,35 +269,131 @@ function clickTabHandle(e) { | |||
| // 风格列表 | |||
| .showStyleList { | |||
| margin-top: 20rpx; | |||
| width: 750rpx; | |||
| flex: 1; | |||
| overflow: hidden; | |||
| margin-top: 30rpx; | |||
| width: 690rpx; | |||
| .showListItem { | |||
| margin-top: 10rpx; | |||
| .top { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 30rpx; | |||
| margin-bottom: 20rpx; | |||
| .name { | |||
| font-weight: 900; | |||
| } | |||
| .time { | |||
| display: inline-block; | |||
| font-size: 22rpx; | |||
| font-weight: 100; | |||
| line-height: 33rpx; | |||
| text { | |||
| margin-right: 50rpx; | |||
| } | |||
| .moreBox { | |||
| display: inline-block; | |||
| width: 8rpx; | |||
| height: 33rpx; | |||
| image { | |||
| vertical-align: top; | |||
| width: 100%; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .imgListBox { | |||
| white-space: nowrap; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| flex-wrap: nowrap; | |||
| height: 250rpx; | |||
| height: 200rpx; | |||
| .item { | |||
| width: 240rpx; | |||
| height: 240rpx; | |||
| margin-right: 20rpx; | |||
| width: 150rpx; | |||
| height: 200rpx; | |||
| border-radius: 30rpx; | |||
| margin-right: 30rpx; | |||
| display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .cover { | |||
| width: 240rpx; | |||
| height: 240rpx; | |||
| width: 150rpx; | |||
| height: 200rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| // 视频列表 | |||
| .showVideoList { | |||
| flex: 1; | |||
| overflow: hidden; | |||
| margin-top: 30rpx; | |||
| width: 690rpx; | |||
| padding: 15rpx; | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| justify-content: flex-start; | |||
| word-break: keep-all; | |||
| .showListItem { | |||
| position: relative; | |||
| display: inline-block; | |||
| width: 330rpx; | |||
| height: 440rpx; | |||
| background-color: #000; | |||
| margin-bottom: 25rpx; | |||
| border-radius: 25rpx; | |||
| overflow: hidden; | |||
| .showImg { | |||
| position: absolute; | |||
| top: 0; | |||
| z-index: 1; | |||
| width: 100%; | |||
| } | |||
| .videoInfo { | |||
| position: absolute; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 100rpx; | |||
| padding: 10rpx 20rpx; | |||
| background-color: red; | |||
| z-index: 2; | |||
| .name { | |||
| font-weight: 900; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .time { | |||
| font-size: 22rpx; | |||
| font-weight: 100; | |||
| } | |||
| } | |||
| .playIcon { | |||
| position: absolute; | |||
| top: 50%; | |||
| left: 50%; | |||
| transform: translate(-50%, -50%); | |||
| z-index: 2; | |||
| image { | |||
| width: 72rpx; | |||
| height: 72rpx; | |||
| } | |||
| } | |||
| .moreBox { | |||
| position: absolute; | |||
| top: 23rpx; | |||
| right: 26rpx; | |||
| width: 8rpx; | |||
| height: 33rpx; | |||
| image { | |||
| width: 100%; | |||
| } | |||
| } | |||
| } | |||
| .showListItem:nth-child(odd) { | |||
| margin-right: 30rpx; | |||
| } | |||
| } | |||
| // 邀请列表 | |||
| .InviteBox { | |||
| width: 100%; | |||
| @@ -1,13 +1,15 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <view class="videoBox"> | |||
| <video | |||
| <image class="bgImg" src="../../assets/img/homeImg.png" mode="aspectFit" /> | |||
| <!-- 视频,已废弃 --> | |||
| <view v-show="false" class="videoBox"> | |||
| <!-- <video | |||
| src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | |||
| autoplay | |||
| muted | |||
| loop | |||
| :controls="false" | |||
| /> | |||
| /> --> | |||
| <!-- <video | |||
| src="https://wenlian.wenzhou.gov.cn//upload/video/2021-01-14%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E6%B8%A0%E5%B7%9D%EF%BC%9A%E8%B5%B0%E7%AC%94%E5%86%99%E4%BA%BA%E7%94%9F.mp4" | |||
| autoplay | |||
| @@ -15,24 +17,20 @@ | |||
| :controls="false" | |||
| /> --> | |||
| </view> | |||
| <view class="buttonBox"> | |||
| <up-button | |||
| type="primary" | |||
| text="开始制作我的数字分身" | |||
| color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||
| @click="toCreate" | |||
| ></up-button> | |||
| <view class="bottomBox"> | |||
| <view class="bottomBtn" @click="toCreate"> 开始制作我的数字分身 </view> | |||
| <u-checkbox-group v-model="checkboxValue1" placement="row"> | |||
| <u-checkbox | |||
| labelColor="white" | |||
| activeColor="red" | |||
| v-for="(item, index) in checkboxList1" | |||
| :key="index" | |||
| :label="item.name" | |||
| :name="item.name" | |||
| > | |||
| </u-checkbox> | |||
| </u-checkbox-group> | |||
| </view> | |||
| <u-checkbox-group v-model="checkboxValue1" placement="row"> | |||
| <u-checkbox | |||
| activeColor="red" | |||
| v-for="(item, index) in checkboxList1" | |||
| :key="index" | |||
| :label="item.name" | |||
| :name="item.name" | |||
| > | |||
| </u-checkbox> | |||
| </u-checkbox-group> | |||
| </view> | |||
| </template> | |||
| @@ -96,7 +94,13 @@ voiceTotalApi(); | |||
| <style lang="scss"> | |||
| .page { | |||
| position: relative; | |||
| padding: 0; | |||
| min-height: 100vh; | |||
| } | |||
| .bgImg { | |||
| width: 750rpx; | |||
| height: 100vh; | |||
| } | |||
| .videoBox { | |||
| width: 750rpx; | |||
| @@ -108,14 +112,27 @@ voiceTotalApi(); | |||
| // aspect-ratio: 9/12; | |||
| } | |||
| } | |||
| button { | |||
| margin-top: 50rpx; | |||
| } | |||
| .buttonBox { | |||
| width: 50%; | |||
| } | |||
| .u-checkbox-group { | |||
| margin-top: 70rpx; | |||
| .bottomBox { | |||
| position: absolute; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 345rpx; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| background-color: rgba(0, 0, 0, 0.8); | |||
| color: #fff !important; | |||
| .bottomBtn { | |||
| margin-top: 55rpx; | |||
| margin-bottom: 65rpx; | |||
| width: 520rpx; | |||
| height: 100rpx; | |||
| border-radius: 50rpx; | |||
| line-height: 100rpx; | |||
| text-align: center; | |||
| background-color: rgba(255, 79, 0, 1); | |||
| font-size: 30rpx; | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -1,6 +1,6 @@ | |||
| <template> | |||
| <view class="page" @touchmove.stop.prevent=""> | |||
| <image src="../../assets/img/img1.jpg" mode="aspectFit" /> | |||
| <image src="../../assets/img/img1.png" mode="aspectFit" /> | |||
| <view v-show="!audioUrl" class="myBtnbox"> | |||
| <up-button | |||
| type="primary" | |||
| @@ -280,9 +280,9 @@ image { | |||
| z-index: -1; | |||
| pointer-events: none; | |||
| } | |||
| img { | |||
| pointer-events: none; | |||
| } | |||
| // img { | |||
| // pointer-events: none; | |||
| // } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -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> | |||