Files
xiuhuwangqiu/bundle/combo/combo-list.vue
2026-04-07 16:07:36 +08:00

87 lines
2.2 KiB
Vue

<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>