new.scss 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. @charset "utf-8";
  2. //font
  3. $bg-color:#f8f9fa; // 全局背景色
  4. $tag-bg:#f2f2fa; // 标签背景色
  5. $highlight-color: #f0f0f0; // 弱线分割
  6. $grey-color: #efefef; // 列表分隔
  7. $grey-border-bottom: 1px solid $highlight-color; // 列表底部分隔线
  8. $red:#ff5c5c; // 品牌色
  9. $black202020:#202020; // 大黑
  10. $black7a7a7a:#7a7a7a; // 中黑
  11. $blackafafaf:#afafaf; // 灰
  12. $efefef:#efefef;
  13. $f0f0f0:#f0f0f0;
  14. // 我的界面嵌套样式css
  15. // 头部个人消息
  16. .top_info{
  17. width: 100%;
  18. background-color: #fff;
  19. background-image: url('../static/img/bg-me.png');
  20. background-repeat: no-repeat;
  21. background-size: 100%;
  22. margin-bottom: 1rem;
  23. .user_info{
  24. padding: 1rem 0.5rem;
  25. padding-left: 2rem;
  26. padding-top: 6rem;
  27. h2{
  28. width: 6rem;
  29. height: 6rem;
  30. border-radius: 50%;
  31. float: left;
  32. margin-right: 1rem;
  33. display:flex;
  34. align-items:center;
  35. }
  36. h2 img{
  37. width: 100%;
  38. }
  39. div{
  40. float: left;
  41. // display:flex;
  42. align-items:center;
  43. p{
  44. display: block;
  45. color: #fff;
  46. }
  47. }
  48. }
  49. // end:头像姓名结束
  50. // 会员尊享
  51. .verify{
  52. border-radius: 0.8rem;
  53. padding:0 1rem;
  54. margin: 0 1.5rem;
  55. box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  56. background-color: #fff;
  57. height: 6rem;
  58. line-height: 6rem;
  59. position: relative;
  60. margin-top: 1rem;
  61. p{
  62. color: #d4ae5b;
  63. font-size: 1.8rem;
  64. font-weight: bold;
  65. padding-left: 3rem;
  66. &::after{
  67. content: '';
  68. display: block;
  69. position: absolute;
  70. width: 2.2rem;
  71. height: 2.2rem;
  72. left: 1rem;
  73. top: 50%;
  74. margin-top: -1.1rem;
  75. background-image: url('../static/img/icon_V.png');
  76. background-repeat: no-repeat;
  77. background-size: 100%;
  78. }
  79. }
  80. a{
  81. padding: 0 0.8rem;
  82. border-radius: 0.5rem;
  83. color: #fff;
  84. font-weight: bold;
  85. height: 3rem;
  86. line-height: 3rem;
  87. position: absolute;
  88. top: 50%;
  89. right: 2rem;
  90. margin-top: -1.5rem;
  91. font-size: 1.5rem;
  92. }
  93. }
  94. // end:会员尊享结束
  95. .real_name{
  96. padding-left: 1.5rem;
  97. background-color: #fff;
  98. }
  99. }
  100. // 菜单列表
  101. .menu-list{
  102. margin-bottom: 1rem;
  103. background-color: #fff;
  104. li{
  105. position: relative;
  106. height: 5.5rem;
  107. line-height: 5.5rem;
  108. z-index: 99;
  109. padding-left: 1.5rem;
  110. &:last-child::after{
  111. height: 0;
  112. }
  113. &::after{
  114. content: '';
  115. display: block;
  116. background-color: $efefef;
  117. position: relative;
  118. height: 0.05rem;
  119. left: 0;
  120. right: 0;
  121. }
  122. img{
  123. width: 2.2rem;
  124. height: 2.2rem;
  125. position: absolute;
  126. top: 50%;
  127. margin-top: -1.1rem;
  128. }
  129. a{
  130. position: absolute;
  131. top: 0;
  132. left: 0;
  133. right: 0;
  134. bottom: 0;
  135. background-color: rgba($color: #000000, $alpha: 0);
  136. z-index: 100;
  137. }
  138. p{
  139. padding-left: 3rem;
  140. // &::before{
  141. // content: '';
  142. // display: block;
  143. // background-color: pink;
  144. // position: absolute;
  145. // width: 2.2rem;
  146. // height: 2.2rem;
  147. // left: 0;
  148. // top: 50%;
  149. // margin-top: -1.1rem;
  150. // }
  151. &::after{
  152. content: '';
  153. display: block;
  154. position: absolute;
  155. width: 0.6rem;
  156. height: 1.2rem;
  157. right: 1.5rem;
  158. top: 50%;
  159. margin-top: -0.6px;
  160. background-image: url('../static/img/arr_back_next.png');
  161. background-repeat: no-repeat;
  162. background-size: 100%;
  163. }
  164. }
  165. }
  166. }