@@ -1,9 +1,5 @@ | |||||
<template> | <template> | ||||
<div class="page"> | <div class="page"> | ||||
<view class="title imgContenBox" | |||||
><image src="../../assets/text/closeStyleText.png" mode="aspectFit" | |||||
/></view> | |||||
<u-list class="styleListBox" @scrolltolower="scrolltolower"> | <u-list class="styleListBox" @scrolltolower="scrolltolower"> | ||||
<u-list-item class="glodYBox"> | <u-list-item class="glodYBox"> | ||||
<u-list-item | <u-list-item | ||||
@@ -12,8 +8,9 @@ | |||||
class="styleListBoxItme" | class="styleListBoxItme" | ||||
> | > | ||||
<view class="styleInfo" @click="createPhoto"> | <view class="styleInfo" @click="createPhoto"> | ||||
<image src="../../assets/icon/uploadImg.png" /> | |||||
<text>样式风格</text> | |||||
<image src="../../assets/img/homeImg.png" mode="aspectFit" /> | |||||
<text class="name">样式风格</text> | |||||
<text class="single">单人</text> | |||||
</view> | </view> | ||||
</u-list-item> | </u-list-item> | ||||
</u-list-item> | </u-list-item> | ||||
@@ -48,41 +45,33 @@ function createPhoto() { | |||||
</script> | </script> | ||||
<style lang="scss"> | <style lang="scss"> | ||||
.title { | |||||
width: 100%; | |||||
height: 80rpx; | |||||
image { | |||||
width: 40%; | |||||
height: 80rpx; | |||||
} | |||||
} | |||||
scroll-view { | |||||
width: 750rpx; | |||||
} | |||||
.uni-scroll-view-content { | |||||
width: 750rpx; | |||||
display: flex !important; | |||||
flex-direction: row !important; | |||||
flex-wrap: wrap !important; | |||||
justify-content: space-between !important; | |||||
.styleInfo { | |||||
width: 350rpx; | |||||
height: 400rpx; | |||||
margin-bottom: 50rpx; | |||||
image { | |||||
width: 350rpx; | |||||
height: 350rpx; | |||||
} | |||||
text { | |||||
width: 100%; | |||||
height: 50rpx; | |||||
text-align: center; | |||||
line-height: 50rpx; | |||||
} | |||||
} | |||||
} | |||||
// scroll-view { | |||||
// width: 750rpx; | |||||
// } | |||||
// .uni-scroll-view-content { | |||||
// width: 750rpx; | |||||
// display: flex !important; | |||||
// flex-direction: row !important; | |||||
// flex-wrap: wrap !important; | |||||
// justify-content: space-between !important; | |||||
// .styleInfo { | |||||
// width: 350rpx; | |||||
// height: 400rpx; | |||||
// margin-bottom: 50rpx; | |||||
// image { | |||||
// width: 350rpx; | |||||
// height: 350rpx; | |||||
// } | |||||
// text { | |||||
// width: 100%; | |||||
// height: 50rpx; | |||||
// text-align: center; | |||||
// line-height: 50rpx; | |||||
// } | |||||
// } | |||||
// } | |||||
.u-list { | .u-list { | ||||
width: 100%; | |||||
width: 650rpx; | |||||
.glodYBox { | .glodYBox { | ||||
display: flex !important; | display: flex !important; | ||||
flex-direction: row !important; | flex-direction: row !important; | ||||
@@ -96,20 +85,38 @@ scroll-view { | |||||
justify-content: space-between !important; | justify-content: space-between !important; | ||||
} | } | ||||
.styleInfo { | .styleInfo { | ||||
position: relative; | |||||
display: flex !important; | display: flex !important; | ||||
flex-wrap: wrap !important; | flex-wrap: wrap !important; | ||||
width: 350rpx; | |||||
height: 400rpx; | |||||
width: 300rpx; | |||||
height: 480rpx; | |||||
margin-bottom: 50rpx; | margin-bottom: 50rpx; | ||||
border-radius: 24rpx; | |||||
overflow: hidden; | |||||
image { | image { | ||||
width: 350rpx; | |||||
height: 350rpx; | |||||
width: 300rpx; | |||||
height: 400rpx; | |||||
} | } | ||||
text { | |||||
.name { | |||||
background-color: red; | |||||
width: 100%; | width: 100%; | ||||
height: 50rpx; | |||||
height: 80rpx; | |||||
text-align: center; | |||||
line-height: 80rpx; | |||||
font-size: 30rpx; | |||||
font-weight: bold; | |||||
} | |||||
.single { | |||||
position: absolute; | |||||
top: 11rpx; | |||||
right: 13rpx; | |||||
width: 72rpx; | |||||
height: 41rpx; | |||||
text-align: center; | text-align: center; | ||||
line-height: 50rpx; | |||||
line-height: 41rpx; | |||||
background: #000000; | |||||
opacity: 0.4; | |||||
border-radius: 12rpx; | |||||
} | } | ||||
} | } | ||||
} | } | ||||
@@ -4,15 +4,17 @@ | |||||
><image src="../../assets/img/img1.png" mode="aspectFit" | ><image src="../../assets/img/img1.png" mode="aspectFit" | ||||
/></view> | /></view> | ||||
<text class="name">风格名称</text> | <text class="name">风格名称</text> | ||||
<view class="buttonBox"> | |||||
<up-button | |||||
type="primary" | |||||
text="开始制作写真" | |||||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||||
@click="createing" | |||||
></up-button> | |||||
<view class="orangeBtn" @click="createing" | |||||
>开始制作写真 | |||||
<view class="free"> | |||||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | |||||
<text>耗金币2枚</text> | |||||
</view> | |||||
</view> | |||||
<view class="balance" | |||||
>金币余额: 30 | |||||
<image src="../../assets/icon/coin.png" mode="aspectFit" /> | |||||
</view> | </view> | ||||
<text class="balance">金币余额: 30</text> | |||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -37,9 +39,10 @@ function createing() { | |||||
<style lang="scss"> | <style lang="scss"> | ||||
.showImgBox { | .showImgBox { | ||||
width: 710rpx; | |||||
height: 800rpx; | |||||
background-color: #ccc; | |||||
margin-top: 30rpx; | |||||
width: 540rpx; | |||||
height: 720rpx; | |||||
// background-color: #ccc; | |||||
border-radius: 30rpx; | border-radius: 30rpx; | ||||
image { | image { | ||||
max-width: 100%; | max-width: 100%; | ||||
@@ -47,15 +50,51 @@ function createing() { | |||||
} | } | ||||
} | } | ||||
.name { | .name { | ||||
margin-top: 30rpx; | |||||
margin-bottom: 50rpx; | |||||
margin-top: 80rpx; | |||||
margin-bottom: 110rpx; | |||||
font-size: 44rpx; | |||||
font-weight: 800; | |||||
} | } | ||||
.buttonBox { | |||||
width: 60%; | |||||
.orangeBtn { | |||||
position: relative; | |||||
.free { | |||||
position: absolute; | |||||
top: -18rpx; | |||||
right: -70rpx; | |||||
width: 142rpx; | |||||
height: 50rpx; | |||||
image { | |||||
position: absolute; | |||||
top: 0; | |||||
left: 0; | |||||
width: 100%; | |||||
height: 100%; | |||||
z-index: 1; | |||||
} | |||||
text { | |||||
position: absolute; | |||||
top: 0rpx; | |||||
left: 0; | |||||
line-height: 49rpx; | |||||
width: 100%; | |||||
height: 100%; | |||||
font-size: 22rpx; | |||||
font-weight: 900; | |||||
z-index: 2; | |||||
} | |||||
} | |||||
} | } | ||||
.balance { | .balance { | ||||
margin-top: 30rpx; | |||||
font-size: 40rpx; | |||||
display: inline-block; | |||||
margin-top: 70rpx; | |||||
font-size: 30rpx; | |||||
font-weight: bold; | |||||
line-height: 33rpx; | |||||
image { | |||||
display: inline-block; | |||||
width: 33rpx; | |||||
height: 33rpx; | |||||
vertical-align: middle; | |||||
} | |||||
} | } | ||||
</style> | </style> |
@@ -4,47 +4,30 @@ | |||||
<view class="imgContenBox"> | <view class="imgContenBox"> | ||||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | <image src="../../assets/img/img2.png" mode="aspectFit" /> | ||||
</view> | </view> | ||||
<up-button | |||||
type="primary" | |||||
text="更换风格" | |||||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||||
@click="changeStyle" | |||||
></up-button> | |||||
</view> | |||||
<view class="imgListBox"> | |||||
<view | |||||
class="imgContenBox" | |||||
v-for="item in 4" | |||||
:key="item" | |||||
@click="goLookPhoto" | |||||
> | |||||
<image src="../../assets/img/img2.png" mode="aspectFit" /> | |||||
</view> | |||||
<view class="changeStyle" @click="changeStyle">更换风格</view> | |||||
</view> | </view> | ||||
<!-- 轮播图 --> | |||||
<u-swiper | |||||
:list="swiperList" | |||||
previousMargin="60" | |||||
nextMargin="60" | |||||
circular | |||||
indicator | |||||
indicatorMode="line" | |||||
:autoplay="false" | |||||
radius="5" | |||||
bgColor="#333" | |||||
@click="goLookPhoto" | |||||
></u-swiper> | |||||
<!-- 生成中的底部栏 --> | <!-- 生成中的底部栏 --> | ||||
<view v-show="false" class="createIng"> | <view v-show="false" class="createIng"> | ||||
<text class="time">写真生成中,预计用时X分X秒</text> | <text class="time">写真生成中,预计用时X分X秒</text> | ||||
<text class="inform">做好后通知我</text> | <text class="inform">做好后通知我</text> | ||||
<up-button | |||||
class="goon" | |||||
type="primary" | |||||
text="继续制作写真" | |||||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||||
@click="changeStyle" | |||||
></up-button> | |||||
<view class="orangeBtn" @click="changeStyle">继续制作写真</view> | |||||
</view> | </view> | ||||
<!-- 生成成功的底部栏 --> | <!-- 生成成功的底部栏 --> | ||||
<view class="createEd"> | <view class="createEd"> | ||||
<text class="look">点击查看高清写真</text> | |||||
<view class="buttonBox"> | |||||
<up-button | |||||
class="goon" | |||||
type="primary" | |||||
text="重新生成" | |||||
color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" | |||||
@click="changeStyle" | |||||
></up-button> | |||||
</view> | |||||
<view class="orangeBtn anew" @click="changeStyle">重新生成</view> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
</template> | </template> | ||||
@@ -56,7 +39,11 @@ import { voiceTotalApi } from "../../api/login.js"; | |||||
//#endregion | //#endregion | ||||
//#region 生成写真照片 | //#region 生成写真照片 | ||||
const swiperList = [ | |||||
"https://cdn.uviewui.com/uview/swiper/swiper3.png", | |||||
"https://cdn.uviewui.com/uview/swiper/swiper2.png", | |||||
"https://cdn.uviewui.com/uview/swiper/swiper1.png", | |||||
]; | |||||
//#endregion --------------------- | //#endregion --------------------- | ||||
//#region 页面跳转 | //#region 页面跳转 | ||||
@@ -79,23 +66,30 @@ function goLookPhoto() { | |||||
<style lang="scss"> | <style lang="scss"> | ||||
.topBox { | .topBox { | ||||
margin-top: 20rpx; | |||||
display: flex; | display: flex; | ||||
align-items: flex-end; | |||||
justify-content: flex-start; | |||||
align-items: center; | |||||
justify-content: space-between; | |||||
width: 100%; | width: 100%; | ||||
height: 200rpx; | height: 200rpx; | ||||
.imgContenBox { | .imgContenBox { | ||||
width: 200rpx; | |||||
width: 150rpx; | |||||
height: 100%; | height: 100%; | ||||
background-color: #ccc; | |||||
border-radius: 30rpx; | |||||
image { | image { | ||||
width: 200rpx; | |||||
width: 150rpx; | |||||
max-height: 200rpx; | max-height: 200rpx; | ||||
} | } | ||||
} | } | ||||
button { | |||||
width: 200rpx !important; | |||||
margin: 0 50rpx; | |||||
.changeStyle { | |||||
margin-right: 70rpx; | |||||
width: 220rpx; | |||||
height: 72rpx; | |||||
border: 1px solid #ff4f00; | |||||
border-radius: 36rpx; | |||||
text-align: center; | |||||
line-height: 72rpx; | |||||
color: #ff4f00; | |||||
} | } | ||||
} | } | ||||
.imgListBox { | .imgListBox { | ||||
@@ -117,7 +111,10 @@ function goLookPhoto() { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.u-swiper { | |||||
width: 100%; | |||||
height: 695rpx !important; | |||||
} | |||||
.createIng, | .createIng, | ||||
.createEd { | .createEd { | ||||
width: 100%; | width: 100%; | ||||
@@ -126,12 +123,15 @@ function goLookPhoto() { | |||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
.time { | .time { | ||||
font-size: 40rpx; | |||||
font-size: 26rpx; | |||||
font-weight: 900; | font-weight: 900; | ||||
margin-top: 20rpx; | margin-top: 20rpx; | ||||
margin-bottom: 10rpx; | |||||
margin-bottom: 20rpx; | |||||
} | } | ||||
.inform { | .inform { | ||||
font-size: 22rpx; | |||||
color: #ffffff; | |||||
opacity: 0.5; | |||||
margin-bottom: 30rpx; | margin-bottom: 30rpx; | ||||
} | } | ||||
.look { | .look { | ||||
@@ -140,8 +140,8 @@ function goLookPhoto() { | |||||
margin-top: 20rpx; | margin-top: 20rpx; | ||||
margin-bottom: 30rpx; | margin-bottom: 30rpx; | ||||
} | } | ||||
.buttonBox { | |||||
width: 50%; | |||||
.anew { | |||||
margin-top: 120rpx; | |||||
} | } | ||||
} | } | ||||
</style> | </style> |
@@ -14,7 +14,7 @@ | |||||
<text>我要让照片说话</text> | <text>我要让照片说话</text> | ||||
<view class="free"> | <view class="free"> | ||||
<image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | <image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | ||||
<text>消耗金币2枚</text> | |||||
<text>耗金币2枚</text> | |||||
</view> | </view> | ||||
</view> | </view> | ||||
<view @click="downloadImg" class="uploadBtn"> | <view @click="downloadImg" class="uploadBtn"> | ||||
@@ -203,9 +203,9 @@ function bueCoin() { | |||||
font-weight: 900; | font-weight: 900; | ||||
.free { | .free { | ||||
position: absolute; | position: absolute; | ||||
top: -25rpx; | |||||
right: -80rpx; | |||||
width: 185rpx; | |||||
top: -18rpx; | |||||
right: -70rpx; | |||||
width: 142rpx; | |||||
height: 50rpx; | height: 50rpx; | ||||
image { | image { | ||||
position: absolute; | position: absolute; | ||||
@@ -217,9 +217,9 @@ function bueCoin() { | |||||
} | } | ||||
text { | text { | ||||
position: absolute; | position: absolute; | ||||
top: -25rpx; | |||||
left: 50%; | |||||
transform: translate(-50%, 0); | |||||
top: 0rpx; | |||||
left: 0; | |||||
line-height: 49rpx; | |||||
width: 100%; | width: 100%; | ||||
height: 100%; | height: 100%; | ||||
font-size: 22rpx; | font-size: 22rpx; | ||||
@@ -63,6 +63,17 @@ view { | |||||
width: 50%; | width: 50%; | ||||
} | } | ||||
.orangeBtn { | |||||
background-color: #FF4F00; | |||||
width: 520rpx; | |||||
height: 100rpx; | |||||
line-height: 100rpx; | |||||
font-size: 30rpx; | |||||
font-weight: bold; | |||||
text-align: center; | |||||
border-radius: 100rpx; | |||||
} | |||||
// 主要文字颜色和图片颜色 | // 主要文字颜色和图片颜色 | ||||
// .imgggg { | // .imgggg { | ||||
// color: #4452d7; | // color: #4452d7; | ||||