用uniapp写一个我的界面
时间: 2024-03-03 19:50:51 浏览: 113
用uniapp实现一个简单的计算器
好的,下面是一个简单的示例代码,可以展示一个“我的”界面的基本组成部分:
```
<template>
<view class="container">
<view class="header">
<image class="avatar" src="https://via.placeholder.com/150" />
<view class="userinfo">
<text class="username">用户名</text>
<text class="userdesc">个人简介</text>
</view>
</view>
<view class="menu">
<view class="menu-item">
<text class="menu-text">我的订单</text>
<text class="menu-icon">></text>
</view>
<view class="menu-item">
<text class="menu-text">我的收藏</text>
<text class="menu-icon">></text>
</view>
<view class="menu-item">
<text class="menu-text">我的钱包</text>
<text class="menu-icon">></text>
</view>
<view class="menu-item">
<text class="menu-text">我的设置</text>
<text class="menu-icon">></text>
</view>
</view>
</view>
</template>
<style>
.container {
padding-top: 20px;
background-color: #fff;
}
.header {
display: flex;
align-items: center;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
.userinfo {
display: flex;
flex-direction: column;
}
.username {
font-size: 24px;
font-weight: bold;
}
.userdesc {
font-size: 16px;
color: #666;
}
.menu {
margin-top: 20px;
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid #ccc;
}
.menu-text {
font-size: 18px;
}
.menu-icon {
font-size: 24px;
color: #999;
}
</style>
```
这段代码展示了一个包含头像、用户名、个人简介和菜单的“我的”界面。你可以根据自己的需求和设计进行修改和扩展。
阅读全文