完成段位介绍和等级介绍页面

src/pages.json

@@ -36,6 +36,18 @@
         "navigationBarTitleText": "会员"
       }
     },
+    {
+      "path": "pages/grade-intro",
+      "style": {
+        "navigationBarTitleText": "等级介绍"
+      }
+    },
+    {
+      "path": "pages/rank-intro",
+      "style": {
+        "navigationBarTitleText": "段位介绍"
+      }
+    },
     {
       "path": "pages/my-growth",
       "style": {

src/pages/grade-intro.vue

@@ -0,0 +1,126 @@
+<script setup>
+import Container from "@/components/Container.vue";
+
+const grade = 7;
+</script>
+
+<template>
+  <Container title="等级介绍">
+    <view class="container">
+      <!-- 等级进度条 -->
+      <view class="level-progress">
+        <view v-for="(_, index) in 10" :key="index" class="progress-dot">
+          <view
+            :style="{
+              backgroundColor:
+                index + 1 < grade
+                  ? '#fff9'
+                  : index + 1 === grade
+                  ? '#fed847'
+                  : 'transparent',
+              borderColor: index + 1 === grade ? '#fed847' : '#fff9',
+            }"
+          />
+          <view />
+        </view>
+      </view>
+
+      <!-- 说明文本 -->
+      <view class="content">
+        <view class="intro-text">
+          在射灵世界中，等级是衡量您射箭技能的重要指标，而点数则是您提升等级的关键。具体的要求如下：
+        </view>
+
+        <view class="section">
+          <view class="title">一、点数的获取规则</view>
+          <view class="text">
+            每射出一支箭并上靶，无论您射出的箭命中哪个环数，只要箭成功上靶，您将获得1点基础点数。这是您积累点数的基本方式，每一次射击都是您向更高目标迈进的一步。
+          </view>
+          <view class="text">
+            射出的箭中7-9环：当您的箭中7环、8环或9环时，除了获得1点基础点数外，还将额外获得0.5点基础点数；
+          </view>
+          <view class="text">
+            射出的箭中10环：命中10环是射箭中的最高成就，因此，当您的箭中10环时，除了获得1点基础点数外，还将额外获得1点基础点数。即每次命中10环将总共获得2点基础点数。
+          </view>
+        </view>
+
+        <view class="section">
+          <view class="title">二、解锁特权与玩法</view>
+          <view class="text">
+            当您等级达到9级时，将解锁"约战模式"。在这个模式中，您可以邀请您的好友进行切磋，与他们展开一场精彩的射箭对决。通过与好友的对抗，您不仅可以收获友谊和欢乐，还能在交流中学习到更多的技巧和经验。
+          </view>
+          <view class="text">
+            当您等级达到16级时，将解锁对战模式，每次对战都是一次难得的学习机会。您可以借此机会提升自己的水平，同时也为您的好友提供帮助和建议。此外，约战模式还为您提供了展示自己技艺的平台，让您在与好友的互动中感受到射箭的乐趣和成就感。
+          </view>
+          <view class="text">
+            当您等级达到22级时，将解锁"押豆模式"。在这个模式中，您可以与相同段位的玩家进行对抗，赢家将收获所有的灵豆。这不仅增加了游戏的趣味性和挑战性，还为您提供了赢取更多灵豆的机会。通过与更多玩家的对战，您可以不断提升自己的技术水平。
+          </view>
+        </view>
+      </view>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.level-progress {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.progress-dot {
+  display: flex;
+  align-items: center;
+}
+.progress-dot > view:first-child {
+  width: 3.8vw;
+  height: 3.8vw;
+  border-radius: 50%;
+  border: 1px solid #fff9;
+}
+.progress-dot > view:last-child {
+  width: 3.8vw;
+  height: 1px;
+  margin: 0 2px;
+  background-color: #fff9;
+}
+
+.content {
+  padding: 0 10px;
+  background-color: #ffffff;
+  padding: 15px;
+}
+
+.intro-text {
+  font-size: 14px;
+  color: #333333;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.section {
+  margin-bottom: 20px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 10px;
+}
+
+.text {
+  font-size: 14px;
+  color: #666666;
+  line-height: 1.6;
+  margin-bottom: 10px;
+  text-align: justify;
+}
+</style>

src/pages/rank-intro.vue

@@ -0,0 +1,264 @@
+<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;
+}
+
+.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>

src/pages/user.vue

@@ -30,6 +30,16 @@ const toMyGrowthPage = () => {
     url: "/pages/my-growth",
   });
 };
+const toGradeIntroPage = () => {
+  uni.navigateTo({
+    url: "/pages/grade-intro",
+  });
+};
+const toRankIntroPage = () => {
+  uni.navigateTo({
+    url: "/pages/rank-intro",
+  });
+};
 </script>
 
 <template>
@@ -53,15 +63,14 @@ const toMyGrowthPage = () => {
         <text v-if="user.trio" :style="{ color: '#259249' }">已完成</text>
         <text v-else :style="{ color: '#CC311F' }">未完成</text>
       </UserItem>
-      <UserItem title="会员" :onClick="toBeVipPage">
+      <UserItem title="会员" :onClick="toBeVipPage"> 已赠送6个月会员 </UserItem>
-        已赠送6个月会员
+      <UserItem title="等级介绍" :onClick="toGradeIntroPage" />
-      </UserItem>
-      <UserItem title="等级介绍" />
       <UserItem
         title="段位介绍"
         :customStyle="{
           marginBottom: '10px',
         }"
+        :onClick="toRankIntroPage"
       />
       <view class="my-grow" @click="toMyGrowthPage">
         <image src="../static/my-grow.png" mode="widthFix" />