liaotian/pages/mine/vipinfo.vue

<template>
    <view class="page">
        <image src="../../static/img/vipbg.png" :style="{'width':windowWidth,'height':windowWidth}"></image>
        <view class="duibBox">
            <p>VIP会员权益对比</p>
            <table class="duibtable">
                <thead>
                    <tr>
                        <th class="viphuibg02">权益描述</th>
                        <th class="viphuibg">普通用户</th>
                        <th class="vipbluebg">代理</th>
                        <th class="orgbg">个人VIP</th>
                        <th class="vipzisbg">团队VIP</th>

                    </tr>
                </thead>
                <tbody>

                    <tr>
                        <td>创建群组</td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>

                    </tr>

                    <tr>
                        <td>专属图标</td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>

                    </tr>
                    <tr>
                        <td>发布计划</td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>

                    </tr>



                    <tr>
                        <td>关键词屏蔽</td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>

                    </tr>

                    <tr>
                        <td>赠送下级VIP</td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/wrong.png">
                        </td>
                        <td>
                            <image src="../../static/img/right.png">
                        </td>

                    </tr>
                    <tr>
                        <td>VIP使用人数</td>
                        <td>0</td>
                        <td>0</td>
                        <td class="vipred">1</td>
                        <td class="vipzis">{{system['vip1_max']}}</td>

                    </tr>

                    <tr>
                        <td>群组最大人数</td>
                        <td>{{system['people_sum0']}}</td>
                        <td>{{system['people_sum1']}}</td>
                        <td class="vipred">{{system['people_sum2']}}</td>
                        <td class="vipzis">{{system['people_sum3']}}</td>

                    </tr>
                    <tr>
                        <td>创建群组数量</td>
                        <td>{{system['group_sum0']}}</td>
                        <td>{{system['group_sum1']}}</td>
                        <td class="vipred">{{system['group_sum2']}}</td>
                        <td class="vipzis">{{system['group_sum3']}}</td>

                    </tr>
                    <tr>
                        <td>加入群组数量</td>
                        <td>{{system['group_join0']}}</td>
                        <td>{{system['group_join1']}}</td>
                        <td class="vipred">{{system['group_join2']}}</td>
                        <td class="vipzis">{{system['group_join3']}}</td>

                    </tr>
                    <tr>
                        <td>好友最多人数</td>
                        <td>{{system['friend_num0']}}</td>
                        <td>{{system['friend_num1']}}</td>
                        <td class="vipred">{{system['friend_num2']}}</td>
                        <td class="vipzis">{{system['friend_num3']}}</td>

                    </tr>



                    <tr>
                        <td>价格</td>
                        <td class="vipblue"><strong>免费</strong></td>
                        <td class="vipblue"><strong>免费</strong></td>
                        <td class="vipred"><strong>{{system['vip_month']}}元/月</strong></td>
                        <td class="vipzis"><strong>{{system['vip1_month']}}元/月</strong></td>

                    </tr>


                    <tr>
                        <td colspan="3"></td>

                        <td class="vipred">
                            <button class="btn1" @tap="joinvip(0);">加入</button>

                        </td>
                        <td class="vipzis">
                            <button class="btn2" @tap="joinvip(2);">加入</button>

                        </td>

                    </tr>

                </tbody>
            </table>
            <view
                style="height: 30px;line-height: 30px;text-align: center;font-size: 14px;color: #666;margin-bottom: 10px;margin-top: 10px;">
                注：VIP的最终解释权归本站所有</view>
        </view>
    </view>
</template>

<script>
    var windowWidth = uni.getSystemInfoSync().windowWidth
    export default {
        data() {
            return {
                windowWidth: windowWidth + 'px',
                system: uni.getStorageSync('system'),
            };
        },
        methods: {
            joinvip(type) {
                uni.redirectTo({
                    url: 'joinvip?type=' + type
                })
            }
        }
    }
</script>

<style lang="scss">
    .page {
        font-size: 14px;
    }

    .duibBox {
        margin-top: 20px;
        text-align: center;
        border-top: 1px solid #e5e5e5;
    }

    .duibBox>p {
        background-color: #FFF;
        margin-top: -15px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        width: 140px;
        margin-left: calc(50% - 70px);
    }

    .duibtable {
        width: 100%;
        border-spacing: 0px;
        margin-top: 20px;
    }

    .duibtable th,
    .duibtable td {
        width: 18%;
        line-height: 35px;

    }

    .duibtable th:first-child {
        color: #666;
        width: 26%;
    }

    .duibtable th {
        color: #fff;
        text-align: center;
        font-size: 14px;
    }

    .duibtable td {
        text-align: center;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
    }

    .duibtable image {
        height: 14px;
        width: 14px;
        vertical-align: middle;
    }

    .vipgreen {
        color: #2f9945
    }

    .viporg {
        color: #ff8728
    }

    .viphui {
        color: #999
    }

    .vipblue {
        color: #64c8ca
    }

    .vipblue01 {
        color: #3984e5
    }

    .qqqun01 {
        color: #F00;
        margin: 0 10px;
    }

    .qqqun02 {
        margin: 0 10px;
    }

    .vipred {
        color: #ff8728
    }

    .vipzis {
        color: #c562e6
    }

    .viphuibg01 {
        background: #f9f9f9;
    }

    .viphuibg02 {
        background: #eee;
    }

    .vipzisbg {
        background: #c562e6;
    }

    .orgbg {
        background: #ff8728;
    }

    .viphuibg {
        background: #b4b4c0;
    }

    .vipbluebg {
        background: #64c8ca;
    }

    .vipredbg {
        background: #f4614f;
    }

    .vipblack {
        color: #606266;
        font-size: 15px
    }

    .viphui {
        color: #999;
    }

    .vipMainBox,
    .vipMainBox .vipContent .tabbtnBox {
        width: 1200px;
        margin: 20px auto;
        background: #fff;
    }

    .vipMainBox {
        box-shadow: 0 1px 3px rgba(27, 95, 160, .1);
    }

    .btn1 {
        display: inline-block;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        text-align: center;


        background-color: #ff8728;
        color: #fff !important;
        font-size: 12px;
        border: 0px;
        border-radius: 5px;
        vertical-align: middle;
    }

    .btn2 {
        display: inline-block;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        text-align: center;

        margin: 0px 5px;
        background-color: #c562e6;
        color: #fff !important;
        font-size: 14px;
        border: 0px;
        border-radius: 5px;
        vertical-align: middle;
    }
</style>