青蛙卖大米小程序2024-11-24
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

254 lines
4.3 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="page">
  3. <navbar title="个人中心" />
  4. <view class="head">
  5. <view class="headImage">
  6. <image src="" mode=""></image>
  7. </view>
  8. <view class="info">
  9. <view class="name">
  10. <view class="one"> 可可</view>
  11. <view class="two"> 黄金会员</view>
  12. </view>
  13. <view class="vip">
  14. IDAa63982546
  15. </view>
  16. <view class="tips">
  17. 注册时间2020-10-11
  18. </view>
  19. </view>
  20. <view class="setting">
  21. <uv-icon name="setting" size="40rpx"></uv-icon>
  22. </view>
  23. </view>
  24. <view class="earnings">
  25. <view class="member">
  26. <view>会员等级黄金会员</view>
  27. <view>查看权益></view>
  28. </view>
  29. <view class="deposit">
  30. <view class="">
  31. <view>
  32. <view>1.00</view>
  33. <view>收益明细</view>
  34. </view>
  35. <view>收益明细</view>
  36. </view>
  37. </view>
  38. </view>
  39. <!-- 酒店 -->
  40. <view class="user">
  41. <view class="line grid">
  42. <view class="title">
  43. 常用功能
  44. </view>
  45. </view>
  46. <view class="cell-bottom">
  47. <uv-cell-group>
  48. <uv-cell icon="share" title="我的邀请码" :isLink="true" arrow-direction="right" />
  49. <uv-cell icon="share" title="我的推荐" :isLink="true" arrow-direction="right " />
  50. <uv-cell icon="share" title="联系客服" :isLink="true" arrow-direction="right " />
  51. <uv-cell icon="share" title="我的地址" :isLink="true" arrow-direction="right " />
  52. </uv-cell-group>
  53. </view>
  54. </view>
  55. <tabber select="center" />
  56. </view>
  57. </template>
  58. <script>
  59. import tabber from '@/components/base/tabbar.vue'
  60. import {
  61. mapGetters
  62. } from 'vuex'
  63. import userShopCommission from '@/components/userShop/userShopCommission.vue'
  64. export default {
  65. components: {
  66. tabber,
  67. userShopCommission,
  68. },
  69. computed: {},
  70. data() {
  71. return {}
  72. },
  73. methods: {}
  74. }
  75. </script>
  76. <style scoped lang="scss">
  77. .page {
  78. .warp {
  79. display: flex;
  80. align-items: center;
  81. justify-content: center;
  82. height: 100%;
  83. }
  84. .rect {
  85. width: 600rpx;
  86. height: 300rpx;
  87. background-color: #fff;
  88. border-radius: 20rpx;
  89. overflow: hidden;
  90. .title {
  91. padding: 10rpx 0 0 15rpx;
  92. background-color: #fd5100;
  93. color: #FFF;
  94. text-align: left;
  95. width: 100%;
  96. height: 18%;
  97. font-size: 36rpx;
  98. }
  99. .center {
  100. height: 40%;
  101. display: flex;
  102. justify-content: center;
  103. align-items: center;
  104. font-size: 36rpx;
  105. }
  106. .bottom {
  107. display: flex;
  108. justify-content: center;
  109. gap: 50rpx;
  110. }
  111. }
  112. }
  113. image {
  114. width: 100%;
  115. height: 100%;
  116. }
  117. .head {
  118. display: flex;
  119. background-color: #fff;
  120. padding: 40rpx 20rpx;
  121. align-items: center;
  122. position: relative;
  123. .headImage {
  124. width: 120rpx;
  125. height: 120rpx;
  126. background-image: url(/static/image/center/3.png);
  127. background-size: 100% 100%;
  128. overflow: hidden;
  129. border-radius: 50%;
  130. margin-right: 40rpx;
  131. }
  132. .info {
  133. font-size: 28rpx;
  134. .vip {
  135. color: #909294;
  136. font-size: 24rpx;
  137. }
  138. .name {
  139. display: flex;
  140. align-items: center;
  141. .one {
  142. color: #343140;
  143. font-size: 32rpx;
  144. font-weight: 600;
  145. }
  146. .two {
  147. font-size: 24rpx;
  148. margin-left: 10rpx;
  149. padding: 3rpx 16rpx;
  150. border-radius: 18rpx;
  151. background-color: rgb(252, 213, 157);
  152. }
  153. }
  154. .tips {
  155. font-size: 26rpx;
  156. color: #ABABAB;
  157. }
  158. }
  159. }
  160. .headBtn {
  161. margin-left: auto;
  162. padding: 15rpx 20rpx;
  163. background-color: $uni-color;
  164. color: #fff;
  165. border-radius: 20rpx;
  166. margin-top: 50rpx;
  167. }
  168. .setting {
  169. position: absolute;
  170. right: 50rpx;
  171. top: 50rpx;
  172. }
  173. .earnings {
  174. width: 94%;
  175. margin-left: 3%;
  176. .member {
  177. display: flex;
  178. align-items: center;
  179. justify-content: space-between;
  180. width: 90%;
  181. margin-left: 5%;
  182. height: 80rpx;
  183. background-image: url("../../static/image/center/12.png");
  184. background-size: 100% 100%;
  185. font-size: 28rpx;
  186. color: #F9CF93;
  187. view {
  188. margin: 0 20rpx;
  189. }
  190. }
  191. .deposit {
  192. height: 300rpx;
  193. margin-top: -20rpx;
  194. background-color: rgb(163, 201, 80);
  195. border-radius: 40rpx;
  196. }
  197. }
  198. .user {
  199. .grid {
  200. flex-direction: column;
  201. font-size: 26rpx;
  202. padding: 20rpx;
  203. .title {
  204. font-weight: 600;
  205. padding: 10rpx;
  206. border-left: 6rpx solid #A3D250;
  207. }
  208. }
  209. .cell-bottom {
  210. width: 96%;
  211. margin-top: 20rpx;
  212. margin-left: 2%;
  213. background-color: #fff;
  214. border-radius: 20rpx;
  215. }
  216. }
  217. </style>