/* 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);
}