鸡汤来咯开发学习笔记-18

1.创建个人中心页面，把self页面弄成通屏在page.json中"navigationStyle": "custom"
页面

<view :style="{height:getStatusBarHeight()+'px'}"></view>
<view class="userinfo">
    <view class="left">
        <view class="avatar">
            <image src="../../static/logo.png" mode=""></image>
        </view>
        <view class="info">
            <view class="username">ikrins</view>
            <view class="text">tt is nb</view>
        </view>
    </view>
    <view class="right">
        <view class="text">编辑资料</view>
        <view class="icon">
            <uni-icons type="right" size="20" color="#999"></uni-icons>
        </view>
    </view>
</view>

样式

.self{
        background: $page-bg-color;
        min-height:100vh ;   //设置元素的最小高度
        .userinfo{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 50rpx;
        }
        .left{
            display: flex;
            align-items: center;
            .avatar{
                width: 120rpx;
                height: 120rpx;
                border: 3px solid #fff;
                border-radius: 50%;
                overflow: hidden;
                image{
                    width: 100%;
                    height: 100%;
                }
                
            }
            .info{
                padding-left: 20rpx;
                .username{
                    font-size: 38rpx;
                    font-weight: 600;
                    color: #111;
                }
                .text{
                    font-size: 26rpx;
                    font-weight: 100;
                    color: $text-font-color-3;
                    padding-top: 10rpx;
                }
                
            }
        }
        .right{
            display: flex;
            align-items: center;
            .text{
                font-size: 28rpx;
                color: #999;
            }
        }
    }