From 5f48a8a55e9abfa2606c810e036cdab27fc44f17 Mon Sep 17 00:00:00 2001
From: Bravepping <1131302745@qq.com>
Date: Tue, 22 Apr 2025 19:38:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=AF=94=E8=B5=9B=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                     |  12 ++
 src/components/LiveStream.vue  | 230 +++++++++++++++++++++++----------
 src/components/NBASchedule.vue |  74 +++++------
 3 files changed, 205 insertions(+), 111 deletions(-)
diff --git a/index.html b/index.html
index 45ad93c..d522ca1 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,18 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        /* height: 100%; */
+        /* overflow: hidden; */
+      }
+      #app {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
     <title>NBA在线</title>
   </head>
   <body>
diff --git a/src/components/LiveStream.vue b/src/components/LiveStream.vue
index 4cbc3f9..1dce9a1 100644
--- a/src/components/LiveStream.vue
+++ b/src/components/LiveStream.vue
@@ -5,27 +5,28 @@
       <div class="team-info away-team">
         <img :src="gameData.awayTeam.logo" :alt="gameData.awayTeam.name" />
         <div class="team-details">
-          <h3>{{ gameData.awayTeam.city }}</h3>
+          <!-- <h3>{{ gameData.awayTeam.city }}</h3> -->
           <p>{{ gameData.awayTeam.name }}</p>
           <span>{{ gameData.awayTeam.record }}</span>
         </div>
       </div>
-      
+
       <div class="vs-circle">VS</div>
-      
+
       <div class="team-info home-team">
-        <img :src="gameData.homeTeam.logo" :alt="gameData.homeTeam.name" />
+
         <div class="team-details">
-          <h3>{{ gameData.homeTeam.city }}</h3>
+          <!-- <h3>{{ gameData.homeTeam.city }}</h3> -->
           <p>{{ gameData.homeTeam.name }}</p>
           <span>{{ gameData.homeTeam.record }}</span>
         </div>
+        <img :src="gameData.homeTeam.logo" :alt="gameData.homeTeam.name" />
       </div>
     </div>
-    
+
     <!-- 播放器 -->
     <div id="dplayer-live" class="dplayer-container"></div>
-    
+
     <!-- 直播源列表（始终显示） -->
     <div class="stream-switcher" v-if="allStreams.length > 0">
       <!-- <h3>直播源</h3> -->
@@ -40,117 +41,171 @@
         </button>
       </div>
     </div>
-    
+
     <!-- 返回按钮 -->
-    <button class="back-button" @click="goBack">
-      ← 返回赛程
-    </button>
+    <button class="back-button" @click="goBack">← 返回赛程</button>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import { useGameStore } from '@/stores/game'
-import DPlayer from 'dplayer'
-import Hls from 'hls.js'
-import Flv from 'flv.js'
+import { ref, onMounted, onBeforeUnmount, computed } from "vue";
+import { useRouter } from "vue-router";
+import { useGameStore } from "@/stores/game";
+import DPlayer from "dplayer";
+import Hls from "hls.js";
+import Flv from "flv.js";
 
 // 注册全局变量
-window.flvjs = Flv
-window.Hls = Hls
+window.flvjs = Flv;
+window.Hls = Hls;
 
-const router = useRouter()
-const gameStore = useGameStore()
+const router = useRouter();
+const gameStore = useGameStore();
 
-const dpInstance = ref(null)
+const dpInstance = ref(null);
 
 // 从store获取数据
-const gameData = computed(() => gameStore.currentGame)
-const allStreams = computed(() => gameStore.allStreams)
+const gameData = computed(() => gameStore.currentGame);
+const allStreams = computed(() => gameStore.allStreams);
 const currentStream = computed({
   get: () => gameStore.currentStream,
-  set: (val) => gameStore.currentStream = val
-})
+  set: (val) => (gameStore.currentStream = val),
+});
 
 // 初始化播放器
