168 lines
3.3 KiB
Vue
168 lines
3.3 KiB
Vue
<template>
|
|
<view class="event-live-page">
|
|
<!-- 实况列表 -->
|
|
<view class="live-list">
|
|
<view class="live-item" v-for="(item, index) in liveList" :key="index">
|
|
<view class="live-time">{{ item.time }}</view>
|
|
<view class="live-content">
|
|
<view class="live-type" :class="item.type">{{ item.typeText }}</view>
|
|
<view class="live-text">{{ item.content }}</view>
|
|
<view class="live-images" v-if="item.images && item.images.length > 0">
|
|
<image
|
|
class="live-image"
|
|
v-for="(img, idx) in item.images"
|
|
:key="idx"
|
|
:src="img"
|
|
mode="aspectFill"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 刷新提示 -->
|
|
<view class="refresh-tip">
|
|
<text class="tip-icon">🔄</text>
|
|
<text class="tip-text">下拉刷新获取最新实况</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
liveList: [
|
|
{
|
|
time: '16:45',
|
|
type: 'highlight',
|
|
typeText: '精彩瞬间',
|
|
content: '张三选手以一记精彩的侧踢得分，现场观众掌声雷动！',
|
|
images: []
|
|
},
|
|
{
|
|
time: '16:30',
|
|
type: 'score',
|
|
typeText: '比分',
|
|
content: '男子散打决赛：张三 3:2 李四，比赛进入白热化阶段',
|
|
images: []
|
|
},
|
|
{
|
|
time: '16:15',
|
|
type: 'news',
|
|
typeText: '赛况',
|
|
content: '男子散打决赛正式开始，双方选手入场，裁判宣读比赛规则',
|
|
images: []
|
|
},
|
|
{
|
|
time: '16:00',
|
|
type: 'news',
|
|
typeText: '赛况',
|
|
content: '上一场比赛结束，场地准备中...',
|
|
images: []
|
|
},
|
|
{
|
|
time: '15:45',
|
|
type: 'highlight',
|
|
typeText: '精彩瞬间',
|
|
content: '半决赛第二场，王五选手表现出色，成功晋级决赛',
|
|
images: []
|
|
}
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.event-live-page {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding: 20rpx 30rpx;
|
|
}
|
|
|
|
.live-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30rpx;
|
|
}
|
|
|
|
.live-item {
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.live-time {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
flex-shrink: 0;
|
|
padding-top: 5rpx;
|
|
}
|
|
|
|
.live-content {
|
|
flex: 1;
|
|
background-color: #fff;
|
|
border-radius: 12rpx;
|
|
padding: 25rpx;
|
|
}
|
|
|
|
.live-type {
|
|
display: inline-block;
|
|
font-size: 22rpx;
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 6rpx;
|
|
margin-bottom: 12rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.live-type.highlight {
|
|
background-color: #C93639;
|
|
}
|
|
|
|
.live-type.score {
|
|
background-color: #FF8C00;
|
|
}
|
|
|
|
.live-type.news {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
.live-text {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.live-images {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 10rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.live-image {
|
|
width: 100%;
|
|
height: 180rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.refresh-tip {
|
|
text-align: center;
|
|
padding: 40rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.tip-icon {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.tip-text {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
</style>
|