|
- <template>
- <view class="page">
- <view class="topBox">
- <view class="imgContenBox">
- <image src="../../assets/img/img2.jpg" 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.jpg" mode="aspectFit" />
- </view>
- </view>
- <!-- 生成中的底部栏 -->
- <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>
- <!-- 生成成功的底部栏 -->
- <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>
- </view>
- </template>
-
- <script setup>
- //#region 导入
- import { ref, reactive } from "vue";
- import { voiceTotalApi } from "../../api/login.js";
- //#endregion
-
- //#region 生成写真照片
-
- //#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 {
- display: flex;
- align-items: flex-end;
- justify-content: flex-start;
- width: 100%;
- height: 200rpx;
- .imgContenBox {
- width: 200rpx;
- height: 100%;
- background-color: #ccc;
- image {
- width: 200rpx;
- max-height: 200rpx;
- }
- }
- button {
- width: 200rpx !important;
- margin: 0 50rpx;
- }
- }
- .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%;
- }
- }
- }
-
- .createIng,
- .createEd {
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- .time {
- font-size: 40rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 10rpx;
- }
- .inform {
- margin-bottom: 30rpx;
- }
- .look {
- font-size: 40rpx;
- font-weight: 900;
- margin-top: 20rpx;
- margin-bottom: 30rpx;
- }
- .buttonBox {
- width: 50%;
- }
- }
- </style>
|