fix bugs
This commit is contained in:
244
pages/event-lineup/event-lineup.vue
Normal file
244
pages/event-lineup/event-lineup.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<view class="event-lineup-page">
|
||||
<!-- 组别选择 -->
|
||||
<view class="group-tabs">
|
||||
<view
|
||||
class="group-tab"
|
||||
v-for="(group, index) in groups"
|
||||
:key="index"
|
||||
:class="{ active: currentGroup === index }"
|
||||
@click="currentGroup = index"
|
||||
>
|
||||
{{ group }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 出场顺序列表 -->
|
||||
<view class="lineup-list">
|
||||
<view class="lineup-item" v-for="(item, index) in currentLineup" :key="index">
|
||||
<view class="lineup-order">
|
||||
<view class="order-number">{{ item.order }}</view>
|
||||
<text class="order-text">号</text>
|
||||
</view>
|
||||
<view class="lineup-info">
|
||||
<view class="lineup-name">{{ item.name }}</view>
|
||||
<view class="lineup-detail">
|
||||
<text class="detail-item">{{ item.team }}</text>
|
||||
<text class="divider">|</text>
|
||||
<text class="detail-item">{{ item.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="lineup-status" :class="item.status">
|
||||
{{ item.statusText }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentGroup: 0,
|
||||
groups: ['男子A组', '男子B组', '女子A组'],
|
||||
lineups: {
|
||||
0: [
|
||||
{
|
||||
order: 1,
|
||||
name: '张三',
|
||||
team: '北京队',
|
||||
time: '09:00',
|
||||
status: 'finished',
|
||||
statusText: '已完成'
|
||||
},
|
||||
{
|
||||
order: 2,
|
||||
name: '李四',
|
||||
team: '上海队',
|
||||
time: '09:15',
|
||||
status: 'finished',
|
||||
statusText: '已完成'
|
||||
},
|
||||
{
|
||||
order: 3,
|
||||
name: '王五',
|
||||
team: '广东队',
|
||||
time: '09:30',
|
||||
status: 'ongoing',
|
||||
statusText: '进行中'
|
||||
},
|
||||
{
|
||||
order: 4,
|
||||
name: '赵六',
|
||||
team: '天津队',
|
||||
time: '09:45',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
},
|
||||
{
|
||||
order: 5,
|
||||
name: '刘七',
|
||||
team: '江苏队',
|
||||
time: '10:00',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
}
|
||||
],
|
||||
1: [
|
||||
{
|
||||
order: 1,
|
||||
name: '孙八',
|
||||
team: '浙江队',
|
||||
time: '10:30',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
},
|
||||
{
|
||||
order: 2,
|
||||
name: '周九',
|
||||
team: '湖北队',
|
||||
time: '10:45',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
}
|
||||
],
|
||||
2: [
|
||||
{
|
||||
order: 1,
|
||||
name: '小红',
|
||||
team: '四川队',
|
||||
time: '14:00',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
},
|
||||
{
|
||||
order: 2,
|
||||
name: '小芳',
|
||||
team: '河南队',
|
||||
time: '14:15',
|
||||
status: 'waiting',
|
||||
statusText: '待出场'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
currentLineup() {
|
||||
return this.lineups[this.currentGroup] || [];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.event-lineup-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.group-tabs {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
gap: 15rpx;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.group-tab {
|
||||
padding: 15rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
background-color: #f5f5f5;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.group-tab.active {
|
||||
background-color: #C93639;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lineup-list {
|
||||
padding: 0 30rpx 20rpx;
|
||||
}
|
||||
|
||||
.lineup-item {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 25rpx 30rpx;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 25rpx;
|
||||
}
|
||||
|
||||
.lineup-order {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: linear-gradient(135deg, #C93639 0%, #A02629 100%);
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.order-number {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.order-text {
|
||||
font-size: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.lineup-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.lineup-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.lineup-detail {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.divider {
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.lineup-status {
|
||||
padding: 8rpx 20rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.lineup-status.finished {
|
||||
background-color: #E8F5E9;
|
||||
color: #4CAF50;
|
||||
}
|
||||
|
||||
.lineup-status.ongoing {
|
||||
background-color: #FFF3E0;
|
||||
color: #FF9800;
|
||||
}
|
||||
|
||||
.lineup-status.waiting {
|
||||
background-color: #F5F5F5;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user