微信小程序简单常见首页demo

wxml

<view class='index-contier'>
    <view class="index-left">
        <view>电池剩余</view>
        <view>62%</view>
    </view>
    <view class="index-center">
        <view class="logo">头像</view>
        <view>小猪快跑</view>
    </view>

    <view class="index-right">
        <view>绑定手环</view>
        <view>62%</view>
    </view>
</view>

<view class='inform'>

    <view class='phone'>
        <span>手机</span>
        <span>123456788</span>
    </view>
    <view class='name'>
        <span>姓名</span>
        <span>王婷</span>
    </view>
    <view class='sex'>
        <span>性别</span>
        <span>女</span>
    </view>
    <view class='age'>
        <span>年龄</span>
        <span>13</span>
    </view>
    <view class='manger'>
        <span>部门</span>
        <span>软件部门</span>
    </view>

</view>

wxss

.index-contier {
    color: #ffffff;
    font-size: 12px;
    width: 100%;
    height: 150px;
    background: linear-gradient(#e0f1f7, #0a99c9);
}

.index-left {
    float: left;
    width: 30%;
    text-align: center;
    margin-top: 92px;
}

.index-center {
    float: left;
    width: 40%;
    text-align: center;
    margin-top: 30px;
}

.logo {
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 1px solid #0a99c9;
    border-radius: 40px;
}

.index-right {
    float: left;
    width: 30%;
    text-align: center;
    margin-top: 92px;
}

.inform {
    padding: 0 6px;
    font-size: 12px;
}

.phone {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e5e2;
}

.phone span {
    margin: 0 10px;
}

.phone span:nth-child(2) {
    float: right;
}

.name {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e5e2;
}

.name span {
    margin: 0 10px;
}

.name span:nth-child(2) {
    float: right;
}

.sex {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e5e2;
}

.sex span {
    margin: 0 10px;
}

.sex span:nth-child(2) {
    float: right;
}

.age {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e5e2;
}

.age span {
    margin: 0 10px;
}

.age span:nth-child(2) {
    float: right;
}

.manger {
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e6e5e2;
}

.manger span {
    margin: 0 10px;
}

.manger span:nth-child(2) {
    float: right;
}