52、续个人中心_其它的静态结构
pages\user\index.wxml
<view class="user_info_wrap">
<view wx:if="{
{userinfo.avatarUrl}}" class="user_img_wrap">
<image class="user_bg" src="{
{userinfo.avatarUrl}}"></image>
<view class="user_info">
<image class="user_icon" src="{
{userinfo.avatarUrl}}"></image>
<view class="user_name">{
{userinfo.nickName}}</view>
</view>
</view>
<view wx:else class="user_btn">
<navigator url="/pages/login/index">登录</navigator>
</view>
</view>
<view class="user_content">
<view class="user_main">
<!--历史足迹-->
<view class="history_wrap">
<navigator>
<view class="his_num">0</view>
<view class="his_name">收藏的店铺</view>
</navigator>
<navigator>
<view class="his_num">0</view>
<view class="his_name">收藏的商品</view>
</navigator>
<navigator>
<view class="his_num">0</view>
<view class="his_name">关注的商品</view>
</navigator>
<navigator>
<view class="his_num">0</view>
<view class="his_name">我的足迹</view>
</navigator>
</view>
<!--我的订单-->
<view class="orders_wrap">
<view class="orders_title">我的订单</view>
<view class="order_content">
<navigator>
<view class="iconfont icon-xiangmujianjie"></view>
<view class="order_name">全部订单</view>
</navigator>
<navigator>
<view class="iconfont icon-daifukuan01"></view>
<view class="order_name">待付款</view>
</navigator>
<navigator>
<view class="iconfont icon-tuikuantuihuo"></view>
<view class="order_name">待退货</view>
</navigator>
<navigator>
<view class="iconfont icon-tuihuo"></view>
<view class="order_name">退款/退货</view>
</navigator>
</view>
</view>
<!--收货地址管理-->
<view class="address_wrap">
收货地址管理
</view>
<!--应用信息相关-->
<view class="app_info_wrap">
<view class="app_info_item app_info_contact">
<text>联系客服</text>
<text>400-618-4088</text>
</view>
<view class="app_info_item">意见反馈</view>
<view class="app_info_item">关于我们</view>
</view>
<!--推荐-->
<view class="recommend_wrap">
把应用推荐给其他人
</view>
</view>
</view>
pages\user\index.less
page{
background-color: #edece8;
}
.user_info_wrap{
height: 45vh;
overflow: hidden;
background-color: var(--themeColor);
position: relative;
.user_img_wrap{
//位置:相对
position: relative;
.user_bg{
height: 50vh;
//css3的filter: blur高斯模糊
filter: blur(10rpx);
}
.user_info{
position: absolute;
left: 50%;
transform: translatex(-50%);
top:20%;
text-align: center;
.user_icon{
width: 150rpx;
height: 150rpx;
border-radius: 50%;
}
.user_name{
color:#fff;
margin-top:40rpx;
}
}
}
.user_btn{
position:absolute;
left:50%;
transform: translatex(-50%);
top:40%;
border: 1rpx solid greenyellow;
color:#ffffff;
font-size: 38rpx;
padding: 30rpx;
border-radius: 10rpx;
}
}
.user_content{
position: relative;
.user_main{
padding-bottom:100rpx;
color:#666;
position: absolute;
width:90%;
left: 50%;
transform: translatex(-50%);
top:-40rpx;
.history_wrap{
background-color:#fff;
/*容器显示:伸缩盒子;*/
display: flex;
navigator{
/*子项每个占1份*/
flex: 1;
text-align: center;
padding:10rpx 0;
.his_num{
color: var(--themeColor);
}
.his_name{
}
}
}
.orders_wrap{
background-color:#fff;
margin-top: 30rpx;
.orders_title{
padding: 20rpx;
border-bottom:1rpx solid#ccc;
}
.order_content{
/*容器显示:伸缩盒子;*/
display: flex;
navigator{
padding: 15rpx 0;
/*子项每个占1份*/
flex: 1;
text-align: center;
.iconfont{
color: var(--themeColor);
font-size: 40rpx;
}
.order_name{
}
}
}
}
.address_wrap{
margin-top: 30rpx;
background-color:#fff;
padding: 20rpx;
}
.app_info_wrap{
margin-top: 30rpx;
background-color:#fff;
.app_info_item{
padding: 20rpx;
border-bottom:1rpx solid #ccc;
}
.app_info_contact{
/*伸缩盒子*/
display: flex;
/*对齐方式:两边对齐*/
justify-content: space-between;
}
}
.recommend_wrap{
margin-top: 30rpx;
background-color:#fff;
padding: 20rpx;
}
}
}