diancan_uni/pages/member-level/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="section_w">
            <view class="section_t">
                <image class="section_icon" src="/static/statics/img/icon_level.png"></image>
                <view class="section_title">
                    <view class="title_text">羊汤馆会员等级</view>
                    <view class="desc_text">羊汤馆会员：您成功登录羊汤馆，并绑定账户即可成为羊汤馆会员。</view>
                </view>
            </view>
            <view class="level_list">
                <view class="row head">
                    <view class="col">会员等级</view>
                    <view class="col">所需经验值</view>
                </view>
                <view class="row">
                    <view class="col">Lv0-Lv5</view>
                    <view class="col">0-500</view>
                </view>
                <view class="row">
                    <view class="col">Lv5-Lv10</view>
                    <view class="col">500-1000</view>
                </view>
                <view class="row">
                    <view class="col">Lv10-Lv15</view>
                    <view class="col">1000-1500</view>
                </view>
                <view class="row">
                    <view class="col">Lv15-Lv20</view>
                    <view class="col">1500-2000</view>
                </view>
                <view class="row">
                    <view class="col">Lv20-Lv25</view>
                    <view class="col">2000-2500</view>
                </view>
                <view class="row">
                    <view class="col">Lv25-Lv30</view>
                    <view class="col">2500-3000</view>
                </view>
            </view>
        </view>
        <view class="section_w sec">
            <view class="section_t">
                <image class="section_icon xing" src="/static/statics/img/icon_xing.png"></image>
                <view class="section_title">
                    <view class="title_text">经验值的计算方式</view>
                    <view class="desc_text">
                        <view class="desc_item">经验值是根据用户在羊汤馆的消费金额，按比例算出的会员经验值。</view>
                        <view class="desc_item">会员每消费人民币1元可获得1点经验值，（如会员消费人民币10元，获得10经验值。）</view>
                        <view class="desc_item">配送费用不计入经验值，优惠的金额无法累积经验值。</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// index.js
export default {
    data() {
        return {};
    },
    onLoad: function (options) {
        // Do some initialize when page load.
    },
    onShow: function () {
        // Do something when page show.
        let that = this;
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {}
};
</script>
<style>
/**index.wxss**/
.section_w {
    padding: 30rpx 45rpx 0;
}
.section_t {
    display: flex;
}
.section_icon {
    display: block;
    width: 30rpx;
    height: 26rpx;
}
.section_icon.xing {
    width: 34rpx;
    height: 33rpx;
}
.section_title {
    flex: 1;
    padding-left: 12rpx;
}
.section_title .title_text {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
}
.section_title .desc_text {
    padding-top: 20rpx;
    font-size: 26rpx;
    color: rgba(51, 51, 51, 0.7);
}
/* 等级列表 */
.level_list {
    width: 660rpx;
    margin-top: 30rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 24rpx;
    color: #333333;
}
.level_list .row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.level_list .row.head {
    background: #f2f3f7;
    font-size: 26rpx;
}
.level_list .row:last-child {
    border-bottom: 0 none;
}
.level_list .row .col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15rpx 0;
}
.level_list .row .col:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
/*  */
.section_w.sec {
    padding-top: 40rpx;
}
.section_title .desc_item {
    margin-top: 20rpx;
    display: flex;
    align-items: flex-start;
}
.section_title .desc_item::before {
    content: '';
    display: block;
    width: 6rpx;
    height: 6rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    margin-right: 16rpx;
    margin-top: 15rpx;
}
</style>