laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成获胜页面UI和一些优化

Browse Source
This commit is contained in:
kron
2025-06-04 16:26:07 +08:00
parent 1cab0e17d8
commit 18fb0ee7d4
13 changed files with 343 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/pages/ranking.vue
View File

@@ -8,119 +8,129 @@ const handleSelect = (index) => {
selectedIndex.value = index;
};
const toMatchPage = () => {
const toMatchPage = (gameType, teamSize) => {
uni.navigateTo({
url: "/pages/match-room",
url: `/pages/match-room?gameType=${gameType}&teamSize=${teamSize}`,
});
};
</script>
<template>
<Container title="排行赛"
><view class="ranking-my-data">
<view>
<view class="user-info">
<view class="avatar" @click="toUserPage">
<image src="../static/avatar-frame.png" mode="widthFix" />
<image src="../static/avatar.png" mode="widthFix" />
<Container title="排行赛">
<view class="container">
<view class="ranking-my-data">
<view>
<view class="user-info">
<view class="avatar" @click="toUserPage">
<image src="../static/avatar-frame.png" mode="widthFix" />
<image src="../static/avatar.png" mode="widthFix" />
</view>
<text>打酱油·路过</text>
</view>
<view class="ranking-season">
<text>第14赛季</text>
<image src="../static/triangle.png" mode="widthFix" />
</view>
<text>打酱油·路过</text>
</view>
<view class="ranking-season">
<text>第14赛季</text>
<image src="../static/triangle.png" mode="widthFix" />
<view class="my-data">
<view>
<text>段位</text>
<text :style="{ color: '#83CDFF' }">砖石 III</text>
</view>
<view>
<text>赛季平均环数</text>
<text :style="{ color: '#FFD947' }">9.7环</text>
</view>
<view>
<text>赛季胜率</text>
<text :style="{ color: '#FF507E' }">52%</text>
</view>
</view>
<view class="rank-type">
<image
src="../static/battle1v1.png"
mode="widthFix"
@click="() => toMatchPage(1, 2)"
/>
<image
src="../static/battle5.png"
mode="widthFix"
@click="() => toMatchPage(2, 5)"
/>
<image
src="../static/battle10.png"
mode="widthFix"
@click="() => toMatchPage(2, 10)"
/>
</view>
<view class="data-progress">
<text>【1 V 1】 163 场 胜率 51%</text>
<view>
<view :style="{ width: '50%', backgroundColor: '#FF507E' }" />
</view>
</view>
<view class="data-progress">
<text>【5人大乱斗】 12 场 得分率 56%</text>
<view>
<view :style="{ width: '60%', backgroundColor: '#FFD947' }" />
</view>
</view>
<view class="data-progress">
<text>【10 人大乱斗】 12 场 得分率 5</text>
<view>
<view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
</view>
</view>
<view>查看我的比赛记录</view>
</view>
<view class="my-data">
<view class="ranking-data">
<view>
<text>段位</text>
<text :style="{ color: '#83CDFF' }">砖石 III</text>
<view
v-for="(rankType, index) in [
'积分表',
'MVP榜',
'十环榜',
'最牛省份',
]"
:key="index"
:style="{
color: index === selectedIndex ? '#000' : '#fff',
backgroundColor:
index === selectedIndex ? '#FFD947' : 'transparent',
}"
@tap="handleSelect(index)"
>
{{ rankType }}
</view>
</view>
<view>
<text>赛季平均环数</text>
<text :style="{ color: '#FFD947' }">9.7环</text>
</view>
<view>
<text>赛季胜率</text>
<text :style="{ color: '#FF507E' }">52%</text>
</view>
</view>
<view class="rank-type">
<image
src="../static/battle1v1.png"
mode="widthFix"
@click="toMatchPage"
/>
<image
src="../static/battle5.png"
mode="widthFix"
@click="toMatchPage"
/>
<image
src="../static/battle10.png"
mode="widthFix"
@click="toMatchPage"
/>
</view>
<view class="data-progress">
<text>【1 V 1】 163 场 胜率 51%</text>
<view>
<view :style="{ width: '50%', backgroundColor: '#FF507E' }" />
</view>
</view>
<view class="data-progress">
<text>【5人大乱斗】 12 场 得分率 56%</text>
<view>
<view :style="{ width: '60%', backgroundColor: '#FFD947' }" />
</view>
</view>
<view class="data-progress">
<text>【10 人大乱斗】 12 场 得分率 5</text>
<view>
<view :style="{ width: '45%', backgroundColor: '#FFD947' }" />
</view>
</view>
<view>查看我的比赛记录</view>
</view>
<view class="ranking-data">
<view>
<view
v-for="(rankType, index) in ['积分表', 'MVP榜', '十环榜', '最牛省份']"
v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
:key="index"
:style="{
color: index === selectedIndex ? '#000' : '#fff',
backgroundColor:
index === selectedIndex ? '#FFD947' : 'transparent',
backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
}"
@tap="handleSelect(index)"
class="rank-item"
>
{{ rankType }}
<image v-if="index === 0" src="../static/champ1.png" />
<image v-if="index === 1" src="../static/champ2.png" />
<image v-if="index === 2" src="../static/champ3.png" />
<view v-if="index > 2">{{ rankType }}</view>
<image src="../static/avatar.png" mode="widthFix" />
<view>
<text>打酱油大声路过</text>
<text>钻石三级，20场</text>
</view>
<text>8850<text>分</text></text>
</view>
</view>
<view
v-for="(rankType, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
:key="index"
:style="{
backgroundColor: index % 2 === 0 ? '#ffffff1f' : 'transparent',
}"
class="rank-item"
>
<image v-if="index === 0" src="../static/champ1.png" />
<image v-if="index === 1" src="../static/champ2.png" />
<image v-if="index === 2" src="../static/champ3.png" />
<view v-if="index > 2">{{ rankType }}</view>
<image src="../static/avatar.png" mode="widthFix" />
<view>
<text>打酱油大声路过</text>
<text>钻石三级，20场</text>
</view>
<text>8850<text>分</text></text>
</view>
</view>
</Container>
</template>
<style scoped>
.container {
width: 100%;
}
.ranking-my-data,
.ranking-data {
display: flex;