微信小程序项目_秋泊优选56

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;
        }

    }
}