Initial commit (without large files)
This commit is contained in:
30
.gitignore
vendored
Normal file
30
.gitignore
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.tsbuildinfo
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
29
README.md
Normal file
29
README.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# NBA
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
<script type="text/javascript" src="//js.users.51.la/21957239.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
8
jsconfig.json
Normal file
8
jsconfig.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
28
package.json
Normal file
28
package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "nba",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.3.1",
|
||||
"axios": "^1.8.4",
|
||||
"dplayer": "^1.27.1",
|
||||
"element-plus": "^2.9.7",
|
||||
"flv.js": "^1.6.2",
|
||||
"hls.js": "^1.6.2",
|
||||
"router": "^2.2.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.2.3",
|
||||
"sass-embedded": "^1.86.3",
|
||||
"vite": "^6.2.4",
|
||||
"vite-plugin-vue-devtools": "^7.7.2"
|
||||
}
|
||||
}
|
||||
2554
pnpm-lock.yaml
generated
Normal file
2554
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
13
src/App.vue
Normal file
13
src/App.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
40
src/api/nba.js
Normal file
40
src/api/nba.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import request from "./request";
|
||||
import axios from 'axios'
|
||||
const nbaapi = axios.create({
|
||||
baseURL: 'http://localhost:9005/api',
|
||||
// baseURL: 'http://110.42.255.182:8080',
|
||||
timeout: 2000,
|
||||
})
|
||||
|
||||
const urls = async () => {
|
||||
return await nbaapi({
|
||||
url: '/urls',
|
||||
method: 'get',
|
||||
})
|
||||
.then((response) => {
|
||||
// console.log(response.data); // 可选：调试用
|
||||
return response.data; // 返回数据
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('获取直播URL失败:', error);
|
||||
throw error; // 可以选择抛出错误或返回默认值，比如 return []
|
||||
});
|
||||
};
|
||||
|
||||
const games = () => {
|
||||
nbaapi({
|
||||
url: '/games',
|
||||
method: 'get',
|
||||
}).then((response) => {
|
||||
console.log(response.data);
|
||||
})
|
||||
}
|
||||
const schedule =(params) => {
|
||||
return request({
|
||||
url: '/game/schedule',
|
||||
method: 'get',
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
export {schedule,games,urls};
|
||||
32
src/api/request.js
Normal file
32
src/api/request.js
Normal file
@@ -0,0 +1,32 @@
|
||||
import axios from 'axios'
|
||||
|
||||
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: 'https://api.nba.cn/sib/v2',
|
||||
// baseURL: 'http://110.42.255.182:8080',
|
||||
timeout: 2000,
|
||||
})
|
||||
|
||||
// 请求拦截器
|
||||
request.interceptors.request.use(
|
||||
(config) => {
|
||||
return config
|
||||
},
|
||||
(error) => Promise.reject(error), // 请求错误处理
|
||||
)
|
||||
|
||||
// 响应拦截器
|
||||
request.interceptors.response.use(
|
||||
(response) => {
|
||||
if (response.status === 200) {
|
||||
return response.data
|
||||
}
|
||||
return Promise.reject(response)
|
||||
},
|
||||
(error) => {
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
|
||||
export default request
|
||||
196
src/components/LiveStream.vue
Normal file
196
src/components/LiveStream.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="video-container">
|
||||
<div
|
||||
v-for="(video, index) in videoList"
|
||||
:key="index"
|
||||
class="video-card"
|
||||
@click="handleCardClick(index)"
|
||||
>
|
||||
<div class="video-wrapper">
|
||||
<div :id="'dplayer-' + index" class="dplayer-container"></div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<h3 class="video-title">{{ video.title }}</h3>
|
||||
<p class="video-desc">{{ video.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import DPlayer from 'dplayer'
|
||||
import Hls from 'hls.js'
|
||||
import Flv from 'flv.js'
|
||||
// 将 flv.js 注册为全局变量
|
||||
window.flvjs = Flv
|
||||
window.Hls = Hls
|
||||
// 视频列表数据
|
||||
const videoList = ref([
|
||||
{
|
||||
title: '示例视频1',
|
||||
description: '这是一个示例视频描述',
|
||||
// url: './../../public/videos/7.mp4',
|
||||
url: 'https://feijing-xzbonlinepull.bszb.me/live/202_3520771_1.m3u8?txSecret=92b9a5df1d71b2a1dbf4cb41e7c7b507&txTime=68011a9d',
|
||||
// pic: 'https://example.com/poster1.jpg'
|
||||
},
|
||||
// {
|
||||
// title: '示例视频2',
|
||||
// description: '这是另一个示例视频描述',
|
||||
// url: 'https://example.com/video2.mp4',
|
||||
// pic: 'https://example.com/poster2.jpg'
|
||||
// },
|
||||
// 可以添加更多视频
|
||||
])
|
||||
|
||||
const dpInstances = ref([])
|
||||
|
||||
// 初始化播放器
|
||||
const initDPlayers = () => {
|
||||
videoList.value.forEach((video, index) => {
|
||||
const dp = new DPlayer({
|
||||
container: document.getElementById(`dplayer-${index}`),
|
||||
// live: true,
|
||||
screenshot: true,
|
||||
autoplay: true,
|
||||
theme: '#b7daff',
|
||||
loop: false,
|
||||
lang: 'zh-cn',
|
||||
hotkey: true,
|
||||
preload: 'auto',
|
||||
volume: 0.6,
|
||||
video: {
|
||||
url: video.url,
|
||||
pic: video.pic,
|
||||
thumbnails: video.pic,
|
||||
type: 'auto',
|
||||
},
|
||||
pluginOptions:{
|
||||
hls: {
|
||||
// 这里可以添加 HLS.js 的配置选项
|
||||
debug: true,
|
||||
enableWorker: true,
|
||||
manifestLoadingTimeOut: 10000,
|
||||
levelLoadingTimeOut: 10000,
|
||||
},
|
||||
flv: {
|
||||
// 这里可以添加 FLV.js 的配置选项
|
||||
enableWorker: true,
|
||||
enableStashBuffer: true,
|
||||
stashInitialSize: 128,
|
||||
}
|
||||
}
|
||||
})
|
||||
console.log(dp.plugins.flv); // flv 实例
|
||||
// 监听播放器的事件
|
||||
dpInstances.value.push(dp)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 处理卡片点击事件
|
||||
const handleCardClick = (index) => {
|
||||
// 暂停所有其他播放器
|
||||
dpInstances.value.forEach((dp, i) => {
|
||||
if (i !== index && !dp.video.paused) {
|
||||
dp.pause()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initDPlayers()
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 销毁所有播放器实例
|
||||
dpInstances.value.forEach(dp => {
|
||||
dp.destroy()
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 40px 0;
|
||||
justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
.video-card {
|
||||
flex: 1 1 calc(33.333% - 20px);
|
||||
min-width: 768px;
|
||||
max-width: 70%;
|
||||
background: #d6f3f0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
// transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
position: relative;
|
||||
padding-top: 56.25%; /* 16:9 宽高比 */
|
||||
overflow: hidden;
|
||||
|
||||
.dplayer-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.video-info {
|
||||
padding: 15px;
|
||||
|
||||
.video-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 1.1rem;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.video-desc {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.video-container {
|
||||
.video-card {
|
||||
flex: 1 1 calc(50% - 15px);
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.video-container {
|
||||
|
||||
.video-card {
|
||||
flex: 1 1 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
696
src/components/NBASchedule.vue
Normal file
696
src/components/NBASchedule.vue
Normal file
@@ -0,0 +1,696 @@
|
||||
<template>
|
||||
<div class="nba-schedule-container">
|
||||
<!-- 赞助商信息 -->
|
||||
<div v-if="scheduleData?.data?.sponsor" class="sponsor-banner">
|
||||
<span>所有内容均来源互联网，如有侵权联系邮箱：xdd9@vip.qq.com</span>
|
||||
<img
|
||||
:src="scheduleData.data.sponsor.logo"
|
||||
:alt="scheduleData.data.sponsor.name"
|
||||
class="sponsor-logo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 赛程日期导航 -->
|
||||
<div class="date-navigation">
|
||||
<button
|
||||
@click="changeDate('pre')"
|
||||
class="nav-button"
|
||||
:disabled="!scheduleData?.data?.preDate"
|
||||
>
|
||||
<span class="arrow">←</span>
|
||||
{{ scheduleData?.data?.preDate || "无更早日期" }}
|
||||
</button>
|
||||
<div class="current-date">
|
||||
{{ currentDisplayDate }}
|
||||
</div>
|
||||
<button
|
||||
@click="changeDate('next')"
|
||||
class="nav-button"
|
||||
:disabled="!scheduleData?.data?.nextDate"
|
||||
>
|
||||
{{ scheduleData?.data?.nextDate || "无更晚日期" }}
|
||||
<span class="arrow">→</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 比赛列表 - 每行一场比赛 -->
|
||||
<div class="games-list">
|
||||
<div v-for="group in scheduleData?.data?.groups" :key="group.date">
|
||||
<!-- 添加判断：当games数组为空时显示提示信息 -->
|
||||
<div v-if="group.games && group.games.length > 0">
|
||||
<div v-for="game in group.games" :key="game.gameId" class="game-card">
|
||||
<!-- 比赛时间 -->
|
||||
<div class="game-time" :class="getStatusClass(game.status)">
|
||||
美国时间：{{ formatGameTime(game.dateTimeUtc) }}
|
||||
</div>
|
||||
|
||||
<!-- 比赛主要内容 -->
|
||||
<div class="game-main">
|
||||
<!-- 客队信息 -->
|
||||
<div
|
||||
class="team away-team"
|
||||
:class="{ 'tbd-team': !game.teamValid }"
|
||||
>
|
||||
<img
|
||||
:src="game.awayTeamLogoDark"
|
||||
:alt="game.awayTeamName"
|
||||
class="team-logo"
|
||||
/>
|
||||
<div class="team-info">
|
||||
<div class="team-name">
|
||||
<span class="city">{{ game.awayTeamCity }}</span>
|
||||
<span class="name">{{ game.awayTeamName || "待定" }}</span>
|
||||
</div>
|
||||
<div class="team-record">
|
||||
<span v-if="game.awayTeamWins !== undefined">
|
||||
{{ game.awayTeamWins }}胜-{{ game.awayTeamLosses }}负
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="game.status !== 1" class="team-score">
|
||||
{{ game.awayTeamScore }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 比赛状态 -->
|
||||
<div class="game-status">
|
||||
<div v-if="game.status === 1" class="game-not-started">
|
||||
北京时间：{{ game.startTime }} 开始
|
||||
</div>
|
||||
<div v-else class="game-in-progress">
|
||||
<div class="status-text">{{ game.statusText }}</div>
|
||||
<div v-if="game.periodText" class="period-text">
|
||||
{{ game.periodText }}
|
||||
</div>
|
||||
<div v-if="game.gameClock" class="game-clock">
|
||||
{{ game.gameClock }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主队信息 -->
|
||||
<div
|
||||
class="team home-team"
|
||||
:class="{ 'tbd-team': !game.teamValid }"
|
||||
>
|
||||
<img
|
||||
:src="game.homeTeamLogoDark"
|
||||
:alt="game.homeTeamName"
|
||||
class="team-logo"
|
||||
/>
|
||||
<div class="team-info">
|
||||
<div class="team-name">
|
||||
<span class="city">{{ game.homeTeamCity }}</span>
|
||||
<span class="name">{{ game.homeTeamName || "待定" }}</span>
|
||||
</div>
|
||||
<div class="team-record">
|
||||
<span v-if="game.homeTeamWins !== undefined">
|
||||
{{ game.homeTeamWins }}胜-{{ game.homeTeamLosses }}负
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="game.status !== 1" class="team-score">
|
||||
{{ game.homeTeamScore }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 直播间按钮区域（仅当天进行中的比赛显示） -->
|
||||
<div class="live-buttons" v-if="shouldShowLiveArea(game)">
|
||||
<template v-if="game.status === 2 && hasLiveStreams(game.gameId)">
|
||||
<button
|
||||
v-for="stream in getLiveStreams(game.gameId)"
|
||||
:key="stream.type"
|
||||
class="live-btn"
|
||||
:class="{
|
||||
primary: stream.type === 'qq',
|
||||
secondary: stream.type !== 'qq',
|
||||
}"
|
||||
@click="goToLive(stream.url)"
|
||||
>
|
||||
<span class="btn-icon">📺</span>
|
||||
<span>{{ getStreamName(stream.type) }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<div v-else-if="game.status === 1" class="no-live">未开始</div>
|
||||
<div v-else class="no-live">无直播信号</div>
|
||||
</div>
|
||||
|
||||
<!-- 比赛场地和赛季信息 -->
|
||||
<div class="game-footer">
|
||||
<div class="game-arena">
|
||||
<span v-if="game.arenaName">{{ game.arenaName }}</span>
|
||||
<span v-else>场地待定</span>
|
||||
</div>
|
||||
<div class="game-season">
|
||||
{{ game.seasonName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 当没有比赛时显示提示信息 -->
|
||||
<div v-else class="no-games-message">
|
||||
{{ currentDisplayDate }} 当天没有NBA比赛
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { urls } from "@/api/nba";
|
||||
import { onMounted } from "vue";
|
||||
|
||||
const router = useRouter();
|
||||
const urlsData = ref([]);
|
||||
|
||||
const shouldShowLiveArea = (game) => {
|
||||
// 1. 已结束的比赛不显示
|
||||
if (game.status === 3) return false;
|
||||
|
||||
const gameDate = new Date(game.dateTimeUtc);
|
||||
const today = new Date();
|
||||
|
||||
// 2. 只显示当天及未来的比赛
|
||||
// 清除时间部分，只比较日期
|
||||
today.setHours(0, 0, 0, 0);
|
||||
gameDate.setHours(0, 0, 0, 0);
|
||||
|
||||
return gameDate >= today;
|
||||
};
|
||||
|
||||
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 today = new Date();
|
||||
const isToday = gameDate.toDateString() === today.toDateString();
|
||||
return isLive && isToday;
|
||||
};
|
||||
|
||||
// 检查比赛是否有直播流
|
||||
const hasLiveStreams = (gameId) => {
|
||||
if (!urlsData.value || !gameId) return false;
|
||||
|
||||
// 查找匹配的gameId
|
||||
const gameStreams = urlsData.value.find((item) => item[gameId]);
|
||||
return !!gameStreams;
|
||||
};
|
||||
|
||||
// 获取比赛的直播流
|
||||
const getLiveStreams = (gameId) => {
|
||||
if (!urlsData.value || !gameId) return [];
|
||||
|
||||
const gameStreams = urlsData.value.find((item) => item[gameId]);
|
||||
return gameStreams ? gameStreams[gameId] : [];
|
||||
};
|
||||
|
||||
// 获取流名称
|
||||
const getStreamName = (type) => {
|
||||
const names = {
|
||||
tx: "TX直播",
|
||||
wl: "纬来直播",
|
||||
nba: "原声直播",
|
||||
zb: "高清直播",
|
||||
// 可以添加更多类型
|
||||
};
|
||||
return names[type] || type;
|
||||
};
|
||||
|
||||
// 跳转到直播页面
|
||||
const goToLive = (url) => {
|
||||
if (!url) return;
|
||||
|
||||
router.push({
|
||||
name: "Play",
|
||||
query: {
|
||||
url: url,
|
||||
// 其他参数...
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const props = defineProps({
|
||||
scheduleData: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
error: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["dateChange"]);
|
||||
|
||||
// 当前显示日期
|
||||
// 当前显示日期（带星期几）
|
||||
const currentDisplayDate = computed(() => {
|
||||
if (!props.scheduleData?.data?.start) return "加载中...";
|
||||
|
||||
const dateStr = props.scheduleData.data.start;
|
||||
const date = new Date(dateStr);
|
||||
|
||||
// 星期几的中文名称
|
||||
const weekdays = [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
];
|
||||
const weekday = weekdays[date.getDay()];
|
||||
|
||||
// 格式化日期为 YYYY年MM月DD日
|
||||
const year = date.getFullYear();
|
||||
const month = (date.getMonth() + 1).toString().padStart(2, "0");
|
||||
const day = date.getDate().toString().padStart(2, "0");
|
||||
|
||||
return `${year}年${month}月${day}日 ${weekday}`;
|
||||
});
|
||||
|
||||
// 格式化比赛时间
|
||||
const formatGameTime = (utcTime) => {
|
||||
if (!utcTime) return "时间待定";
|
||||
const date = new Date(utcTime);
|
||||
const hours = date.getHours().toString().padStart(2, "0");
|
||||
const minutes = date.getMinutes().toString().padStart(2, "0");
|
||||
return `${hours}:${minutes}`;
|
||||
};
|
||||
|
||||
// 获取比赛状态对应的样式类
|
||||
const getStatusClass = (status) => {
|
||||
switch (status) {
|
||||
case 1:
|
||||
return "not-started"; // 未开始
|
||||
case 2:
|
||||
return "in-progress"; // 进行中
|
||||
case 3:
|
||||
return "finished"; // 已结束
|
||||
default:
|
||||
return "not-started";
|
||||
}
|
||||
};
|
||||
|
||||
// 切换日期
|
||||
const changeDate = (direction) => {
|
||||
if (!props.scheduleData?.data) return;
|
||||
|
||||
const date =
|
||||
direction === "pre"
|
||||
? props.scheduleData.data.preDate
|
||||
: props.scheduleData.data.nextDate;
|
||||
|
||||
if (date) {
|
||||
emit("dateChange", date);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nba-schedule-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
/* 添加未开播样式居中显示 */
|
||||
.no-live {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 8px 16px;
|
||||
background-color: #808080;
|
||||
color: #ffffff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 赞助商样式 */
|
||||
.sponsor-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30px;
|
||||
padding: 12px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.sponsor-logo {
|
||||
height: 36px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* 日期导航样式 */
|
||||
.date-navigation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.current-date {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: #1d428a; /* NBA 蓝色 */
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
background: none;
|
||||
border: 1px solid #dee2e6;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nav-button:hover:not(:disabled) {
|
||||
background-color: #ffffff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* 比赛列表 - 每行一场比赛 */
|
||||
.games-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
/* 比赛卡片样式 - 大气风格 */
|
||||
.game-card {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
/* 比赛时间 */
|
||||
.game-time {
|
||||
padding: 12px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.not-started {
|
||||
background-color: #6c757d; /* 灰色 - 未开始 */
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
background-color: #dc3545; /* 红色 - 进行中 */
|
||||
}
|
||||
|
||||
.finished {
|
||||
background-color: #28a745; /* 绿色 - 已结束 */
|
||||
}
|
||||
|
||||
/* 比赛主要内容 */
|
||||
.game-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 球队样式 */
|
||||
.team {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.team-logo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 20px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.team-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.team-name .city {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.team-name .name {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
margin: 4px 0;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.team-record {
|
||||
font-size: 14px;
|
||||
color: #868e96;
|
||||
}
|
||||
|
||||
.team-score {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
margin-left: 20px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
/* 待定球队样式 */
|
||||
.tbd-team {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 比赛状态 */
|
||||
.game-status {
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
border-top: 1px dashed #e9ecef;
|
||||
border-bottom: 1px dashed #e9ecef;
|
||||
}
|
||||
|
||||
.game-not-started {
|
||||
color: #6c757d;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.game-in-progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-weight: 700;
|
||||
color: #dc3545;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.period-text,
|
||||
.game-clock {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* 主队样式 */
|
||||
.home-team {
|
||||
border-top: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
/* 比赛页脚 */
|
||||
.game-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.game-arena {
|
||||
font-size: 14px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.game-season {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1d428a;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.game-card {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.team {
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.team-logo {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.team-name .name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.team-score {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.date-navigation {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.current-date {
|
||||
order: -1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.team-logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.team-name .name {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.team-score {
|
||||
font-size: 20px;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 新增直播间按钮样式 */
|
||||
.live-buttons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
padding: 15px 20px;
|
||||
border-top: 1px solid #f1f3f5;
|
||||
border-bottom: 1px solid #f1f3f5;
|
||||
}
|
||||
|
||||
.live-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.live-btn.primary {
|
||||
background-color: #1d428a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.live-btn.primary:hover {
|
||||
background-color: #15316e;
|
||||
}
|
||||
|
||||
.live-btn.secondary {
|
||||
background-color: #f8f9fa;
|
||||
color: #1d428a;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.live-btn.secondary:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.live-buttons {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.live-btn {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.no-games-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
9
src/main.js
Normal file
9
src/main.js
Normal file
@@ -0,0 +1,9 @@
|
||||
import router from './router'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
25
src/router/index.js
Normal file
25
src/router/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
// router/index.js
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import IndexVue from '@/views/Index.vue'
|
||||
import PlayVue from '@/views/Play.vue'
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Index',
|
||||
component: IndexVue,
|
||||
props: route => ({ query: route.query })
|
||||
},
|
||||
{
|
||||
path: '/play',
|
||||
name: 'Play',
|
||||
component: PlayVue,
|
||||
props: route => ({ query: route.query })
|
||||
}
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
75
src/views/Index.vue
Normal file
75
src/views/Index.vue
Normal file
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<NBASchedule
|
||||
:scheduleData="scheduleData"
|
||||
:loading="loading"
|
||||
:error="error"
|
||||
@dateChange="handleDateChange"
|
||||
/>
|
||||
|
||||
<el-backtop :right="50" :bottom="50" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import NBASchedule from "@/components/NBASchedule.vue";
|
||||
import { schedule,games } from "@/api/nba";
|
||||
|
||||
const scheduleData = ref(null);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
|
||||
// 获取当前时间戳（秒）
|
||||
const currentTimestamp = Math.floor(Date.now() / 1000);
|
||||
|
||||
// 构造请求参数
|
||||
const params = {
|
||||
app_key: "tiKB2tNdncnZFPOi",
|
||||
app_version: "1.1.0",
|
||||
channel: "NBA",
|
||||
device_id: "cd4920b68041f06fcc6ea358c85710bd",
|
||||
// end: "2025-04-17",
|
||||
install_id: "1502934360",
|
||||
network: "N/A",
|
||||
os_type: "3",
|
||||
os_version: "1.0.0",
|
||||
sign: "sign_v2",
|
||||
sign2: "67BB8937A32E512826D59467E803B28CD82E179FCE8B2A470C20AA0BD4AE08DB",
|
||||
// start: "2025-04-17",
|
||||
//开始结束设置为当天
|
||||
start: currentTimestamp,
|
||||
end: currentTimestamp,
|
||||
t: currentTimestamp,
|
||||
};
|
||||
|
||||
// 获取赛程数据
|
||||
const fetchScheduleData = async () => {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
try {
|
||||
const response = await schedule(params);
|
||||
scheduleData.value = response;
|
||||
// console.log("赛程数据:", response);
|
||||
|
||||
} catch (err) {
|
||||
error.value = err.message || "获取赛程数据失败";
|
||||
console.error("获取赛程数据失败:", err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 处理日期变更
|
||||
const handleDateChange = (date) => {
|
||||
params.start = date;
|
||||
params.end = date;
|
||||
fetchScheduleData();
|
||||
};
|
||||
|
||||
// 初始加载数据
|
||||
fetchScheduleData();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
26
src/views/Play.vue
Normal file
26
src/views/Play.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<!-- <LiveStream
|
||||
:liveUrl="liveUrl"
|
||||
:streamType="streamType"
|
||||
:gameInfo="gameInfo"
|
||||
@goBack="goBack"
|
||||
/> -->
|
||||
<LiveStream />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import LiveStream from '@/components/LiveStream.vue';
|
||||
// import { ref } from 'vue';
|
||||
// import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
// const route = useRoute(); // 注意这里改成了 route 而不是 useRoute
|
||||
// const liveUrl = ref('');
|
||||
// liveUrl.value = route.query.url;
|
||||
// console.log('play页面接收的直播地址:', liveUrl.value);
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
18
vite.config.js
Normal file
18
vite.config.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user