东风启辰小程序端
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.

553 line
9.6KB

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