| @@ -40,40 +40,50 @@ onLaunch(() => { | |||
| }, | |||
| }); | |||
| // 微信登录授权 | |||
| uni.login({ | |||
| provider: "weixin", // 使用微信登录授权 | |||
| success: async (res) => { | |||
| console.log(res); | |||
| if (res.code) { | |||
| console.log(res.code); | |||
| try { | |||
| uni.showLoading({ | |||
| title: "加载中...", | |||
| mask: true, | |||
| }); | |||
| const data = { | |||
| appId: "wx75cf14e3a0d45821", | |||
| code: res.code, | |||
| }; | |||
| const res2 = await loginApi(data); | |||
| userInfoModulesPinia.openId = res2.data.openId; | |||
| userInfoModulesPinia.token = res2.token; | |||
| console.log(userInfoModulesPinia.openId, "获取openid"); | |||
| uni.hideLoading(); | |||
| if (res2.token) { | |||
| uni.redirectTo({ | |||
| url: "/pages/home/index", | |||
| }); | |||
| } else { | |||
| uni.redirectTo({ | |||
| url: "/pages/index/index", | |||
| if (userInfoModulesPinia.platForm != 1) { | |||
| uni.login({ | |||
| provider: "weixin", // 使用微信登录授权 | |||
| success: async (res) => { | |||
| console.log(res); | |||
| if (res.code) { | |||
| console.log(res.code); | |||
| try { | |||
| uni.showLoading({ | |||
| title: "加载中...", | |||
| mask: true, | |||
| }); | |||
| const data = { | |||
| appId: "wx75cf14e3a0d45821", | |||
| code: res.code, | |||
| }; | |||
| const res2 = await loginApi(data); | |||
| userInfoModulesPinia.openId = res2.data.openId; | |||
| userInfoModulesPinia.token = res2.data.token; | |||
| console.log(userInfoModulesPinia.openId, "获取openid"); | |||
| uni.hideLoading(); | |||
| if (res2.data.token) { | |||
| uni.redirectTo({ | |||
| url: "/pages/index/index", | |||
| }); | |||
| } else { | |||
| uni.redirectTo({ | |||
| url: "/pages/login/index", | |||
| }); | |||
| uni.showToast({ | |||
| title: "登录失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } catch (error) { | |||
| // uni.redirectTo({ | |||
| // url: "pages/index/index", | |||
| // }); | |||
| uni.showToast({ | |||
| title: "登录失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } catch (error) { | |||
| } else { | |||
| // uni.redirectTo({ | |||
| // url: "pages/index/index", | |||
| // }); | |||
| @@ -82,7 +92,8 @@ onLaunch(() => { | |||
| icon: "none", | |||
| }); | |||
| } | |||
| } else { | |||
| }, | |||
| fail: (err) => { | |||
| // uni.redirectTo({ | |||
| // url: "pages/index/index", | |||
| // }); | |||
| @@ -90,18 +101,9 @@ onLaunch(() => { | |||
| title: "登录失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| // uni.redirectTo({ | |||
| // url: "pages/index/index", | |||
| // }); | |||
| uni.showToast({ | |||
| title: "登录失败,请重试", | |||
| icon: "none", | |||
| }); | |||
| }, | |||
| }); | |||
| }, | |||
| }); | |||
| } | |||
| }); | |||
| onShow(() => { | |||
| console.log("App Show!"); | |||
| @@ -51,6 +51,17 @@ | |||
| /* 小程序特有相关 */ | |||
| "mp-weixin": { | |||
| "appid": "wx75cf14e3a0d45821", | |||
| "permission": { | |||
| "scope.userLocation": { | |||
| "desc": "获取您的地理位置信息" | |||
| }, | |||
| "scope.userInfo": { | |||
| "desc": "获取您的用户信息" | |||
| }, | |||
| "scope.userPhoneNumber": { | |||
| "desc": "获取您的手机号码" | |||
| } | |||
| }, | |||
| "setting": { | |||
| "urlCheck": false, | |||
| "ignoreDevUnusedFiles": false, | |||
| @@ -7,51 +7,51 @@ | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/uploadPhoto/uploadPhoto", | |||
| "path": "pages/index/buyCoin", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| "navigationBarTitleText": "购买金币" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/uploadPhoto/success", | |||
| "path": "pages/login/index", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/closeStyle/closeStyle", | |||
| "path": "pages/uploadPhoto/uploadPhoto", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/closeStyle/goCreatePhoto", | |||
| "path": "pages/uploadPhoto/success", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/createing/index", | |||
| "path": "pages/closeStyle/closeStyle", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/lookPhoto/index", | |||
| "path": "pages/closeStyle/goCreatePhoto", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/home/index", | |||
| "path": "pages/createing/index", | |||
| "style": { | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| "path": "pages/home/buyCoin", | |||
| "path": "pages/lookPhoto/index", | |||
| "style": { | |||
| "navigationBarTitleText": "购买金币" | |||
| "navigationBarTitleText": "智像" | |||
| } | |||
| }, | |||
| { | |||
| @@ -1,511 +0,0 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <!-- 背景图 --> | |||
| <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | |||
| <!-- 头像 --> | |||
| <view class="avatarBox"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/avatar.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <view @click="chooseAvatar" class="changeAvatar"> | |||
| <image src="../../assets/img/reset.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| <!-- 金币 --> | |||
| <view class="coinBox"> | |||
| 我的金币: 30 | |||
| <text @click="goBuyCoin">购买金币</text></view | |||
| > | |||
| <!-- tab栏 --> | |||
| <view class="tabsBox"> | |||
| <view | |||
| class="tabItem" | |||
| v-for="item in tabList" | |||
| :key="item.id" | |||
| :class="showListActive == item.id ? 'active' : ''" | |||
| @click="clickTabHandle(item)" | |||
| > | |||
| {{ item.name }}</view | |||
| > | |||
| </view> | |||
| <!-- 显示风格列表内容 --> | |||
| <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 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"> | |||
| <image | |||
| src="../../assets/icon/uploadImg.png" | |||
| class="cover" | |||
| mode="aspectFill" | |||
| ></image> | |||
| </view> | |||
| </scroll-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"> | |||
| <view v-for="item in 9" class="InviteList"> | |||
| <up-avatar :src="avatarUrl" size="50"></up-avatar> | |||
| <view class="info"> | |||
| <view class="name">猕猴桃</view> | |||
| <view class="time">2023/7/29</view> | |||
| </view> | |||
| <view class="getCoin"> 金币+2 </view> | |||
| </view> | |||
| </scroll-view> | |||
| <view class="inviteBtn">继续邀请好友</view> | |||
| </view> | |||
| <!-- 显示消费列表内容 --> | |||
| <view v-show="showListActive == 4" class="showOrderList"> | |||
| <view class="top"> | |||
| <text>名称</text> | |||
| <text>时间</text> | |||
| <text>金币</text> | |||
| </view> | |||
| <scroll-view :scroll-y="true" class="bottom"> | |||
| <view class="OrderListItem" v-for="item in 16"> | |||
| <view class="name">大西瓜</view> | |||
| <view class="time">2023/7/29 </view> | |||
| <view class="coin">-2金币</view> | |||
| </view> | |||
| </scroll-view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { voiceTotalApi } from "../../api/login.js"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| //#region 头像 | |||
| const avatarUrl = ref(null); | |||
| function chooseAvatar(params) { | |||
| uni.chooseImage({ | |||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||
| success: async (res) => { | |||
| // avatarUrl.value = res.tempFilePaths[0]; | |||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||
| // 示例代码: | |||
| // uploadImageToServer(tempFilePaths[0]); | |||
| // 图片压缩 | |||
| console.log(res.tempFiles[0].size); | |||
| if (userInfoModulesPinia.platForm != 1) { | |||
| uni.compressImage({ | |||
| src: res.tempFilePaths[0], | |||
| quality: 20, | |||
| success: (res2) => { | |||
| avatarUrl.value = res2.tempFilePath; | |||
| console.log(res2.tempFilePath); | |||
| }, | |||
| }); | |||
| } else { | |||
| const options = { | |||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||
| }; | |||
| const compressedFile = await imageCompression( | |||
| res.tempFiles[0], | |||
| options | |||
| ); | |||
| //compressedFile是一个blob对象 | |||
| avatarUrl.value = URL.createObjectURL(compressedFile); | |||
| console.log(compressedFile); | |||
| // avatarUrl.value = compressedFile; | |||
| console.log("压缩图片h5"); | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| console.error("选择图片失败", err); | |||
| }, | |||
| }); | |||
| } | |||
| function goBuyCoin() { | |||
| uni.navigateTo({ | |||
| url: "buyCoin", | |||
| }); | |||
| } | |||
| //#endregion | |||
| //#region tab | |||
| const tabList = ref([ | |||
| { name: "我的写真", id: 1 }, | |||
| { name: "我的视频", id: 2 }, | |||
| { name: "我的邀请", id: 3 }, | |||
| { name: "消费记录", id: 4 }, | |||
| ]); | |||
| const showListActive = ref(1); | |||
| function clickTabHandle(e) { | |||
| showListActive.value = e.id; | |||
| } | |||
| //#endregion | |||
| //#region | |||
| //#endregion | |||
| </script> | |||
| <style lang="scss"> | |||
| .page { | |||
| position: relative; | |||
| height: 100vh; | |||
| background-color: rgba(0, 0, 0, 0.8); | |||
| // background: url("../../assets/img/avatar.png"); | |||
| .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); | |||
| // backdrop-filter: blur(20px); | |||
| } | |||
| } | |||
| .avatarBox { | |||
| position: relative; | |||
| width: 260rpx; | |||
| height: 260rpx; | |||
| .avatar { | |||
| width: 260rpx; | |||
| height: 260rpx; | |||
| border-radius: 130rpx; | |||
| } | |||
| .changeAvatar { | |||
| position: absolute; | |||
| right: -20rpx; | |||
| bottom: 0; | |||
| width: 66rpx; | |||
| height: 66rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| } | |||
| .coinBox { | |||
| margin-top: 38rpx; | |||
| line-height: 50rpx; | |||
| text { | |||
| margin-left: 28rpx; | |||
| display: inline-block; | |||
| width: 160rpx; | |||
| height: 50rpx; | |||
| border-radius: 50rpx; | |||
| font-size: 26rpx; | |||
| text-align: center; | |||
| // font-weight: 700; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| } | |||
| // tab栏样式 | |||
| .tabsBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| margin-top: 50rpx; | |||
| .tabItem { | |||
| margin: 0 9rpx; | |||
| width: 160rpx; | |||
| height: 80rpx; | |||
| line-height: 80rpx; | |||
| text-align: center; | |||
| border-radius: 12rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| .active { | |||
| background-color: rgba(255, 79, 0, 1); | |||
| } | |||
| } | |||
| // 风格列表 | |||
| .showStyleList { | |||
| 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: 200rpx; | |||
| .item { | |||
| 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: 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%; | |||
| position: relative; | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| overflow: hidden; | |||
| .inviteBtn { | |||
| position: absolute; | |||
| bottom: 20rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, 0); | |||
| width: 520rpx; | |||
| height: 100rpx; | |||
| line-height: 100rpx; | |||
| text-align: center; | |||
| font-size: 30rpx; | |||
| background-color: rgba(255, 79, 0, 1); | |||
| border-radius: 50rpx; | |||
| } | |||
| } | |||
| .showInviteList { | |||
| position: relative; | |||
| margin-top: 15rpx; | |||
| flex: 1; | |||
| overflow: hidden; | |||
| width: 100%; | |||
| .InviteList { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| margin-bottom: 12rpx; | |||
| width: 100%; | |||
| height: 120rpx; | |||
| border-radius: 24rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| .u-avatar { | |||
| margin: 0 30rpx; | |||
| height: 120rpx !important; | |||
| } | |||
| .info { | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-evenly; | |||
| .name { | |||
| font-weight: bold; | |||
| } | |||
| .time { | |||
| font-size: 22rpx; | |||
| } | |||
| } | |||
| .getCoin { | |||
| width: 145rpx; | |||
| height: 120rpx; | |||
| line-height: 120rpx; | |||
| text-align: center; | |||
| margin-right: 30rpx; | |||
| } | |||
| } | |||
| .InviteList:last-child::after { | |||
| content: ""; | |||
| width: 1rpx; | |||
| height: 130rpx; | |||
| padding-bottom: 130rpx; | |||
| } | |||
| } | |||
| // 消费列表 | |||
| .showOrderList { | |||
| position: relative; | |||
| flex: 1; | |||
| margin-top: 30rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| border-radius: 24rpx; | |||
| width: 100%; | |||
| box-sizing: border-box; | |||
| padding: 15rpx 20rpx; | |||
| // padding-top: 80rpx; | |||
| overflow: hidden; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .top { | |||
| width: 100%; | |||
| padding: 0 50rpx; | |||
| height: 64rpx; | |||
| line-height: 64rpx; | |||
| border-radius: 40rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| background-color: rgba(0, 0, 0, 0.2); | |||
| font-size: 22rpx; | |||
| } | |||
| .bottom { | |||
| // flex: 1; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| .OrderListItem { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 20rpx; | |||
| height: 65rpx; | |||
| line-height: 65rpx; | |||
| .name, | |||
| .coin { | |||
| font-weight: 900; | |||
| } | |||
| .time { | |||
| font-weight: 100; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -1,156 +1,525 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <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 | |||
| loop | |||
| :controls="false" | |||
| /> --> | |||
| <view :class="pageClass"> | |||
| <!-- 背景图 --> | |||
| <!-- <image class="bgc" src="../../assets/img/avatar.png"></image> --> | |||
| <!-- 头像 --> | |||
| <view class="avatarBox"> | |||
| <image | |||
| class="avatar" | |||
| src="../../assets/img/avatar.png" | |||
| mode="scaleToFill" | |||
| /> | |||
| <view @click="chooseAvatar" class="changeAvatar"> | |||
| <image src="../../assets/img/reset.png" mode="aspectFit" /> | |||
| </view> | |||
| </view> | |||
| <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 class="coinBox"> | |||
| 我的金币: 30 | |||
| <text @click="goBuyCoin">购买金币</text></view | |||
| > | |||
| <!-- tab栏 --> | |||
| <view class="tabsBox"> | |||
| <view | |||
| class="tabItem" | |||
| v-for="item in tabList" | |||
| :key="item.id" | |||
| :class="showListActive == item.id ? 'active' : ''" | |||
| @click="clickTabHandle(item)" | |||
| > | |||
| {{ item.name }}</view | |||
| > | |||
| </view> | |||
| <!-- 显示风格列表内容 --> | |||
| <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 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"> | |||
| <image | |||
| src="../../assets/icon/uploadImg.png" | |||
| class="cover" | |||
| mode="aspectFill" | |||
| ></image> | |||
| </view> | |||
| </scroll-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"> | |||
| <view v-for="item in 9" class="InviteList"> | |||
| <up-avatar :src="avatarUrl" size="50"></up-avatar> | |||
| <view class="info"> | |||
| <view class="name">猕猴桃</view> | |||
| <view class="time">2023/7/29</view> | |||
| </view> | |||
| <view class="getCoin"> 金币+2 </view> | |||
| </view> | |||
| </scroll-view> | |||
| <view class="inviteBtn">继续邀请好友</view> | |||
| </view> | |||
| <!-- 显示消费列表内容 --> | |||
| <view v-show="showListActive == 4" class="showOrderList"> | |||
| <view class="top"> | |||
| <text>名称</text> | |||
| <text>时间</text> | |||
| <text>金币</text> | |||
| </view> | |||
| <scroll-view :scroll-y="true" class="bottom"> | |||
| <view class="OrderListItem" v-for="item in 16"> | |||
| <view class="name">大西瓜</view> | |||
| <view class="time">2023/7/29 </view> | |||
| <view class="coin">-2金币</view> | |||
| </view> | |||
| </scroll-view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||
| import { ref, reactive, computed } from "vue"; | |||
| import { voiceTotalApi } from "../../api/login.js"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| import imageCompression from "browser-image-compression"; //压缩图片插件 | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| //#region 勾选 | |||
| const checkboxValue1 = ref([]); | |||
| const checkboxList1 = ref([ | |||
| { | |||
| name: "同意智像相机用户使用协议", | |||
| disabled: false, | |||
| }, | |||
| ]); | |||
| async function toCreate() { | |||
| if (checkboxValue1.value[0]) { | |||
| await handleLogin(); | |||
| // 定义,杂项 | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| const pageClass = computed(() => { | |||
| if (userInfoModulesPinia.platForm == 1) { | |||
| return "page pageH5"; | |||
| } else { | |||
| uni.showModal({ | |||
| title: "提示", | |||
| content: "同意慧图相机用户使用协议?", | |||
| success: function (res) { | |||
| if (res.confirm) { | |||
| checkboxList1.value[0].disabled = true; | |||
| handleLogin(); | |||
| } else if (res.cancel) { | |||
| } | |||
| }, | |||
| }); | |||
| return "page"; | |||
| } | |||
| } | |||
| const userInfo = ref(null); | |||
| async function handleLogin() { | |||
| // uni.getUserInfo({}); | |||
| uni.getUserProfile({ | |||
| desc: "用于完善用户信息", | |||
| success: async (res1) => { | |||
| userInfo.value = res1.userInfo; | |||
| userInfoModulesPinia.userInfo = res1.userInfo; | |||
| console.log(userInfoModulesPinia.openId, "拿出openid"); | |||
| }); | |||
| const data = { | |||
| appId: "wx75cf14e3a0d45821", | |||
| openId: userInfoModulesPinia.openId, | |||
| encryptedData: res1.encryptedData, | |||
| iv: res1.iv, | |||
| }; | |||
| try { | |||
| const res2 = await loginPhoneApi(data); | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取成功", | |||
| }); | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取失败", | |||
| //#endregion | |||
| //#region 头像 | |||
| const avatarUrl = ref(null); | |||
| function chooseAvatar(params) { | |||
| uni.chooseImage({ | |||
| count: 1, // 最多可以选择的图片张数,这里设置为1,只选择一张图片 | |||
| success: async (res) => { | |||
| // avatarUrl.value = res.tempFilePaths[0]; | |||
| // TODO: 在这里处理图片上传逻辑,你可以调用上传接口将图片上传到服务器 | |||
| // 示例代码: | |||
| // uploadImageToServer(tempFilePaths[0]); | |||
| // 图片压缩 | |||
| console.log(res.tempFiles[0].size); | |||
| if (userInfoModulesPinia.platForm != 1) { | |||
| uni.compressImage({ | |||
| src: res.tempFilePaths[0], | |||
| quality: 20, | |||
| success: (res2) => { | |||
| avatarUrl.value = res2.tempFilePath; | |||
| console.log(res2.tempFilePath); | |||
| }, | |||
| }); | |||
| } else { | |||
| const options = { | |||
| maxSizeMB: 2, // 最大压缩大小为 4MB | |||
| useWebWorker: true, // 使用 Web Worker 进行压缩,提高性能 | |||
| }; | |||
| const compressedFile = await imageCompression( | |||
| res.tempFiles[0], | |||
| options | |||
| ); | |||
| //compressedFile是一个blob对象 | |||
| avatarUrl.value = URL.createObjectURL(compressedFile); | |||
| console.log(compressedFile); | |||
| // avatarUrl.value = compressedFile; | |||
| console.log("压缩图片h5"); | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| console.log(err); | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "用户拒绝获取", | |||
| }); | |||
| console.error("选择图片失败", err); | |||
| }, | |||
| }); | |||
| } | |||
| //#endregion --------------------- | |||
| function goBuyCoin() { | |||
| uni.navigateTo({ | |||
| url: "buyCoin", | |||
| }); | |||
| } | |||
| //#endregion | |||
| //#region tab | |||
| const tabList = ref([ | |||
| { name: "我的写真", id: 1 }, | |||
| { name: "我的视频", id: 2 }, | |||
| { name: "我的邀请", id: 3 }, | |||
| { name: "消费记录", id: 4 }, | |||
| ]); | |||
| const showListActive = ref(1); | |||
| function clickTabHandle(e) { | |||
| showListActive.value = e.id; | |||
| } | |||
| //#endregion | |||
| voiceTotalApi(); | |||
| //#region | |||
| //#endregion | |||
| </script> | |||
| <style lang="scss"> | |||
| .page { | |||
| position: relative; | |||
| padding: 0; | |||
| min-height: 100vh; | |||
| } | |||
| .bgImg { | |||
| width: 750rpx; | |||
| height: 100vh; | |||
| background-color: rgba(0, 0, 0, 0.8); | |||
| // background: url("../../assets/img/avatar.png"); | |||
| .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); | |||
| // backdrop-filter: blur(20px); | |||
| } | |||
| } | |||
| .videoBox { | |||
| width: 750rpx; | |||
| height: 1120rpx; | |||
| // aspect-ratio: 9/12; | |||
| video { | |||
| width: 100%; | |||
| height: 100%; | |||
| // aspect-ratio: 9/12; | |||
| .pageH5 { | |||
| height: calc(100vh - 44px); | |||
| } | |||
| .avatarBox { | |||
| position: relative; | |||
| width: 260rpx; | |||
| height: 260rpx; | |||
| .avatar { | |||
| width: 260rpx; | |||
| height: 260rpx; | |||
| border-radius: 130rpx; | |||
| } | |||
| .changeAvatar { | |||
| position: absolute; | |||
| right: -20rpx; | |||
| bottom: 0; | |||
| width: 66rpx; | |||
| height: 66rpx; | |||
| image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| } | |||
| } | |||
| .coinBox { | |||
| margin-top: 38rpx; | |||
| line-height: 50rpx; | |||
| text { | |||
| margin-left: 28rpx; | |||
| display: inline-block; | |||
| width: 160rpx; | |||
| height: 50rpx; | |||
| border-radius: 50rpx; | |||
| font-size: 26rpx; | |||
| text-align: center; | |||
| // font-weight: 700; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| } | |||
| // tab栏样式 | |||
| .tabsBox { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| margin-top: 50rpx; | |||
| .tabItem { | |||
| margin: 0 9rpx; | |||
| width: 160rpx; | |||
| height: 80rpx; | |||
| line-height: 80rpx; | |||
| text-align: center; | |||
| border-radius: 12rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| } | |||
| .active { | |||
| background-color: rgba(255, 79, 0, 1); | |||
| } | |||
| } | |||
| // 风格列表 | |||
| .showStyleList { | |||
| 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: 200rpx; | |||
| .item { | |||
| 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: 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; | |||
| } | |||
| } | |||
| .bottomBox { | |||
| position: absolute; | |||
| bottom: 0; | |||
| // 邀请列表 | |||
| .InviteBox { | |||
| width: 100%; | |||
| height: 345rpx; | |||
| position: relative; | |||
| flex: 1; | |||
| 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; | |||
| overflow: hidden; | |||
| .inviteBtn { | |||
| position: absolute; | |||
| bottom: 20rpx; | |||
| left: 50%; | |||
| transform: translate(-50%, 0); | |||
| 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; | |||
| background-color: rgba(255, 79, 0, 1); | |||
| border-radius: 50rpx; | |||
| } | |||
| } | |||
| .showInviteList { | |||
| position: relative; | |||
| margin-top: 15rpx; | |||
| flex: 1; | |||
| overflow: hidden; | |||
| width: 100%; | |||
| .InviteList { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| margin-bottom: 12rpx; | |||
| width: 100%; | |||
| height: 120rpx; | |||
| border-radius: 24rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| .u-avatar { | |||
| margin: 0 30rpx; | |||
| height: 120rpx !important; | |||
| } | |||
| .info { | |||
| flex: 1; | |||
| display: flex; | |||
| flex-direction: column; | |||
| justify-content: space-evenly; | |||
| .name { | |||
| font-weight: bold; | |||
| } | |||
| .time { | |||
| font-size: 22rpx; | |||
| } | |||
| } | |||
| .getCoin { | |||
| width: 145rpx; | |||
| height: 120rpx; | |||
| line-height: 120rpx; | |||
| text-align: center; | |||
| margin-right: 30rpx; | |||
| } | |||
| } | |||
| .InviteList:last-child::after { | |||
| content: ""; | |||
| width: 1rpx; | |||
| height: 130rpx; | |||
| padding-bottom: 130rpx; | |||
| } | |||
| } | |||
| // 消费列表 | |||
| .showOrderList { | |||
| position: relative; | |||
| flex: 1; | |||
| margin-top: 30rpx; | |||
| background-color: rgba(255, 255, 255, 0.1); | |||
| border-radius: 24rpx; | |||
| width: 100%; | |||
| box-sizing: border-box; | |||
| padding: 15rpx 20rpx; | |||
| // padding-top: 80rpx; | |||
| overflow: hidden; | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .top { | |||
| width: 100%; | |||
| padding: 0 50rpx; | |||
| height: 64rpx; | |||
| line-height: 64rpx; | |||
| border-radius: 40rpx; | |||
| display: flex; | |||
| justify-content: space-between; | |||
| background-color: rgba(0, 0, 0, 0.2); | |||
| font-size: 22rpx; | |||
| } | |||
| .bottom { | |||
| // flex: 1; | |||
| width: 100%; | |||
| overflow: hidden; | |||
| .OrderListItem { | |||
| display: flex; | |||
| justify-content: space-between; | |||
| padding: 0 20rpx; | |||
| height: 65rpx; | |||
| line-height: 65rpx; | |||
| .name, | |||
| .coin { | |||
| font-weight: 900; | |||
| } | |||
| .time { | |||
| font-weight: 100; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
| @@ -0,0 +1,215 @@ | |||
| <template> | |||
| <view :class="pageClass"> | |||
| <!-- mode="aspectFit" --> | |||
| <image class="bgImg" src="../../assets/img/homeImg.png" /> | |||
| <!-- 视频,已废弃 --> | |||
| <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 | |||
| loop | |||
| :controls="false" | |||
| /> --> | |||
| </view> | |||
| <view class="bottomBox"> | |||
| <button | |||
| class="bottomBtn" | |||
| open-type="getPhoneNumber" | |||
| type="default" | |||
| @getphonenumber="toCreate" | |||
| > | |||
| 开始制作我的数字分身 | |||
| </button> | |||
| <!-- <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> | |||
| </template> | |||
| <script setup> | |||
| //#region 导入 | |||
| import { ref, reactive } from "vue"; | |||
| import { voiceTotalApi, loginPhoneApi } from "../../api/login.js"; | |||
| import { userInfoModules } from "@/store/modules/userInfo"; | |||
| //#endregion | |||
| const userInfoModulesPinia = userInfoModules(); | |||
| const pageClass = computed(() => { | |||
| if (userInfoModulesPinia.platForm == 1) { | |||
| return "page pageH5"; | |||
| } else { | |||
| return "page"; | |||
| } | |||
| }); | |||
| //#region 勾选 | |||
| const checkboxValue1 = ref([]); | |||
| const checkboxList1 = ref([ | |||
| { | |||
| name: "同意智像相机用户使用协议", | |||
| disabled: false, | |||
| }, | |||
| ]); | |||
| async function getphonenumber(e) { | |||
| console.log(e); | |||
| if (e.detail.errMsg.includes("ok")) { | |||
| //用户授权了手机号 | |||
| const data = { | |||
| appId: "wx75cf14e3a0d45821", | |||
| openId: userInfoModulesPinia.openId, | |||
| encryptedData: e.detail.encryptedData, | |||
| iv: e.detail.iv, | |||
| }; | |||
| try { | |||
| const res2 = await loginPhoneApi(data); | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取成功", | |||
| }); | |||
| userInfoModulesPinia.token = res2.data.token; | |||
| uni.redirectTo({ | |||
| url: "/pages/index/index", | |||
| }); | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取失败", | |||
| }); | |||
| } | |||
| } else { | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取手机号失败", | |||
| }); | |||
| //code已过期 重新拿code再授权 | |||
| } | |||
| } | |||
| async function toCreate(e) { | |||
| if (checkboxValue1.value[0]) { | |||
| // await handleLogin(); | |||
| await getphonenumber(e); | |||
| } else { | |||
| uni.showModal({ | |||
| title: "提示", | |||
| content: "同意慧图相机用户使用协议?", | |||
| success: function (res) { | |||
| if (res.confirm) { | |||
| checkboxList1.value[0].disabled = true; | |||
| // handleLogin(); | |||
| getphonenumber(e); | |||
| } else if (res.cancel) { | |||
| } | |||
| }, | |||
| fail: (err) => {}, | |||
| }); | |||
| } | |||
| } | |||
| const userInfo = ref(null); | |||
| async function handleLogin() { | |||
| // uni.getUserInfo({}); | |||
| // getPhoneNumber | |||
| // getUserProfile | |||
| uni.getUserProfile({ | |||
| desc: "用于完善用户信息", | |||
| success: async (res1) => { | |||
| console.log(res1); | |||
| userInfo.value = res1.userInfo; | |||
| userInfoModulesPinia.userInfo = res1.userInfo; | |||
| console.log(userInfoModulesPinia.openId, "拿出openid"); | |||
| const data = { | |||
| appId: "wx75cf14e3a0d45821", | |||
| openId: userInfoModulesPinia.openId, | |||
| encryptedData: res1.encryptedData, | |||
| iv: res1.iv, | |||
| }; | |||
| try { | |||
| const res2 = await loginPhoneApi(data); | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取成功", | |||
| }); | |||
| } catch (error) { | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "获取失败", | |||
| }); | |||
| } | |||
| }, | |||
| fail: (err) => { | |||
| console.log(err); | |||
| uni.showToast({ | |||
| icon: "none", | |||
| title: "用户拒绝获取", | |||
| }); | |||
| }, | |||
| }); | |||
| } | |||
| //#endregion --------------------- | |||
| voiceTotalApi(); | |||
| </script> | |||
| <style lang="scss"> | |||
| .page { | |||
| position: relative; | |||
| padding: 0; | |||
| min-height: 100vh; | |||
| } | |||
| .bgImg { | |||
| width: 750rpx; | |||
| height: 100vh; | |||
| } | |||
| .videoBox { | |||
| width: 750rpx; | |||
| height: 1120rpx; | |||
| // aspect-ratio: 9/12; | |||
| video { | |||
| width: 100%; | |||
| height: 100%; | |||
| // aspect-ratio: 9/12; | |||
| } | |||
| } | |||
| .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; | |||
| color: #fff; | |||
| background-color: rgba(255, 79, 0, 1); | |||
| font-size: 30rpx; | |||
| font-weight: 900; | |||
| } | |||
| } | |||
| </style> | |||
| @@ -7,12 +7,15 @@ | |||
| // background-color: #fff; | |||
| font-size: 26rpx; | |||
| color: #fff; | |||
| min-height: 100vh; | |||
| position: relative; | |||
| min-height: 100vh; | |||
| background-color: rgba(0, 0, 0, 0.8); | |||
| } | |||
| .pageH5 { | |||
| min-height: calc(100vh - 44px); | |||
| } | |||
| body { | |||
| -webkit-touch-callout: none; | |||
| /*系统默认菜单被禁用*/ | |||