index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <div class="container">
  3. <div class="head-bg"/>
  4. <div class="head-body">
  5. <div class="user-info-body">
  6. <van-image
  7. width="46px"
  8. height="46px"
  9. fit="cover"
  10. round
  11. src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
  12. />
  13. <div class="user-info">
  14. <div class="user-info-name">十里桃花</div>
  15. <div class="user-info-key-body">
  16. <span>xxxxXXXXddddBE</span>
  17. <svg-icon style="width: 24px; height: 24px;" name="copy" />
  18. </div>
  19. </div>
  20. </div>
  21. <van-row justify="end" class="user-info-row">
  22. <van-col span="6" >
  23. <div class="user-bar-icon-box">
  24. <svg-icon class="user-bar-icon" name="address-book"/>
  25. <span class="user-info-text">地址薄</span>
  26. </div>
  27. </van-col>
  28. <van-col span="6">
  29. <div class="user-bar-icon-box">
  30. <svg-icon class="user-bar-icon" name="bar-url"/>
  31. <span class="user-info-text">下载链接</span>
  32. </div>
  33. </van-col>
  34. <van-col span="6">
  35. <div class="user-bar-icon-box">
  36. <svg-icon class="user-bar-icon" name="wallet"/>
  37. <span class="user-info-text">钱包管理</span>
  38. </div>
  39. </van-col>
  40. <van-col span="6">
  41. <div class="user-bar-icon-box">
  42. <svg-icon class="user-bar-icon" name="id-card"/>
  43. <span class="user-info-text">个人资料</span>
  44. </div>
  45. </van-col>
  46. </van-row>
  47. </div>
  48. <!-- 用户索引栏 -->
  49. <van-list class="user-bar-list">
  50. <van-cell
  51. v-for="(item, index) in vanListConfig"
  52. :key="index"
  53. :class="index == vanListConfig.length - 1 ? 'user-bar-list-last' : ''"
  54. :title="item.title"
  55. is-link
  56. @click="evGoPath(item.url)"
  57. >
  58. <template #icon>
  59. <svg-icon class="cell-icon" :name="item.icon" />
  60. </template>
  61. </van-cell>
  62. </van-list>
  63. </div>
  64. </template>
  65. <script setup>
  66. const vanListConfig = [
  67. { title: '元宝兑换', icon:"ingot", url: '/' },
  68. { title: '竞赛', icon:"competition", url: '/' },
  69. { title: '节点分红', icon:"red-envelope", url: '/' },
  70. { title: '帮助中心', icon:"help", url: '/' },
  71. { title: '关于我们', icon:"me", url: '/' },
  72. { title: '系统设置', icon:"set", url: '/' },
  73. { title: '管理员设置', icon:"admin-set", url: '/' },
  74. ]
  75. const evGoPath = (path)=>{
  76. console.log(path)
  77. }
  78. </script>
  79. <style lang="less" scoped>
  80. .head-bg {
  81. height: 197px;
  82. width: 100%;
  83. background: linear-gradient(90deg, #71c4ff4d 0%, #6a92ff63 100%);
  84. filter: blur(54px);
  85. position: absolute;
  86. top: 0;
  87. z-index: -1;
  88. }
  89. .head-body {
  90. width: 100%;
  91. display: flex;
  92. flex-direction: column;
  93. .user-info-body {
  94. flex: 1;
  95. display: flex;
  96. padding: 44px 17px 0 17px;
  97. .user-info {
  98. margin-left: 17px;
  99. .user-info-name {
  100. font-size: 1.1rem;
  101. font-weight: 500;
  102. color: #4765dd;
  103. }
  104. .user-info-key-body{
  105. display: flex;
  106. align-items: center;
  107. font-weight: 400;
  108. font-size: 12px;
  109. color: #4F4F4F;
  110. span {
  111. margin-top: 4px;
  112. margin-right: 4px;
  113. }
  114. }
  115. }
  116. }
  117. .user-info-row {
  118. margin: 27px 17px 0 17px;
  119. height: 78px;
  120. min-height: 78px;
  121. background: #ffffff;
  122. box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
  123. border-radius: 17px 17px 17px 17px;
  124. }
  125. .user-bar-icon-box{
  126. height: 100%;
  127. display: flex;
  128. flex-direction: column;
  129. align-items: center;
  130. justify-content: center;
  131. .user-bar-icon{
  132. width: 25px;
  133. height: 25px;
  134. }
  135. .user-info-text{
  136. font-weight: 400;
  137. font-size: 12px;
  138. color: #000000;
  139. margin-top: 5px;
  140. }
  141. }
  142. }
  143. .van-cell{
  144. height: 42px;
  145. background: #FFFFFF;
  146. border-bottom: 1px solid #FFFFFF;
  147. font-size: 15px ;
  148. &::after{
  149. border-bottom: 1px solid #F2F2F2;
  150. }
  151. }
  152. .user-bar-list-last::after{
  153. border-bottom: 0;
  154. }
  155. .user-bar-list{
  156. margin: 37px 17px 0 17px;
  157. border-radius: 12px 12px 12px 12px;
  158. overflow: hidden;
  159. .cell-icon{
  160. width: 21px;
  161. height: 21px;
  162. margin-right: 4px;
  163. }
  164. }
  165. </style>