VipForm.scss 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. .shop-vip-form{
  2. background:#FFF;
  3. border-radius: 30px;
  4. width:320px;
  5. min-height: 550px;
  6. .vip-bg{
  7. background-image: url(/static/images/vipbg.png);
  8. background-size:contain;
  9. background-repeat: no-repeat;
  10. width:100%;
  11. height:80px;
  12. }
  13. .header{
  14. display:flex;
  15. flex-direction:column;
  16. height:100px;
  17. justify-content:flex-start;
  18. align-items: left;
  19. .img{
  20. width:60px;
  21. margin-left:30px;
  22. display: flex;
  23. justify-content:flex-start;
  24. align-items: left;
  25. border-radius: 15px;
  26. overflow: hidden;
  27. .header-img{
  28. width:60px;
  29. height:60px;
  30. }
  31. }
  32. .name{
  33. display:flex;
  34. color:#593320;
  35. font-size: 12px;
  36. height:20px;
  37. padding-left: 30px;
  38. line-height: 30px;
  39. }
  40. }
  41. .tips{
  42. color:#593320;
  43. margin-top:10px;
  44. margin-left:30px;
  45. font-weight: bold;
  46. }
  47. .vip-step{
  48. display: flex;
  49. flex-direction: row;
  50. margin-top:20px;
  51. margin-left:10px;
  52. margin-right:20px;;
  53. .step-item{
  54. width:33%;
  55. flex-grow: 1;
  56. flex-shrink: 1;
  57. display: flex;
  58. flex-direction: column;
  59. padding-left:20px;
  60. padding-right: 20px;
  61. .icon{
  62. display: flex;
  63. justify-content: center;
  64. align-items: center;
  65. .icon{
  66. height:30px;
  67. }
  68. }
  69. .name{
  70. margin-top:10px;
  71. .box{
  72. background:#593320;
  73. padding:1px 2px;
  74. color:#FFF;
  75. border-radius: 10px;
  76. text-align: center;
  77. }
  78. }
  79. .disabled{
  80. background:#CCC!important;
  81. }
  82. }
  83. }
  84. .vip-form{
  85. width:85%;
  86. margin:auto;
  87. margin-top:20px;
  88. .vip-form-title{
  89. color:#593320;
  90. font-size: 12px;
  91. }
  92. .vip-form-tab{
  93. margin-top:10px;
  94. border-bottom:1px solid #593320;
  95. .tab{
  96. width:100%;
  97. display: flex;
  98. flex-direction: row;
  99. justify-content: space-between;
  100. align-items: center;
  101. height:40px;
  102. .col1{
  103. width:30%;
  104. height:100%;
  105. display:flex;
  106. justify-content: center;
  107. align-items: center;
  108. border-left: 1px solid #593320;
  109. border-top: 1px solid #593320;
  110. border-right: 1px solid #593320;
  111. .icon{
  112. height:25px;
  113. }
  114. }
  115. .col2{
  116. width:45%;
  117. height:100%;
  118. border-top: 1px solid #593320;
  119. border-right: 1px solid #593320;
  120. display:flex;
  121. justify-content: center;
  122. align-items: center;
  123. }
  124. .col3{
  125. width:45%;
  126. height:100%;
  127. border-top: 1px solid #593320;
  128. border-right: 1px solid #593320;
  129. display:flex;
  130. justify-content: center;
  131. align-items: center;
  132. }
  133. }
  134. .tab1{
  135. width:100%;
  136. display: flex;
  137. flex-direction: row;
  138. justify-content: space-between;
  139. align-items: center;
  140. height:120px;
  141. .col1{
  142. width:30%;
  143. height:100%;
  144. display:flex;
  145. justify-content: center;
  146. align-items: center;
  147. border-left: 1px solid #593320;
  148. border-top: 1px solid #593320;
  149. border-right: 1px solid #593320;
  150. .icon{
  151. height:25px;
  152. }
  153. }
  154. .col-more{
  155. display: flex;
  156. width:70%;
  157. height:100%;
  158. flex-direction: column;
  159. .item{
  160. display: flex;
  161. flex-direction: row;
  162. width:100%;
  163. height:40px;
  164. .col2{
  165. width:50%;
  166. display: flex;
  167. justify-content: center;
  168. align-items: center;
  169. // border-left: 1px solid #593320;
  170. border-top: 1px solid #593320;
  171. border-right: 1px solid #593320;
  172. }
  173. .col3{
  174. width:50%;
  175. display: flex;
  176. justify-content: center;
  177. align-items: center;
  178. // border-left: 1px solid #593320;
  179. border-top: 1px solid #593320;
  180. border-right: 1px solid #593320;
  181. }
  182. }
  183. }
  184. }
  185. }
  186. }
  187. }
  188. .com-renew-form{
  189. width:100%;
  190. position:relative;
  191. .renew-form{
  192. width:90%;
  193. height:100%;
  194. margin:auto;
  195. border-top-right-radius: 10px;
  196. border-top-left-radius: 10px;
  197. background:#FFF;
  198. overflow: hidden;
  199. .renew-top{
  200. height:40px;
  201. background:#a07c5a;
  202. display:flex;
  203. flex-direction: row;
  204. .renew-top-header{
  205. height:100%;
  206. width:20%;
  207. display:flex;
  208. justify-content: center;
  209. align-items: center;
  210. .icon{
  211. width:30px;
  212. height:30px;
  213. border-radius: 50%;
  214. }
  215. }
  216. .renew-top-name{
  217. height:100%;
  218. width:80%;
  219. display:flex;
  220. justify-content: flex-start;
  221. align-items: center;
  222. color:#FFF;
  223. }
  224. }
  225. }
  226. .renew-tips{
  227. height:30px;
  228. display: flex;
  229. justify-content: flex-start;
  230. align-items: center;
  231. margin-top:20px;
  232. .text{
  233. margin-left:20px;
  234. font-weight: bold;
  235. color:#593320;
  236. .txt{
  237. color:#b21c1c;
  238. }
  239. }
  240. }
  241. .renew-list{
  242. margin-left:10px;
  243. margin-right: 10px;
  244. display: flex;
  245. flex-direction: row;
  246. overflow-y: auto;
  247. overflow-x: auto;
  248. padding-top:20px;
  249. .list-items{
  250. display: flex;
  251. flex-direction: row;
  252. .item{
  253. width:180px;
  254. // height:220px;
  255. border:1px solid #CCC;
  256. margin-right:10px;
  257. border-radius: 10px;
  258. position:relative;
  259. background:#faf9fa;
  260. display:flex;
  261. overflow: hidden;
  262. flex-direction: column;
  263. .active{
  264. position:absolute;
  265. right:0px;
  266. top:0px;
  267. z-index:999;
  268. background:#FFF;
  269. border-radius: 50%;;
  270. }
  271. .tips{
  272. display: flex;
  273. justify-content: center;
  274. align-items: center;
  275. background:#b21c1c;
  276. border-bottom-right-radius: 20px;
  277. color:#FFF;
  278. width:100px;
  279. height:25px;
  280. line-height: 25px;
  281. overflow: hidden;
  282. left:0px;
  283. top:0px;
  284. position:absolute;
  285. z-index:99;
  286. }
  287. .item-img{
  288. padding-top:40px;
  289. .bottomBg{
  290. border-bottom:1px dashed #a1a1a1;
  291. }
  292. .vip-list{
  293. display:flex;
  294. width:95%;
  295. margin-left:5px;
  296. margin-right:5px;
  297. flex-direction: column;
  298. .vip-item{
  299. display:flex;
  300. flex-direction: row;
  301. min-height:30px;
  302. line-height: 30px;
  303. font-size:12px;
  304. .vip-img{
  305. display:flex;
  306. width:10%;
  307. height:100%;
  308. justify-content:center;
  309. align-items: center;
  310. .img{
  311. width:24px;
  312. height:18px;
  313. margin-top:10px;
  314. }
  315. }
  316. .vip-content{
  317. display:flex;
  318. width:90%;
  319. height:100%;
  320. flex-direction: column;
  321. justify-content: flex-start;
  322. align-items: center;
  323. .content-item{
  324. display:flex;
  325. flex-direction: row;
  326. width:100%;
  327. height:100%;
  328. justify-content: flex-start;
  329. align-items: center;
  330. .vip-item-cap{
  331. display:flex;
  332. width:50%;
  333. height:100%;
  334. justify-content: flex-start;
  335. align-items: center;
  336. margin-left:10px;
  337. }
  338. .vip-item-text{
  339. display:flex;
  340. width:70%;
  341. height:100%;
  342. margin-right: 10px;
  343. justify-content: flex-end;
  344. align-items: center;
  345. }
  346. }
  347. }
  348. }
  349. }
  350. }
  351. .item-price{
  352. background:#CCC;
  353. height:30px;
  354. display: flex;
  355. flex-direction: row;
  356. justify-content: center;
  357. align-items: center;
  358. color:#FFF;
  359. border-bottom-left-radius: 10px;
  360. border-bottom-right-radius: 10px;
  361. .price{
  362. font-size:18px;
  363. .sign{
  364. font-size:12px;
  365. }
  366. }
  367. }
  368. }
  369. .actived{
  370. border:1px solid #b21c1c!important;
  371. .item-price{
  372. background:#b21c1c!important;
  373. }
  374. }
  375. }
  376. }
  377. .renew-btns{
  378. width:100%;
  379. display: flex;
  380. justify-content: center;
  381. align-items: center;
  382. margin-top:20px;
  383. .btn-pay{
  384. width:200px;
  385. height:30px;
  386. display: flex;
  387. justify-content: center;
  388. align-items: center;
  389. border-radius: 10px;
  390. background:#b21c1c;
  391. padding:0px;
  392. border:none;
  393. color:#FFF;
  394. line-height: 30px;
  395. font-size:14px;
  396. }
  397. }
  398. }