index.wxss 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540
  1. page {
  2. height: 100%;
  3. width: 100%;
  4. background: #f4f4f4;
  5. }
  6. .container {
  7. background: transparent;
  8. height: auto;
  9. /* overflow: hidden; */
  10. width: 100%;
  11. padding:0 30rpx 40rpx;
  12. /* filter: blur(5rpx);*/
  13. }
  14. .top{
  15. /* height: 210rpx; */
  16. /* border-radius: 10rpx; */
  17. /* position: relative; */
  18. /* margin:15rpx ; */
  19. /* background: #09afff; */
  20. height: 274rpx;
  21. background: url('https://mall.zhaijieshi.cc/file/wx-dy/top-bg.png') no-repeat center bottom;
  22. background-size: 750rpx 274rpx;
  23. }
  24. .profile-info {
  25. /*background-color: #ab956d; */
  26. /* color: #f4f4f4; */
  27. display: flex;
  28. align-items: center;
  29. padding: 30rpx 0 0 42rpx;
  30. font-size: 28rpx;
  31. /* border-radius: 10rpx;
  32. margin:15rpx ;*/
  33. /* position: absolute; */
  34. /* margin-top: -180rpx; */
  35. }
  36. .profile-info-backimg{
  37. width: 100%;
  38. height: 180rpx;
  39. /* z-index: -1; */
  40. position: absolute;
  41. }
  42. .profile-info .avatar {
  43. height: 108rpx;
  44. width: 108rpx;
  45. border-radius: 50%;
  46. border:2rpx solid #fff
  47. }
  48. .profile-info .info {
  49. flex: 1;
  50. height: 108rpx;
  51. padding: 16rpx 0 0 48rpx;
  52. /* width: 414rpx; */
  53. color: #fff;
  54. margin:0 20rpx 0 0;
  55. }
  56. .user-name-wrapper{
  57. height: 36rpx;
  58. margin:0 0 20rpx 0;
  59. display: flex;
  60. align-items: center;
  61. }
  62. .profile-info .name {
  63. /* font-weight: bold; */
  64. font-size: 34rpx;
  65. margin-bottom: 5rpx;
  66. max-width:340rpx;
  67. overflow: hidden;
  68. white-space: nowrap;
  69. text-overflow: ellipsis;
  70. }
  71. .profile-info .cert {
  72. display: flex;
  73. height: 26rpx;
  74. line-height: 26rpx;
  75. font-size: 26rpx;
  76. /* margin-bottom: 5rpx; */
  77. }
  78. .profile-info .plus {
  79. font-size: 21.5rpx;
  80. width: 120rpx;
  81. padding-left: 2rpx;
  82. padding-right: 2rpx;
  83. line-height: 40rpx;
  84. margin:4rpx;
  85. }
  86. .profile-info-img-star{
  87. width: 10rpx;
  88. height: 10rpx;
  89. }
  90. .profile-info .level {
  91. display: block;
  92. height: 30rpx;
  93. line-height: 30rpx;
  94. margin-bottom: 10rpx;
  95. color: #7f7f7f;
  96. font-size: 30rpx;
  97. }
  98. .profile-info-qr-image {
  99. width: 80rpx;
  100. height: 80rpx;
  101. margin-top: 30rpx;
  102. margin-left: 150rpx;
  103. }
  104. .process{
  105. border-radius: 2rpx;
  106. }
  107. .user_tool{
  108. height: 250rpx;
  109. background: #fff;
  110. border-radius: 10rpx;
  111. margin: 15rpx 0;
  112. }
  113. .user_tool_row {
  114. /* border: 1px solid black;
  115. border-bottom: 1px solid #fafafa;*/
  116. height: 86rpx;
  117. line-height: 86rpx;
  118. }
  119. .user_tool_row_title{
  120. height: 86rpx;
  121. font-weight: 550;
  122. line-height: 86rpx;
  123. margin-left: 35rpx;
  124. font-size: 32rpx;
  125. color: #000;
  126. }
  127. .user_tool_row_title_left{
  128. float: left;
  129. }
  130. .user_tool_column{
  131. height: 140rpx;
  132. display: flex;
  133. justify-content: center;
  134. align-items: center;
  135. }
  136. .user_tool_column_item {
  137. width: 25%;
  138. height: 100rpx;
  139. background: #fff;
  140. text-align: center;
  141. position: relative;
  142. margin-top: 5rpx;
  143. }
  144. .user_tool_column_item_text {
  145. /* border: 1px solid black; */
  146. margin-top: 5rpx;
  147. font-size: 26rpx;
  148. color: #555;
  149. }
  150. .user_tool_column_item_image {
  151. width: 50rpx;
  152. height: 50rpx;
  153. margin-top: 5rpx;
  154. }
  155. .user_area {
  156. /* border: 1px solid black; */
  157. width: 100%;
  158. height: 226rpx;
  159. /* margin: 0 auto; */
  160. margin-top: -8rpx;
  161. background: #fff;
  162. /* border-top: 1px solid #f4f4f4; */
  163. }
  164. .user_row {
  165. /* border: 1px solid black; */
  166. height: 86rpx;
  167. line-height: 86rpx;
  168. border-bottom: 1px solid #fafafa;
  169. }
  170. .user_row_left {
  171. /* border: 1px solid #757575; */
  172. float: left;
  173. height: 86rpx;
  174. font-weight: 550;
  175. line-height: 86rpx;
  176. margin-left: 35rpx;
  177. font-size: 26rpx;
  178. letter-spacing: 1rpx;
  179. color: #000;
  180. font-size: 32rpx;
  181. }
  182. .user_row_right {
  183. /* border: 1px solid #757575; */
  184. float: right;
  185. height: 40rpx;
  186. width: 40rpx;
  187. font-weight: 550;
  188. line-height: 86rpx;
  189. margin-right: 30rpx;
  190. margin-top: 24rpx;
  191. }
  192. .user_column {
  193. /* border: 1px solid black; */
  194. height: 140rpx;
  195. display: flex;
  196. justify-content: center;
  197. align-items: center;
  198. }
  199. .user_column_item {
  200. width: 30%;
  201. height: 140rpx;
  202. background: #fff;
  203. text-align: center;
  204. position: relative;
  205. }
  206. .user_column_item_badge {
  207. height: 30rpx;
  208. width: 30rpx;
  209. position: absolute;
  210. background: #b4282d;
  211. color: #fff;
  212. border-radius: 50%;
  213. margin-top: 20rpx;
  214. margin-left: 40rpx;
  215. font-size:20rpx;
  216. }
  217. .user_column_item_image {
  218. width: 50rpx;
  219. height: 50rpx;
  220. margin-top: 30rpx;
  221. }
  222. .user_column_item_text {
  223. /* border: 1px solid black; */
  224. margin-top: 5rpx;
  225. font-size: 24rpx;
  226. color: #555;
  227. /*color: #252a48;*/
  228. }
  229. .separate {
  230. background: #e0e3da;
  231. width: 100%;
  232. height: 6rpx;
  233. }
  234. .user_column_item_phone {
  235. width: 30%;
  236. height: 140rpx;
  237. text-align: center;
  238. display: flex;
  239. justify-content: center;
  240. align-items: center;
  241. flex-wrap: wrap;
  242. float: left;
  243. background: #fff;
  244. border-radius: 0;
  245. }
  246. .user_column_item_phone::after {
  247. border: none;
  248. border-radius: 0;
  249. }
  250. .logout {
  251. margin-top: 28rpx;
  252. height: 84rpx;
  253. width: 100%;
  254. line-height: 84rpx;
  255. text-align: center;
  256. background: #fff;
  257. font-size: 28rpx;
  258. border-radius: 10rpx;
  259. }
  260. .switchaccount{
  261. margin-top: 28rpx;
  262. height: 84rpx;
  263. width: 100%;
  264. line-height: 84rpx;
  265. text-align: center;
  266. background: #fff;
  267. font-size: 28rpx;
  268. color:#09afff;
  269. border-radius: 10rpx;
  270. }
  271. /* 新版页面 */
  272. .main-module{
  273. border-radius:10rpx;
  274. background:#fff;
  275. height: 106rpx;
  276. margin:28rpx 0;
  277. padding:24rpx 40rpx 16rpx;
  278. display: flex;
  279. justify-content: space-around;
  280. align-items: center;
  281. }
  282. .coupon-block,.favor-good{
  283. display: flex;
  284. flex-direction: column;
  285. height: 66rpx;
  286. justify-content: space-between;
  287. align-items: center;
  288. flex:1;
  289. line-height: 24rpx;
  290. }
  291. .devide-line{
  292. height: 80rpx;
  293. width:2rpx;
  294. background:#bbb;
  295. }
  296. .main-module .num{
  297. font-weight: bold;
  298. font-size: 24rpx;
  299. }
  300. .main-module .module-text{
  301. color:#000;
  302. font-size: 24rpx;
  303. }
  304. .order-block{
  305. height: 180rpx;
  306. border-radius:14rpx;
  307. background:#fff;
  308. margin:-80rpx 0 30rpx;
  309. width:690rpx;
  310. }
  311. .my-order-title{
  312. height: 28rpx;
  313. font-size: 26rpx;
  314. display: flex;
  315. justify-content: space-between;
  316. align-items: center;
  317. margin:0 0 40rpx 0;
  318. }
  319. .my-order-title>view:first-child{
  320. font-weight: bold;
  321. }
  322. .whole-order{
  323. color: #85868A;
  324. font-size: 24rpx;
  325. display: flex;
  326. align-items: center;
  327. }
  328. .order-module{
  329. height:180rpx;
  330. display: flex;
  331. justify-content: space-between;
  332. align-items: center;
  333. padding:0 40rpx;
  334. }
  335. .order-module .devide-img{
  336. width:12rpx;
  337. height:134rpx;
  338. margin:0 -24rpx 0 -20rpx;
  339. }
  340. .tool-module{
  341. height: 80rpx;
  342. /* padding:24rpx 22rpx; */
  343. display: flex;
  344. justify-content: space-between;
  345. align-items: center;
  346. /* margin:28rpx 0; */
  347. }
  348. .middle-module-wrapper{
  349. padding:10rpx 30rpx 8rpx 26rpx;
  350. border-radius:14rpx;
  351. background:#fff;
  352. }
  353. .middle-module .tool-item{
  354. display: flex;
  355. justify-content: space-between;
  356. align-items: center;
  357. flex-direction: row;
  358. width:644rpx;
  359. height:84rpx;
  360. }
  361. .middle-module .tool-item:last-child .line-right{
  362. border: none;
  363. }
  364. .line-right{
  365. flex:1;
  366. display: flex;
  367. justify-content: space-between;
  368. align-items: center;
  369. border-bottom: 1rpx solid #EFEFEF;
  370. height: 84rpx;
  371. }
  372. .middle-module .tool-img{
  373. width:28rpx;
  374. height: 28rpx;
  375. margin:0 18rpx 0 0;
  376. }
  377. .line-right .arrow{
  378. width:28rpx;
  379. height:20rpx;
  380. opacity: 0.8;
  381. }
  382. .tool-img{
  383. width:72rpx;
  384. height: 58rpx;
  385. margin-bottom:20rpx;
  386. }
  387. .tool-item{
  388. display: flex;
  389. justify-content: space-between;
  390. align-items: center;
  391. flex-direction: column;
  392. /* flex:1; */
  393. width:100rpx;
  394. }
  395. .tool-item .tool-text{
  396. font-size: 28rpx;
  397. line-height: 28rpx;
  398. color: #1E1E1E;
  399. }
  400. .order-block .tool-item .tool-text{
  401. font-size: 24rpx;
  402. line-height: 24rpx;
  403. }
  404. .middle-module .tool-item .tool-text{
  405. color: #343333;
  406. }
  407. .tool-item .middle-module{
  408. }
  409. .tool-module.bottom-module{
  410. margin:40rpx 0 0;
  411. }
  412. .member-crown{
  413. width:48rpx;
  414. height:48rpx;
  415. z-index:999;
  416. }
  417. .jz-badge{
  418. width: 34rpx;
  419. height: 34rpx;
  420. background: linear-gradient(0deg, #F1E3C8 0%, #E6C162 100%);
  421. border-radius: 50%;
  422. margin:0 0 14rpx 0;
  423. font-size: 32rpx;
  424. color: #5D3A11;
  425. line-height: 32rpx;
  426. text-align:center;
  427. margin:0 0 0 14rpx;
  428. }
  429. .jz-member-wrappe{
  430. max-width:210rpx;
  431. }
  432. .not-member{
  433. width: 210rpx;
  434. height: 42rpx;
  435. background: linear-gradient(78deg, #F1E3C8, #E6C162);
  436. border-radius: 22rpx 0 0 22rpx;
  437. display: flex;
  438. align-items: center;
  439. justify-content: flex-end;
  440. font-size: 24rpx;
  441. color: #5D3A11;
  442. }
  443. .is-member{
  444. width: 200rpx;
  445. height: 48rpx;
  446. display: flex;
  447. align-items: center;
  448. font-size: 24rpx;
  449. color: #5D3A11;
  450. }
  451. .is-member .is-member-right{
  452. background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-star1.png') no-repeat center center;
  453. background-size: 100% 100%;
  454. height: 48rpx;
  455. display: flex;
  456. align-items: center;
  457. width: 200rpx;
  458. padding-left: 52rpx;
  459. }
  460. .is-member .is-member-right text{
  461. font-size: 24rpx;
  462. }
  463. .recommend-module{
  464. height: 750rpx;
  465. height: 148rpx;
  466. padding:0 28rpx;
  467. margin:-28rpx 0 0;
  468. background: #09afff;
  469. }
  470. .recommend-main{
  471. width:696rpx;
  472. height: 148rpx;
  473. padding:0 28rpx;
  474. background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/recommend-bg.png') no-repeat center top;
  475. background-size: 100% 100%;
  476. color:#fff;
  477. }
  478. .recommend-top{
  479. height: 84rpx;
  480. display: flex;
  481. font-size: 30rpx;
  482. font-weight: bold;
  483. align-items: center;
  484. justify-content: space-between;
  485. }
  486. .recommend-top image{
  487. width:42rpx;
  488. height: 42rpx;
  489. margin:0 30rpx 0 0;
  490. }
  491. .recommend-top>text{
  492. flex:1;
  493. }
  494. .recomend-center{
  495. width:168rpx;
  496. height: 44rpx;
  497. background: #EFD671;
  498. border-radius: 22rpx;
  499. display: flex;
  500. align-items: center;
  501. justify-content: center;
  502. font-size: 24rpx;
  503. color: #2A2A2A;
  504. }
  505. .adv-text{
  506. height: 64rpx;
  507. line-height: 64rpx;
  508. font-size:24rpx;
  509. }