<template>
    <view>
        <navbar title="套餐卡"></navbar>

        <view style="margin-top: 20px;">
            <!-- 青年卡 -->
            <view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=youth')">
                <view class="pr">
                    <image src="https://xh.stnav.com/uploads/sport/qnk.png" style="width: 690rpx; height: 300rpx;" />
                    <view class="kt-btn-bg">
                        <view>立即开通</view>
                    </view>
                </view>
            </view>

            <!-- 成人卡 -->
            <view class="pr d-c-c mb-20" @click="jumpPage('/bundle/combo/details?type=adult')">
                <view class="pr">
                    <image src="https://xh.stnav.com/uploads/sport/crk.png" style="width: 690rpx; height: 300rpx;" />
                    <view class="kt-btn-bg">
                        <view>立即开通</view>
                    </view>
                </view>
            </view>

            <!-- 亲子卡 -->
            <view class="pr d-c-c" @click="jumpPage('/bundle/combo/details?type=family')">
                <view class="pr">
                    <image src="https://xh.stnav.com/uploads/sport/qzk.png" style="width: 690rpx; height: 300rpx;" />
                    <view class="kt-btn-bg">
                        <view>立即开通</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/navbar.vue';

export default {
    components: {
        navbar,
    },
    data() {
        return {

        }
    },
    methods: {
        /*跳转页面*/
        jumpPage(path) {
            this.gotoPage(path);
        },
    }
}
</script>


<style lang="scss">
page {
    background-color: #fff;
}

.kt-btn-bg {
    position: absolute;
    left: 34rpx;
    bottom: 44rpx;
    background-image: url(https://xh.stnav.com/uploads/sport/kt-btn.png);
    background-size: 100% 100%;
    width: 258rpx;
    height: 56rpx;
    line-height: 56rpx;
    color: #F62036;
    font-size: 30rpx;
    font-weight: bold;

    & view {
        padding-left: 60rpx;
    }
}

.mb-20 {
    margin-bottom: 20px;
}
</style>