shoot-miniprograms/src/pages/rank-intro.vue

<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-header">
              <view>大段位</view>
              <view>小段位</view>
              <view>积分（100积分=1星）</view>
            </view>
            <view class="table-row">
              <view>铜牌青铜</view>
              <view>
                <view>青铜1*</view>
                <view>青铜2*</view>
                <view>青铜3*</view>
              </view>
              <view>每个小段位需要累计3星才能晋升到下一个段位，共9星。</view>
            </view>
            <view class="table-row">
              <view>移动白银</view>
              <view>
                <view>白铜1*</view>
                <view>白铜2*</view>
                <view>白铜3*</view>
              </view>
              <view>每个小段位需要累计3星才能晋升到下一个段位，共9星。</view>
            </view>
            <view class="table-row">
              <view>黄金王者</view>
              <view>
                <view>黄金1*</view>
                <view>黄金2*</view>
                <view>黄金3*</view>
                <view>黄金4*</view>
              </view>
              <view>每个小段位需要累计4星才能晋升到下一个段位，共15星。</view>
            </view>
            <view class="table-row">
              <view>永恒钻石</view>
              <view>
                <view>钻石1*</view>
                <view>钻石2*</view>
                <view>钻石3*</view>
                <view>钻石4*</view>
                <view>钻石5*</view>
              </view>
              <view>每个小段位需要累计5星才能晋升到下一个段位，共25星。</view>
            </view>
            <view class="table-row2">
              <view>最强王者</view>
              <view>0-9</view>
            </view>
            <view class="table-row2">
              <view>非凡王者</view>
              <view>0-9</view>
            </view>
            <view class="table-row2">
              <view>无双王者</view>
              <view>10-19</view>
            </view>
            <view class="table-row2">
              <view>至尊王者</view>
              <view>20-29</view>
            </view>
            <view class="table-row2">
              <view>荣耀王者</view>
              <view>30-39</view>
            </view>
            <view class="table-row2">
              <view>璀璨王者</view>
              <view>40-49</view>
            </view>
            <view class="table-row2">
              <view>传奇王者</view>
              <view>100+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped>
.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: 1px solid #e4e4e4;
  border-radius: 4px;
  font-size: 14px;
  color: #000;
}

.table-header {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
}

.table-header > view {
  padding: 5px 10px;
  width: 20%;
}
.table-header > view:last-child {
  padding: 5px 10px;
  width: 60%;
}
.table-header > view:nth-child(2) {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.table-row {
  display: flex;
  min-height: 44px;
  border-bottom: 1px solid #e4e4e4;
}
.table-row > view:first-child,
.table-row > view:last-child,
.table-row > view:nth-child(2) > view {
  padding: 5px 10px;
}
.table-row > view:nth-child(2) {
  border-left: 1px solid #e4e4e4;
  border-right: 1px solid #e4e4e4;
}
.table-row > view:nth-child(2) > view {
  border-bottom: 1px solid #e4e4e4;
}
.table-row > view:nth-child(2) > view:last-child {
  border-bottom: none;
}
.table-row > view:first-child {
  width: 20%;
}
.table-row > view:nth-child(2) {
  width: 26.5%;
}
.table-row > view:last-child {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 2;
}
.table-row2 {
  display: flex;
  border-bottom: 1px solid #e4e4e4;
}
.table-row2 > view {
  padding: 5px 10px;
}
.table-row2 > view:first-child {
  border-right: 1px solid #e4e4e4;
  width: 38.8%;
}
</style>