| @@ -1,9 +1,5 @@ | |||
| <template> | |||
| <div class="page"> | |||
| <view class="title imgContenBox" | |||
| ><image src="../../assets/text/closeStyleText.png" mode="aspectFit" | |||
| /></view> | |||
| <u-list class="styleListBox" @scrolltolower="scrolltolower"> | |||
| <u-list-item class="glodYBox"> | |||
| <u-list-item | |||
| @@ -12,8 +8,9 @@ | |||
| class="styleListBoxItme" | |||
| > | |||
| <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> | |||
| </u-list-item> | |||
| </u-list-item> | |||
| @@ -48,41 +45,33 @@ function createPhoto() { | |||
| </script> | |||
| <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 { | |||
| width: 100%; | |||
| width: 650rpx; | |||
| .glodYBox { | |||
| display: flex !important; | |||
| flex-direction: row !important; | |||
| @@ -96,20 +85,38 @@ scroll-view { | |||
| justify-content: space-between !important; | |||
| } | |||
| .styleInfo { | |||
| position: relative; | |||
| display: flex !important; | |||
| flex-wrap: wrap !important; | |||
| width: 350rpx; | |||
| height: 400rpx; | |||
| width: 300rpx; | |||
| height: 480rpx; | |||
| margin-bottom: 50rpx; | |||
| border-radius: 24rpx; | |||
| overflow: hidden; | |||
| image { | |||
| width: 350rpx; | |||
| height: 350rpx; | |||
| width: 300rpx; | |||
| height: 400rpx; | |||
| } | |||
| text { | |||
| .name { | |||
| background-color: red; | |||
| 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; | |||
| 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" | |||
| /></view> | |||
| <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> | |||
| <text class="balance">金币余额: 30</text> | |||
| </view> | |||
| </template> | |||
| @@ -37,9 +39,10 @@ function createing() { | |||
| <style lang="scss"> | |||
| .showImgBox { | |||
| width: 710rpx; | |||
| height: 800rpx; | |||
| background-color: #ccc; | |||
| margin-top: 30rpx; | |||
| width: 540rpx; | |||
| height: 720rpx; | |||
| // background-color: #ccc; | |||
| border-radius: 30rpx; | |||
| image { | |||
| max-width: 100%; | |||
| @@ -47,15 +50,51 @@ function createing() { | |||
| } | |||
| } | |||
| .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 { | |||
| 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> | |||
| @@ -4,47 +4,30 @@ | |||
| <view class="imgContenBox"> | |||
| <image src="../../assets/img/img2.png" mode="aspectFit" /> | |||
| </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> | |||
| <!-- 轮播图 --> | |||
| <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"> | |||
| <text class="time">写真生成中,预计用时X分X秒</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 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> | |||
| </template> | |||
| @@ -56,7 +39,11 @@ import { voiceTotalApi } from "../../api/login.js"; | |||
| //#endregion | |||
| //#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 --------------------- | |||
| //#region 页面跳转 | |||
| @@ -79,23 +66,30 @@ function goLookPhoto() { | |||
| <style lang="scss"> | |||
| .topBox { | |||
| margin-top: 20rpx; | |||
| display: flex; | |||
| align-items: flex-end; | |||
| justify-content: flex-start; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| width: 100%; | |||
| height: 200rpx; | |||
| .imgContenBox { | |||
| width: 200rpx; | |||
| width: 150rpx; | |||
| height: 100%; | |||
| background-color: #ccc; | |||
| border-radius: 30rpx; | |||
| image { | |||
| width: 200rpx; | |||
| width: 150rpx; | |||
| 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 { | |||
| @@ -117,7 +111,10 @@ function goLookPhoto() { | |||
| } | |||
| } | |||
| } | |||
| .u-swiper { | |||
| width: 100%; | |||
| height: 695rpx !important; | |||
| } | |||
| .createIng, | |||
| .createEd { | |||
| width: 100%; | |||
| @@ -126,12 +123,15 @@ function goLookPhoto() { | |||
| align-items: center; | |||
| justify-content: center; | |||
| .time { | |||
| font-size: 40rpx; | |||
| font-size: 26rpx; | |||
| font-weight: 900; | |||
| margin-top: 20rpx; | |||
| margin-bottom: 10rpx; | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .inform { | |||
| font-size: 22rpx; | |||
| color: #ffffff; | |||
| opacity: 0.5; | |||
| margin-bottom: 30rpx; | |||
| } | |||
| .look { | |||
| @@ -140,8 +140,8 @@ function goLookPhoto() { | |||
| margin-top: 20rpx; | |||
| margin-bottom: 30rpx; | |||
| } | |||
| .buttonBox { | |||
| width: 50%; | |||
| .anew { | |||
| margin-top: 120rpx; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -14,7 +14,7 @@ | |||
| <text>我要让照片说话</text> | |||
| <view class="free"> | |||
| <image src="../../assets/icon/blackBG.png" mode="aspectFit" /> | |||
| <text>消耗金币2枚</text> | |||
| <text>耗金币2枚</text> | |||
| </view> | |||
| </view> | |||
| <view @click="downloadImg" class="uploadBtn"> | |||
| @@ -203,9 +203,9 @@ function bueCoin() { | |||
| font-weight: 900; | |||
| .free { | |||
| position: absolute; | |||
| top: -25rpx; | |||
| right: -80rpx; | |||
| width: 185rpx; | |||
| top: -18rpx; | |||
| right: -70rpx; | |||
| width: 142rpx; | |||
| height: 50rpx; | |||
| image { | |||
| position: absolute; | |||
| @@ -217,9 +217,9 @@ function bueCoin() { | |||
| } | |||
| text { | |||
| position: absolute; | |||
| top: -25rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, 0); | |||
| top: 0rpx; | |||
| left: 0; | |||
| line-height: 49rpx; | |||
| width: 100%; | |||
| height: 100%; | |||
| font-size: 22rpx; | |||
| @@ -63,6 +63,17 @@ view { | |||
| 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 { | |||
| // color: #4452d7; | |||