邃芒智像(Uniapp : WX、TT、H5)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

148 行
3.2 KiB

  1. <template>
  2. <view class="page">
  3. <view class="topBox">
  4. <view class="imgContenBox">
  5. <image src="../../assets/img/img2.jpg" mode="aspectFit" />
  6. </view>
  7. <up-button
  8. type="primary"
  9. text="更换风格"
  10. color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  11. @click="changeStyle"
  12. ></up-button>
  13. </view>
  14. <view class="imgListBox">
  15. <view
  16. class="imgContenBox"
  17. v-for="item in 4"
  18. :key="item"
  19. @click="goLookPhoto"
  20. >
  21. <image src="../../assets/img/img2.jpg" mode="aspectFit" />
  22. </view>
  23. </view>
  24. <!-- 生成中的底部栏 -->
  25. <view v-show="false" class="createIng">
  26. <text class="time">写真生成中,预计用时X分X秒</text>
  27. <text class="inform">做好后通知我</text>
  28. <up-button
  29. class="goon"
  30. type="primary"
  31. text="继续制作写真"
  32. color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  33. @click="changeStyle"
  34. ></up-button>
  35. </view>
  36. <!-- 生成成功的底部栏 -->
  37. <view class="createEd">
  38. <text class="look">点击查看高清写真</text>
  39. <view class="buttonBox">
  40. <up-button
  41. class="goon"
  42. type="primary"
  43. text="重新生成"
  44. color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
  45. @click="changeStyle"
  46. ></up-button>
  47. </view>
  48. </view>
  49. </view>
  50. </template>
  51. <script setup>
  52. //#region 导入
  53. import { ref, reactive } from "vue";
  54. import { voiceTotalApi } from "../../api/login.js";
  55. //#endregion
  56. //#region 生成写真照片
  57. //#endregion ---------------------
  58. //#region 页面跳转
  59. function changeStyle() {
  60. uni.redirectTo({
  61. url: "/pages/closeStyle/closeStyle",
  62. });
  63. }
  64. function goLookPhoto() {
  65. uni.redirectTo({
  66. url: "/pages/lookPhoto/index",
  67. });
  68. }
  69. //#endregion ---------------------
  70. //#region
  71. //#endregion ---------------------
  72. </script>
  73. <style lang="scss">
  74. .topBox {
  75. display: flex;
  76. align-items: flex-end;
  77. justify-content: flex-start;
  78. width: 100%;
  79. height: 200rpx;
  80. .imgContenBox {
  81. width: 200rpx;
  82. height: 100%;
  83. background-color: #ccc;
  84. image {
  85. width: 200rpx;
  86. max-height: 200rpx;
  87. }
  88. }
  89. button {
  90. width: 200rpx !important;
  91. margin: 0 50rpx;
  92. }
  93. }
  94. .imgListBox {
  95. width: 100%;
  96. height: 900rpx;
  97. padding: 30rpx 60rpx;
  98. display: flex;
  99. justify-content: space-between;
  100. align-items: center;
  101. flex-wrap: wrap;
  102. view {
  103. width: 48%;
  104. height: 48%;
  105. background-color: #ccc;
  106. border-radius: 30rpx;
  107. image {
  108. max-width: 100%;
  109. max-height: 100%;
  110. }
  111. }
  112. }
  113. .createIng,
  114. .createEd {
  115. width: 100%;
  116. display: flex;
  117. flex-direction: column;
  118. align-items: center;
  119. justify-content: center;
  120. .time {
  121. font-size: 40rpx;
  122. font-weight: 900;
  123. margin-top: 20rpx;
  124. margin-bottom: 10rpx;
  125. }
  126. .inform {
  127. margin-bottom: 30rpx;
  128. }
  129. .look {
  130. font-size: 40rpx;
  131. font-weight: 900;
  132. margin-top: 20rpx;
  133. margin-bottom: 30rpx;
  134. }
  135. .buttonBox {
  136. width: 50%;
  137. }
  138. }
  139. </style>