239 lines
7.2 KiB
Vue
239 lines
7.2 KiB
Vue
<script setup>
|
|
import { t } from "@/locales";
|
|
|
|
import Container from "@/components/Container.vue";
|
|
</script>
|
|
|
|
<template>
|
|
<Container :title="t('membership_benefits')">
|
|
<scroll-view scroll-y class="vip-intro" :show-scrollbar="false">
|
|
<view class="content">
|
|
<view class="page-title">{{ t('sheling_planet_membership_benefits') }}</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('core_features') }}</text>
|
|
<text>{{ t('unlock_four_core_features_challenges_rank_ratings_live_ranked_ma') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('exclusive_support') }}</text>
|
|
<text>{{ t('get_vip_customer_support_at_different_stages_throughout_the_year') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('new_user_gift') }}</text>
|
|
<text>{{ t('all_users_binding_a_device_for_the_first_time_receive_6_months_o') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph">
|
|
<text>{{ t('join_sheling_planet_to_enjoy_online_competition_through_real_arc') }}</text>
|
|
</view>
|
|
|
|
<view class="table-wrap">
|
|
<view class="intro-toast">
|
|
<image class="intro-toast__bg" src="https://static.shelingxingqiu.com/shootmini/static/vip/intro-toast.png" mode="scaleToFill" />
|
|
<text class="intro-toast__text">{{ t('6_months_free_with_first_device_binding') }}</text>
|
|
</view>
|
|
<view class="benefit-table">
|
|
<view class="table-row table-head">
|
|
<text class="table-cell table-cell--feature">{{ t('benefit') }}</text>
|
|
<text class="table-cell">{{ t('basic_user') }}</text>
|
|
<text class="table-cell">{{ t('vip_membership') }}</text>
|
|
<text class="table-cell">{{ t('svip_membership') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('exclusive_impact_markers') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('spiral') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('exclusive_hit_effects') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('glass_cracks') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('arrow_flight_effects') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('light_arrow') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('daily_challenges') }}</text>
|
|
<text class="table-cell">{{ t('2') }}</text>
|
|
<text class="table-cell">{{ t('22') }}</text>
|
|
<text class="table-cell">{{ t('unlimited') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('daily_ranked_matches') }}</text>
|
|
<text class="table-cell">{{ t('2') }}</text>
|
|
<text class="table-cell">{{ t('22') }}</text>
|
|
<text class="table-cell">{{ t('unlimited') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('coach_feedback') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('exclusive') }}</text>
|
|
<text class="table-cell">{{ t('exclusive') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('nickname_style') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('gold') }}</text>
|
|
<text class="table-cell">{{ t('colorful') }}</text>
|
|
</view>
|
|
<view class="table-row">
|
|
<text class="table-cell table-cell--feature">{{ t('exclusive_support_823') }}</text>
|
|
<text class="table-cell">{{ t('none_809') }}</text>
|
|
<text class="table-cell">{{ t('exclusive') }}</text>
|
|
<text class="table-cell">{{ t('exclusive') }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-title">{{ t('membership_stacking_and_activation_rules') }}</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('membership_priority') }}</text>
|
|
<text>{{ t('if_you_have_both_svip_and_vip_svip_benefits_take_priority_your_v') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('stacking_recurring_plans') }}</text>
|
|
<text>{{ t('if_you_buy_a_recurring_monthly_or_annual_plan_while_holding_a_mo') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph example">
|
|
<text>{{ t('example_buy_a_half_year_pass_on_january_1_expires_july_1_then_a_') }}</text>
|
|
</view>
|
|
|
|
<view class="paragraph">
|
|
<text class="strong">{{ t('upgrading_to_svip') }}</text>
|
|
<text>{{ t('an_svip_upgrade_takes_effect_immediately_the_purchase_page_shows') }}</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-weight: 500;
|
|
max-width: 200rpx;
|
|
white-space: normal;
|
|
text-align: center;
|
|
font-size: 16rpx;
|
|
line-height: 20rpx;
|
|
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>
|