【原】微信小程序打造本地宝（3）——个人中心

文章目录

个人中心

展示

由图中可以看出，大体可分为头像、列表功能、小白条、小箭头

头像

用wxss渲染就可以啦

/* pages/profile/profile.wxss */
.avatar{
    background-color: #f60;
    height: 400rpx;
}
.avatar image{
    width: 200rpx;
    height: 200rpx;
    border:10rpx solid rgba(0, 0, 0, .1);
    border-radius: 50%;
}

page{
    background-color:#f1f1f1;
}

<view class="avatar center">
    <image src='/assets/images/avatar.png'></image>
</view>

列表功能

<view class='divider'></view>
<view class='cell'>
    <navigator class='cell-item arrow'>
        <text>个人资料</text>
    </navigator>
    <navigator class='cell-item arrow'>
        <text>我的优惠券</text>
    </navigator>
</view>
<view class='divider'></view>
<view class='cell'>
    <navigator class='cell-item arrow'>
        <text>常见问题</text>
    </navigator>
    <navigator class='cell-item arrow'>
        <text>使用条款</text>
    </navigator>
</view>
<view class='divider'></view>
<view class='cell'>
    <navigator class='cell-item arrow'>
        <text>设置</text>
    </navigator>
</view>

小白条的封装在（一）中已经写了

箭头

/* 功能封装4：箭头 */

.arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arrow::after {
    content: "";
    width: 15rpx;
    height: 15rpx;
    border-top: 3rpx solid #ccc;
    border-right: 3rpx solid #ccc;
    transform: rotate(45deg);
}