WeChat Mini Program Project_Autumn Choice 55

51. Personal Center_Historical Footprint My Order Static Structure

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{
    
    

                    }
                }
            }
        }
    }
}

Iconfont-Alibaba Vector Icon Library