<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>