+// const initPlayer = () => {
+//   if (dpInstance.value) {
+//     dpInstance.value.destroy();
+//   }
+
+//   dpInstance.value = new DPlayer({
+//     container: document.getElementById('dplayer-live'),
+//     live: true,
+//     autoplay: true,
+//     video: {
+//       url: currentStream.value?.url || '',
+//       type: 'auto'
+//     }
+//   });
+
+//   // 强制设置视频尺寸
+//   setTimeout(() => {
+//     const container = document.getElementById('dplayer-live');
+//     const video = container?.querySelector('video');
+//     if (video) {
+//       video.style.cssText = `
+//         width: 100% !important;
+//         height: 100% !important;
+//         object-fit: contain !important;
+//         position: absolute !important;
+//         top: 0 !important;
+//         left: 0 !important;
+//       `;
+//       // console.log('视频实际尺寸:', video.videoWidth, 'x', video.videoHeight);
+//     }
+//   }, 500);
+// };
+// 改进的播放器初始化（核心修改点）
+// 改进的播放器初始化（核心修改点）
 const initPlayer = () => {
+  if (!currentStream.value?.url) return;
+
+  // 销毁旧实例
   if (dpInstance.value) {
     dpInstance.value.destroy();
   }
 
   dpInstance.value = new DPlayer({
-    container: document.getElementById('dplayer-live'),
+    container: document.getElementById("dplayer-live"),
     live: true,
     autoplay: true,
+    airplay: true,
     video: {
-      url: currentStream.value?.url || '',
-      type: 'auto'
-    }
+      url: currentStream.value.url,
+      type: "custom", // 修改为custom类型
+      customType: {
+        custom: function (video, player) {
+          const url = video.src;
+
+          // 自动检测协议类型
+          if (url.includes(".m3u8") || url.endsWith("/hls")) {
+            const hls = new Hls();
+            hls.loadSource(url);
+            hls.attachMedia(video);
+            player.on("destroy", () => hls.destroy());
+          } else if (url.includes(".flv") || url.endsWith("/flv")) {
+            const flv = Flv.createPlayer({ type: "flv", url });
+            flv.attachMediaElement(video);
+            flv.load();
+            player.on("destroy", () => flv.destroy());
+          } else {
+            // 其他协议回退到DPlayer默认处理
+            video.src = url;
+          }
+        },
+      },
+    },
   });
 
-  // 强制设置视频尺寸
+  // 保持原有尺寸调整逻辑
   setTimeout(() => {
-    const container = document.getElementById('dplayer-live');
-    const video = container?.querySelector('video');
+    const video = document
+      .getElementById("dplayer-live")
+      ?.querySelector("video");
     if (video) {
       video.style.cssText = `
         width: 100% !important;
         height: 100% !important;
         object-fit: contain !important;
-        position: absolute !important;
-        top: 0 !important;
-        left: 0 !important;
       `;
-      // console.log('视频实际尺寸:', video.videoWidth, 'x', video.videoHeight);
     }
   }, 500);
 };
 
 // 切换直播源
 const switchStream = (stream) => {
-  currentStream.value = stream
-  initPlayer()
-}
+  currentStream.value = stream;
+  initPlayer();
+};
 
 // 获取直播源名称
 const getStreamName = (type) => {
   const names = {
-    tx: '企鹅体育',
-    wl: '纬来体育',
-    mg: '咪咕体育', 
-    nba: '高清原声',
-    zb: '高清直播'
-  }
-  return names[type] || type
-}
+    tx: "企鹅体育",
+    wl: "纬来体育",
+    mg: "咪咕体育",
+    nba: "高清原声",
+    zb: "高清直播",
+  };
+  return names[type] || type;
+};
 
 // 返回赛程页
 const goBack = () => {
-  gameStore.clearGameData()
-  router.go(-1)
-}
+  gameStore.clearGameData();
+  router.go(-1);
+};
 
 onMounted(() => {
   // 默认选择第一个直播源
   if (allStreams.value.length > 0 && !currentStream.value) {
-    currentStream.value = allStreams.value[0]
+    currentStream.value = allStreams.value[0];
   }
-  initPlayer()
-})
+  initPlayer();
+});
 
 onBeforeUnmount(() => {
   if (dpInstance.value) {
-    dpInstance.value.destroy()
+    dpInstance.value.destroy();
   }
-})
+});
 </script>
 
 <style lang="scss" scoped>
 .live-stream-container {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20px;
+  // padding: 20px;
   background: #f5f5f5;
   min-height: 100vh;
 }
