481 lines
12 KiB
Vue
481 lines
12 KiB
Vue
<script setup>
|
||
import Container from "@/components/Container.vue";
|
||
|
||
const LEVEL_ICON_BASE_URL = "https://static.shelingxingqiu.com/levelicon";
|
||
|
||
const rankRows = [
|
||
{
|
||
name: "倔强青铜",
|
||
levels: ["倔强青铜1", "倔强青铜2", "倔强青铜3"],
|
||
picNames: ["青铜1", "青铜2", "青铜3"],
|
||
score: "每个小段位需要满3颗星才能晋升到下一个段位，共9颗星。",
|
||
},
|
||
{
|
||
name: "秩序白银",
|
||
levels: ["秩序白银1", "秩序白银2", "秩序白银3"],
|
||
picNames: ["白银1", "白银2", "白银3"],
|
||
score: "每个小段位需要满3颗星才能晋升到下一个段位，共9颗星。",
|
||
},
|
||
{
|
||
name: "荣耀黄金",
|
||
levels: ["荣耀黄金1", "荣耀黄金2", "荣耀黄金3", "荣耀黄金4"],
|
||
picNames: ["黄金1", "黄金2", "黄金3", "黄金4"],
|
||
score: "每个小段位需要满4颗星才能晋升到下一个段位，共16颗星。",
|
||
},
|
||
{
|
||
name: "永恒钻石",
|
||
levels: ["永恒钻石1", "永恒钻石2", "永恒钻石3", "永恒钻石4", "永恒钻石5"],
|
||
picNames: ["钻石1", "钻石2", "钻石3", "钻石4", "钻石5"],
|
||
score: "每个小段位需要满5颗星才能晋升到下一个段位，共25颗星。",
|
||
},
|
||
];
|
||
|
||
const kingRankRows = [
|
||
{ name: "最强王者", score: "0-9" },
|
||
{ name: "非凡王者", score: "10-19" },
|
||
{ name: "无双王者", score: "20-29" },
|
||
{ name: "绝世王者", score: "30-39" },
|
||
{ name: "至圣王者", score: "40-49" },
|
||
{ name: "荣耀王者", score: "50-99" },
|
||
{ name: "传奇王者", score: "100+" },
|
||
];
|
||
|
||
const meleeScoreTables = [
|
||
{
|
||
title: "5人大乱斗",
|
||
rankings: [1, 2, 3, 4, 5],
|
||
scores: [150, 75, 0, -100, -100],
|
||
},
|
||
{
|
||
title: "10人大乱斗",
|
||
rankings: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
||
scores: [200, 125, 75, 0, 0, 0, -50, -100, -100, -100],
|
||
},
|
||
];
|
||
|
||
// 图片文件名与段位名称一致，统一在这里拼接远程地址。
|
||
const getLevelIcon = (levelName) =>
|
||
`${LEVEL_ICON_BASE_URL}/${levelName}.png`;
|
||
</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-mode">
|
||
<view class="rule-mode-title">1V1、2V2、3V3对抗模式：</view>
|
||
<view class="rule-item">
|
||
<text class="rule-bullet">●</text>
|
||
<text class="rule-content"
|
||
>每胜一局，胜方每人+100积分；每负一局，负方每人-100积分</text
|
||
>
|
||
</view>
|
||
<view class="rule-item">
|
||
<text class="rule-bullet">●</text>
|
||
<text class="rule-content"
|
||
>2V2模式：胜方队伍中，总成绩最高且箭均成绩≥7环者，为本局MVP，额外获得40积分。</text
|
||
>
|
||
</view>
|
||
<view class="rule-item">
|
||
<text class="rule-bullet">●</text>
|
||
<text class="rule-content"
|
||
>3V3模式：胜方队伍中，总成绩最高且箭均成绩≥7环者，为本局MVP，额外获得60积分。</text
|
||
>
|
||
</view>
|
||
<view class="rule-item">
|
||
<text class="rule-bullet">●</text>
|
||
<text class="rule-content"
|
||
>在1V1/2V2/3V3三种模式中，连续获得五连胜（三类模式一起算），则从第五场开始，每场胜利可额外再加15分，直至结束连胜。（仅限对抗模式，不含大乱斗模式。）</text
|
||
>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="rule-mode">
|
||
<view class="rule-mode-title">5人、10人大乱斗模式：</view>
|
||
<view class="rule-paragraph">
|
||
5人大乱斗和10人大乱斗按个人总环数成绩排序，排名从高到低依次设置系统默认奖励/扣除积分，默认初始排名和积分规则具体如下：
|
||
</view>
|
||
|
||
<view class="melee-score-table">
|
||
<view
|
||
v-for="table in meleeScoreTables"
|
||
:key="table.title"
|
||
class="melee-table-section"
|
||
>
|
||
<view class="melee-table-title">{{ table.title }}</view>
|
||
<scroll-view
|
||
class="melee-table-scroll"
|
||
scroll-x
|
||
:enhanced="true"
|
||
:show-scrollbar="false"
|
||
>
|
||
<view
|
||
:class="[
|
||
'melee-table-body',
|
||
table.rankings.length > 5
|
||
? 'melee-table-body--wide'
|
||
: '',
|
||
]"
|
||
>
|
||
<view class="melee-table-row">
|
||
<text class="melee-table-cell melee-table-label"
|
||
>排名</text
|
||
>
|
||
<text
|
||
v-for="ranking in table.rankings"
|
||
:key="ranking"
|
||
class="melee-table-cell"
|
||
>
|
||
{{ ranking }}
|
||
</text>
|
||
</view>
|
||
<view class="melee-table-row">
|
||
<text class="melee-table-cell melee-table-label"
|
||
>积分</text
|
||
>
|
||
<text
|
||
v-for="(score, index) in table.scores"
|
||
:key="index"
|
||
class="melee-table-cell"
|
||
>
|
||
{{ score }}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</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 table-header">
|
||
<text class="table-cell major-column">大段位</text>
|
||
<text class="table-cell minor-column">小段位</text>
|
||
<text class="table-cell score-column">积分（100积分=1星）</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="rank in rankRows"
|
||
:key="rank.name"
|
||
class="table-row rank-group-row"
|
||
>
|
||
<view class="table-cell major-column major-rank-cell">
|
||
<image
|
||
class="rank-icon"
|
||
:src="getLevelIcon(rank.picNames[0])"
|
||
mode="aspectFit"
|
||
lazy-load
|
||
/>
|
||
<text class="major-rank-name">{{ rank.name }}</text>
|
||
</view>
|
||
|
||
<view class="minor-column minor-rank-cell">
|
||
<text
|
||
v-for="level in rank.levels"
|
||
:key="level"
|
||
class="table-cell minor-rank-item"
|
||
>
|
||
{{ level }}
|
||
</text>
|
||
</view>
|
||
|
||
<text class="table-cell score-column score-text">
|
||
{{ rank.score }}
|
||
</text>
|
||
</view>
|
||
|
||
<view
|
||
v-for="rank in kingRankRows"
|
||
:key="rank.name"
|
||
class="table-row king-rank-row"
|
||
>
|
||
<view class="table-cell king-rank-cell">
|
||
<image
|
||
class="rank-icon"
|
||
:src="getLevelIcon(rank.name)"
|
||
mode="aspectFit"
|
||
lazy-load
|
||
/>
|
||
<text class="major-rank-name">{{ rank.name }}</text>
|
||
</view>
|
||
<text class="table-cell king-score-cell">{{ rank.score }}</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;
|
||
align-items: flex-start;
|
||
margin-bottom: 16rpx;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.rule-mode {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.rule-mode:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.rule-mode-title {
|
||
margin-bottom: 12rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
font-weight: 600;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.rule-bullet {
|
||
flex-shrink: 0;
|
||
margin-right: 10rpx;
|
||
font-size: 20rpx;
|
||
line-height: 2.38;
|
||
}
|
||
|
||
.rule-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.rule-paragraph {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.melee-score-table {
|
||
margin-top: 20rpx;
|
||
border: $uni-border;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.melee-table-section + .melee-table-section {
|
||
border-top: $uni-border;
|
||
}
|
||
|
||
.melee-table-title {
|
||
padding: 14rpx 16rpx;
|
||
background-color: #f5f6f7;
|
||
color: #e53935;
|
||
font-weight: 600;
|
||
border-bottom: $uni-border;
|
||
}
|
||
|
||
.melee-table-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.melee-table-body {
|
||
width: 100%;
|
||
}
|
||
|
||
.melee-table-body--wide {
|
||
width: 900rpx;
|
||
}
|
||
|
||
.melee-table-row {
|
||
display: flex;
|
||
}
|
||
|
||
.melee-table-row + .melee-table-row {
|
||
border-top: $uni-border;
|
||
}
|
||
|
||
.melee-table-cell {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
min-width: 0;
|
||
min-height: 72rpx;
|
||
padding: 10rpx 12rpx;
|
||
box-sizing: border-box;
|
||
border-left: $uni-border;
|
||
}
|
||
|
||
.melee-table-cell:first-child {
|
||
border-left: 0;
|
||
}
|
||
|
||
.melee-table-label {
|
||
flex: 0 0 86rpx;
|
||
}
|
||
|
||
.rank-table {
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
color: #000;
|
||
width: calc(100vw - 20px);
|
||
}
|
||
|
||
.table-row {
|
||
display: flex;
|
||
}
|
||
|
||
.table-cell {
|
||
padding: 10rpx 20rpx;
|
||
border: $uni-border;
|
||
box-sizing: border-box;
|
||
margin-top: -1rpx;
|
||
margin-left: -1rpx;
|
||
}
|
||
|
||
.major-column,
|
||
.minor-column {
|
||
width: 25%;
|
||
}
|
||
|
||
.score-column {
|
||
width: 50%;
|
||
}
|
||
|
||
.table-header .table-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.major-rank-cell,
|
||
.minor-rank-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0;
|
||
}
|
||
|
||
.minor-rank-item {
|
||
min-height: 70rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.major-rank-cell {
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 12rpx 8rpx;
|
||
}
|
||
|
||
.rank-icon {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.major-rank-name {
|
||
margin-top: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1.4;
|
||
text-align: center;
|
||
}
|
||
|
||
.minor-rank-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 10rpx;
|
||
border-right: 0;
|
||
}
|
||
|
||
.score-text {
|
||
display: flex;
|
||
align-items: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.king-rank-cell,
|
||
.king-score-cell {
|
||
width: 50%;
|
||
}
|
||
|
||
.king-rank-cell {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 210rpx;
|
||
}
|
||
|
||
.king-score-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
</style>
|