No Description

index.css 5.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. body{
  2. width: 100%;
  3. min-height: 100vh;
  4. background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/shuangshiyi/wishlist/bg.png);
  5. background-size:100% ;
  6. }
  7. .alert-info {
  8. position: fixed;
  9. top: 1.5rem;
  10. right: 0;
  11. left: 0;
  12. bottom: 0;
  13. text-align: center;
  14. }
  15. .alert-info p {
  16. display: inline-block;
  17. height: 0.38rem;
  18. color: #fff;
  19. font-size: 0.14rem;
  20. line-height: 0.38rem;
  21. padding: 0 0.10rem;
  22. background-color: rgba(0, 0, 0, 0.7);
  23. border-radius: 5px;
  24. }
  25. #copy_1,#copy_2,#taokouling{
  26. position:absolute;
  27. left:-3000px;
  28. }
  29. #container{
  30. width: 100%;
  31. min-height: 100vh;
  32. background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/shuangshiyi/wishlist/bgPng.png);
  33. background-size:100% ;
  34. padding-bottom: 0.33rem;
  35. box-sizing: border-box;
  36. }
  37. #container .banner{
  38. position: absolute;
  39. width: 100%;
  40. top: 0;
  41. }
  42. #share{
  43. position: absolute;
  44. top: 0.12rem;
  45. right: 0.18rem;
  46. width: 0.32rem;
  47. text-align: center;
  48. z-index: 1;
  49. }
  50. #share img{
  51. width: 100%;
  52. }
  53. #share span{
  54. font-size:0.13rem;
  55. font-weight:600;
  56. color:rgba(255,255,255,1);
  57. line-height:0.185rem;
  58. padding-top: 0.15rem;
  59. -webkit-text-stroke:0.005rem rgba(139,78,255,1);
  60. text-stroke:0.005rem rgba(139,78,255,1);
  61. }
  62. #content{
  63. position: relative;
  64. padding-top: 2.95rem;
  65. }
  66. #content .titleImg{
  67. width: 1.53rem;
  68. height: 0.68rem;
  69. margin: auto;
  70. margin-bottom: 0.08rem;
  71. }
  72. .activityTime .changeTime{
  73. position: relative;
  74. width: 3.465rem;
  75. height: 2.95rem;
  76. background:linear-gradient(135deg,rgba(255,90,132,1) 0%,rgba(254,91,103,1) 100%);
  77. border-radius:0.12rem;
  78. border:0.015rem solid #FFFFFF;
  79. margin: auto;
  80. }
  81. .activityTime .changeTime .maogo{
  82. padding: 0.2rem 0.1rem;
  83. width: 1.025rem;
  84. position: absolute;
  85. bottom: 0;
  86. left: 0;
  87. }
  88. .activityTime .changeTime .title img{
  89. height: 0.28rem;
  90. margin: auto;
  91. margin-top: 0.1rem;
  92. }
  93. .activityTime .changeTime .progress{
  94. position: absolute;
  95. top: 0.97rem;
  96. left: 0;
  97. right: 0;
  98. margin: auto;
  99. width: 2.935rem;
  100. height: 1.32rem;
  101. background: url(https://kx-youhuiquan.oss-cn-beijing.aliyuncs.com/shuangshiyi/wishlist/progress_four.png) no-repeat;
  102. background-size:100% ;
  103. display: flex;
  104. text-align: center;
  105. }
  106. .activityTime .changeTime .progress li span{
  107. color: #FFFFFF;
  108. font-size: 0.12rem;
  109. line-height: 0.165rem;
  110. padding-bottom: 0.04rem;
  111. }
  112. .activityTime .changeTime .progress li img{
  113. width: 0.29rem;
  114. height: 0.35rem;
  115. margin: auto;
  116. }
  117. .activityTime .changeTime .progress li p{
  118. width: 1.4rem;
  119. min-height: 0.2rem;
  120. display: flex;
  121. justify-content: center;
  122. align-items: center;
  123. text-align: left;
  124. margin-top: 0.095rem;
  125. color: #FEFC49;
  126. font-size: 0.12rem;
  127. line-height: 0.165rem;
  128. }
  129. .activityTime .changeTime .progress li button{
  130. width: 0.76rem;
  131. height: 0.21rem;
  132. background:linear-gradient(93deg,rgba(161,104,255,1) 0%,rgba(137,75,255,1) 100%);
  133. box-shadow:0px 0.02rem 0.01rem 0px rgba(0,0,0,0.5);
  134. border-radius:0.1rem;
  135. color: #FFFFFF;
  136. font-size: 0.15rem;
  137. line-height: 0.21rem;
  138. border: none;
  139. margin-top: 0.05rem;
  140. }
  141. .activityTime .changeTime .progress li:nth-of-type(1){
  142. position: absolute;
  143. top: -0.46rem;
  144. left: -0.3rem;
  145. }
  146. .activityTime .changeTime .progress li:nth-of-type(2){
  147. position: absolute;
  148. top: -0.46rem;
  149. right: 0.2rem;
  150. }
  151. .activityTime .changeTime .progress li:nth-of-type(3){
  152. position: absolute;
  153. bottom: -0.53rem;
  154. right: 0.9rem;
  155. }
  156. .activityTime .ps{
  157. color: #FFFFFF;
  158. font-size: 0.15rem;
  159. line-height: 0.21rem;
  160. margin-top: 0.08rem;
  161. text-align: center;
  162. }
  163. /*心愿清单*/
  164. .washDetailedList{
  165. margin-top: 0.09rem;
  166. }
  167. .washDetailedList .washDetailed{
  168. width:3.465rem;
  169. background:linear-gradient(138deg,rgba(255,101,138,1) 0%,rgba(255,59,186,1) 100%);
  170. border-radius:0.12rem;
  171. border:0.015rem solid #FFFFFF;
  172. margin: auto;
  173. }
  174. .washDetailedList .washDetailed ul{
  175. display: flex;
  176. flex-wrap: wrap;
  177. }
  178. .washDetailedList .washDetailed ul li{
  179. width: 50%;
  180. text-align: center;
  181. margin-bottom: 0.27rem;
  182. }
  183. .washDetailedList .washDetailed ul li h2{
  184. color: #FFFFFF;
  185. font-size: 0.24rem;
  186. line-height: 0.335rem;
  187. padding: 0.05rem 0;
  188. }
  189. .washDetailedList .washDetailed ul li p{
  190. margin: auto;
  191. min-height: 0.5rem;
  192. /*width: 1.25rem;*/
  193. color: #FFF101;
  194. font-size: 0.12rem;
  195. line-height: 0.155rem;
  196. margin-bottom: 0.11rem;
  197. display: flex;
  198. align-items: center;
  199. justify-content: center;
  200. }
  201. .washDetailedList .washDetailed ul li img{
  202. margin: auto;
  203. width: 0.9rem;
  204. height: 1.72rem;
  205. }
  206. /*注意事项*/
  207. .carefulMatter{
  208. margin-top: 0.26rem;
  209. }
  210. .carefulMatter .con{
  211. width:3.465rem;
  212. background:linear-gradient(135deg,rgba(255,90,132,1) 0%,rgba(254,91,103,1) 100%);
  213. border-radius:0.12rem;
  214. border:0.015rem solid #FFFFFF;
  215. margin: auto;
  216. padding: 0.21rem 0.08rem 0;
  217. box-sizing: border-box;
  218. }
  219. .carefulMatter .con p{
  220. color: #FFF101;
  221. font-size: 0.13rem;
  222. line-height: 0.185rem;
  223. margin-bottom: 0.06rem;
  224. }
  225. /*最终通关秘籍*/
  226. .lastEsoterica{
  227. margin-top: 0.235rem;
  228. }
  229. .lastEsoterica .con{
  230. width:3.465rem;
  231. background:linear-gradient(138deg,rgba(255,101,138,1) 0%,rgba(255,59,186,1) 100%);
  232. border-radius:0.12rem;
  233. border:0.015rem solid #FFFFFF;
  234. margin: auto;
  235. padding: 0.15rem 0;
  236. }
  237. .lastEsoterica .con p{
  238. color:#FFFFFF;
  239. font-size: 0.13rem;
  240. line-height: 0.185rem;
  241. text-align: center;
  242. }
  243. .lastEsoterica .con p:nth-of-type(1){
  244. color: #FFFFFF;
  245. font-size: 0.15rem;
  246. line-height: 0.21rem;
  247. }
  248. .lastEsoterica .con img{
  249. width: 0.795rem;
  250. margin: auto;
  251. margin-top: 0.13rem;
  252. margin-bottom: 0.175rem;
  253. }