东风启辰小程序端
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

556 lines
9.7KB

  1. /* pages/everyday/everyday.wxss */
  2. view{
  3. -webkit-overflow-scrolling: touch;
  4. }
  5. .showImg {
  6. position: relative;
  7. width: 750rpx;
  8. height: 616rpx;
  9. }
  10. .ruleBtn {
  11. right: 42rpx;
  12. top: 219rpx;
  13. position: fixed;
  14. width: 81rpx;
  15. height: 81rpx;
  16. }
  17. .title {
  18. height: 110rpx;
  19. line-height: 110rpx;
  20. width: 100%;
  21. text-align: center;
  22. font-size: 36rpx;
  23. font-weight: bold;
  24. }
  25. .menuBox {
  26. position: relative;
  27. width: 535rpx;
  28. height: 58rpx;
  29. margin: 0 auto;
  30. }
  31. .menu {
  32. width: 100%;
  33. height: 100%;
  34. }
  35. .menuBox>view {
  36. position: absolute;
  37. bottom: 0;
  38. font-size: 16rpx;
  39. text-align: center;
  40. }
  41. .menuBox>.leftTitle {
  42. left: 38rpx;
  43. width: 54rpx;
  44. height: 38rpx;
  45. line-height: 38rpx;
  46. }
  47. .menuBox>.centerTitle {
  48. left: 95rpx;
  49. width: 345rpx;
  50. height: 56rpx;
  51. line-height: 56rpx;
  52. color: #fff;
  53. font-size: 29rpx;
  54. }
  55. .menuBox>.rightTitle {
  56. right: 38rpx;
  57. width: 54rpx;
  58. height: 38rpx;
  59. line-height: 38rpx;
  60. }
  61. .swiperBox{
  62. position: relative;
  63. width: 615rpx;
  64. height: 424rpx;
  65. margin: 24rpx auto 0 auto;
  66. }
  67. .swiperBox>swiper{
  68. width: 100%;
  69. height: 100%;
  70. }
  71. .swiperBox>.arrowBtn{
  72. position: absolute;
  73. width: 13rpx;
  74. height: 29rpx;
  75. top: 50%;
  76. transform: translateY(-50%);
  77. }
  78. .fragmentBox{
  79. position: relative;
  80. width: 100%;
  81. height: 100%;
  82. border-radius: 26rpx;
  83. }
  84. .fragmentComplete1,.fragmentComplete2,.fragmentComplete3,.fragmentComplete4{
  85. position: absolute;
  86. }
  87. .fragmentComplete1{
  88. left: 0;
  89. top: 0;
  90. width: 396rpx;
  91. height: 237rpx;
  92. }
  93. .fragmentComplete2{
  94. right: 0;
  95. top: 0;
  96. width: 298rpx;
  97. height: 308rpx;
  98. }
  99. .fragmentComplete3{
  100. left: 0;
  101. bottom: 0;
  102. width: 322rpx;
  103. height: 264rpx;
  104. }
  105. .fragmentComplete4{
  106. right: 0;
  107. bottom: 0;
  108. width: 298rpx;
  109. height: 193rpx;
  110. }
  111. .fragmentComplete{
  112. width: 100%;
  113. height: 100%;
  114. }
  115. .btnBox{
  116. position: relative;
  117. padding-top: 22rpx;
  118. padding-bottom: 38rpx;
  119. margin: 0 auto;
  120. }
  121. .btnBox>.btn{
  122. display: inline-block;
  123. width: 279rpx;
  124. height: 100%;
  125. line-height: 49rpx;
  126. text-align: center;
  127. border: 2rpx solid #345489;
  128. box-sizing: border-box;
  129. font-size: 21rpx;
  130. color: #333333;
  131. border-radius: 15rpx;
  132. }
  133. .btnBox>.btn.select{
  134. background-color: #345489;
  135. color: #ffffff;
  136. }
  137. .mask{
  138. position: fixed;
  139. left: 0;
  140. top: 0;
  141. width: 100%;
  142. height: calc(100vh - 120rpx);
  143. display: flex;
  144. align-items: center;
  145. justify-content: center;
  146. background-color: rgba(0, 0, 0, 0.5);
  147. }
  148. .taskBox{
  149. position: relative;
  150. width: 567rpx;
  151. height: 649rpx;
  152. border-radius: 20rpx;
  153. }
  154. .taskBox>.title{
  155. height: 77rpx;
  156. line-height: 77rpx;
  157. color: #ffffff;
  158. border-top-left-radius: 20rpx;
  159. border-top-right-radius: 20rpx;
  160. background-color: #345486;
  161. }
  162. .taskBox>.contentBox{
  163. position: relative;
  164. width: 100%;
  165. height: calc(100% - 77rpx);
  166. background-color: #ffffff;
  167. border-bottom-left-radius: 20rpx;
  168. border-bottom-right-radius: 20rpx;
  169. }
  170. .taskBox>.contentBox>.name{
  171. width: 100%;
  172. height: 107rpx;
  173. line-height: 107rpx;
  174. font-size: 33rpx;
  175. text-align: center;
  176. padding-top: 38rpx;
  177. font-weight: bold;
  178. }
  179. .taskBox>.contentBox>.taskImg{
  180. width: 488rpx;
  181. height: 268rpx;
  182. margin: 0 auto;
  183. border-radius: 19rpx;
  184. }
  185. .taskBox>.contentBox>.btn{
  186. width: 347rpx;
  187. height: 62rpx;
  188. line-height: 62rpx;
  189. text-align: center;
  190. color: #ffffff;
  191. font-size: 28rpx;
  192. border-radius: 10rpx;
  193. margin: 42rpx auto 0 auto;
  194. background-color: #345486;
  195. position: relative;
  196. }
  197. .closeBtn {
  198. background: none;
  199. border: 2rpx solid #fff;
  200. color: #fff;
  201. border-radius: 50%;
  202. text-align: center;
  203. height: 40rpx;
  204. line-height: 40rpx;
  205. width: 40rpx;
  206. font-size: 30rpx;
  207. padding: 2rpx;
  208. position: absolute;
  209. }
  210. /* use cross as close button */
  211. .closeBtn::before {
  212. content: "\2716";
  213. }
  214. .receive{
  215. width:100%;
  216. height:61rpx;
  217. background-color: #28558D;
  218. line-height: 61rpx;
  219. text-align: center;
  220. font-size:30rpx;
  221. font-family:PingFang;
  222. font-weight:400;
  223. color:rgba(255,255,255,1);
  224. border-radius: 15rpx;
  225. }
  226. .shareBtn{
  227. position: absolute;
  228. left: 0;
  229. top: 0;
  230. z-index: 2;
  231. opacity: 0;
  232. }
  233. .lockSty{
  234. position: absolute;
  235. width:64rpx;
  236. height:34rpx;
  237. }
  238. .lockIcon{
  239. width: 100%;
  240. height: 100%;
  241. }
  242. .lock1{
  243. top: 3rpx;
  244. left: 110rpx;
  245. }
  246. .lock2{
  247. top: 3rpx;
  248. right: 90rpx;
  249. }
  250. .lock3{
  251. bottom: 0rpx;
  252. left: 110rpx;
  253. }
  254. .lock4{
  255. bottom: 0rpx;
  256. right: 90rpx;
  257. }
  258. .signBtnGroup{
  259. position: absolute;
  260. left: 50%;
  261. top: 50%;
  262. transform: translate(-50%,-50%);
  263. }
  264. .signBtnGroup>.btn{
  265. width: 347rpx;
  266. height: 62rpx;
  267. line-height: 62rpx;
  268. text-align: center;
  269. color: #ffffff;
  270. font-size: 28rpx;
  271. border-radius: 10rpx;
  272. margin: 42rpx auto 0 auto;
  273. background-color: #345486;
  274. position: relative;
  275. }
  276. .gamaRuleFrame{
  277. position: fixed;
  278. left: 0;
  279. top: 0;
  280. width: 750rpx;
  281. height: calc(100vh - 120rpx);
  282. background-color: rgba(000, 000, 000, 0.2);
  283. display: flex;
  284. align-items: center;
  285. justify-content: center;
  286. }
  287. .gameRuleClose{
  288. position: absolute;
  289. top: -10rpx;
  290. right: -10rpx;
  291. height: 40rpx;
  292. width: 40rpx;
  293. }
  294. .openTask{
  295. position: absolute;
  296. left: 50%;
  297. bottom: 100rpx;
  298. transform: translateX(-50%);
  299. width: 347rpx;
  300. height: 62rpx;
  301. }
  302. .gameRuleGroup{
  303. width: 609rpx;
  304. height: 692rpx;
  305. position: relative;
  306. }
  307. .gameRuleIcon{
  308. width: 100%;
  309. height: 100%;
  310. }
  311. .successPop{
  312. position: fixed;
  313. top: 0;
  314. left: 0;
  315. width: 100%;
  316. height: calc(100vh - 120rpx);
  317. background-color: rgba( 000, 000, 000, 0.3);
  318. display: flex;
  319. align-items: center;
  320. justify-content: center;
  321. }
  322. .successGroup{
  323. position: relative;
  324. width:455rpx;
  325. height:426rpx;
  326. background-color: white;
  327. display: flex;
  328. flex-direction: column;
  329. align-items: center;
  330. border-radius: 20rpx;
  331. }
  332. .successIcon{
  333. position: absolute;
  334. top: -33rpx;
  335. left: 50%;
  336. transform: translateX(-50%);
  337. width: 114rpx;
  338. height: 114rpx;
  339. }
  340. .titleGroup{
  341. width: 100%;
  342. height: 63rpx;
  343. background-color: #355485;
  344. border-top-left-radius: 20rpx;
  345. border-top-right-radius: 20rpx;
  346. }
  347. .prizePic{
  348. width: 310rpx;
  349. height: 116rpx;
  350. margin-bottom: 10rpx;
  351. }
  352. .successTip{
  353. font-size:28rpx;
  354. font-family:PingFangSC;
  355. font-weight:bold;
  356. color:rgba(52,84,132,1);
  357. line-height: 28rpx;
  358. text-align: center;
  359. margin-top: 50rpx;
  360. margin-bottom: 13rpx;
  361. }
  362. .prizeName{
  363. font-size:21rpx;
  364. font-family:PingFangSC;
  365. font-weight:400;
  366. color:rgba(0,0,0,1);
  367. line-height:21rpx;
  368. text-align: center;
  369. margin-bottom: 30rpx;
  370. }
  371. .gameRuleClose2{
  372. position: absolute;
  373. top: 0rpx;
  374. right: -10rpx;
  375. width: 31rpx;
  376. height: 29rpx;
  377. }
  378. .startRegister{
  379. width:278rpx;
  380. height:50rpx;
  381. background-color: #345489;
  382. border-radius: 15rpx;
  383. text-align: center;
  384. font-size:21rpx;
  385. font-family:PingFangSC;
  386. font-weight:400;
  387. color:rgba(255,255,255,1);
  388. line-height:50rpx;
  389. position: relative;
  390. }
  391. .friendTip{
  392. position: relative;
  393. width:568rpx;
  394. height:486rpx;
  395. border-radius: 20rpx;
  396. background-color: white;
  397. display: flex;
  398. flex-direction: column;
  399. align-items: center;
  400. }
  401. .friendTipTitle{
  402. width:568rpx;
  403. height:78rpx;
  404. line-height: 78rpx;
  405. font-size:34rpx;
  406. font-family:PingFang;
  407. font-weight:bold;
  408. color:rgba(255,255,255,1);
  409. background-color: #355485;
  410. border-top-left-radius: 20rpx;
  411. border-top-right-radius: 20rpx;
  412. text-align: center;
  413. margin-bottom: 61rpx;
  414. }
  415. .tipText{
  416. font-size:26rpx;
  417. font-family:PingFang;
  418. font-weight:500;
  419. color:rgba(35,24,21,1);
  420. line-height:46rpx;
  421. }
  422. .joinBtn{
  423. margin-top: 53rpx;
  424. width:347rpx;
  425. height:63rpx;
  426. background-color: #355485;
  427. text-align: center;
  428. font-size:30rpx;
  429. font-family:PingFang;
  430. font-weight:400;
  431. color:rgba(255,255,255,1);
  432. line-height: 63rpx;
  433. border-radius: 20rpx;
  434. }
  435. .getUserMsgBtn{
  436. position: absolute;
  437. top: 0;
  438. left: 0;
  439. padding: 0;
  440. margin: 0;
  441. opacity: 0;
  442. }
  443. .starBtn{
  444. width: 347rpx;
  445. height: 65rpx;
  446. }
  447. .everyDaySign{
  448. width: 347rpx;
  449. height: 62rpx;
  450. }
  451. .everyDayTitle{
  452. width: 567rpx;
  453. height: 79rpx;
  454. }
  455. .newImagesGroup{
  456. position: relative;
  457. width: 608rpx;
  458. height: 691rpx;
  459. }
  460. .newImages28{
  461. width: 100%;
  462. height: 100%;
  463. }
  464. .newImages29{
  465. position: absolute;
  466. left: 50%;
  467. transform: translateX(-50%);
  468. bottom: 67rpx;
  469. width: 347rpx;
  470. height: 62rpx;
  471. }
  472. .signText{
  473. position: absolute;
  474. left: 0;
  475. top: 128rpx;
  476. line-height: 34rpx;
  477. font-size:34rpx;
  478. font-family:PingFangSC;
  479. font-weight:600;
  480. color:rgba(0,0,0,1);
  481. text-align: center;
  482. width: 100%;
  483. }
  484. .signPic{
  485. position: absolute;
  486. left: 50%;
  487. transform: translateX(-50%);
  488. top: 190rpx;
  489. width: 491rpx;
  490. height: 337rpx;
  491. }
  492. .cumulativeGroup{
  493. width:483rpx;
  494. height:86rpx;
  495. line-height:104rpx;
  496. font-size:28rpx;
  497. font-family:PingFangSC;
  498. font-weight:400;
  499. color:rgba(255,255,255,1);
  500. background-color: #375387;
  501. margin: 0 auto;
  502. text-align: center;
  503. border-radius: 20rpx;
  504. margin-top: -20rpx;
  505. margin-bottom: 30rpx;
  506. }
  507. .prizeDesc{
  508. position: fixed;
  509. top: 0;
  510. left: 0;
  511. width: 100%;
  512. height: 100%;
  513. background-color: rgba(000, 000, 000, 0.34);
  514. display: flex;
  515. align-items: center;
  516. justify-content: center;
  517. padding-bottom: 120rpx;
  518. box-sizing: border-box;
  519. }
  520. .mycenterTipWindow1{
  521. width: 100%;
  522. height: 100%;
  523. }
  524. .mycenterTipWindowGroup{
  525. position: relative;
  526. width: 611rpx;
  527. height: 530rpx;
  528. }
  529. .mycenterTipBtnGroup{
  530. position: absolute;
  531. left: 50%;
  532. transform: translateX(-50%);
  533. top: 320rpx;
  534. }
  535. .closeDescIcon{
  536. position: absolute;
  537. top: -37rpx;
  538. right: -38rpx;
  539. width: 38rpx;
  540. height: 37rpx;
  541. }
  542. .mycenterTipBtn{
  543. width: 346rpx;
  544. height: 62rpx;
  545. }