fix bugs

pages/event-live/event-live.vue

@@ -0,0 +1,167 @@
+<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>