user.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. /* pages/user/user.wxss */
  2. page {background: #F0F0F0;}
  3. .mine {/* height: 388rpx; */position: relative;background: linear-gradient(180deg, #64C991 0%, #63C477 100%);}
  4. .wdbg {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
  5. .minec {position: relative;z-index: 2;display: flex;display: -webkit-flex;align-items: center;padding: 20rpx 0 0 30rpx;}
  6. .minec-img{position: relative;width: 130rpx;margin-right: 25rpx;}
  7. .user {display: block;width: 120rpx;height: 120rpx;border: 4rpx solid #fff;border-radius: 50%;margin-right: 30rpx;background: #fff;}
  8. .rz-sta{width: 82rpx;height: 35rpx;background: linear-gradient(270deg, #FF7F34 0%, #FF5126 100%);border-radius: 12rpx 0 12rpx 0;font-size: 20rpx;color: #fff;text-align: center;line-height: 32rpx;position: absolute;right: -20rpx;top: -5rpx;}
  9. .mines {flex: 1;-webkit-flex: 1;margin-right: 20rpx;}
  10. .mines view {font-size: 36rpx;color: #fff;}
  11. .common-vip{width: 142rpx;height: 38rpx;margin-left: 15rpx;}
  12. .edu {display: block;font-size: 24rpx;color: #fff;margin: 5rpx 0 0;}
  13. .set {width: 45rpx;height: 45rpx;}
  14. .set image {display: block;width: 45rpx;height: 45rpx;}
  15. .datas {margin: 0 30rpx;position: relative;z-index: 3;}
  16. .datas .li {text-align: center;font-size: 26rpx;color: #fff;width: 33.33%;position: relative;padding: 30rpx 0;}
  17. .datas .li text {display: block;font-size: 36rpx;font-weight: bold;margin-bottom: 10rpx;}
  18. .auth-img{
  19. width: 36rpx;height: 36rpx;margin-left: 10rpx;
  20. }
  21. .order {margin: 20rpx 30rpx 20rpx;border-radius: 20rpx;background: #fff;position: relative;z-index: 3;}
  22. .order-item{
  23. line-height: 40rpx;
  24. font-size: 28rpx;
  25. font-family: PingFang SC-Medium, PingFang SC;
  26. font-weight: 500;
  27. color: #333333;
  28. display: flex;
  29. flex-direction: column;
  30. justify-content: center;
  31. align-items: center;
  32. }
  33. .order-item image{
  34. width: 64rpx;
  35. height: 64rpx;
  36. background: linear-gradient(360deg, #FF985A 0%, #FF5700 100%);
  37. opacity: 1;
  38. border-radius: 100%;
  39. margin-bottom: 18rpx;
  40. }
  41. .order-line{
  42. width: 1rpx;
  43. height: 30rpx;
  44. opacity: 1;
  45. background-color: #DEDEDE;
  46. }
  47. .tits {font-size: 24rpx;color: #999;align-items: center;height: 47rpx;line-height: 47rpx;position: relative;z-index: 2;padding: 0 30rpx;padding-top: 20rpx;}
  48. .tits view {font-size: 32rpx;color: #333;font-weight: bold;}
  49. .role{font-size: 24rpx;color: #333;align-items: center;height: 47rpx;line-height: 47rpx;position: relative;z-index: 2;padding: 10rpx 0rpx;justify-content: space-between;border-bottom: 1px solid #E9E9E9;}
  50. .role:last-child{border: none;}
  51. .role_icon{width: 44rpx;height: 44rpx;margin-right: 20rpx;}
  52. .rico {display: block;width: 14rpx;height: 21rpx;margin-left: 16rpx;}
  53. .list1 {display: flex;display: -webkit-flex;}
  54. .list1 .li {width: 20%;text-align: center;font-size: 26rpx;color: #333;padding: 32rpx 0;position: relative;box-sizing: border-box;}
  55. .list1 .li image {display: block;width: 62rpx;height: 54rpx;margin: 0 auto 20rpx;}
  56. .new {display: block;width: 28rpx;height: 28rpx;background: #ED462F;border-radius: 50%;font-size: 20rpx;color: #fff;text-align: center;line-height: 28rpx;position: absolute;top: 29rpx;right: 30%;}
  57. .list2 {flex-wrap: wrap;padding-bottom: 25rpx;}
  58. .list2 .li {width: 25% !important;text-align: center;font-size: 26rpx !important;color: #666;padding: 30rpx 0 !important;}
  59. .list2 .li image {width: 40rpx;height: 40rpx;margin: 0 auto 8rpx;}
  60. .list2 .li button{font-size: 26rpx;color: #666;}
  61. .tuig {padding-bottom: 25rpx;}
  62. .fenxiao {width: 630rpx;height: 107rpx;margin: 0 auto;}
  63. .list3 .li {width: 25%;text-align: center;font-size: 26rpx;color: #555;padding: 32rpx 0;}
  64. .list3 .li image {width: 64rpx;height: 57rpx;margin: 0 auto 20rpx;}
  65. .shopname {padding: 0 0 30rpx;position: relative;}
  66. .md_ic_bg {position: absolute;top: 17rpx;right: 0;width: 132rpx;height: 187rpx;z-index: 1;}
  67. .tits .flex {align-items: center;}
  68. .bico {width: 22rpx;height: 26rpx;margin-right: 15rpx;}
  69. .datasw {margin: 0 30rpx;position: relative;z-index: 2;background: #F8F8F8;}
  70. .datasw .li {text-align: center;font-size: 24rpx;color: #999;width: 33.33%;position: relative;padding: 20rpx 0;}
  71. .datasw .li text {display: block;font-size: 32rpx;color: #333;font-weight: bold;margin-top: 8rpx;}
  72. .con {/* margin-top: -120rpx; */margin-top: 30rpx;position: relative;z-index: 4;}
  73. .vip {margin: 20rpx 40rpx 30rpx;position: relative;
  74. /* background-image: linear-gradient(to left, #FFC957, #FFEA73); */
  75. border-radius: 20rpx;}
  76. .vipbg {position: absolute;top: 0;left: 0;width: 100%;height: 100rpx;z-index: 1;}
  77. .vipc {position: relative;z-index: 2;font-size: 30rpx;color: #915D31;height: 100rpx;align-items: center;padding: 0 30rpx;}
  78. .vipc .flex {align-items: center;}
  79. .vipc image {width: 44rpx;height: 37rpx;margin: 0 13rpx;}
  80. .level {font-size: 36rpx;}
  81. .cheng {font-size: 24rpx;color: #FFDEC2;opacity: .5;}
  82. .ling {
  83. /* padding: 15rpx 24rpx; */
  84. width: 122rpx;height: 44rpx;line-height: 44rpx;border-radius: 22rpx;font-size: 24rpx;color: #915D31;text-align: center;background: #FFFFFF;background: linear-gradient(270deg, #FCBC85 0%, #FFE2C9 100%);}
  85. .vipimg {width: 33rpx;height: 29rpx;}
  86. .huiyuan {font-size: 28rpx;color: #FFDEC2;}
  87. .rule {font-size: 30rpx;color: #FC9816;background: linear-gradient(90deg, #FFF6E9 0%, #FCEEDB 60%, #FFDFB5 100%);height: 64rpx;border-radius: 32rpx 0 0 32rpx;padding: 0 30rpx 0 27rpx;align-items: center;justify-content: center;}
  88. .rule image {width: 34rpx;height: 32rpx;margin-right: 11rpx;}
  89. /* 注册会员 */
  90. /* .regi{position: fixed;left: 0;bottom: 0;right: 0;padding: 0 30rpx 30rpx;background: #fff;z-index: 100;}
  91. .regi-tit{border-bottom: 2rpx solid #D8D8D8;font-size: 30rpx;color: #333;padding: 25rpx 0 15rpx;text-align: center;}
  92. .regi-close{width: 37rpx;height: 37rpx;position: absolute;top: 20rpx;right: 22rpx;}
  93. .phone{align-items: center;margin: 30rpx 0 40rpx;}
  94. .phone input{font-size: 30rpx;color: #333;}
  95. .getphone{background: #62B23F;width: 216rpx !important;height: 60rpx !important;border-radius: 30rpx !important;font-size: 24rpx;color: #fff;align-items: center;justify-content: center;}
  96. .getphone image{width: 33rpx;height: 27rpx;margin-right: 10rpx;}
  97. .regi-btn{background: #EA6739;height: 70rpx;line-height: 70rpx;font-size: 30rpx;color: #fff;text-align: center;}
  98. */
  99. /* vip */
  100. .login-btn {border: 2rpx solid #fff;height: 60rpx;line-height: 60rpx;border-radius: 30rpx;font-size: 30rpx;color: #fff;padding: 0 30rpx;display: inline-block;}
  101. /* 设置主页面颜色为黑白 */
  102. .not-color{background: #fff !important;}
  103. .not-color .login-btn{border-color: #333;color: #333;}
  104. .not-color .datas .li,.not-color .mines view{color: #333;}
  105. .not-color .edu{color: #999;}
  106. /* 会员升级 */
  107. .upgrade{position: relative;z-index: 5;padding: 30rpx 40rpx;font-size: 26rpx;color: #333;justify-content: space-between;text-align: center;flex-wrap: nowrap;}
  108. .upgrade::before{content: '';display: block;height: 6rpx;background: rgba(0,0,0,.3);border-radius: 3rpx;position: absolute;left: 88rpx;right: 85rpx;bottom: 32rpx;}
  109. .upgrade .li{position: relative;}
  110. .upgrade .li::after{content: '';display: block;width: 10rpx;height: 10rpx;background: #333;border-radius: 50%;margin: 20rpx auto 0;}
  111. .upgrade .li.active::after{background: var(--mina);}
  112. .upgrade .li.active{color: var(--mina);}
  113. .vip-info{position: absolute;width: 380rpx;top: 115%;left: 50%;transform: translateX(-50%);background: rgba(0,0,0,.9);padding: 10rpx 20rpx;border-radius: 10rpx;font-size: 24rpx;color: #fff;box-shadow: 0 0 10rpx rgba(0,0,0,.1);z-index: 10;display: inline-block;}
  114. .vip-info text{display: block;}
  115. .vip-info::before{content: '';display: block;width: 0;height: 0;border: 10rpx solid transparent;border-bottom-color: rgba(0,0,0,.9);border-top: none;position: absolute;left: 50%;transform: translateX(-50%);top: -10rpx;z-index: 10;}
  116. .upgrade .li:last-child .vip-info{right: 0;left: auto;transform: inherit;}
  117. .upgrade .li:last-child .vip-info::before{right: 45rpx;left: auto;transform: inherit;}
  118. .box {background: #fff;border-radius: 24rpx;padding: 0 30rpx;margin: 0 30rpx;}
  119. .mlist {margin-top: 30rpx;}
  120. .mlist .li {font-size: 30rpx;color: #000;border-bottom: 1rpx solid #E9E9E9;padding: 25rpx 0 !important;text-align: left;}
  121. .mlist .li:last-child {border-bottom: none;}
  122. .mlist .li text{display: block;font-size: 24rpx;color: var(--main);margin-right: 10rpx;}
  123. .mlist .li button{font-size: 30rpx;color: #000;}
  124. .mlist .li button image{width: 49rpx;height: 49rpx;margin-right: 25rpx;}
  125. .mlistBtn{font-size: 30rpx;text-align: left !important;}
  126. .mico {width: 49rpx;height: 49rpx;margin-right: 25rpx;}
  127. .service-person{
  128. padding: 43rpx 0 0rpx;
  129. }
  130. .service-person-header{
  131. width: 116rpx;
  132. height: 116rpx;
  133. margin: 0 30rpx;
  134. border-radius: 100%;
  135. }
  136. .service-person-name{
  137. font-size: 32rpx;
  138. font-weight: bold;
  139. color: #333333;
  140. line-height: 45rpx;
  141. }
  142. .service-person-number{
  143. font-size: 20rpx;
  144. font-weight: 500;
  145. color: #333333;
  146. line-height: 28rpx;
  147. }
  148. .service-person-options{
  149. font-size: 20rpx;
  150. font-family: PingFang SC-Regular, PingFang SC;
  151. font-weight: 400;
  152. color: #333333;
  153. line-height: 28rpx;
  154. margin-top: 14rpx;
  155. }
  156. .service-person-option{
  157. margin-right: 17rpx;
  158. }
  159. .service-person-option image{
  160. width: 28rpx;
  161. height: 28rpx;
  162. margin-right: 3rpx;
  163. }
  164. .service-person-phone{
  165. margin: 37rpx 30rpx 0;
  166. border-top: 2rpx solid #F1F1F1;
  167. padding: 38rpx 0;
  168. font-size: 24rpx;
  169. }
  170. .service-person-phone image{
  171. width: 28rpx;
  172. height: 28rpx;
  173. margin-right: 10rpx;
  174. }
  175. .lt{
  176. width: 92rpx;
  177. height: 92rpx;
  178. line-height: 92rpx;
  179. background: #FFFFFF;
  180. box-shadow: 0rpx 5rpx 15rpx 1rpx rgba(0,0,0,0.15);
  181. opacity: 1;
  182. position: fixed;
  183. bottom:200rpx;
  184. right: 30rpx;
  185. border-radius: 100%;
  186. z-index: 5;
  187. }
  188. .lt image{
  189. width: 48rpx;
  190. height: 48rpx;
  191. margin: auto;
  192. }
  193. .lt-num{
  194. width: 38rpx;
  195. height: 38rpx;
  196. background: #FF5700;
  197. opacity: 1;
  198. border: 2rpx solid #FFFFFF;
  199. position: absolute;
  200. top: -8rpx;
  201. right: -8rpx;
  202. border-radius: 100%;
  203. text-align: center;
  204. line-height: 38rpx;
  205. font-size: 20rpx;
  206. font-weight: 500;
  207. color: #FFFFFF;
  208. }
  209. /* 邀请码弹窗 */
  210. .ceng2{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 99;}
  211. .code-pop{
  212. position: fixed;
  213. top:50%;
  214. left:50%;
  215. transform: translate(-50%,-50%);
  216. width: 574rpx;
  217. background: #FFFFFF;
  218. border-radius: 20rpx 20rpx 20rpx 20rpx;
  219. z-index: 100;
  220. }
  221. .code-text{
  222. line-height: 41rpx;
  223. color: #151515;
  224. font-size: 28rpx;
  225. margin: 51rpx 47rpx 50rpx;
  226. text-align: center;
  227. }
  228. .code-content image{
  229. width: 365rpx;
  230. height: 365rpx;
  231. margin: 50rpx auto 30rpx;
  232. }
  233. .code-btn{
  234. padding: 25rpx;
  235. text-align: center;
  236. font-size: 28rpx;
  237. color: #2A82FD;
  238. border-top: 1px solid #E9E9E9;
  239. }
  240. .pop-scroll{
  241. max-height: 750rpx;
  242. overflow: scroll;
  243. padding: 30rpx;
  244. }
  245. .pop-scroll::-webkit-scrollbar {
  246. display: none;
  247. }