245 lines
7.2 KiB
Vue
245 lines
7.2 KiB
Vue
<script setup>
|
||
import Container from "@/components/Container.vue";
|
||
</script>
|
||
|
||
<template>
|
||
<Container title="会员权益说明">
|
||
<scroll-view scroll-y class="vip-intro" :show-scrollbar="false">
|
||
<view class="content">
|
||
<view class="page-title">射灵星球会员权益</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">核心特权：</text>
|
||
<text>解锁约战、段位评级、实时排位赛、AI智能教练点评四大核心功能。</text>
|
||
</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">专属服务：</text>
|
||
<text>享全年不同阶段VIP专属客服，快速解决技术故障、规则疑问等所有问题。</text>
|
||
</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">新用户福利：</text>
|
||
<text>所有初次绑定设备的用户，免费赠送6个月普通会员。</text>
|
||
</view>
|
||
|
||
<view class="paragraph">
|
||
<text>
|
||
加入射灵星球，在真实射箭运动中体验在线竞技的乐趣，结识全球志同道合的弓友，持续享受新功能与系统升级，不断挑战自我，创造属于你的辉煌战绩！
|
||
</text>
|
||
</view>
|
||
|
||
<view class="table-wrap">
|
||
<view class="intro-toast">
|
||
<image class="intro-toast__bg" src="../../static/vip/intro-toast.png" mode="scaleToFill" />
|
||
<text class="intro-toast__text">初次绑定设备赠送6个月</text>
|
||
</view>
|
||
<view class="benefit-table">
|
||
<view class="table-row table-head">
|
||
<text class="table-cell table-cell--feature">特权</text>
|
||
<text class="table-cell">基础用户</text>
|
||
<text class="table-cell">普通会员</text>
|
||
<text class="table-cell">超级会员</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">专属落点标识</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">螺旋</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">专属命中效果</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">玻璃裂纹</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">箭矢飞行特效</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">光箭</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">每日约战次数</text>
|
||
<text class="table-cell">2次</text>
|
||
<text class="table-cell">22次</text>
|
||
<text class="table-cell">无限</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">每日排位赛次数</text>
|
||
<text class="table-cell">2次</text>
|
||
<text class="table-cell">22次</text>
|
||
<text class="table-cell">无限</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">教练点评</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">专享</text>
|
||
<text class="table-cell">专享</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">昵称美化</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">专享</text>
|
||
<text class="table-cell">专享</text>
|
||
</view>
|
||
<view class="table-row">
|
||
<text class="table-cell table-cell--feature">专属客服</text>
|
||
<text class="table-cell">无</text>
|
||
<text class="table-cell">专享</text>
|
||
<text class="table-cell">专享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="section-title">会员时长叠加与生效规则</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">等级优先级：</text>
|
||
<text>
|
||
同时拥有 超级会员 和 普通会员 时，优先使用超级会员权益，普通会员时长自动顺延，待 超级会员 到期后自动生效。
|
||
</text>
|
||
</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">连续套餐叠加：</text>
|
||
<text>
|
||
已有月 / 半年 / 年卡时再购买连续包月 / 包年，总有效期直接累加；连续套餐从下单日起算，下个周期正常自动扣费。
|
||
</text>
|
||
</view>
|
||
|
||
<view class="paragraph example">
|
||
<text>
|
||
示例：1 月 1 日买半年卡（7 月 1 日到期），1 月 10 日买连续包月，总有效期延至 8 月 1 日，8 月 1 日会发起首次自动扣款。
|
||
</text>
|
||
</view>
|
||
|
||
<view class="paragraph">
|
||
<text class="strong">升级超级会员规则：</text>
|
||
<text>
|
||
购买升级 超级会员 后立即生效，可升级时长以购买页面提示为准；未升级的剩余 普通会员 时长，将在 超级会员 到期后继续使用。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.vip-intro {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.content {
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.page-title,
|
||
.section-title {
|
||
color: #333333;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.page-title {
|
||
margin-bottom: 26rpx;
|
||
}
|
||
|
||
.section-title {
|
||
margin: 42rpx 0 22rpx;
|
||
}
|
||
|
||
.paragraph {
|
||
margin-bottom: 22rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
line-height: 38rpx;
|
||
}
|
||
|
||
.strong {
|
||
color: #333333;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.example {
|
||
color: #666666;
|
||
}
|
||
|
||
.table-wrap {
|
||
position: relative;
|
||
margin-top: 34rpx;
|
||
}
|
||
|
||
.intro-toast {
|
||
position: absolute;
|
||
top: -38rpx;
|
||
right: 118rpx;
|
||
z-index: 2;
|
||
width: 222rpx;
|
||
height: 54rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.intro-toast__bg {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 222rpx;
|
||
height: 54rpx;
|
||
}
|
||
|
||
.intro-toast__text {
|
||
position: relative;
|
||
z-index: 1;
|
||
color: #333333;
|
||
font-size: 18rpx;
|
||
line-height: 30rpx;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
margin-top: -6rpx;
|
||
}
|
||
|
||
.benefit-table {
|
||
width: 100%;
|
||
border-top: 1rpx solid #e5e5e5;
|
||
border-left: 1rpx solid #e5e5e5;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
min-height: 60rpx;
|
||
}
|
||
|
||
.table-cell {
|
||
width: 22.5%;
|
||
min-height: 60rpx;
|
||
padding: 12rpx 4rpx;
|
||
border-right: 1rpx solid #e5e5e5;
|
||
border-bottom: 1rpx solid #e5e5e5;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #333333;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.table-cell--feature {
|
||
width: 32.5%;
|
||
}
|
||
|
||
.table-head .table-cell {
|
||
color: #666666;
|
||
font-weight: 700;
|
||
}
|
||
</style>
|