用vue写一个我的页面
时间: 2023-12-18 20:03:19 浏览: 37
好的,以下是一个简单的我的页面的Vue组件示例:
```html
<template>
<div class="mine">
<div class="avatar">
<img src="./assets/avatar.png" alt="头像">
<p>用户名</p>
</div>
<div class="info">
<div class="item">
<p>收货地址</p>
<router-link to="/address">
<i class="iconfont icon-arrow-right"></i>
</router-link>
</div>
<div class="item">
<p>我的订单</p>
<router-link to="/orders">
<i class="iconfont icon-arrow-right"></i>
</router-link>
</div>
<div class="item">
<p>账户安全</p>
<router-link to="/security">
<i class="iconfont icon-arrow-right"></i>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Mine',
}
</script>
<style>
.mine {
padding: 20px;
}
.avatar {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
.info .item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
.info .item:last-child {
border: none;
}
.info .item p {
font-size: 16px;
}
.info .item i {
font-size: 12px;
color: #c7c7cc;
}
</style>
```
这个组件包含一个头像和一些个人信息的展示,以及一些入口链接,这些链接通过`router-link`实现跳转。当然,实际应用中,你可以根据需要添加更多的功能和样式来完善我的页面。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)