wallet_app/src/views/me/index.vue

<template>
  <div class="container">
    <div class="head-bg"/>
    <div class="head-body">
      <div class="user-info-body">
        <van-image
          width="46px"
          height="46px"
          fit="cover"
          round
          src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
        />
        <div class="user-info">
          <div class="user-info-name">十里桃花</div>
          <div class="user-info-key-body">
            <span>xxxxXXXXddddBE</span>
            <svg-icon style="width: 24px; height: 24px;" name="copy" />
          </div>
        </div>
      </div>

      <van-row justify="end" class="user-info-row">
        <van-col span="6"  >
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="address-book"/> 
            <span class="user-info-text">地址薄</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="bar-url"/> 
            <span class="user-info-text">下载链接</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="wallet"/> 
            <span class="user-info-text">钱包管理</span> 
          </div>
        </van-col>
        <van-col span="6">
          <div class="user-bar-icon-box">
            <svg-icon class="user-bar-icon"  name="id-card"/> 
            <span class="user-info-text">个人资料</span> 
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 用户索引栏 -->
    <van-list class="user-bar-list">
      <van-cell 
        v-for="(item, index) in vanListConfig" 
        :key="index" 
        :class="index == vanListConfig.length - 1 ? 'user-bar-list-last' : ''"
        :title="item.title"
        is-link
        @click="evGoPath(item.url)"
      > 
        <template #icon>
          <svg-icon  class="cell-icon" :name="item.icon" />
        </template> 
      </van-cell> 
    </van-list>
  </div>
</template>

<script setup>



const vanListConfig = [
  { title: '元宝兑换', icon:"ingot",  url: '/' },
  { title: '竞赛', icon:"competition",  url: '/' },
  { title: '节点分红', icon:"red-envelope",  url: '/' },
  { title: '帮助中心', icon:"help",  url: '/' },
  { title: '关于我们', icon:"me",  url: '/' },
  { title: '系统设置', icon:"set",  url: '/' },
  { title: '管理员设置', icon:"admin-set",  url: '/' },
]


const evGoPath = (path)=>{
  console.log(path)
}


</script>

<style lang="less" scoped>
 
.head-bg {
  height: 197px;
  width: 100%;
  background: linear-gradient(90deg, #71c4ff4d 0%, #6a92ff63 100%);
  filter: blur(54px);
  position: absolute;
  top: 0;
  z-index: -1;
}
.head-body {
  width: 100%;
  display: flex;
  flex-direction: column;
 
  .user-info-body {
    flex: 1;
    display: flex;
    padding: 44px 17px 0 17px;
    .user-info {
      margin-left: 17px;
      .user-info-name {
        font-size: 1.1rem;
        font-weight: 500;
        color: #4765dd;
      }
      .user-info-key-body{
        display: flex;
        align-items: center; 
        font-weight: 400;
        font-size: 12px;
        color: #4F4F4F; 
        span { 
          margin-top: 4px;
          margin-right: 4px;
        }
      }
    }
  }
  .user-info-row {
    margin: 27px 17px 0 17px;
    height: 78px;
    min-height: 78px;
    background: #ffffff;
    box-shadow: 0px 4px 8px -2px rgba(25, 75, 137, 0.25);
    border-radius: 17px 17px 17px 17px;
  }
  .user-bar-icon-box{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .user-bar-icon{
      width: 25px;
      height: 25px;
    }
    .user-info-text{
      font-weight: 400;
      font-size: 12px;
      color: #000000;
      margin-top: 5px;
    }
  }
}
.van-cell{
  height: 42px;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  font-size: 15px ;
  &::after{
    border-bottom: 1px solid #F2F2F2;
  }
}
.user-bar-list-last::after{
  border-bottom: 0;
}

.user-bar-list{
  margin: 37px 17px 0 17px;
  border-radius: 12px 12px 12px 12px;
  overflow: hidden; 

  .cell-icon{
    width: 21px;
    height: 21px;
    margin-right: 4px;
  }
}
</style>