<script setup>
import Container from "@/components/Container.vue";
</script>

<template>
  <Container title="段位介绍">
    <view class="container">
      <view class="content">
        <view class="intro-text">
          在射灵世界的对战体系内，段位是衡量您竞赛技术水平的重要指标，它不仅代表了玩家的排位段位，还体现了玩家在对战中的综合表现。通过不断对抗和积累积分，玩家可以逐步提升自己的段位，以下是关于段位的详细说明。
        </view>

        <view class="section">
          <view class="title">一、段位体系概述</view>
          <view class="text">
            我们的段位体系分为多个等级，从低到高依次为：倔强青铜、秩序白银、黄金王者、永恒钻石、最强王者、非凡王者、无双王者、绝世王者、至圣王者、荣耀王者和传奇王者。每个大段位下又分为若干小段位，玩家需要通过积累积分来提升段位。
          </view>
        </view>

        <view class="section">
          <view class="title">二、积分获取规则</view>

          <view class="sub-section">
            <view class="sub-title">（一）基本规则</view>
            <view class="rule-item">
              <text class="rule-label">重一局：</text>
              <text class="rule-value">+100积分</text>
            </view>
            <view class="rule-item">
              <text class="rule-label">输一局：</text>
              <text class="rule-value">-100积分</text>
            </view>
            <view class="rule-item">
              <text class="rule-label">全场MVP（2v2）：</text>
              <text class="rule-value">额外+40积分</text>
            </view>
            <view class="rule-item">
              <text class="rule-label">全场MVP（3v3）：</text>
              <text class="rule-value">额外+60积分</text>
            </view>
            <view class="rule-item">
              <text class="rule-label">五连胜：</text>
              <text class="rule-value">每局额外+15积分</text>
            </view>
          </view>

          <view class="sub-section">
            <view class="sub-title">（二）大段位规则</view>
            <view class="text"
              >大段位升级中，每个玩家将根据不同的规则得到相应不同的积分，具体的规则如下</view
            >
          </view>
        </view>

        <view class="section">
          <view class="title">三、（表格）</view>
          <view class="rank-table">
            <view class="table-row">
              <text>大段位</text>
              <text>小段位</text>
              <text>积分（100积分=1星）</text>
            </view>
            <view class="table-row">
              <text>倔强青铜</text>
              <view>
                <text>青铜1*</text>
                <text>青铜2*</text>
                <text>青铜3*</text>
              </view>
              <text>每个小段位需要满 3星才能晋升到下一个段位，共9颗星。</text>
            </view>
            <view class="table-row">
              <text>秩序白银</text>
              <view>
                <text>白铜1*</text>
                <text>白铜2*</text>
                <text>白铜3*</text>
              </view>
              <text>每个小段位需要满 3颗星才能晋升到下一个段位，共9颗星。</text>
            </view>
            <view class="table-row">
              <text>黄金王者</text>
              <view>
                <text>黄金1*</text>
                <text>黄金2*</text>
                <text>黄金3*</text>
                <text>黄金4*</text>
              </view>
              <text>每个小段位需要满4颗星才能晋升到下一个段位，共16颗星。</text>
            </view>
            <view class="table-row">
              <text>永恒钻石</text>
              <view>
                <text>钻石1*</text>
                <text>钻石2*</text>
                <text>钻石3*</text>
                <text>钻石4*</text>
                <text>钻石5*</text>
              </view>
              <text>每个小段位需要满5颗星才能晋升到下一个段位，共25颗星。</text>
            </view>
            <view class="table-row2">
              <text>最强王者</text>
              <text>0-9</text>
            </view>
            <view class="table-row2">
              <text>非凡王者</text>
              <text>10-19</text>
            </view>
            <view class="table-row2">
              <text>无双王者</text>
              <text>20-29</text>
            </view>
            <view class="table-row2">
              <text>绝世王者</text>
              <text>30-39</text>
            </view>
            <view class="table-row2">
              <text>至圣王者</text>
              <text>40-49</text>
            </view>
            <view class="table-row2">
              <text>荣耀王者</text>
              <text>50-99</text>
            </view>
            <view class="table-row2">
              <text>传奇王者</text>
              <text>100+</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
}

.content {
  background-color: #ffffff;
  padding: 10px;
}

.intro-text {
  font-size: 14px;
  color: #333333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.section {
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  color: #333333;
  margin-bottom: 15px;
}

.text {
  font-size: 14px;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.sub-section {
  margin-bottom: 15px;
}

.sub-title {
  font-size: 15px;
  color: #333333;
  margin-bottom: 10px;
}

.rule-item {
  display: flex;
  margin-bottom: 8px;
}

.rule-label {
  font-size: 14px;
  color: #666666;
}

.rule-value {
  font-size: 14px;
  color: #333333;
}

.rank-table {
  border-radius: 4px;
  font-size: 14px;
  color: #000;
  width: calc(100vw - 20px);
}

.rank-table > view {
  display: flex;
}

.rank-table > view > text:last-child {
  margin-left: -1rpx;
}

.rank-table text {
  padding: 10rpx 20rpx;
  border: $uni-border;
  box-sizing: border-box;
  display: inline-block;
  margin-top: -1rpx;
}

.table-row text {
  width: 25%;
}

.table-row > view {
  display: flex;
  flex-direction: column;
  width: 25%;
}

.table-row > view > text {
  width: 100%;
}

.table-row > text:nth-child(3) {
  width: 50%;
}

.table-row2 > text {
  width: 50%;
}
</style>
