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;

}