|  |  | @@ -1,19 +1,365 @@ | 
		
	
		
			
			|  |  |  | <template> | 
		
	
		
			
			|  |  |  | <view>生成完成页</view> | 
		
	
		
			
			|  |  |  | <view class="page"> | 
		
	
		
			
			|  |  |  | <!-- 轮播图 --> | 
		
	
		
			
			|  |  |  | <u-swiper | 
		
	
		
			
			|  |  |  | v-if="createState == 2" | 
		
	
		
			
			|  |  |  | indicator | 
		
	
		
			
			|  |  |  | indicatorMode="dot" | 
		
	
		
			
			|  |  |  | circular | 
		
	
		
			
			|  |  |  | :radius="30" | 
		
	
		
			
			|  |  |  | :autoplay="false" | 
		
	
		
			
			|  |  |  | :list="swiperList" | 
		
	
		
			
			|  |  |  | keyName="image" | 
		
	
		
			
			|  |  |  | @change="getSwiperIndex" | 
		
	
		
			
			|  |  |  | @click="previewImage" | 
		
	
		
			
			|  |  |  | ></u-swiper> | 
		
	
		
			
			|  |  |  | <view class="logoBox" v-if="createState != 2"> | 
		
	
		
			
			|  |  |  | <image class="logo" src="../../assets/img/logo-4.png" mode="aspectFit" /> | 
		
	
		
			
			|  |  |  | </view> | 
		
	
		
			
			|  |  |  | <view v-if="createState == 2" class="checkMore">左右滑动查看更多</view> | 
		
	
		
			
			|  |  |  | <view v-if="createState != 2" class="wait">生成中,请稍后...</view> | 
		
	
		
			
			|  |  |  | <!-- <view | 
		
	
		
			
			|  |  |  | @click="subscribe" | 
		
	
		
			
			|  |  |  | v-if="createState != 2" | 
		
	
		
			
			|  |  |  | style="text-decoration: underline; color: #ff4f00" | 
		
	
		
			
			|  |  |  | class="wait" | 
		
	
		
			
			|  |  |  | >做好后通知我</view | 
		
	
		
			
			|  |  |  | > --> | 
		
	
		
			
			|  |  |  | <view class="orangeBtn" @click="goChooseStyle"> 重新选择 </view> | 
		
	
		
			
			|  |  |  | <view class="grayBtn" @click="loginOut"> 退出登录 </view> | 
		
	
		
			
			|  |  |  | </view> | 
		
	
		
			
			|  |  |  | </template> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <script lang="ts" setup> | 
		
	
		
			
			|  |  |  | //#region 引入 | 
		
	
		
			
			|  |  |  | import { ref } from "vue"; | 
		
	
		
			
			|  |  |  | //#endregion ---------------------- | 
		
	
		
			
			|  |  |  | <script setup> | 
		
	
		
			
			|  |  |  | //#region 导入 | 
		
	
		
			
			|  |  |  | import { onLoad, onUnload } from "@dcloudio/uni-app"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 引入 | 
		
	
		
			
			|  |  |  | import { ref, watch } from "vue"; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#endregion ---------------------- | 
		
	
		
			
			|  |  |  | import { | 
		
	
		
			
			|  |  |  | getPhotoListApi, | 
		
	
		
			
			|  |  |  | photoSupperApi, | 
		
	
		
			
			|  |  |  | getSupperPhotoStateApi, | 
		
	
		
			
			|  |  |  | } from "../../api/lookPhoto.js"; | 
		
	
		
			
			|  |  |  | //#endregion | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 引入 | 
		
	
		
			
			|  |  |  | //#region 轮播图 | 
		
	
		
			
			|  |  |  | const createState = ref(1); //制作状态:1生成中,2完成,3失败 | 
		
	
		
			
			|  |  |  | const workId = ref(null); //作品id | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#endregion ---------------------- | 
		
	
		
			
			|  |  |  | onLoad(async (options) => { | 
		
	
		
			
			|  |  |  | workId.value = options.id; | 
		
	
		
			
			|  |  |  | // await getTemplateMsg(); | 
		
	
		
			
			|  |  |  | await getSwiperList(); | 
		
	
		
			
			|  |  |  | await getSupperPhotoState(swiperList.value[0].id); | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | onUnload(() => { | 
		
	
		
			
			|  |  |  | clearTimeout(timer); | 
		
	
		
			
			|  |  |  | timer.value = null; | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | const swiperList = ref([]); //轮播图 | 
		
	
		
			
			|  |  |  | const previewImageList = ref([]); //预览图片列表 | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | const timer = ref(null); | 
		
	
		
			
			|  |  |  | async function getSwiperList() { | 
		
	
		
			
			|  |  |  | const res = await getPhotoListApi(workId.value); | 
		
	
		
			
			|  |  |  | createState.value = res.data.status; | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | if (res.data.photoList) { | 
		
	
		
			
			|  |  |  | swiperList.value = res.data.photoList; | 
		
	
		
			
			|  |  |  | swiperList.value.forEach((item) => { | 
		
	
		
			
			|  |  |  | if (item.imageSuper) { | 
		
	
		
			
			|  |  |  | previewImageList.value.push(item.imageSuper); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | previewImageList.value.push(item.image); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | if (res.data.status != 2) { | 
		
	
		
			
			|  |  |  | timer.value = setTimeout(() => { | 
		
	
		
			
			|  |  |  | getSwiperList(); | 
		
	
		
			
			|  |  |  | }, 3000); | 
		
	
		
			
			|  |  |  | } else { | 
		
	
		
			
			|  |  |  | clearTimeout(timer); | 
		
	
		
			
			|  |  |  | timer.value = null; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 预览 | 
		
	
		
			
			|  |  |  | const swiperIndex = ref(0); | 
		
	
		
			
			|  |  |  | function getSwiperIndex(index) { | 
		
	
		
			
			|  |  |  | swiperIndex.value = index.current; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | function previewImage(index) { | 
		
	
		
			
			|  |  |  | uni.previewImage({ | 
		
	
		
			
			|  |  |  | current: index, //预览图片的下标 | 
		
	
		
			
			|  |  |  | urls: previewImageList.value, //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 | 
		
	
		
			
			|  |  |  | loop: true, | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 页面跳转 | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | function goChooseStyle() { | 
		
	
		
			
			|  |  |  | uni.navigateTo({ | 
		
	
		
			
			|  |  |  | url: "/pages/chooseStyle/index", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 超分相关 | 
		
	
		
			
			|  |  |  | const supperPhotoState = ref(false); | 
		
	
		
			
			|  |  |  | async function photoSupper() { | 
		
	
		
			
			|  |  |  | if (supperPhotoState.value == 1 || supperPhotoState.value == 2) { | 
		
	
		
			
			|  |  |  | return; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // uni.showModal({ | 
		
	
		
			
			|  |  |  | //     title: "提示", | 
		
	
		
			
			|  |  |  | //     content: "确定高清处理?", | 
		
	
		
			
			|  |  |  | //     success: function (res) { | 
		
	
		
			
			|  |  |  | //       if (res.confirm) { | 
		
	
		
			
			|  |  |  | //         checkboxValue.value = ["同意智像相机用户使用协议"]; | 
		
	
		
			
			|  |  |  | //         // handleLogin(); | 
		
	
		
			
			|  |  |  | //         getphonenumber(e); | 
		
	
		
			
			|  |  |  | //       } else if (res.cancel) { | 
		
	
		
			
			|  |  |  | //       } | 
		
	
		
			
			|  |  |  | //     }, | 
		
	
		
			
			|  |  |  | //     fail: (err) => {}, | 
		
	
		
			
			|  |  |  | //   }); | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | uni.showLoading({ | 
		
	
		
			
			|  |  |  | title: "高清处理中...", | 
		
	
		
			
			|  |  |  | mask: true, | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | const res = await photoSupperApi({ | 
		
	
		
			
			|  |  |  | id: swiperList.value[swiperIndex.value].id, | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | console.log(res); | 
		
	
		
			
			|  |  |  | uni.hideLoading(); | 
		
	
		
			
			|  |  |  | uni.showToast({ | 
		
	
		
			
			|  |  |  | title: "高清处理请求成功,请稍后", | 
		
	
		
			
			|  |  |  | title: "高清处理请求成功,请稍等", | 
		
	
		
			
			|  |  |  | icon: "none", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | getSupperPhotoState(swiperList.value[swiperIndex.value].id); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | console.log(error, "超分失败"); | 
		
	
		
			
			|  |  |  | uni.hideLoading(); | 
		
	
		
			
			|  |  |  | uni.showToast({ | 
		
	
		
			
			|  |  |  | title: "高清处理失败,请重试", | 
		
	
		
			
			|  |  |  | icon: "none", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | async function getSupperPhotoState(id) { | 
		
	
		
			
			|  |  |  | try { | 
		
	
		
			
			|  |  |  | const res = await getSupperPhotoStateApi(id); | 
		
	
		
			
			|  |  |  | supperPhotoState.value = res.data.status; | 
		
	
		
			
			|  |  |  | console.log(supperPhotoState.value, "状态"); | 
		
	
		
			
			|  |  |  | } catch (error) { | 
		
	
		
			
			|  |  |  | console.log(error, "超分失败"); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | function supperTips(params) { | 
		
	
		
			
			|  |  |  | if (supperPhotoState.value == 0 || supperPhotoState.value == 3) { | 
		
	
		
			
			|  |  |  | return "一键高清"; | 
		
	
		
			
			|  |  |  | } else if (supperPhotoState.value == 1) { | 
		
	
		
			
			|  |  |  | return "高清处理中,请稍后"; | 
		
	
		
			
			|  |  |  | } else if (supperPhotoState.value == 2) { | 
		
	
		
			
			|  |  |  | return "已高清处理"; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | watch( | 
		
	
		
			
			|  |  |  | () => swiperIndex.value, | 
		
	
		
			
			|  |  |  | (index) => { | 
		
	
		
			
			|  |  |  | getSupperPhotoState(swiperList.value[index].id); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | ); | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | //#region 退出登录 | 
		
	
		
			
			|  |  |  | function loginOut(params) { | 
		
	
		
			
			|  |  |  | uni.setStorageSync("token", null); | 
		
	
		
			
			|  |  |  | uni.setStorageSync("UserId", null); | 
		
	
		
			
			|  |  |  | uni.setStorageSync("phone", null); | 
		
	
		
			
			|  |  |  | uni.navigateTo({ | 
		
	
		
			
			|  |  |  | url: "/pages/login/index", | 
		
	
		
			
			|  |  |  | }); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | //#endregion --------------------- | 
		
	
		
			
			|  |  |  | </script> | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | <style lang="scss" scoped></style> | 
		
	
		
			
			|  |  |  | <style lang="scss"> | 
		
	
		
			
			|  |  |  | .page { | 
		
	
		
			
			|  |  |  | padding: 0 30rpx; | 
		
	
		
			
			|  |  |  | background-color: rgba(24, 25, 26, 1); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | // 轮播图 | 
		
	
		
			
			|  |  |  | .u-swiper { | 
		
	
		
			
			|  |  |  | margin-top: 70rpx; | 
		
	
		
			
			|  |  |  | width: 540rpx; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | border-radius: 50rpx; | 
		
	
		
			
			|  |  |  | swiper { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | image { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // h5 | 
		
	
		
			
			|  |  |  | :deep(.u-swiper__wrapper) { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | image { | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .logoBox { | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | flex-direction: column; | 
		
	
		
			
			|  |  |  | align-items: center; | 
		
	
		
			
			|  |  |  | justify-content: center; | 
		
	
		
			
			|  |  |  | margin-top: 70rpx; | 
		
	
		
			
			|  |  |  | width: 540rpx; | 
		
	
		
			
			|  |  |  | height: 720rpx !important; | 
		
	
		
			
			|  |  |  | .logo { | 
		
	
		
			
			|  |  |  | width: 260rpx; | 
		
	
		
			
			|  |  |  | margin: 90rpx; | 
		
	
		
			
			|  |  |  | animation: rotateAnimation 3s 0s infinite; | 
		
	
		
			
			|  |  |  | opacity: 0.7; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | @keyframes rotateAnimation { | 
		
	
		
			
			|  |  |  | 0% { | 
		
	
		
			
			|  |  |  | transform: rotate(0deg); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 66.66% { | 
		
	
		
			
			|  |  |  | transform: rotate(360deg); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 100% { | 
		
	
		
			
			|  |  |  | transform: rotate(360deg); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .checkMore, | 
		
	
		
			
			|  |  |  | .wait { | 
		
	
		
			
			|  |  |  | color: #ffffff; | 
		
	
		
			
			|  |  |  | margin-top: 30rpx; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | // 俩按钮 | 
		
	
		
			
			|  |  |  | .uploadBtn { | 
		
	
		
			
			|  |  |  | position: relative; | 
		
	
		
			
			|  |  |  | margin-top: 100rpx; | 
		
	
		
			
			|  |  |  | 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: -18rpx; | 
		
	
		
			
			|  |  |  | right: -70rpx; | 
		
	
		
			
			|  |  |  | width: 142rpx; | 
		
	
		
			
			|  |  |  | height: 50rpx; | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | border-radius: 25rpx 25rpx 25rpx 0; | 
		
	
		
			
			|  |  |  | font-size: 22rpx; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | line-height: 50rpx; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .orangeBtn { | 
		
	
		
			
			|  |  |  | margin-top: 60rpx; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .grayBtn { | 
		
	
		
			
			|  |  |  | margin-bottom: 220rpx; | 
		
	
		
			
			|  |  |  | .free { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | top: -18rpx; | 
		
	
		
			
			|  |  |  | right: -70rpx; | 
		
	
		
			
			|  |  |  | width: 142rpx; | 
		
	
		
			
			|  |  |  | height: 50rpx; | 
		
	
		
			
			|  |  |  | background-color: #ff4f00; | 
		
	
		
			
			|  |  |  | border-radius: 25rpx 25rpx 25rpx 0; | 
		
	
		
			
			|  |  |  | font-size: 22rpx; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | line-height: 50rpx; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .bottomBox { | 
		
	
		
			
			|  |  |  | // flex: 1; | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | bottom: 60rpx; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | justify-content: space-evenly; | 
		
	
		
			
			|  |  |  | padding: 65rpx 40rpx 0; | 
		
	
		
			
			|  |  |  | .tips { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | top: 0rpx; | 
		
	
		
			
			|  |  |  | right: 60rpx; | 
		
	
		
			
			|  |  |  | width: 313rpx; | 
		
	
		
			
			|  |  |  | height: 50rpx; | 
		
	
		
			
			|  |  |  | background-color: #000; | 
		
	
		
			
			|  |  |  | border-radius: 25rpx 25rpx 25rpx 0; | 
		
	
		
			
			|  |  |  | font-size: 22rpx; | 
		
	
		
			
			|  |  |  | font-weight: 900; | 
		
	
		
			
			|  |  |  | line-height: 50rpx; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | .shareBtn { | 
		
	
		
			
			|  |  |  | margin: 0; | 
		
	
		
			
			|  |  |  | color: #fff; | 
		
	
		
			
			|  |  |  | width: 200rpx; | 
		
	
		
			
			|  |  |  | height: 70rpx; | 
		
	
		
			
			|  |  |  | line-height: 70rpx; | 
		
	
		
			
			|  |  |  | text-align: center; | 
		
	
		
			
			|  |  |  | border-radius: 70rpx; | 
		
	
		
			
			|  |  |  | font-size: 26rpx; | 
		
	
		
			
			|  |  |  | background-color: rgba(255, 255, 255, 0.1); | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | 
 | 
		
	
		
			
			|  |  |  | .pictorialBox { | 
		
	
		
			
			|  |  |  | position: absolute; | 
		
	
		
			
			|  |  |  | width: 100%; | 
		
	
		
			
			|  |  |  | height: 100%; | 
		
	
		
			
			|  |  |  | display: flex; | 
		
	
		
			
			|  |  |  | flex-direction: column; | 
		
	
		
			
			|  |  |  | align-items: center; | 
		
	
		
			
			|  |  |  | background-color: rgba($color: #000000, $alpha: 0.9); | 
		
	
		
			
			|  |  |  | image { | 
		
	
		
			
			|  |  |  | margin-top: 80rpx; | 
		
	
		
			
			|  |  |  | width: 630rpx; | 
		
	
		
			
			|  |  |  | height: 940rpx; | 
		
	
		
			
			|  |  |  | border-radius: 24rpx; | 
		
	
		
			
			|  |  |  | margin-bottom: 50rpx; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | text { | 
		
	
		
			
			|  |  |  | margin-bottom: 30rpx; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | z-index: 9; | 
		
	
		
			
			|  |  |  | } | 
		
	
		
			
			|  |  |  | </style> |