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

前端 同时被 2 个专栏收录
332 篇文章 6 订阅
图片.png

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;
}
  • 1
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值