51、个人中心_历史足迹我的订单静态结构
pages\user\index.wxml
<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-ding_dan"></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>
</view>
pages\user\index.less
.user_content{
position: relative;
.user_main{
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{
}
}
}
}
}
}
