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

案例截图:

在这里插入图片描述

在这里插入图片描述

<template>
<div class="app-container"><!-- 导类栏 --><van-nav-bartitle="我的"left-arrow@click-left="$router.back()"/><!-- 我的 --><div class="wii-user-head"><!-- 头像 --><!-- <van-imagewidth="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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/49552.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android开发之用户头像上传

一&#xff0c;概述 本篇博客总结一下自己在开发过程中应用到的一些知识&#xff0c;在本篇博客中带领大家完成用户头像选择或者拍照上传&#xff0c;并对图片进行大小的压缩&#xff0c;和形状的控制&#xff0c;可以将用户选择到的图片裁剪成圆形上传。 ok&#xff0c;我们开…

X站全称是什么_考不上高中上什么专业

商洛考不上高中上什么好处 高职和大专区别是什么&#xff1f;高职不如大专吗&#xff1f;高职毕业是否可以续读本科&#xff1f;高职毕业只能做工人吗&#xff1f;高职和大专的主要区别在分为学习内容上的不同以及表达内容等方面的不同&#xff0c;但是本质上并没有区别&#x…

一文搞清到底什么是 .NET?

现在各种 .NET 满天飞&#xff0c;别说新手了&#xff0c;连我这样的老手都差点被绕进去。到底什么是 .NET 呢&#xff1f;《通俗易懂&#xff0c;什么是.NET?什么是.NET Framework&#xff1f;什么是.NET Core? 》这篇文章好长呀&#xff0c;不知道你看完了没有&#xff0c;…

中台,都他妈被你们说糊涂了,文内才是正宗解释,别摸石头过河了,石头早就有了...

&#xff08;1&#xff09;我们先说说技术架构分层 我们按技术架构通常是这样的&#xff1a; 1、UI交互层&#xff1a;Windows UI、PC Web UI、移动App UI、微信小程序UI、摄像头视觉识别人机界面、语音交互人机界面 2、逻辑层&#xff1a;面向对象技术/组件技术/SOA服务中间件…

Vue与React不是真正的响应式编程,Svelte才是正宗

这个题目可能有点夸张&#xff0c;但不管怎样 Svelte 和它的理念就是这样的。如果你还没听说过 Svelte 的话就去了解一下吧——你会见证一场革命的&#xff0c;它将取得空前的成就&#xff08;没有给 Svelte 团队增加压力的意思&#xff09;。 本文不是 Svelte 的入门教程。Sv…

mysql是怎样运行的 从根儿 百度云_读书笔记-MySQL 是怎样运行的:从根儿上理解 MySQL...

mysqld_safe mysqld_safe是一个启动脚本&#xff0c;它会间接的调用mysqld&#xff0c;而且还顺便启动了另外一个监控进程&#xff0c;这个监控进程在服务器进程挂了的时候&#xff0c;可以帮助重启 它。另外&#xff0c;使用mysqld_safe启动服务器程序时&#xff0c;它会将服务…

MariaDB: 谁是更为正宗的MYSQL

随着Oracle买下Sun&#xff0c;MySQL也落入了关系型数据库王者之手。而早在2009年&#xff0c;考虑到Oracle的名声以及其入手之后闭源的可能性&#xff0c;MySQL之父的Michael便先行一步&#xff0c;以他女儿Maria的名字开始了MySQL的另外一个衍生版本&#xff1a;MariaDB。 Mi…

区块链入门教程

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 区块链&#xff08;blockchain&#xff09;是眼下的大热门&#xff0c;新闻媒体大量报道&#xff0c;宣称它将创造未来。 可是&#xf…

真的会谢,ChatGpt能不能靠谱点

我想让GPT帮我生成一个可以实现一根绳子抖动的效果。 一直沟通&#xff1a; 然后它给我生成了一段还是达不到效果的代码&#xff0c;并且代码还不全&#xff01; 本来我想要这种&#xff1a;TweenMax结合elastic-progress的弹性进度条动画 但是ChatGPT给我的代码最后效果是&a…

本科计算机论文致谢词,有关本科毕业的论文致谢词范文

有关本科毕业的论文致谢词范文 本科毕业论文致谢范例一 时间如梭,转眼毕业在即。回想在大学求学的四年,心中充满无限感激和留恋之情。感谢母校为我们提供的良好学习环境,使我们能够在此专心学习,陶冶情操。谨向我的论文指导老师王副教授致以最诚挚的谢意!王老师不仅在学业上…

