activity.wxss 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. /* pages/signIn/index.wxss */
  2. page {
  3. background: #EDEDED;
  4. }
  5. .sign-head {
  6. position: fixed;
  7. left: 0;
  8. top: 0;
  9. z-index: 0;
  10. width: 100vw;
  11. }
  12. .head-bg image{
  13. width: 100vw;
  14. }
  15. .head-bar {
  16. width: 100%;
  17. position: absolute;
  18. left: 0;
  19. top: 0;
  20. text-align: center;
  21. color: #fff;
  22. font-size: 32rpx;
  23. }
  24. .sign-scroll-body {
  25. position: relative;
  26. z-index: 2;
  27. height: 10000rpx;
  28. overflow-y: auto;
  29. }
  30. .sign-info-extra {
  31. height: 285rpx;
  32. width: 100vw;
  33. display: flex;
  34. flex-direction: row;
  35. }
  36. .coupon_num_box {
  37. flex: 1;
  38. box-sizing: border-box;
  39. padding: 52rpx 0 20rpx 80rpx;
  40. }
  41. .coupon_num_box {
  42. color: #fff;
  43. }
  44. .my_coupon_title {
  45. font-size: 24rpx;
  46. font-weight: 400;
  47. }
  48. .coupon_num_box ._num_arear {
  49. padding: 18rpx 0 0 20rpx;
  50. box-sizing: border-box;
  51. height: 162rpx;
  52. width: 480rpx;
  53. white-space: nowrap;
  54. }
  55. ._num_arear ._num {
  56. font-size: 128rpx;
  57. vertical-align: baseline;
  58. height: 144rpx;
  59. display: inline-block;
  60. }
  61. ._num_arear ._unit {
  62. padding-left: 10rpx;
  63. font-size: 52rpx;
  64. font-weight: 400;
  65. vertical-align: baseline;
  66. display: inline-block;
  67. }
  68. ._num_arear ._btn {
  69. display: inline-block;
  70. font-size: 24rpx;
  71. border: 1px solid #fff;
  72. height: 26rpx;
  73. border-radius: 24rpx;
  74. padding: 4rpx 12rpx;
  75. margin-left: 20rpx;
  76. line-height: 24rpx;
  77. }
  78. .sign-info-extra ._look_btn {
  79. width: 180rpx;
  80. box-sizing: border-box;
  81. padding: 140rpx 60rpx 0 0;
  82. font-size: 24rpx;
  83. color: #fff;
  84. font-weight: 400;
  85. }
  86. .sign-card-box {
  87. width: 704rpx;
  88. height: 550rpx;
  89. margin: auto;
  90. background: #fff;
  91. border-radius: 8px;
  92. box-sizing: border-box;
  93. padding: 56rpx 40rpx 40rpx 40rpx;
  94. }
  95. .sign-item-box {
  96. display: flex;
  97. flex-direction: row;
  98. }
  99. .sign-item-box ._left {
  100. width: 390rpx;
  101. display: flex;
  102. justify-content: space-between;
  103. flex-wrap: wrap;
  104. }
  105. .sign-item-box ._left ._item {
  106. width: 112rpx;
  107. height: 156rpx;
  108. border-radius: 12rpx;
  109. background: #F4F4F4;
  110. position: relative;
  111. overflow: hidden;
  112. }
  113. .sign-item-box ._left ._item:nth-child(1), .sign-item-box ._left ._item:nth-child(2) , .sign-item-box ._left ._item:nth-child(2) {
  114. margin-bottom: 28rpx;
  115. }
  116. .sign-item-box ._left ._item ._figure {
  117. width: 112rpx;
  118. height: 154rpx;
  119. position: absolute;
  120. display: block;
  121. left: 0;
  122. top: 0;
  123. z-index: 0;
  124. }
  125. .sign-item-box ._left ._item ._lose_sign_in {
  126. width: 110rpx;
  127. height: 82rpx;
  128. position: absolute;
  129. left: 2rpx;
  130. display: block;
  131. top: 36rpx;
  132. z-index: 3;
  133. }
  134. .sign-item-box ._left ._item ._finish_sign_in {
  135. width: 36rpx;
  136. height: 22rpx;
  137. position: absolute;
  138. z-index: 3;
  139. left: 38rpx;
  140. top: 66rpx;
  141. }
  142. .sign-item-box ._left ._item ._no {
  143. height: 32rpx;
  144. width: 100%;
  145. position: absolute;
  146. z-index: 2;
  147. left: 0;
  148. bottom: 0;
  149. color: #fff;
  150. font-size: 24rpx;
  151. text-align: center;
  152. line-height: 32rpx;
  153. background: linear-gradient(#EE5A5A, #cc4949, #EE5A5A);
  154. }
  155. .sign-item-box ._right {
  156. width: 202rpx;
  157. margin-left: 32rpx;
  158. }
  159. .sign-item-box ._right ._item {
  160. width: 202rpx;
  161. height: 340rpx;
  162. border-radius: 12rpx;
  163. background: #F4F4F4;
  164. position: relative;
  165. overflow: hidden;
  166. }
  167. .sign-item-box ._right ._item ._figure {
  168. width: 202rpx;
  169. height: 340rpx;
  170. display: block;
  171. position: absolute;
  172. left: 0;
  173. top: 0;
  174. }
  175. .sign-item-box ._right ._item ._lose_sign_in {
  176. width: 186rpx;
  177. height: 140rpx;
  178. display: block;
  179. position: absolute;
  180. left: 8rpx;
  181. top: 122rpx;
  182. z-index: 3;
  183. }
  184. .sign-item-box ._right ._item ._finish_sign_in {
  185. width: 82rpx;
  186. height: 50rpx;
  187. position: absolute;
  188. z-index: 3;
  189. left: 60rpx;
  190. top: 145rpx;
  191. }
  192. .sign-item-box ._right ._item ._no {
  193. height: 46rpx;
  194. width: 100%;
  195. position: absolute;
  196. z-index: 2;
  197. left: 0;
  198. bottom: 0;
  199. color: #fff;
  200. font-size: 24rpx;
  201. text-align: center;
  202. line-height: 46rpx;
  203. }
  204. ._sign_in_btn {
  205. width: 480rpx;
  206. height: 68rpx;
  207. border-radius: 68rpx;
  208. margin: 46rpx auto 0;
  209. text-align: center;
  210. color: #fff;
  211. position: relative;
  212. line-height: 68rpx;
  213. font-size: 36rpx;
  214. font-weight: 500;
  215. background: #c6c6c6;
  216. }
  217. ._sign_in_btn button.phone-button {
  218. width: 480rpx;
  219. height: 68rpx;
  220. position: absolute;
  221. left: 0;
  222. top: 0;
  223. z-index: 3;
  224. opacity: 0;
  225. }
  226. .sign-task-box {
  227. width: 704rpx;
  228. margin: auto;
  229. background: #fff;
  230. border-radius: 8px;
  231. margin-top: 28rpx;
  232. box-sizing: border-box;
  233. padding: 42rpx 28rpx;
  234. }
  235. .sign-task-box ._task_title {
  236. font-size: 36rpx;
  237. color: #303030;
  238. font-weight: 400;
  239. }
  240. .sign-task-box ._task_list {
  241. margin-top: 40rpx;
  242. }
  243. .sign-task-box ._task_item {
  244. display: flex;
  245. flex-direction: row;
  246. margin-bottom: 46rpx;
  247. }
  248. .sign-task-box ._task_item_left {
  249. width: 650rpx;
  250. display: flex;
  251. flex-direction: row;
  252. }
  253. ._task_item_left ._ico {
  254. width: 52rpx;
  255. height: 52rpx;
  256. padding-top: 10rpx;
  257. }
  258. ._task_item_left ._ico image {
  259. width: 52rpx;
  260. height: 52rpx;
  261. display: block;
  262. }
  263. ._task_item_left ._info {
  264. margin-left: 20rpx;
  265. }
  266. ._task_item_left ._title {
  267. font-size: 28rpx;
  268. color: #303030;
  269. vertical-align: top;
  270. }
  271. ._task_item_left ._des {
  272. font-size: 24rpx;
  273. color: #a2a2a2;
  274. }
  275. .sign-task-box ._task_item_right {
  276. width: 148rpx;
  277. padding-top: 10rpx;
  278. }
  279. .sign-task-box ._task_item_right ._btn {
  280. width: 148rpx;
  281. height: 52rpx;
  282. text-align: center;
  283. line-height: 52rpx;
  284. border-radius: 52rpx;
  285. font-size: 28rpx;
  286. }
  287. .activity-des {
  288. width: 704rpx;
  289. margin: auto;
  290. margin-top: 40rpx;
  291. font-size: 28rpx;
  292. color: #979797;
  293. padding-bottom: 100rpx;
  294. }
  295. .activity-des ._des {
  296. padding-top: 20rpx;
  297. font-size: 24rpx;
  298. }
  299. .dlg {
  300. width: 100vw;
  301. height: 100vh;
  302. z-index: 1001;
  303. background: rgba(0, 0, 0, 0.9);
  304. left: 0;
  305. top: 0;
  306. position: fixed;
  307. }
  308. .dlg ._layer {
  309. width: 100vw;
  310. height: 100vh;
  311. position: absolute;
  312. left: 0;
  313. top: 0;
  314. z-index: 0;
  315. }
  316. .sign-pop-body {
  317. width: 622rpx;
  318. height: 896rpx;
  319. position: absolute;
  320. left: calc(100vw / 2 - 622rpx / 2);
  321. top: calc(100vh / 2 - 896rpx / 2 - 60rpx);
  322. }
  323. .sign-pop-body ._body {
  324. width: 568rpx;
  325. height: 484rpx;
  326. position: absolute;
  327. left: 26rpx;
  328. top: 412rpx;
  329. z-index: 2;
  330. }
  331. .gift_wrap {
  332. width: 100%;
  333. height: 232rpx;
  334. box-sizing: border-box;
  335. }
  336. .coupon_node {
  337. width: 522rpx;
  338. height: 176rpx;
  339. margin: auto;
  340. display: flex;
  341. flex-direction: row;
  342. position: relative;
  343. }
  344. .coupon_node ._bg {
  345. width: 522rpx;
  346. height: 176rpx;
  347. position: absolute;
  348. left: 0;
  349. top: 0;
  350. z-index: 0;
  351. }
  352. .coupon_node ._node_left {
  353. width: 160rpx;
  354. display: flex;
  355. flex-direction: row;
  356. flex-wrap: nowrap;
  357. z-index: 1;
  358. position: relative;
  359. justify-content: center;
  360. align-items: baseline;
  361. color: #443E5B;
  362. }
  363. ._node_left._zk ._num {
  364. padding-top: 48rpx;
  365. height: 176rpx;
  366. font-size: 100rpx;
  367. font-weight: 600;
  368. box-sizing:border-box;
  369. }
  370. ._node_left._zk._small ._num {
  371. font-size: 56rpx;
  372. padding-top: 72rpx;
  373. }
  374. ._node_left._zk ._zhe {
  375. font-size: 32rpx;
  376. }
  377. ._node_left._cash ._num {
  378. padding-top: 48rpx;
  379. height: 176rpx;
  380. font-size: 100rpx;
  381. font-weight: 600;
  382. box-sizing:border-box;
  383. }
  384. ._node_left._cash._small ._num {
  385. font-size: 56rpx;
  386. padding-top: 72rpx;
  387. }
  388. ._node_left._cash ._unit {
  389. font-size: 32rpx;
  390. position: relative;
  391. top: -2rpx;
  392. padding-right: 2rpx;
  393. }
  394. .coupon_node ._node_right {
  395. position: relative;
  396. z-index: 1;
  397. text-align: center;
  398. white-space: nowrap;
  399. box-sizing: border-box;
  400. padding: 20rpx;
  401. }
  402. ._node_right ._coupont_title {
  403. font-size: 32rpx;
  404. font-weight: 600;
  405. }
  406. ._node_right ._coupon_sub_title {
  407. font-size: 28rpx;
  408. padding: 14rpx 0;
  409. }
  410. ._node_right ._coupon_sub_title:before, ._node_right ._coupon_sub_title:after {
  411. width: 5px;
  412. height: 5px;
  413. background: #443E5B;
  414. transform:rotate(45deg);
  415. margin: 0 10rpx;
  416. display: inline-block;
  417. content: "";
  418. vertical-align: middle;
  419. }
  420. ._node_right ._coupon_times {
  421. font-size: 24rpx;
  422. }
  423. .sign-pop-body .award_des {
  424. text-align: center;
  425. color: #BF2637;
  426. font-size: 28rpx;
  427. height: 120rpx;
  428. line-height: 120rpx;
  429. }
  430. .sign-pop-body ._btn {
  431. width: 360rpx;
  432. height: 76rpx;
  433. border-radius: 76rpx;
  434. text-align: center;
  435. color: #fff;
  436. line-height: 76rpx;
  437. margin: auto;
  438. font-size: 42rpx;
  439. }
  440. .sign-pop-body ._layer_bg {
  441. width: 622rpx;
  442. height: 896rpx;
  443. position: absolute;
  444. z-index: 0;
  445. left: 0;
  446. top: 0;
  447. display: block;
  448. }
  449. .dlg ._close {
  450. width: 54rpx;
  451. height: 54rpx;
  452. position: absolute;
  453. display: block;
  454. left: calc(100vw / 2 - 54rpx / 2);
  455. top: calc(100vh / 2 + 896rpx / 2 + 10rpx);
  456. }