微信小程式簡單常見首頁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;
}