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