user.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /* pages/user/user.wxss */
  2. page {background: #F0F0F0;}
  3. .userPage{
  4. background-color: #F0F0F0;
  5. min-height: 100vh;
  6. }
  7. .mine {/* height: 388rpx; */position: relative;background: linear-gradient(180deg, var(--mina) 0%, var(--submain) 100%);}
  8. .wdbg {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
  9. .minec {position: relative;z-index: 2;display: flex;display: -webkit-flex;align-items: center;padding: 20rpx 0 0 30rpx;}
  10. .user {display: block;width: 120rpx;height: 120rpx;border: 4rpx solid #fff;border-radius: 50%;background: #fff;}
  11. .avatar-box{width: 128rpx;height: 128rpx;position: relative;overflow: hidden;border-radius: 50%;margin-right: 30rpx;}
  12. .avatar-up{background-color: rgba(0,0,0,.5);font-size: 20rpx;color: #fff;position: absolute;left: 0;right: 0;bottom: 0;padding: 5rpx 0 10rpx;text-align: center;}
  13. .mines {flex: 1;-webkit-flex: 1;margin-right: 20rpx;}
  14. .mines view {font-size: 36rpx;color: #fff;}
  15. .info-bj{width: 30rpx;height: 30rpx;margin-left: 15rpx;}
  16. .common-vip{width: 142rpx;height: 38rpx;margin-left: 15rpx;}
  17. .edu {display: block;font-size: 24rpx;color: #fff;margin: 5rpx 0 0;}
  18. .set {width: 45rpx;height: 45rpx;}
  19. .set image {display: block;width: 45rpx;height: 45rpx;}
  20. .datas {margin: 0 30rpx;position: relative;z-index: 3;}
  21. .datas .li {text-align: center;font-size: 26rpx;color: #fff;width: 33.33%;position: relative;padding: 30rpx 0;}
  22. .datas .li text {display: block;font-size: 36rpx;font-weight: bold;margin-bottom: 10rpx;}
  23. .order {margin: 20rpx 30rpx 20rpx;border-radius: 20rpx;background: #fff;position: relative;z-index: 3;}
  24. .tits {font-size: 24rpx;color: #999;align-items: center;height: 80rpx;line-height: 80rpx;position: relative;z-index: 2;padding: 0 30rpx;}
  25. .tits view {font-size: 28rpx;color: #333;font-weight: bold;}
  26. .rico {display: block;width: 14rpx;height: 21rpx;margin-left: 16rpx;}
  27. .list1 {display: flex;display: -webkit-flex;}
  28. .list1 .li {width: 20%;text-align: center;font-size: 26rpx;color: #333;padding: 32rpx 0;position: relative;box-sizing: border-box;}
  29. .list1 .li image {display: block;width: 62rpx;height: 54rpx;margin: 0 auto 20rpx;}
  30. .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%;}
  31. .list2 {flex-wrap: wrap;padding-bottom: 25rpx;}
  32. .list2 .li {width: 25% !important;text-align: center;font-size: 26rpx;color: #666;padding: 30rpx 0 !important;line-height: 24rpx !important;}
  33. .list2 .li image {width: 74rpx;height: 74rpx;margin: 0 auto 12rpx;}
  34. .tuig {padding-bottom: 25rpx;}
  35. .fenxiao {width: 630rpx;height: 107rpx;margin: 0 auto;}
  36. .list3 .li {width: 25%;text-align: center;font-size: 26rpx;color: #555;padding: 32rpx 0;}
  37. .list3 .li image {width: 64rpx;height: 57rpx;margin: 0 auto 20rpx;}
  38. .shopname {padding: 0 0 30rpx;position: relative;}
  39. .md_ic_bg {position: absolute;top: 17rpx;right: 0;width: 132rpx;height: 187rpx;z-index: 1;}
  40. .tits .flex {align-items: center;}
  41. .bico {width: 22rpx;height: 26rpx;margin-right: 15rpx;}
  42. .datasw {margin: 0 30rpx;position: relative;z-index: 2;background: #F8F8F8;}
  43. .datasw .li {text-align: center;font-size: 24rpx;color: #999;width: 25%;position: relative;padding: 20rpx 0;}
  44. .datasw .li text {display: block;font-size: 32rpx;color: #333;font-weight: bold;margin-top: 8rpx;}
  45. .con {/* margin-top: -120rpx; */margin-top: 30rpx;position: relative;z-index: 4;}
  46. .vip {margin: 20rpx 30rpx 30rpx !important;position: relative;
  47. /* background-image: linear-gradient(to left, #FFC957, #FFEA73); */
  48. border-radius: 20rpx !important;}
  49. .vipbg {position: absolute;top: 0;left: 0;width: 100%;height: 88rpx;z-index: 1;}
  50. .vipc {position: relative;z-index: 2;font-size: 30rpx;color: #FFDEC2;height: 88rpx;align-items: center;padding: 0 30rpx;}
  51. .vipc .flex {align-items: center;}
  52. .vipc image {width: 44rpx;height: 37rpx;margin: 0 13rpx;}
  53. .level {font-size: 36rpx;}
  54. .cheng {font-size: 24rpx;color: #FFDEC2;opacity: .5;}
  55. .ling {
  56. /* padding: 15rpx 24rpx; */
  57. width: 122rpx;height: 44rpx;line-height: 44rpx;border-radius: 22rpx;font-size: 24rpx;color: #A25008;text-align: center;background: #FFFFFF;background: linear-gradient(270deg, #FCBC85 0%, #FFE2C9 100%);font-weight: bold;}
  58. .vipimg {width: 33rpx;height: 29rpx;}
  59. .huiyuan {font-size: 28rpx;color: #FFDEC2;}
  60. .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;}
  61. .rule image {width: 34rpx;height: 32rpx;margin-right: 11rpx;}
  62. /* 注册会员 */
  63. /* .regi{position: fixed;left: 0;bottom: 0;right: 0;padding: 0 30rpx 30rpx;background: #fff;z-index: 100;}
  64. .regi-tit{border-bottom: 2rpx solid #D8D8D8;font-size: 30rpx;color: #333;padding: 25rpx 0 15rpx;text-align: center;}
  65. .regi-close{width: 37rpx;height: 37rpx;position: absolute;top: 20rpx;right: 22rpx;}
  66. .phone{align-items: center;margin: 30rpx 0 40rpx;}
  67. .phone input{font-size: 30rpx;color: #333;}
  68. .getphone{background: #62B23F;width: 216rpx !important;height: 60rpx !important;border-radius: 30rpx !important;font-size: 24rpx;color: #fff;align-items: center;justify-content: center;}
  69. .getphone image{width: 33rpx;height: 27rpx;margin-right: 10rpx;}
  70. .regi-btn{background: #EA6739;height: 70rpx;line-height: 70rpx;font-size: 30rpx;color: #fff;text-align: center;}
  71. */
  72. /* vip */
  73. .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;}
  74. /* 设置主页面颜色为黑白 */
  75. .not-color{background: #fff !important;}
  76. .not-color .login-btn{border-color: #333;color: #333;}
  77. .not-color .datas .li,.not-color .mines view{color: #333;}
  78. .not-color .edu{color: #999;}
  79. /* 会员升级 */
  80. .upgrade{position: relative;z-index: 5;padding: 30rpx 40rpx;font-size: 26rpx;color: #333;justify-content: space-between;text-align: center;flex-wrap: nowrap;}
  81. .upgrade::before{content: '';display: block;height: 6rpx;background: rgba(0,0,0,.3);border-radius: 3rpx;position: absolute;left: 88rpx;right: 85rpx;bottom: 32rpx;}
  82. .upgrade .li{position: relative;}
  83. .upgrade .li::after{content: '';display: block;width: 10rpx;height: 10rpx;background: #333;border-radius: 50%;margin: 20rpx auto 0;}
  84. .upgrade .li.active::after{background: var(--mina);}
  85. .upgrade .li.active{color: var(--mina);}
  86. .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;}
  87. .vip-info text{display: block;}
  88. .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;}
  89. .upgrade .li:last-child .vip-info{right: 0;left: auto;transform: inherit;}
  90. .upgrade .li:last-child .vip-info::before{right: 45rpx;left: auto;transform: inherit;}
  91. .box {background: #fff;border-radius: 24rpx;padding: 0 30rpx;margin: 0 30rpx;}
  92. .mlist {margin-top: 20rpx;}
  93. .mlist .li {font-size: 30rpx;color: #000;border-bottom: 1rpx solid #E9E9E9;padding: 25rpx 0 !important;text-align: left;}
  94. .mlist .li:last-child {border-bottom: none;}
  95. .mlist .li text{display: block;font-size: 24rpx;color: var(--main);margin-right: 10rpx;}
  96. .mlist .li button{font-size: 30rpx;color: #000;}
  97. .mlist .li button image{width: 49rpx;height: 49rpx;margin-right: 25rpx;}
  98. .mlistBtn{font-size: 30rpx;text-align: left !important;}
  99. .mico {width: 49rpx;height: 49rpx;margin-right: 25rpx;}
  100. /* 金牌顾问 */
  101. .guwen{background: #fff;border-radius: 20rpx;margin: 30rpx;padding: 25rpx 30rpx;position: relative;}
  102. .gw-tit{font-size: 30rpx;color: #333;}
  103. .gw-info{margin-top: 20rpx;}
  104. .gw-info image{width: 78rpx;height: 78rpx;border-radius: 50%;margin-right: 15rpx;}
  105. .gw-name{font-size: 28rpx;color: #333;}
  106. .gw-zc{font-size: 24rpx;color: #999;}
  107. .gw-btn{width: 170rpx !important;height: 58rpx !important;background: #F5F5F5;border-radius: 29rpx !important;font-size: 24rpx;color: #009AFF;line-height: 58rpx !important;text-align: center;}
  108. .gw-tag{width: 230rpx;height: 48rpx;position: absolute;font-size: 20rpx;color: #fff;top: -10rpx;right: 0;}
  109. .gw-bg{width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;}
  110. .gw-tag view{position: relative;z-index: 2;padding-left: 50rpx;}
  111. /* 红包 */
  112. .hongbao{margin: 30rpx;background: linear-gradient(90deg, #FFEBD1 0%, #FFC380 100%);height: 80rpx;border-radius: 12rpx;font-size: 24rpx;color: #9E5800;padding: 0 29rpx 0 26rpx;}
  113. .hb-img{width: 168rpx;height: 36rpx;margin-right: 20rpx;}
  114. .hb-rico{width: 15rpx;height: 22rpx;}
  115. .hb-info{padding-left: 23rpx;position: relative;}
  116. .hb-info::before{content: '';display: block;width: 1rpx;height: 40rpx;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background: #DF9F55;}
  117. /* 我的账户 */
  118. .money-bar{margin: 0 30rpx;display: flex;display: -webkit-flex;padding-bottom: 30rpx;align-items: center;}
  119. .money-number{width: 122rpx;height: 59rpx;font-size: 40rpx;font-weight: 400;line-height: 59rpx;color: #333333;opacity: 1;}
  120. .money-text{width: 60rpx;height: 45rpx;font-size: 30rpx;font-weight: 400;line-height: 45rpx;color: #999999;}
  121. .service-item{margin: 0 30rpx;padding: 30rpx 0;display: flex;display: -webkit-flex;}
  122. .flex-1{flex: 1;-webkit-flex:1;}
  123. .recharge{width: 120rpx;height: 50rpx;border-radius: 25rpx;background: var(--mina);font-size: 28rpx;color: #fff;text-align: center;line-height: 50rpx;}
  124. .border-bottom-solid{border-bottom: 1rpx solid #F1F1F1;}
  125. .border-top-solid{border-top: 1rpx solid #F1F1F1;}
  126. .service-icon{width: 34rpx;height: 34rpx;margin-right: 12rpx;}
  127. .service-more{display: block;width: 14rpx;height: 21rpx;margin:auto 0 auto auto}
  128. .memberCode{
  129. display: inline-block;
  130. margin-left: 20rpx;
  131. height: 42rpx;
  132. line-height: 42rpx;
  133. }
  134. .memberCode .memberCode-icon{
  135. width: 42rpx;
  136. height: 42rpx;
  137. line-height: 42rpx;
  138. background: #FFFFFF;
  139. border-radius: 100%;
  140. display: inline-block;
  141. vertical-align: middle;
  142. z-index: 2;
  143. position: relative;
  144. text-align: center;
  145. }
  146. .memberCode .memberCode-icon image{
  147. margin: auto;
  148. width: 24rpx;
  149. height: 24rpx;
  150. display: inline-block;
  151. }
  152. .memberCode .memberCode-text{
  153. width: 90rpx;
  154. padding-right: 10rpx;
  155. height: 42rpx;
  156. line-height: 42rpx;
  157. background-color: #D5F1FF;
  158. border-radius: 0rpx 50rpx 50rpx 0rpx;
  159. font-size: 24rpx;
  160. color: #108FFF;
  161. display: inline-block;
  162. margin-left: -21rpx;
  163. padding-left: 21rpx;
  164. vertical-align: middle;
  165. font-weight: bold;
  166. text-align: center;
  167. z-index: 1;
  168. }
  169. .tuiguang{padding: 0 30rpx;}
  170. .tuan-money{align-items: flex-start;padding: 30rpx 0;}
  171. .blance{font-size: 26rpx;color: #999;}
  172. .blance view{display: block;font-size: 44rpx;color: #000;font-weight: bold;}
  173. .blance text{font-size: 24rpx;color: #999;margin-left: 10rpx;font-weight: normal;}
  174. .txbtn{width: 150rpx;height: 56rpx;background: var(--mina);border-radius: 40rpx;font-size: 24rpx;color: #fff;text-align: center;line-height: 56rpx;}
  175. .tuan-all{padding: 30rpx 0 50rpx;}
  176. .tuan-all .li{width: 50%;font-size: 32rpx;color: #000;position: relative;}
  177. .tuan-all .li text{font-size: 24rpx;color: #999;margin-right: 11rpx;}
  178. /* .tuan-all .li text:last-child{margin-left: 10rpx;} */
  179. .tuan-all .li:last-child{text-align: center;}
  180. .tuan-all .li:last-child::before{content: '';display: block;width: 1rpx;height: 30rpx;background: #E2E2E2;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
  181. .dingyue{background: #FFF9E3;border-radius: 6rpx;font-size: 24rpx;color: #D17C47;padding: 20rpx;}
  182. .guan{background: var(--main);font-size: 24rpx;color: #fff;border-radius: 20rpx;width: 90rpx;height: 40rpx;line-height: 40rpx;text-align: center;}
  183. .ding-close{width: 35rpx;height: 35rpx;margin-left: 10rpx;}
  184. .newsDot{
  185. width: 16rpx;
  186. height: 16rpx;
  187. background: #FF5700;
  188. opacity: 1;
  189. border: 2rpx solid #FFFFFF;
  190. border-radius: 100%;
  191. position: absolute;
  192. top: 0rpx;
  193. right: 0rpx;
  194. }
  195. .card{font-size: 20rpx;color: #fff;text-align: center;padding-right: 30rpx;}
  196. .card image{width: 45rpx;height: 35rpx;margin: 0 auto 8rpx;}