|
- <template>
- <view class="page">
- <view class="topBox">
- <view class="imgContenBox">
- <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>
- <view class="orangeBtn" @click="changeStyle">继续制作写真</view>
- </view>
- <!-- 生成成功的底部栏 -->
- <view class="createEd">
- <view class="orangeBtn anew" @click="changeStyle">重新生成</view>
- </view>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- 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 页面跳转
- function changeStyle() {
- uni.redirectTo({
- url: "/pages/closeStyle/closeStyle",
- });
- }
- function goLookPhoto() {
- uni.redirectTo({
- url: "/pages/lookPhoto/index",
- });
- }
- //#endregion ---------------------
-
- //#region
-
- //#endregion ---------------------
- </script>
-
- <style lang="scss">
- .topBox {
- margin-top: 20rpx;
- display: flex;
- align-items: center;
- justify-content: space-between;
- width: 100%;
- height: 200rpx;
- .imgContenBox {
- width: 150rpx;
- height: 100%;
- border-radius: 30rpx;
- image {
- width: 150rpx;
- max-height: 200rpx;
- }
- }
- .changeStyle {
- margin-right: 70rpx;
- width: 220rpx;
- height: 72rpx;
- border: 1px solid #ff4f00;
- border-radius: 36rpx;
- text-align: center;
- line-height: 72rpx;
- color: #ff4f00;
- }
- }
- .imgListBox {
- width: 100%;
- height: 900rpx;
- padding: 30rpx 60rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
- view {
- width: 48%;
- height: 48%;
- background-color: #ccc;
- border-radius: 30rpx;
- image {
- max-width: 100%;
- max-height: 100%;
- }
- }
- }
- .u-swiper {
- width: 100%;
- height: 695rpx !important;
- }
- .createIng,
- .createEd {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .time {
- font-size: 26rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 20rpx;
- }
- .inform {
- font-size: 22rpx;
- color: #ffffff;
- opacity: 0.5;
- margin-bottom: 30rpx;
- }
- .look {
- font-size: 40rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 30rpx;
- }
- .anew {
- margin-top: 120rpx;
- }
- }
- </style>
|