vant 列表组件：App我的、个人中心（含头像、手机号、用户名、点击交互）

最新推荐文章于 2024-05-14 03:18:43 发布

草巾冒小子

最新推荐文章于 2024-05-14 03:18:43 发布

阅读量1.3k

点赞数

分类专栏： vantUI 有赞文章标签：前端 javascript css

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/128278879

版权

vantUI 有赞专栏收录该内容

9 篇文章 0 订阅

订阅专栏

案例截图：

在这里插入图片描述

<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>

透明的样式：

在这里插入图片描述

<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>