fix bugs
This commit is contained in:
216
pages/event-medals/event-medals.vue
Normal file
216
pages/event-medals/event-medals.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="event-medals-page">
|
||||
<!-- 顶部统计 -->
|
||||
<view class="top-stats">
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{ totalTeams }}</view>
|
||||
<view class="stat-label">参赛队伍</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-number">{{ totalMedals }}</view>
|
||||
<view class="stat-label">奖牌总数</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 奖牌榜列表 -->
|
||||
<view class="medals-list">
|
||||
<view class="medals-header">
|
||||
<view class="header-rank">排名</view>
|
||||
<view class="header-team">代表队</view>
|
||||
<view class="header-medals">
|
||||
<text class="medal-icon gold">🥇</text>
|
||||
<text class="medal-icon silver">🥈</text>
|
||||
<text class="medal-icon bronze">🥉</text>
|
||||
<text class="medal-total">总计</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="medal-item" v-for="(item, index) in medalsList" :key="index">
|
||||
<view class="item-rank" :class="'rank-' + item.rank">{{ item.rank }}</view>
|
||||
<view class="item-team">
|
||||
<view class="team-name">{{ item.team }}</view>
|
||||
</view>
|
||||
<view class="item-medals">
|
||||
<text class="medal-count gold">{{ item.gold }}</text>
|
||||
<text class="medal-count silver">{{ item.silver }}</text>
|
||||
<text class="medal-count bronze">{{ item.bronze }}</text>
|
||||
<text class="medal-count total">{{ item.total }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
medalsList: [
|
||||
{ rank: 1, team: '北京队', gold: 8, silver: 5, bronze: 3, total: 16 },
|
||||
{ rank: 2, team: '上海队', gold: 6, silver: 7, bronze: 5, total: 18 },
|
||||
{ rank: 3, team: '广东队', gold: 5, silver: 4, bronze: 6, total: 15 },
|
||||
{ rank: 4, team: '天津队', gold: 4, silver: 5, bronze: 4, total: 13 },
|
||||
{ rank: 5, team: '江苏队', gold: 3, silver: 3, bronze: 5, total: 11 },
|
||||
{ rank: 6, team: '浙江队', gold: 2, silver: 4, bronze: 3, total: 9 },
|
||||
{ rank: 7, team: '湖北队', gold: 2, silver: 2, bronze: 4, total: 8 },
|
||||
{ rank: 8, team: '河北队', gold: 1, silver: 3, bronze: 2, total: 6 }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
totalTeams() {
|
||||
return this.medalsList.length;
|
||||
},
|
||||
totalMedals() {
|
||||
return this.medalsList.reduce((sum, item) => sum + item.total, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-medals-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.top-stats {
|
||||
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 48rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.medals-list {
|
||||
margin: 0 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.medals-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25rpx 30rpx;
|
||||
background-color: #F8F8F8;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.header-rank {
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-team {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-medals {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.medal-icon {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.medal-total {
|
||||
width: 60rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.medal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 25rpx 30rpx;
|
||||
border-bottom: 1rpx solid #F5F5F5;
|
||||
}
|
||||
|
||||
.medal-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-rank {
|
||||
width: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.item-rank.rank-1 {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.item-rank.rank-2 {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
.item-rank.rank-3 {
|
||||
color: #CD7F32;
|
||||
}
|
||||
|
||||
.item-rank:not(.rank-1):not(.rank-2):not(.rank-3) {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.item-team {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item-medals {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.medal-count {
|
||||
width: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.medal-count.gold {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.medal-count.silver {
|
||||
color: #C0C0C0;
|
||||
}
|
||||
|
||||
.medal-count.bronze {
|
||||
color: #CD7F32;
|
||||
}
|
||||
|
||||
.medal-count.total {
|
||||
width: 60rpx;
|
||||
color: #C93639;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user