vant list components: App My, Personal Center (including avatar, mobile phone number, user name, click interaction)

Case screenshot:

<template>
<div class="app-container">
  <!-- 导类栏 -->
  <van-nav-bar
    title="我的"
    left-arrow
    @click-left="$router.back()"
  />
  <!-- 我的 -->
  <div class="wii-user-head">
    <!-- 头像 -->
    <!-- <van-image
      width="40"
      height="40"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    /> -->
    <van-cell center title="+62 166***7869" is-link label="编号 2049" icon="https://img01.yzcdn.cn/vant/cat.jpeg" />
  </div>
</div>
</template>
 
<script>
export default {
      
      
  name: 'My',
  data() {
      
      
    return {
      
      };
  },
  mounted() {
      
      },
  methods: {
      
      },
};
</script>
 

<style scoped lang="scss">
/* 自定义css区域 */
@import '../../../assets/styles/theme.scss';
.wii-user-head{
      
      
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /deep/ .van-cell__left-icon{
      
      
      width: 40px;
      height: 40px;
      margin-right: 10px;
    .van-icon__image{
      
      
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit:cover;
    }
  }
}
//新建模板//
</style>

---

Transparent styles:

<style scoped lang="scss">
/* 自定义css区域 */
@import '../../../assets/styles/theme.scss';
.wii-user-head{
      
      
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /deep/ .van-cell{
      
      
    background-color: rgba(0,0,0,0);
    .van-cell__left-icon{
      
      
        width: 40px;
        height: 40px;
        margin-right: 10px;
      .van-icon__image{
      
      
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit:cover;
      }
    }
    .van-cell__title, .van-cell__value, .van-cell__label{
      
      
      color: #FFF;
    }
    .van-cell__right-icon{
      
      
      color: rgba(255,255,225,.5);
    }
  }

}
//新建模板//
</style>