邃芒智像(Uniapp : WX、TT、H5)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

148 line
3.2 KiB

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