@@ -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> |