添加UI
This commit is contained in:
kron
@@ -77,7 +77,7 @@ const seats = new Array(props.total).fill(1);
|
||||
.founder {
|
||||
position: absolute;
|
||||
background-color: #fed847;
|
||||
top: 0;
|
||||
top: 6px;
|
||||
color: #000;
|
||||
font-size: 10px;
|
||||
padding: 2px 5px;
|
||||
|
||||
@@ -98,6 +98,12 @@
|
||||
},
|
||||
{
|
||||
"path": "pages/ranking",
|
||||
"style": {
|
||||
"navigationBarTitleText": "排行赛"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/rank-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "排行榜"
|
||||
}
|
||||
|
||||
@@ -282,12 +282,6 @@ onMounted(async () => {});
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.player-crown {
|
||||
position: relative;
|
||||
width: 27px;
|
||||
|
||||
@@ -342,21 +342,6 @@ onUnmounted(() => {
|
||||
height: calc(100% - 40px);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.founder {
|
||||
position: absolute;
|
||||
background-color: #fed847;
|
||||
top: 0;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
padding: 2px 5px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 52px;
|
||||
right: 0;
|
||||
}
|
||||
.tips {
|
||||
color: #fff9;
|
||||
width: 100%;
|
||||
|
||||
@@ -35,6 +35,12 @@ const toPage = (path) => {
|
||||
});
|
||||
};
|
||||
|
||||
const toRankListPage = () => {
|
||||
uni.navigateTo({
|
||||
url: "rank-list",
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const deviceInfo = uni.getDeviceInfo();
|
||||
@@ -117,7 +123,9 @@ onMounted(async () => {
|
||||
<view v-if="i > 3">{{ i }}</view>
|
||||
<image src="../static/avatar.png" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="more-players">4563</view>
|
||||
<view class="more-players" @click.stop="toRankListPage"
|
||||
><text>4563</text></view
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="region-stats">
|
||||
@@ -300,8 +308,12 @@ onMounted(async () => {
|
||||
border: none;
|
||||
font-size: 10px;
|
||||
line-height: 40px;
|
||||
text-align: right;
|
||||
padding-right: 5px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.more-players > text {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.region-stats {
|
||||
|
||||
270
src/pages/rank-list.vue
Normal file
270
src/pages/rank-list.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import Avatar from "@/components/Avatar.vue";
|
||||
const isIos = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
const deviceInfo = uni.getDeviceInfo();
|
||||
isIos.value = deviceInfo.osName === "ios";
|
||||
});
|
||||
|
||||
const selectedIndex = ref(0);
|
||||
|
||||
const handleSelect = (index) => {
|
||||
selectedIndex.value = index;
|
||||
};
|
||||
|
||||
const subTitles = ["排位赛积分", "本周MVP次数", "本周十环次数"];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<navigator
|
||||
open-type="navigateBack"
|
||||
class="back-btn"
|
||||
:style="{ top: `${isIos ? 55 : 45}px` }"
|
||||
>
|
||||
<image src="../static/back.png" mode="widthFix" />
|
||||
</navigator>
|
||||
<image src="../static/rankbg.png" mode="widthFix" class="header-bg" />
|
||||
<view class="rank-tabs">
|
||||
<view
|
||||
v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜']"
|
||||
:key="index"
|
||||
:style="{
|
||||
fontSize: index === selectedIndex ? '16px' : '14px',
|
||||
color: index === selectedIndex ? '#000' : '#fff',
|
||||
backgroundColor: index === selectedIndex ? '#FFD947' : '#383737',
|
||||
}"
|
||||
@tap="handleSelect(index)"
|
||||
>
|
||||
{{ rankType }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="rank-list">
|
||||
<view class="rank-list-header">
|
||||
<text>排名</text>
|
||||
<text>用户ID</text>
|
||||
<text>{{ subTitles[selectedIndex] }}</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="(_, index) in new Array(10).fill(1)"
|
||||
:key="index"
|
||||
class="rank-list-item"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
v-if="index === 0"
|
||||
class="player-bg"
|
||||
src="../static/melee-player-bg1.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 1"
|
||||
class="player-bg"
|
||||
src="../static/melee-player-bg2.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 2"
|
||||
class="player-bg"
|
||||
src="../static/melee-player-bg3.png"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 0"
|
||||
class="player-crown"
|
||||
src="../static/champ1.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 1"
|
||||
class="player-crown"
|
||||
src="../static/champ2.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<image
|
||||
v-if="index === 2"
|
||||
class="player-crown"
|
||||
src="../static/champ3.png"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
|
||||
<Avatar src="../static/avatar.png" />
|
||||
<view class="rank-item-content">
|
||||
<text>打酱油大声路过</text>
|
||||
<text>钻石3级，20场</text>
|
||||
</view>
|
||||
<text class="rank-item-integral"
|
||||
><text
|
||||
:style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||||
>9999</text
|
||||
>分</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-rank-data">
|
||||
<image src="../static/modal-content-bg.png" mode="widthFix" />
|
||||
<text>123</text>
|
||||
<Avatar src="../static/avatar.png" />
|
||||
<view class="rank-item-content">
|
||||
<text>打酱油大声路过</text>
|
||||
<text>钻石3级，20场</text>
|
||||
</view>
|
||||
<text class="rank-item-integral"
|
||||
><text :style="{ fontSize: '14px', color: '#fff', marginRight: '5px' }"
|
||||
>9999</text
|
||||
>分</text
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
position: relative;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.header-bg {
|
||||
width: 100%;
|
||||
}
|
||||
.back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
}
|
||||
.back-btn > image {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.rank-tabs {
|
||||
width: calc(100% - 20px);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 10px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
.rank-tabs > view {
|
||||
width: 25%;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.rank-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: calc(100% - 20px);
|
||||
color: #fff9;
|
||||
font-size: 12px;
|
||||
margin: 10px;
|
||||
border: 1px solid rgb(255 217 71 / 0.2);
|
||||
border-radius: 10px;
|
||||
background-color: #313131;
|
||||
}
|
||||
.rank-list > view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.rank-list-header {
|
||||
width: calc(100% - 20px) !important;
|
||||
padding: 10px;
|
||||
}
|
||||
.rank-list-header > text:nth-child(2) {
|
||||
width: 14%;
|
||||
}
|
||||
.rank-list-header > text:last-child {
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
.rank-list-item {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.player-crown {
|
||||
position: relative;
|
||||
width: 27px;
|
||||
margin: 0 15px;
|
||||
}
|
||||
.view-crown {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 15px;
|
||||
color: #fff;
|
||||
background-color: #676767;
|
||||
position: relative;
|
||||
}
|
||||
.rank-item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.rank-item-content > text:first-child {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.rank-list-item > text:last-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.my-rank-data {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 30px);
|
||||
padding: 15px;
|
||||
padding-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #fff9;
|
||||
font-size: 12px;
|
||||
}
|
||||
.my-rank-data > image:first-child {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: -5px;
|
||||
}
|
||||
.my-rank-data > text:nth-child(2) {
|
||||
background-color: #c1a434;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 3px 5px;
|
||||
border-radius: 20px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.my-rank-data > text:last-child {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.my-rank-data > .rank-item-content > text:first-child {
|
||||
color: #fed847;
|
||||
}
|
||||
.my-rank-data > .rank-item-integral {
|
||||
color: #fff9;
|
||||
font-size: 12px;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -127,7 +127,7 @@ const toMeleeMatchPage = (gameType, teamSize) => {
|
||||
v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
|
||||
:key="index"
|
||||
:style="{
|
||||
backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
|
||||
backgroundColor: index % 2 === 0 ? '#9898981f' : 'transparent',
|
||||
}"
|
||||
class="rank-item"
|
||||
>
|
||||
|
||||
BIN
src/static/rankbg.png
Normal file
BIN
src/static/rankbg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Reference in New Issue
Block a user