计算机专业毕业设计致谢,那些笑哭的毕业论文致谢

原标题&#xff1a;那些笑哭的毕业论文致谢 相比正文的废话连篇&#xff0c;冗长乏味&#xff0c;致谢完全可以成为论文的弹幕&#xff0c;专供吐槽。咱们的致谢不用非得把七大姑、八大姨都拉出来感谢一番&#xff0c;像下面这些言语上既诙谐又大胆的致谢言辞&#xff0c;小编就…

html实训报告致谢,毕业论文致谢信(精选10篇)

毕业论文致谢信(精选10篇) 大学生活将要谢下帷幕,我们都知道毕业前要通过毕业论文,毕业论文是一种有准备、有计划的检验大学学习成果的形式,那么优秀的毕业论文是什么样的呢?下面是小编为大家收集的毕业论文致谢信(精选10篇),供大家参考借鉴,希望可以帮助到有需要的朋友。…

html项目的致谢词,毕业论文致谢词范文200字(精选10篇)

毕业论文致谢词范文200字(精选10篇) 导语:大学三年学习时光已经接近尾声,在此我想对我的母校,我的父母、亲人们,我的老师和同学们表达我由衷的谢意。下面是小编整理的毕业论文致谢词范文200字,欢迎参考借鉴! 毕业论文致谢词1 首先感谢学校为作者提供了深造的机会,在四年…

中科院博士论文致谢感人,如果让AI来写又会是怎样

今天&#xff0c;达摩院发布全球最大规模的 中文文本预训练语言模型——PLUG PLUG的参数规模达270亿 它集语言理解与生成能力于一身 在小说创作、诗歌生成、 智能问答等领域表现突出 还以80.614分刷新了CLUE分类榜单纪录 排名仅次于“人类”组 今天阿云也挑了几部经典作品…

matlab论文致谢,2020大学毕业论文致谢信

2020大学毕业论文致谢信 论文致谢词的作用主要是为了表示尊重所有合作者的劳动&#xff0c;它有利于促进形成相互帮助的社会风气。下面是小编为大家精心准备的2020大学毕业论文致谢信&#xff0c;仅供大家参考阅读&#xff01; 2020大学毕业论文致谢信1 我选择了周老师的课题&a…

计算机专业毕业设计致谢,计算机毕业论文致谢范文3篇

计算机毕业论文致谢范文3篇 计算机是20世纪最先进的科学技术发明之一&#xff0c;对人类的生产活动和社会活动产生了极其重要的影响并以强大的生命力飞速发展它的应用领域从最初的军事科研应用扩展到社会的各个领域&#xff0c;已形成了规模巨大的计算机产业带动了全球范围的技…

毕业论文致谢到底要怎么写?

毕业论文论文的致谢怎么写&#xff1f; 这里的标题只是个问句&#xff0c;以下的文字并不会给出答案&#xff0c;毕竟&#xff0c;毕业论文的致谢是最难写的一部分。依我看来&#xff0c;毕业论文致谢&#xff0c;大抵分为两种&#xff0c;一种是中规中矩型&#xff0c;列一堆人…

计算机毕业论文致谢,计算机软件毕业论文致谢词

计算机软件毕业论文致谢词 致谢应以简短的文字对课题研究与论文撰写过程中间直接给予帮助的人员表示自己的谢意,这不仅是一种礼貌,也是对他人劳动的尊重,下面是小编搜集整理的计算机软件毕业论文致谢词,供大家阅读查看。 致谢一: 时间飞逝,大学的学习生活很快就要过去,在…

计算机科学与技术的论文致谢,毕业论文致谢200字(精选7篇)

毕业论文致谢200字(精选7篇) 充实的大学生活即将结束,同学们毕业前都要通过最后的毕业论文,毕业论文是一种比较重要的检验大学学习成果的形式,如何把毕业论文做到重点突出呢?以下是小编整理的毕业论文致谢200字(精选7篇),欢迎大家借鉴与参考,希望对大家有所帮助。 毕业论…

专科计算机毕业论文范文 致谢,专科毕业论文致谢范文(通用6篇)

专科毕业论文致谢范文(通用6篇) 导语:在这篇论文的写作过程中,我深感自己的水平还非常的欠缺。生命不息,学习不止,人生就是一个不断学习和完善的过程,敢问路在何方?下面和小编一起来看专科毕业论文致谢范文(通用6篇),希望有所帮助! 专科毕业论文致谢 篇1 大学三年学习时…