@@ -1,7 +1,7 @@ | |||||
<template> | <template> | ||||
<view class="page"> | <view class="page"> | ||||
<view class="showImgBox imgContenBox" | <view class="showImgBox imgContenBox" | ||||
><image src="../../assets/img/img1.jpg" mode="aspectFit" | |||||
><image src="../../assets/img/img1.png" mode="aspectFit" | |||||
/></view> | /></view> | ||||
<text class="name">风格名称</text> | <text class="name">风格名称</text> | ||||
<view class="buttonBox"> | <view class="buttonBox"> | ||||
@@ -2,7 +2,7 @@ | |||||
<view class="page"> | <view class="page"> | ||||
<view class="topBox"> | <view class="topBox"> | ||||
<view class="imgContenBox"> | <view class="imgContenBox"> | ||||
<image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | |||||
</view> | </view> | ||||
<up-button | <up-button | ||||
type="primary" | type="primary" | ||||
@@ -18,7 +18,7 @@ | |||||
:key="item" | :key="item" | ||||
@click="goLookPhoto" | @click="goLookPhoto" | ||||
> | > | ||||
<image src="../../assets/img/img2.jpg" mode="aspectFit" /> | |||||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<!-- 生成中的底部栏 --> | <!-- 生成中的底部栏 --> | ||||
@@ -31,11 +31,21 @@ | |||||
> | > | ||||
</view> | </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 v-for="item in 7" :key="item" class="showListItem"> | ||||
<view class="top"> | <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> | </view> | ||||
<scroll-view :scroll-x="true" class="imgListBox"> | <scroll-view :scroll-x="true" class="imgListBox"> | ||||
<view v-for="item in 6" :key="item" class="item"> | <view v-for="item in 6" :key="item" class="item"> | ||||
@@ -47,7 +57,34 @@ | |||||
</view> | </view> | ||||
</scroll-view> | </scroll-view> | ||||
</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"> | <view class="InviteBox" v-show="showListActive == 3"> | ||||
<scroll-view :scroll-y="true" class="showInviteList"> | <scroll-view :scroll-y="true" class="showInviteList"> | ||||
@@ -145,7 +182,7 @@ const tabList = ref([ | |||||
{ name: "我的邀请", id: 3 }, | { name: "我的邀请", id: 3 }, | ||||
{ name: "消费记录", id: 4 }, | { name: "消费记录", id: 4 }, | ||||
]); | ]); | ||||
const showListActive = ref(3); | |||||
const showListActive = ref(1); | |||||
function clickTabHandle(e) { | function clickTabHandle(e) { | ||||
showListActive.value = e.id; | showListActive.value = e.id; | ||||
} | } | ||||
@@ -232,35 +269,131 @@ function clickTabHandle(e) { | |||||
// 风格列表 | // 风格列表 | ||||
.showStyleList { | .showStyleList { | ||||
margin-top: 20rpx; | |||||
width: 750rpx; | |||||
flex: 1; | |||||
overflow: hidden; | |||||
margin-top: 30rpx; | |||||
width: 690rpx; | |||||
.showListItem { | .showListItem { | ||||
margin-top: 10rpx; | |||||
.top { | .top { | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
padding: 0 30rpx; | 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 { | .imgListBox { | ||||
white-space: nowrap; | white-space: nowrap; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | justify-content: space-between; | ||||
flex-wrap: nowrap; | flex-wrap: nowrap; | ||||
height: 250rpx; | |||||
height: 200rpx; | |||||
.item { | .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 均可 | display: inline-flex; // item的外层定义成行内元素才可进行滚动 inline-block / inline-flex 均可 | ||||
flex-direction: column; | flex-direction: column; | ||||
align-items: center; | align-items: center; | ||||
.cover { | .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 { | .InviteBox { | ||||
width: 100%; | width: 100%; | ||||
@@ -1,13 +1,15 @@ | |||||
<template> | <template> | ||||
<view class="page"> | <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" | src="https://video.metavatar.cc/sv/d51a6f6-187fa2dff79/d51a6f6-187fa2dff79.mp4" | ||||
autoplay | autoplay | ||||
muted | muted | ||||
loop | loop | ||||
:controls="false" | :controls="false" | ||||
/> | |||||
/> --> | |||||
<!-- <video | <!-- <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" | 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 | autoplay | ||||
@@ -15,24 +17,20 @@ | |||||
:controls="false" | :controls="false" | ||||
/> --> | /> --> | ||||
</view> | </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> | </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> | </view> | ||||
</template> | </template> | ||||
@@ -96,7 +94,13 @@ voiceTotalApi(); | |||||
<style lang="scss"> | <style lang="scss"> | ||||
.page { | .page { | ||||
position: relative; | |||||
padding: 0; | padding: 0; | ||||
min-height: 100vh; | |||||
} | |||||
.bgImg { | |||||
width: 750rpx; | |||||
height: 100vh; | |||||
} | } | ||||
.videoBox { | .videoBox { | ||||
width: 750rpx; | width: 750rpx; | ||||
@@ -108,14 +112,27 @@ voiceTotalApi(); | |||||
// aspect-ratio: 9/12; | // 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> | </style> |
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<view class="page" @touchmove.stop.prevent=""> | <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"> | <view v-show="!audioUrl" class="myBtnbox"> | ||||
<up-button | <up-button | ||||
type="primary" | type="primary" | ||||
@@ -280,9 +280,9 @@ image { | |||||
z-index: -1; | z-index: -1; | ||||
pointer-events: none; | pointer-events: none; | ||||
} | } | ||||
img { | |||||
pointer-events: none; | |||||
} | |||||
// img { | |||||
// pointer-events: none; | |||||
// } | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -1,25 +1,25 @@ | |||||
<template> | <template> | ||||
<view class="page"> | <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="uploadBox imgContenBox scan"> | ||||
<!-- 扫描线 --> | |||||
<view class="scan-line"></view> | <view class="scan-line"></view> | ||||
<image | <image | ||||
class="scan-border" | |||||
src="../../assets/img/scanBorder.png" | |||||
mode="aspectFit" | |||||
/> | |||||
<!-- 上传按钮 --> | |||||
<image | |||||
class="addImg" | |||||
v-show="!showImgUrl" | v-show="!showImgUrl" | ||||
src="../../assets/icon/uploadImg.png" | |||||
src="../../assets/icon/add.png" | |||||
alt="" | alt="" | ||||
@click="chooseImage" | @click="chooseImage" | ||||
/> | /> | ||||
@@ -32,19 +32,40 @@ | |||||
mode="aspectFit" | mode="aspectFit" | ||||
/> | /> | ||||
</view> | </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> | ||||
<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> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -117,24 +138,48 @@ function toCloseStyle() { | |||||
</script> | </script> | ||||
<style lang="scss"> | <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 { | .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 { | .uploadBox { | ||||
position: relative; | 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; | 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 { | .showImg { | ||||
max-width: 90%; | 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> | </style> |