myMember.wxss 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910
  1. /* pages/myMember/myMember.wxss */
  2. @import "../common.wxss";
  3. @import "../../wxParse/wxParse.wxss";
  4. @font-face {
  5. font-family: "SC-Bold";
  6. src: url(/static/4082_方正粗圆_GBK.ttf);
  7. }
  8. @font-face {
  9. font-family: "SC-Regular";
  10. src: url(/static/FZY3JW.TTF);
  11. }
  12. @font-face {
  13. font-family: "iconfont";
  14. src: url("iconfont.eot?t=1559096289773");
  15. /* IE9 */
  16. src: url("iconfont.eot?t=1559096289773#iefix") format("embedded-opentype"),
  17. /* IE6-IE8 */
  18. url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKcAAsAAAAABkwAAAJQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApUYwE2AiQDCAsGAAQgBYRtBzEbigXInpo8KUIbQwhFQm+LQTgb4uG/Nfb3zQ4mEomiWb3hpxOpJIiNkol80RL2/9baLKaROpjtabqEWcLryp8Vnx3UElXMuocCHQ+FR+RdAozrFwWRT9w7/RPog8wHlONeNNakSV1AXRxIAe6FUWSFEnjD2AUv8DGBWoOqcJtNHd0oTWavCsSTpggorRCRZZavFiobDmbxrkJ1ek0vkLfo+/FfOKpJKgp2085No4xqfnWKipdy2kVAiBLQ8QoUmIdk4qAxsyVRMC5RbSbJKHSs+uDXsgzc4qgOwf46u7Ye9EPlM6k89aPmEzzWRO2Q3kk/jGj318vkpaOTi43NPIVc7D4vlsN5fCp9vL///i3eOzl5F4lGIlzjKI/7+wtRDYSydNGDOASnrb9D17mL/9V1GXyq/4pCZdkwH1K9F2/wN1QD+7KhsV0pa6rG4aT9LC21alHCgVY/U60dpy6Eah0TfFUGMhSqjZOZnUeFOguoVG0FteY0H6/ThkoUuQazFgBCs1skjT5QaPZKZvYbFTr9oVJzFKh1FG0X1pmM+4wNCgIDGYsjWJMcm7gelhHXd4IyYAo0r4n4XqC+FschPljON4MNdIkt/qASZoxgQh0LN4HnwDQd7FJHB4nxKmNuLBAgTW/iJcdCGTZQQMAAGSYagWkkDhsJRjMZlc93AooBJgHt6Kkr9gKUT5seC+EFB5DNRntQz6O84hukCGMYAiMohwVrAvOAyeTA3OZ5OiBheOqElCsm4AwiQ4389mbr745BLduWwplZqHrWhBFNHEAIAAA=")
  19. format("woff2"),
  20. url("iconfont.woff?t=1559096289773") format("woff"),
  21. url("iconfont.ttf?t=1559096289773") format("truetype"),
  22. /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  23. url("iconfont.svg?t=1559096289773#iconfont") format("svg");
  24. /* iOS 4.1- */
  25. }
  26. .iconfont {
  27. font-family: "iconfont" !important;
  28. font-style: normal;
  29. -webkit-font-smoothing: antialiased;
  30. -moz-osx-font-smoothing: grayscale;
  31. }
  32. .icon-xiayibu:before {
  33. content: "\e644";
  34. color: #000;
  35. }
  36. .right-icon {
  37. font-size: 40rpx;
  38. margin-left: 10rpx;
  39. transform: rotateY(180deg);
  40. }
  41. .succ-icon {
  42. position: absolute;
  43. left: 16rpx;
  44. top: 8rpx;
  45. border-radius: 50%;
  46. border: 1rpx solid #cf4f51;
  47. background-color: #cf4f51;
  48. }
  49. .all-view {
  50. }
  51. .pages{
  52. background-size: 100% 100%;
  53. background-repeat: no-repeat;
  54. }
  55. page {
  56. background: #fff;
  57. padding-bottom: 245rpx;
  58. box-sizing: border-box;
  59. }
  60. .menutop {
  61. /* width: calc(100% + 20rpx); */
  62. width: 100%;
  63. /* height: 425rpx; */
  64. opacity: 1;
  65. position: relative;
  66. background-size: cover;
  67. /* margin-left: -20rpx; */
  68. }
  69. .diy-top {
  70. position: fixed;
  71. left: 0;
  72. width: 100%;
  73. top: 0;
  74. z-index: 10000;
  75. }
  76. .diy-top.activeTitle {
  77. /* background: #90CD4E; */
  78. background: #fff;
  79. }
  80. /* 2022/8/19 */
  81. .menutop .mine {
  82. display: flex;
  83. align-items: center;
  84. justify-content: space-between;
  85. margin: 45rpx 30rpx 20rpx 30rpx;
  86. padding: 30rpx;
  87. box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.03);
  88. /* background-color: #ccc; */
  89. background-color: #ffffff;
  90. }
  91. .menutop .mine > view > view {
  92. font-size: 26rpx;
  93. font-family: "PingFang SC, PingFang SC-Regular";
  94. font-weight: 400;
  95. color: #808080;
  96. margin-bottom: 10rpx;
  97. }
  98. .menutop .mine .name {
  99. font-size: 36rpx;
  100. font-family: "PingFang SC, PingFang SC-Bold";
  101. font-weight: 700;
  102. color: #1a1a1a;
  103. }
  104. .menutop .mine .micon {
  105. /* margin-right: 10rpx; */
  106. vertical-align: middle;
  107. }
  108. .menutop .mine .auter {
  109. width: 130rpx;
  110. height: 130rpx;
  111. border-radius: 50%;
  112. }
  113. .menutop .vip-box {
  114. display: flex;
  115. justify-content: space-between;
  116. margin: 30rpx;
  117. }
  118. .menutop .vip-box .vip-item {
  119. position: relative;
  120. width: 330rpx;
  121. /* height: 166rpx; */
  122. padding: 33rpx 0;
  123. color: #ffe0b2;
  124. text-align: center;
  125. }
  126. .active-line {
  127. border: 2rpx solid #CF4F51;
  128. border-radius: 18rpx;
  129. box-sizing: border-box;
  130. }
  131. .menutop .vip-box .lifelongBg {
  132. color: #3f1c00;
  133. }
  134. .menutop .vip-box .vip-item .icon-box {
  135. margin-bottom: 8rpx;
  136. font-weight: 700;
  137. }
  138. .menutop.menutop .vip-box .vip-item .vip-img {
  139. width: 43rpx;
  140. height: 38rpx;
  141. margin-right: 16rpx;
  142. }
  143. .menutop .vip-box .vip-item .price {
  144. display: inline;
  145. margin: 0 8rpx;
  146. color: #ffe0b2;
  147. font-weight: 600;
  148. }
  149. .menutop .vip-box .vip-item .unit {
  150. font-size: 22rpx;
  151. }
  152. .menutop .vip-box .lifelongBg .price {
  153. color: #3f1c00;
  154. }
  155. .work {
  156. margin: 0 30rpx 30rpx;
  157. }
  158. .work .title {
  159. position: relative;
  160. font-size: 30rpx;
  161. font-family: "PingFang SC, PingFang SC-Bold";
  162. font-weight: 700;
  163. color: #1a1a1a;
  164. margin-bottom: 40rpx;
  165. }
  166. .work .title::after {
  167. content: "";
  168. position: absolute;
  169. width: 90rpx;
  170. height: 12rpx;
  171. background: #ffdc2f;
  172. border-radius: 6rpx;
  173. bottom: 0;
  174. display: block;
  175. z-index: -1;
  176. }
  177. .work .item {
  178. display: flex;
  179. justify-content: space-around;
  180. align-items: center;
  181. }
  182. .work .work-item {
  183. display: flex;
  184. flex-direction: column;
  185. align-items: center;
  186. }
  187. .work .work-item image {
  188. width: 78rpx;
  189. height: 78rpx;
  190. margin-bottom: 10rpx;
  191. }
  192. .work .work-item text {
  193. font-size: 26rpx;
  194. font-family: "PingFang SC, PingFang SC-Regular";
  195. font-weight: 400;
  196. color: #333333;
  197. }
  198. .illustrate {
  199. position: relative;
  200. font-size: 30rpx;
  201. font-family: "PingFang SC, PingFang SC-Bold";
  202. font-weight: 700;
  203. color: #1a1a1a;
  204. margin-bottom: 40rpx;
  205. margin-left: 30rpx;
  206. }
  207. .illustrate::after {
  208. content: "";
  209. position: absolute;
  210. width: 90rpx;
  211. height: 12rpx;
  212. background: #ffdc2f;
  213. border-radius: 6rpx;
  214. bottom: 0;
  215. display: block;
  216. z-index: -1;
  217. }
  218. .diy-menu {
  219. display: flex;
  220. flex-direction: row;
  221. align-items: center;
  222. padding: 0 10rpx;
  223. box-sizing: border-box;
  224. position: relative;
  225. }
  226. .diy-title {
  227. position: absolute;
  228. left: 50%;
  229. transform: translateX(-50%);
  230. font-size: 35rpx;
  231. font-family: "PingFang SC, PingFang SC-Regular";
  232. font-weight: 400;
  233. text-align: center;
  234. color: #1a1a1a;
  235. white-space: nowrap;
  236. letter-spacing: -1rpx;
  237. }
  238. .diy-bottom {
  239. width: 630rpx;
  240. height: 242rpx;
  241. opacity: 1;
  242. border-radius: 20rpx 20rpx 0px 0px;
  243. position: absolute;
  244. left: 50%;
  245. transform: translateX(-50%);
  246. bottom: 0;
  247. display: flex;
  248. flex-direction: column;
  249. margin-left: 10rpx;
  250. background-size: 100%, 100%;
  251. }
  252. .diy-bbom::after {
  253. width: 630rpx;
  254. height: 80rpx;
  255. left: 0;
  256. top: 0;
  257. z-index: -1;
  258. content: "";
  259. position: absolute;
  260. opacity: 0.41;
  261. background: #6a9e55;
  262. }
  263. .diy-btop {
  264. height: 162rpx;
  265. width: 100%;
  266. padding: 0 27rpx;
  267. box-sizing: border-box;
  268. display: flex;
  269. flex-direction: row;
  270. align-items: center;
  271. }
  272. .userinfo {
  273. display: flex;
  274. flex-direction: column;
  275. }
  276. .userinfo .name {
  277. font-size: 38rpx;
  278. font-family: "PingFang SC, PingFang SC-Regular";
  279. font-weight: 400;
  280. text-align: left;
  281. color: #ffffff;
  282. line-height: 30rpx;
  283. }
  284. .userinfo .uwrap {
  285. margin-top: 5rpx;
  286. }
  287. .vipcolor {
  288. font-size: 200rpx;
  289. color: rgba(180, 223, 243, 0.17);
  290. position: absolute;
  291. right: 0;
  292. bottom: 0;
  293. }
  294. .bavatar {
  295. width: 97rpx;
  296. height: 97rpx;
  297. opacity: 1;
  298. border: 4rpx solid #ffffff;
  299. border-radius: 50%;
  300. margin-right: 40rpx;
  301. background: white;
  302. }
  303. .uico {
  304. vertical-align: middle;
  305. width: 35rpx;
  306. }
  307. .username {
  308. vertical-align: middle;
  309. display: inline-block;
  310. font-size: 28rpx;
  311. font-family: "PingFang SC, PingFang SC-Regular";
  312. font-weight: 400;
  313. text-align: left;
  314. color: #ffffff;
  315. letter-spacing: 0rpx;
  316. margin-left: 15rpx;
  317. }
  318. .cardno {
  319. font-size: 32rpx;
  320. font-weight: 400;
  321. color: white;
  322. }
  323. .diy-bbom {
  324. width: 630rpx;
  325. height: 80rpx;
  326. position: relative;
  327. z-index: 120;
  328. padding: 0 27rpx;
  329. box-sizing: border-box;
  330. opacity: 1;
  331. font-size: 28rpx;
  332. font-family: "PingFang SC, PingFang SC-Regular";
  333. font-weight: 400;
  334. text-align: left;
  335. color: #ffffff;
  336. letter-spacing: -1rpx;
  337. display: flex;
  338. align-items: center;
  339. }
  340. .arrowico {
  341. width: 42rpx;
  342. height: 42rpx;
  343. transform: rotate(180deg);
  344. }
  345. .vipinfo {
  346. width: 94%;
  347. margin: 10rpx auto;
  348. }
  349. .sv {
  350. height: 200rpx;
  351. text-align: center;
  352. }
  353. /* .tip{
  354. position: absolute;
  355. top: 0;
  356. left: 0;
  357. font-size: 22rpx;
  358. background: #D9BE8B;
  359. color: #FFFFFF;
  360. padding: 2rpx 6rpx;
  361. } */
  362. .box {
  363. width: 50%;
  364. height: 150rpx;
  365. margin: 20rpx;
  366. border: 1px solid #e2d6bf;
  367. position: relative;
  368. }
  369. .btn {
  370. width: 90%;
  371. margin: 15rpx auto;
  372. background: #ffdc2f;
  373. color: #1a1a1a;
  374. color: #fff;
  375. padding: 0 25rpx;
  376. box-sizing: border-box;
  377. height: 91rpx;
  378. line-height: 91rpx;
  379. text-align: center;
  380. border-radius: 46px;
  381. transition: all 0.5s;
  382. }
  383. .btn-gary {
  384. width: 90%;
  385. margin: 15rpx auto;
  386. background: #999999;
  387. color: white;
  388. padding: 0 25rpx;
  389. box-sizing: border-box;
  390. height: 91rpx;
  391. line-height: 91rpx;
  392. text-align: center;
  393. border-radius: 46px;
  394. transition: all 0.5s;
  395. }
  396. .price {
  397. font-size: 45rpx;
  398. color: #bbab8c;
  399. }
  400. .remark {
  401. font-size: 30rpx;
  402. color: #cfccc7;
  403. margin-top: 10rpx;
  404. padding: 0 10rpx;
  405. }
  406. .up-view {
  407. /* position: fixed;
  408. bottom: 0; */
  409. width: 100%;
  410. transition: all 0.5s;
  411. border-top: 1px solid whitesmoke;
  412. }
  413. .info-item {
  414. /* padding-left: 4rpx; */
  415. display: flex;
  416. align-items: center;
  417. }
  418. .info-item .icon-box {
  419. width: 30rpx;
  420. margin-right: 10rpx;
  421. display: flex;
  422. align-items: center;
  423. }
  424. .zz {
  425. position: relative;
  426. z-index: 1000;
  427. background: white;
  428. width: 100%;
  429. }
  430. .bbb {
  431. position: fixed;
  432. background-color: white;
  433. z-index: 99999;
  434. bottom: 0;
  435. width: 750rpx;
  436. }
  437. .Agreement {
  438. /* margin: 15rpx auto; */
  439. width: 94%;
  440. font-size: 30rpx;
  441. /* position: fixed; */
  442. padding-left: 45rpx;
  443. background-color: white;
  444. z-index: 100;
  445. /* padding-bottom: 10px; */
  446. }
  447. .isavitve::after {
  448. content: "";
  449. background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAAwCAYAAACrF9JNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA39pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ZjIzMTIzYy02NzMwLTkyNDItOWZkMS0yMDExYThmZjczZGEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkNBNUI3ODM3N0I4MTFFOTk2RDdEMUQ1QTk3OTVCRDEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkNBNUI3ODI3N0I4MTFFOTk2RDdEMUQ1QTk3OTVCRDEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjkyYmUxM2QzLTE3Y2MtNzU0NC1iZWRmLTEwYThmYjkzNmUxMiIgc3RSZWY6ZG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmRiYjc5YTU4LTcwYjItZmM0MS1hNzVmLTM2Y2MxYzA1MmM4MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlSVNTsAAANxSURBVHja3JpbSBRRGMc/03bV9bYX1l0RL5i1KhGFYFcfsqICiSCIHoQg6CEIggiCIOgxKoKgXoIiIoggKijN1MrSl+ip+0VQ6qE1d7XSVne9bP8zO+vumrvOzM7sXD74PezszJn58Z2d851zNiscDlN8DDy7QAaIbHAdtLEPOWS8MIHbYG/0gNEk88E9sCP+oJEki8FDsHnhF0aRdIBOsG6xL40gWQa6QV2yE5bpXLAG9KcS1LtkA3gJqpY6Ua+SjaAXuIWcrEfJZtAD7EIv0JvkLtABisRcpCfJfeA+P+CTESUP8qWaScrFepA8Cq7xRTcZUfIUuASy0mlEqxUPkzoLTsjRmBYlWbe8Ag7L1aDWJJeDG+CAnI1qSTIX3AGtcjesFckC8ABsVaJxLUhaQTtYr9QN1JYs5Se7a5S8iZqSFeAJWKX0jdSSrAVdoDITN1NDcjWfQZesr+aiUrLVbKDguI/8A32qlnVN4LkSgs767ZRjLiCLo0rV2pUND2zBySZno+ZCJycYjdHBV6p111Z+oM9VIoPR8A/001/foCqZZCXaXbUEMyHJiuybfE0aN8fIIpPFKrnRfHtlguDI596kgkp31+Pg3GJzQVfDTjIV2Gnc+4nGhl6Ly2Cxmxy1W+Y/+7720eTYd1UmzWfA+WST3Zy8yDpUoctD1qpG4YIlZeSsa4nron0U8A9lfGWASV0Ep1Od5H3ziGanp0SJWhzV5PTE6vefH7vRRYcEPZSckmyyexUcW+rEmeAEed+202woIEiUjX32FZtigh+6aeq3N+NrPGwV7RY4JPQCJvgDGZ0O/JoXtVU3/f+SsVVAMLYb5/vygqb+eEU9nByS0Y3P/WIvnJsJkvddB5dZblJZWpvwUmFd1LGyOS6DXRQY/Sb6AdOVZG8QtqK9W2oD4blZdN2YKBseitz1lGctX9BFu5DB4YwX6Gwv4jFFNl/SCi6j+I06PS3c0FJSmbiXOvy+E4X3iOT2pWaS7Sb1yiEYEw1xXTc04U84zjKYjqBUSVbms33BBiUGWJa1UGAMQ8wkhokeyV00ne7q4Se75UqVSeHwHDeOyhliMrmW76KKCSoVQiU3gqfASToMIZLb+OWKEtJpLCW5hyJ/ALKQjiOVZBs/2TWTziOZ5BGKbLxkkwFiMcmT4DKlufGppfgnwAC5sdqYo2QDLQAAAABJRU5ErkJggg==");
  450. background-size: 100% 100%;
  451. width: 45rpx;
  452. height: 45rpx;
  453. position: absolute;
  454. right: 0;
  455. bottom: 0;
  456. }
  457. .vipitem {
  458. width: 307rpx;
  459. height: 248rpx;
  460. opacity: 1;
  461. background: #fff8ec;
  462. border: 1rpx solid #feedc7;
  463. border-radius: 16rpx;
  464. position: relative;
  465. z-index: 20;
  466. padding: 0 20rpx;
  467. box-sizing: border-box;
  468. display: flex;
  469. flex-direction: column;
  470. justify-content: center;
  471. align-items: center;
  472. }
  473. .vipitemactive {
  474. background: #ffdc9f;
  475. border: 1px solid #fb4300;
  476. }
  477. .vipitemactive .vipico {
  478. color: #cc8c1c;
  479. opacity: 0.1;
  480. }
  481. .vipico {
  482. font-size: 230rpx;
  483. color: #fcf2df;
  484. position: absolute;
  485. left: 50%;
  486. transform: translateX(-50%);
  487. bottom: -25rpx;
  488. z-index: -1;
  489. }
  490. .vipitem .remark {
  491. opacity: 1;
  492. font-size: 24rpx;
  493. font-family: "PingFang SC, PingFang SC-Medium";
  494. font-weight: 500;
  495. text-align: left;
  496. color: #1a1a1a;
  497. letter-spacing: 0rpx;
  498. margin-top: 16rpx;
  499. }
  500. .vipitem .price {
  501. font-size: 42rpx;
  502. font-family: "PingFang SC, PingFang SC-Medium";
  503. font-weight: 500;
  504. text-align: left;
  505. color: #fd652d;
  506. letter-spacing: 0rpx;
  507. margin-top: 20rpx;
  508. }
  509. .vipitem .price text {
  510. font-size: 22rpx;
  511. font-family: "PingFang SC, PingFang SC-Medium";
  512. font-weight: 500;
  513. text-align: left;
  514. color: #fd652d;
  515. letter-spacing: 0rpx;
  516. }
  517. .vipitem .vipicos {
  518. width: 43rpx;
  519. height: 38rpx;
  520. margin-right: 15rpx;
  521. }
  522. .vipitem .tip {
  523. font-size: 28rpx;
  524. font-family: "PingFang SC, PingFang SC-Bold";
  525. font-weight: 700;
  526. text-align: left;
  527. color: #1a1a1a;
  528. letter-spacing: -1rpx;
  529. display: flex;
  530. flex-direction: row;
  531. align-items: center;
  532. margin-top: 6rpx;
  533. }
  534. .flex-bet-wrap {
  535. padding: 0 60rpx;
  536. margin-top: 30rpx;
  537. box-sizing: border-box;
  538. display: flex;
  539. flex-direction: row;
  540. justify-content: space-between;
  541. margin-bottom: 30rpx;
  542. }
  543. .xuanzhongs {
  544. position: absolute;
  545. width: 32rpx;
  546. height: 32rpx;
  547. opacity: 1;
  548. color: #fb4300;
  549. left: 13rpx;
  550. top: 13rpx;
  551. }
  552. .tipwrap {
  553. display: flex;
  554. flex-direction: column;
  555. }
  556. .tiptitle {
  557. display: flex;
  558. flex-direction: row;
  559. align-items: center;
  560. font-size: 30rpx;
  561. font-family: "PingFang SC, PingFang SC-Bold";
  562. font-weight: 700;
  563. text-align: left;
  564. color: #9ddb52;
  565. line-height: 45rpx;
  566. margin: 42rpx auto 12rpx auto;
  567. }
  568. .tiptitle text {
  569. margin: 0 35rpx;
  570. }
  571. .lintico {
  572. background: #9ddb52;
  573. width: 57rpx;
  574. height: 6rpx;
  575. opacity: 1;
  576. position: relative;
  577. }
  578. .lintico::after {
  579. position: absolute;
  580. content: "";
  581. right: -15rpx;
  582. width: 8rpx;
  583. height: 8rpx;
  584. opacity: 1;
  585. background: #9ddb52;
  586. border-radius: 50%;
  587. }
  588. .lintico:last-child::after {
  589. position: absolute;
  590. content: "";
  591. left: -15rpx;
  592. width: 8rpx;
  593. height: 8rpx;
  594. opacity: 1;
  595. background: #9ddb52;
  596. border-radius: 50%;
  597. }
  598. .liitemwrap {
  599. display: flex;
  600. flex-direction: row;
  601. padding: 0 30rpx;
  602. box-sizing: border-box;
  603. flex-wrap: wrap;
  604. align-content: flex-start;
  605. }
  606. .litem {
  607. display: flex;
  608. flex-direction: column;
  609. width: 25%;
  610. justify-content: center;
  611. align-items: center;
  612. margin-bottom: 24rpx;
  613. }
  614. .litem image {
  615. width: 54rpx;
  616. height: 54rpx;
  617. }
  618. .litem .textx {
  619. margin-top: 14rpx;
  620. font-size: 26rpx;
  621. font-family: "PingFang SC, PingFang SC-Regular";
  622. font-weight: 400;
  623. text-align: center;
  624. color: #1a1a1a;
  625. line-height: 30rpx;
  626. }
  627. .pwo {
  628. /* position: fixed; */
  629. width: 100%;
  630. /* height: 200rpx; */
  631. display: flex;
  632. flex-direction: column;
  633. margin-left: 50%;
  634. transform: translateX(-50%);
  635. bottom: 40rpx;
  636. z-index: 1000;
  637. background: white;
  638. }
  639. /* 新增 */
  640. .vip-check {
  641. width: 630rpx;
  642. height: 93rpx;
  643. background: #fff8ec;
  644. border: 1px solid #fb4300;
  645. border-radius: 20rpx;
  646. display: flex;
  647. align-items: center;
  648. justify-content: space-between;
  649. padding: 0 19rpx 0 35rpx;
  650. margin: 30rpx auto 0 auto;
  651. box-sizing: border-box;
  652. position: relative;
  653. background-position: right;
  654. background-size: cover;
  655. }
  656. .vip-check .left image {
  657. width: 43rpx;
  658. margin-right: 17rpx;
  659. vertical-align: middle;
  660. }
  661. .vip-check .left .title {
  662. font-size: 32rpx;
  663. font-weight: 700;
  664. color: #1a1a1a;
  665. vertical-align: middle;
  666. }
  667. .vip-check .right {
  668. font-size: 26rpx;
  669. font-weight: 500;
  670. color: #fd652d;
  671. }
  672. .vip-check .right .num {
  673. font-size: 46rpx;
  674. }
  675. .title-image {
  676. width: 294rpx;
  677. height: 42rpx;
  678. display: block;
  679. margin: 30rpx auto 15rpx auto;
  680. }
  681. .desc-image-box {
  682. display: flex;
  683. justify-content: space-around;
  684. align-items: center;
  685. }
  686. .desc-image-box image {
  687. width: 54rpx;
  688. height: 54rpx;
  689. display: block;
  690. margin: 0 auto 14rpx auto;
  691. }
  692. .desc-image-box text {
  693. font-size: 30rpx;
  694. font-weight: 400;
  695. color: #1a1a1a;
  696. }
  697. .desc-text {
  698. padding: 0 20rpx;
  699. font-size: 28rpx;
  700. font-weight: 400;
  701. color: #808080;
  702. margin-bottom: 20rpx;
  703. }
  704. .check-box {
  705. /* text-align: center; */
  706. }
  707. .check-box checkbox {
  708. transform: scale(0.7);
  709. vertical-align: middle;
  710. }
  711. .life {
  712. position: fixed;
  713. bottom: 0;
  714. width: 100%;
  715. height: 90rpx;
  716. background: #fffae1;
  717. font-size: 28rpx;
  718. font-family: PingFang SC, PingFang SC-Bold;
  719. font-weight: 700;
  720. text-align: center;
  721. line-height: 90rpx;
  722. color: #ffa836;
  723. }
  724. .pay-content {
  725. display: flex;
  726. flex-direction: column;
  727. justify-content: center;
  728. align-items: center;
  729. font-size: 32rpx;
  730. font-weight: 400;
  731. color: #3f454e;
  732. }
  733. .pay-content .icon-box-img {
  734. margin-bottom: 33rpx;
  735. }
  736. .pay-content text {
  737. margin-bottom: 10rpx;
  738. }
  739. .buy-content {
  740. width: 100%;
  741. padding: 44rpx 26rpx;
  742. display: flex;
  743. flex-direction: column;
  744. align-items: flex-start;
  745. box-sizing: border-box;
  746. font-size: 26rpx;
  747. font-family: "PingFang SC, PingFang SC-Regular";
  748. font-weight: 400;
  749. color: #333333;
  750. }
  751. .buy-content .vip-price {
  752. margin-bottom: 20rpx;
  753. }
  754. .buy-content .vip-price .red-price {
  755. color: #ec2e26;
  756. }
  757. .buy-content .integral {
  758. margin-bottom: 20rpx;
  759. }
  760. .buy-content .use-box {
  761. width: 100%;
  762. display: flex;
  763. justify-content: space-between;
  764. align-items: center;
  765. text-align: left;
  766. }
  767. .buy-content .use-box .deduction {
  768. font-size: 24rpx;
  769. font-family: "PingFang SC, PingFang SC-Regular";
  770. font-weight: 400;
  771. color: #999999;
  772. }
  773. .btn-box .btn {
  774. width: 437rpx;
  775. height: 80rpx;
  776. background: #ffdc2f;
  777. border-radius: 40rpx;
  778. font-size: 32rpx;
  779. font-family: "PingFang SC, PingFang SC-Regular";
  780. font-weight: 400;
  781. text-align: center;
  782. line-height: 80rpx;
  783. color: #333333;
  784. color: #fff;
  785. }
  786. .btn-box .interval-box {
  787. height: 30rpx;
  788. }
  789. .img-name {
  790. /* position: relative; */
  791. display: flex;
  792. align-items: center;
  793. }
  794. .img-name .icon-box {
  795. width: 30rpx;
  796. margin-right: 10rpx;
  797. }
  798. .img-icon {
  799. /* position: absolute;
  800. top:0;
  801. left: 0; */
  802. }
  803. .name-text {
  804. /* text-indent: 40rpx; */
  805. }