124 lines
3.6 KiB
Vue
124 lines
3.6 KiB
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>
|