make2.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. .swiper {
  2. height: 100%;
  3. }
  4. .swiper-item {
  5. height: 100%;
  6. }
  7. .backup {
  8. position: fixed;left:40rpx;width:80rpx;height:80rpx;
  9. top: calc(30rpx + var(--status-bar-height));
  10. }
  11. .setps-container {
  12. width: 100vw;
  13. height: 100vh;
  14. position: relative;
  15. background: #F7F7F8;
  16. &-title_image {
  17. width: 100%;
  18. height: calc(308rpx + var(--status-bar-height));
  19. }
  20. &-top {
  21. width: 100%;
  22. position: absolute;
  23. top: calc(140rpx + var(--status-bar-height));
  24. border-top-left-radius: 60rpx;
  25. border-top-right-radius: 60rpx;
  26. display: flex;
  27. flex-direction: column;
  28. align-items: center;
  29. background: #F7F7F8;
  30. &_title {
  31. margin-top: 73rpx;
  32. margin-bottom: 10rpx;
  33. font-size: 36rpx;
  34. font-weight: bold;
  35. color: #3D3D3D;
  36. }
  37. &_line {
  38. width: 600rpx;
  39. height: 5rpx;
  40. border-radius: 5rpx;
  41. background: #D8D8D8;
  42. margin-bottom: 30rpx;
  43. &__lineTow {
  44. width: 120rpx;
  45. height: 5rpx;
  46. border-radius: 5rpx;
  47. background: #000000;
  48. }
  49. &__lineTow2 {
  50. width: 120rpx;margin-left:120rpx;
  51. height: 5rpx;
  52. border-radius: 5rpx;
  53. background: #000000;
  54. }
  55. &__lineTow3 {
  56. width: 120rpx;margin-left:240rpx;
  57. height: 5rpx;
  58. border-radius: 5rpx;
  59. background: #000000;
  60. }
  61. &__lineTow4 {
  62. width: 120rpx;margin-left:360rpx;
  63. height: 5rpx;
  64. border-radius: 5rpx;
  65. background: #000000;
  66. }
  67. &__lineTow5 {
  68. width: 120rpx;margin-left:480rpx;
  69. height: 5rpx;
  70. border-radius: 5rpx;
  71. background: #000000;
  72. }
  73. }
  74. &_desc {
  75. font-size: 42rpx;
  76. font-weight: bold;
  77. color: #3D3D3D;
  78. }
  79. }
  80. &-center {
  81. width: 100%;
  82. height: 600rpx;
  83. margin-top: 100rpx;
  84. display: flex;flex-direction: column;justify-content: flex-start;align-items: center;
  85. .avator {
  86. width:380rpx;height:380rpx;
  87. }
  88. .scroll-text {
  89. width:700rpx;height: 500rpx;margin:25rpx;
  90. overflow: scroll;
  91. }
  92. .cucang {
  93. font-size:38rpx;text-align: center;padding:30rpx;
  94. }
  95. .scroll-text-content {
  96. color:#333;animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
  97. }
  98. .bg-content {
  99. display: flex;flex-direction: column;justify-content: center;align-items: center;
  100. .avator {
  101. animation: spin 5s linear infinite;
  102. }
  103. }
  104. }
  105. &-bottom {
  106. width: 100%;
  107. display: flex;
  108. flex-direction: column;
  109. align-items: center;
  110. &__btn {
  111. width: 516rpx;
  112. height: 88rpx;
  113. border-radius: 66rpx;
  114. background: #AEE500;
  115. font-size: 36rpx;
  116. font-weight: 600;
  117. color: #3D3D3D;
  118. text-align: center;
  119. line-height: 88rpx;
  120. text {
  121. color:#666;font-size: 24rpx;
  122. }
  123. }
  124. &__tips {
  125. font-size: 23rpx;
  126. font-weight: 500;
  127. color: #A3A3A3;
  128. margin-bottom: 16rpx;
  129. }
  130. }
  131. }
  132. .pop {
  133. position: fixed;left:0;top:0;width:750rpx;height:100vh;
  134. background-color: #fff;
  135. .blurred-background {
  136. position: absolute;
  137. width: 750rpx;
  138. height: 100vh;
  139. background-image: url('/static/make/1_12.png'); /* 替换为你的图片URL */
  140. background-size: cover;
  141. filter: blur(10px); /* 调整模糊程度 */
  142. z-index:1;
  143. }
  144. .xinxiang {
  145. position: absolute;height:100vh;width:100vh;
  146. z-index:99;
  147. }
  148. .play_video {
  149. position: absolute;left:30rpx;top:40%;width:80rpx;height:80rpx;
  150. z-index:100;
  151. }
  152. .backup {
  153. position: absolute;left:40rpx;width:80rpx;height:80rpx;
  154. z-index:9999;
  155. top: calc(50rpx + var(--status-bar-height));
  156. }
  157. .cucang {
  158. position: absolute;top:220rpx;z-index: 9999;
  159. padding:30rpx;color:#fff;font-size: 38rpx;text-align: center;
  160. animation: shine 1s ease-in-out infinite;
  161. text-shadow: 0 0 10px #fff;
  162. }
  163. .scroll-text {
  164. position: absolute;bottom:20rpx;z-index: 9999;
  165. width:700rpx;height: 500rpx;margin:25rpx;
  166. overflow: hidden;
  167. }
  168. .scroll-text-content {
  169. position: absolute;
  170. bottom: 0;color:#333;
  171. animation: scroll 20s linear infinite; /* 调整滚动速度和持续时间 */
  172. }
  173. .video-container {
  174. position: relative;
  175. display: inline-block;
  176. width:100%;height:100%;
  177. }
  178. .video-text {
  179. position: absolute;
  180. top: 100rpx;
  181. left: 20rpx;width:100%;
  182. transform: translate(-50%, -50%);
  183. color: #ff0000;
  184. font-size: 24px;
  185. text-shadow: 2px 2px 4px #000;z-index: 99999;
  186. }
  187. @keyframes scroll {
  188. 0% {
  189. transform: translateY(100%); /* 从底部开始 */
  190. }
  191. 100% {
  192. transform: translateY(-50%); /* 滚动到顶部 */
  193. }
  194. }
  195. }
  196. @keyframes spin {
  197. 0% { transform: rotate(0deg); }
  198. 100% { transform: rotate(360deg); }
  199. }
  200. @keyframes shine {
  201. 0% { text-shadow: 0 0 10px #fff; }
  202. 50% { text-shadow: 0 0 20px #ff00ff, 0 0 30px #ff0000; }
  203. 100% { text-shadow: 0 0 10px #fff; }
  204. }