@@ -161,6 +216,7 @@ onBeforeUnmount(() => {
   align-items: center;
   gap: 40px;
   margin-bottom: 20px;
+  margin-top: 20px;
   background: white;
   padding: 20px;
   border-radius: 8px;
@@ -171,28 +227,28 @@ onBeforeUnmount(() => {
   display: flex;
   align-items: center;
   gap: 15px;
-  
+
   img {
     width: 80px;
     height: 80px;
     object-fit: contain;
   }
-  
+
   .team-details {
     text-align: center;
-    
+
     h3 {
       margin: 0;
       font-size: 1.2rem;
       color: #333;
     }
-    
+
     p {
       margin: 5px 0;
       font-size: 1.1rem;
       font-weight: bold;
     }
-    
+
     span {
       font-size: 0.9rem;
       color: #666;
@@ -203,7 +259,7 @@ onBeforeUnmount(() => {
 .vs-circle {
   width: 50px;
   height: 50px;
-  background: #e74c3c;
+  background: #f29155;
   color: white;
   border-radius: 50%;
   display: flex;
@@ -241,7 +297,7 @@ onBeforeUnmount(() => {
   gap: 10px;
   flex-wrap: wrap;
   justify-content: center;
-  
+
   button {
     padding: 8px 16px;
     background: #f0f0f0;
@@ -249,11 +305,11 @@ onBeforeUnmount(() => {
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s;
-    
+
     &:hover {
       background: #e0e0e0;
     }
-    
+
     &.active {
       background: #3498db;
       color: white;
@@ -273,7 +329,7 @@ onBeforeUnmount(() => {
   cursor: pointer;
   font-size: 1rem;
   text-align: center;
-  
+
   &:hover {
     background: #2980b9;
   }
@@ -281,16 +337,48 @@ onBeforeUnmount(() => {
 
 @media (max-width: 768px) {
   .game-header {
-    flex-direction: column;
+    // flex-direction: column;
     gap: 20px;
+    .team-info {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      img {
+        width: 60px;
+        height: 60px;
+        object-fit: contain;
+      }
+
+      .team-details {
+        text-align: center;
+
+        h3 {
+          margin: 0;
+          font-size: 1.2rem;
+          color: #333;
+        }
+
+        p {
+          margin: 5px 0;
+          font-size: 1.1rem;
+          font-weight: bold;
+        }
+
+        span {
+          font-size: 0.9rem;
+          color: #666;
+        }
+      }
+    }
   }
-  
+
   .vs-circle {
     margin: 10px 0;
   }
-  
+
   .back-button {
     width: 100%;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/NBASchedule.vue b/src/components/NBASchedule.vue
index 497c86e..c12bffc 100644
--- a/src/components/NBASchedule.vue
+++ b/src/components/NBASchedule.vue
@@ -122,25 +122,33 @@
             </div>
 
             <div class="live-buttons">
-              <!-- 只有当比赛未结束且是当天比赛时才显示直播区域 -->
-              <template v-if="game.status !== 3 && shouldShowLiveArea(game)">
-                <template v-if="hasLiveStreams(game.gameId)">
-                  <!-- 直播按钮 -->
-                  <button
-                    v-for="stream in getLiveStreams(game.gameId)"
-                    :key="stream.type"
-                    @click="goToLive(game, stream)"
-                    class="live-btn"
-                  >
-                    <span class="btn-icon">📺</span>
-                    {{ getStreamName(stream.type) }}
-                  </button>
+              <!-- 进行中的比赛 -->
+              <template v-if="game.status === 2">
+                <!-- 只对当天比赛显示直播按钮 -->
+                <template v-if="isTodayGame(game)">
+                  <template v-if="hasLiveStreams(game.gameId)">
+                    <button
+                      v-for="stream in getLiveStreams(game.gameId)"
+                      :key="stream.type"
+                      @click="goToLive(game, stream)"
+                      class="live-btn"
+                    >
+                      <span class="btn-icon">📺</span>
+                      {{ getStreamName(stream.type) }}
+                    </button>
+                  </template>
+                  <div v-else class="no-live">无直播信号</div>
                 </template>
-                <div v-else class="no-live">无直播信号</div>
+                <!-- 非当天进行中比赛（理论上不应该存在） -->
+                <div v-else class="no-live">比赛进行中</div>
               </template>
+
+              <!-- 已结束的比赛（无论是否当天） -->
               <div v-else-if="game.status === 3" class="no-live">
                 比赛已结束
               </div>
+
+              <!-- 未开始的比赛 -->
               <div v-else class="no-live">未开始</div>
             </div>
 
@@ -175,38 +183,26 @@ const gameStore = useGameStore();
 const router = useRouter();
 const urlsData = ref([]);
 
-const shouldShowLiveArea = (game) => {
-  // 1. 已结束的比赛不显示
-  if (game.status === 3) return false;
-
-  // 2. 获取今天的日期（北京时间）
-  const today = new Date();
-  const todayStr = `${today.getFullYear()}-${(today.getMonth() + 1)
-    .toString()
-    .padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`;
-
-  // 3. 直接比较 startDate（已经是北京时间）
-  return game.startDate === todayStr;
-};
-
 onMounted(async () => {
   try {
     const response = await urls();
     urlsData.value = response || [];
-    // console.log("获取的直播URL数据:", urlsData.value); // 检查数据是否正确
   } catch (err) {
     console.error("获取直播URL失败:", err);
     urlsData.value = [];
   }
 });
 
-// 判断是否为当天进行中的比赛
-const isLiveGame = (game) => {
-  const isLive = game.status === 2; // 假设2表示进行中
-  const gameDate = new Date(game.dateTimeUtc);
+// 判断是否为当天比赛（无论状态如何）
+const isTodayGame = (game) => {
+  // 获取今天的日期（北京时间）
   const today = new Date();
-  const isToday = gameDate.toDateString() === today.toDateString();
-  return isLive && isToday;
+  const todayStr = `${today.getFullYear()}-${(today.getMonth() + 1)
+    .toString()
+    .padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`;
+
+  // 直接比较 startDate（已经是北京时间）
+  return game.startDate === todayStr;
 };
 
 // 检查比赛是否有直播流
@@ -239,7 +235,6 @@ const getStreamName = (type) => {
     nba: "高清原声",
     mg: "咪咕体育",
     zb: "高清直播",
-    // 可以添加更多类型
   };
   return names[type] || type;
 };
@@ -299,7 +294,6 @@ const props = defineProps({
 
 const emit = defineEmits(["dateChange"]);
 
-// 当前显示日期
 // 当前显示日期（带星期几）
 const currentDisplayDate = computed(() => {
   if (!props.scheduleData?.data?.start) return "加载中...";
@@ -370,7 +364,7 @@ const isWinner = (game, teamType) => {
   if (game.status !== 3) return false;
 
   // 比较比分
-  if (teamType === 'away') {
+  if (teamType === "away") {
     return game.awayTeamScore > game.homeTeamScore;
   } else {
     return game.homeTeamScore > game.awayTeamScore;
@@ -754,11 +748,11 @@ const isWinner = (game, teamType) => {
 /* 如果希望更明显的效果，可以调整样式 */
 .team.winner .team-name {
   font-weight: bold;
-  color: #2E7D32; /* 深绿色文字 */
+  color: #2e7d32; /* 深绿色文字 */
 }
 
 .team.winner .team-score {
   font-weight: bold;
-  color: #2E7D32; /* 深绿色比分 */
+  color: #2e7d32; /* 深绿色比分 */
 }
 </style>
