1、html代码
<ion-content>
<!-- <div class="user_top">
<div class="user_left">
<img src="/assets/user.png">
</div>
<div class="user_right">
<h4>用户名:zhangsan</h4>
<p>普通会员</p>
</div>
</div> -->
<div class="user_top">
<div class="user_left">
<img src="/assets/user.png">
</div>
<div class="user_right">
<p>登录/注册 <ion-icon slot="start" name="arrow-forward"></ion-icon></p>
</div>
</div>
<ion-list class="user_list">
<ion-item-divider>
</ion-item-divider>
<ion-item>
<ion-icon name="copy-sharp" slot="start" color="danger"></ion-icon>
<span>全部订单</span>
</ion-item>
<ion-item>
<ion-icon name="card" slot="start" color="success"></ion-icon>
<span> 待付款</span>
</ion-item>
<ion-item lines="none">
<ion-icon name="subway" slot="start" color="warning"></ion-icon>
<span>待收货</span>
</ion-item>
<ion-item-divider>
</ion-item-divider>
<ion-item>
<ion-icon name="star-sharp" slot="start" color="tertiary"></ion-icon>
<span>我的收藏</span>
</ion-item>
<ion-item>
<ion-icon name="people" slot="start" color="secondary"></ion-icon>
<span>在线客服</span>
</ion-item>
</ion-list>
</ion-content>
2、CSS
.user_top{
background: url('/assets/user_bg.jpg') no-repeat center center / 100% 100%;
color: #fff;
padding: 3rem 1rem;
display: flex;
align-items: center;
.user_left{
width: 5rem;
img{
width: 5rem;
height: 5rem;
border-radius: 5rem;
}
}
.user_right{
flex: 1px;
padding-left: 1rem;
font-size: 1.4rem;
h4{
font-size: 1.6rem;
}
ion-icon{
position: relative;
top:.2rem;
}
}
}
ion-item-divider{
min-height: 1rem!important;
}
.user_list{
ion-icon{
font-size: 1.8rem;
}
span{
font-size: 1.6rem;
}
}
3、ts代码 无