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

<script setup>
import Container from "@/components/Container.vue";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
</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 < user.lvl
                  ? '#fff9'
                  : index + 1 === user.lvl
                  ? '#fed847'
                  : 'transparent',
              borderColor: index + 1 === user.lvl ? '#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>

        <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%;
  height: 32rpx;
  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 {
  height: calc(100% - 148rpx);
  background-color: #ffffff;
  padding: 30rpx;
}

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