七十二家房客-观看平台v163
新增导航拦地址，方便分享
This commit is contained in:
云上贵猪
parent
320c7e3b9e
commit
7a93661e24
@ -6,18 +6,14 @@
|
||||
<div class="top-card card border-0 shadow-sm">
|
||||
<div class="card-body d-flex flex-wrap justify-content-between align-items-start gap-3">
|
||||
<div class="page-main-info">
|
||||
<!--<div class="page-tag mb-2">在线播放</div>-->
|
||||
|
||||
<template v-if="currentEpisode">
|
||||
<div class="episode-badges mb-2">
|
||||
<span class="info-badge playing">当前播放</span><span class="mx-2">｜</span>
|
||||
<span class="info-badge year">发布时间：{{ formatDate(currentEpisode.releasedAt) }}</span>
|
||||
<span class="info-badge year">时长：{{ formatDuration(currentEpisode.timeLength) }}</span>
|
||||
<span class="info-badge playing">当前播放</span>
|
||||
<span class="meta-pill">发布时间：{{ formatDate(currentEpisode.releasedAt) }}</span>
|
||||
<span class="meta-pill">时长：{{ formatDuration(currentEpisode.timeLength) }}</span>
|
||||
</div>
|
||||
|
||||
<h2 class="mb-2 page-title">{{ currentEpisode.title }}</h2>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
@ -42,7 +38,7 @@
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline-primary btn-sm px-3" @click="openGitRepo">
|
||||
Git仓库：v162
|
||||
Git仓库：v163
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -103,22 +99,6 @@
|
||||
@ended-next="handleEndedNext"
|
||||
/>
|
||||
|
||||
<!--<div v-if="currentEpisode" class="episode-info-card mt-3">-->
|
||||
<!-- <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">-->
|
||||
<!-- <div class="flex-grow-1">-->
|
||||
<!-- <div class="episode-badges mb-2">-->
|
||||
<!-- <span class="info-badge playing">当前播放</span>-->
|
||||
<!-- <span class="info-badge year">{{ selectedYear === 'all' ? '全部年份' : `${selectedYear}年` }}</span>-->
|
||||
<!-- <span class="info-badge month">{{ selectedMonth === 'all' ? '全部月份' : `${selectedMonth}月` }}</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <div class="episode-meta">-->
|
||||
<!-- 你可以使用上方筛选快速定位剧集，播放器会自动记录上次观看位置。-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--</div>-->
|
||||
|
||||
<div v-if="errorMsg" class="alert alert-danger mt-3 mb-0">
|
||||
{{ errorMsg }}
|
||||
</div>
|
||||
@ -138,9 +118,12 @@
|
||||
:episodes="displayEpisodeList"
|
||||
:current-episode-id="currentEpisode?.id || ''"
|
||||
:years="years"
|
||||
:months="months"
|
||||
:selected-year="selectedYear"
|
||||
:selected-month="selectedMonth"
|
||||
@select="playEpisode"
|
||||
@updateYear="handleYearChange"
|
||||
@updateMonth="handleMonthChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -220,6 +203,24 @@ function openGitRepo() {
|
||||
window.open('https://git.a-hxin.cn/ahxin/72QishierPlayer.git', '_blank')
|
||||
}
|
||||
|
||||
function getEpisodeIdFromUrl() {
|
||||
const path = window.location.pathname
|
||||
const match = path.match(/^\/episode\/([^/]+)$/)
|
||||
if (match?.[1]) {
|
||||
return decodeURIComponent(match[1])
|
||||
}
|
||||
|
||||
const queryId = new URLSearchParams(window.location.search).get('episode')
|
||||
return queryId || ''
|
||||
}
|
||||
|
||||
function updateUrlByEpisodeId(id: string) {
|
||||
const nextUrl = `/episode/${encodeURIComponent(id)}`
|
||||
if (window.location.pathname !== nextUrl) {
|
||||
window.history.replaceState({}, '', nextUrl)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePlayerError(message: string) {
|
||||
errorMsg.value = message
|
||||
}
|
||||
@ -228,6 +229,10 @@ function handleYearChange(year: string) {
|
||||
selectedYear.value = year
|
||||
}
|
||||
|
||||
function handleMonthChange(month: string) {
|
||||
selectedMonth.value = month
|
||||
}
|
||||
|
||||
function getEpisodeYear(item: EpisodeData) {
|
||||
return String(new Date(item.releasedAt).getFullYear())
|
||||
}
|
||||
@ -274,6 +279,19 @@ async function fetchAllEpisodes() {
|
||||
|
||||
rebuildMonthsByYear()
|
||||
|
||||
const urlEpisodeId = getEpisodeIdFromUrl()
|
||||
const urlEpisode = allEpisodeList.value.find(item => item.id === urlEpisodeId)
|
||||
|
||||
if (urlEpisode) {
|
||||
selectedYear.value = getEpisodeYear(urlEpisode)
|
||||
rebuildMonthsByYear()
|
||||
selectedMonth.value = getEpisodeMonth(urlEpisode)
|
||||
currentEpisode.value = urlEpisode
|
||||
saveCurrentEpisodeId(urlEpisode.id)
|
||||
updateUrlByEpisodeId(urlEpisode.id)
|
||||
return
|
||||
}
|
||||
|
||||
const savedEpisodeId = getCurrentEpisodeId()
|
||||
const savedEpisode = allEpisodeList.value.find(item => item.id === savedEpisodeId)
|
||||
|
||||
@ -282,6 +300,7 @@ async function fetchAllEpisodes() {
|
||||
rebuildMonthsByYear()
|
||||
selectedMonth.value = getEpisodeMonth(savedEpisode)
|
||||
currentEpisode.value = savedEpisode
|
||||
updateUrlByEpisodeId(savedEpisode.id)
|
||||
return
|
||||
}
|
||||
|
||||
@ -291,6 +310,8 @@ async function fetchAllEpisodes() {
|
||||
rebuildMonthsByYear()
|
||||
selectedMonth.value = getEpisodeMonth(firstEpisode)
|
||||
currentEpisode.value = firstEpisode
|
||||
saveCurrentEpisodeId(firstEpisode.id)
|
||||
updateUrlByEpisodeId(firstEpisode.id)
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('fetchAllEpisodes error:', error)
|
||||
@ -315,6 +336,7 @@ async function playEpisode(item: EpisodeData) {
|
||||
selectedMonth.value = getEpisodeMonth(item)
|
||||
errorMsg.value = ''
|
||||
saveCurrentEpisodeId(item.id)
|
||||
updateUrlByEpisodeId(item.id)
|
||||
}
|
||||
|
||||
async function playPrevEpisode() {
|
||||
@ -368,41 +390,32 @@ onMounted(() => {
|
||||
.qishier-page {
|
||||
min-height: 100vh;
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(13, 110, 253, 0.1), transparent 24%),
|
||||
linear-gradient(180deg, #f8f9fa 0%, #eef1f5 100%);
|
||||
radial-gradient(circle at top left, rgba(99, 102, 241, 0.10), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(16, 185, 129, 0.08), transparent 24%),
|
||||
linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%);
|
||||
}
|
||||
|
||||
.top-card,
|
||||
.control-card,
|
||||
.content-card {
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 18px;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.page-main-info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.page-tag {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #8a5a00;
|
||||
background: rgba(255, 193, 7, 0.18);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-weight: 800;
|
||||
color: #212529;
|
||||
color: #1f2937;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -418,20 +431,14 @@ onMounted(() => {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.episode-info-card {
|
||||
padding: 16px 18px;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.episode-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.info-badge {
|
||||
.info-badge,
|
||||
.meta-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 5px 10px;
|
||||
@ -441,42 +448,23 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.info-badge.playing {
|
||||
background: rgba(255, 193, 7, 0.18);
|
||||
color: #9a6a00;
|
||||
background: rgba(59, 130, 246, 0.12);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.info-badge.year {
|
||||
background: rgba(13, 110, 253, 0.1);
|
||||
color: #0d6efd;
|
||||
}
|
||||
|
||||
.episode-title {
|
||||
color: #212529;
|
||||
font-weight: 800;
|
||||
line-height: 1.45;
|
||||
.meta-pill {
|
||||
background: rgba(15, 23, 42, 0.06);
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.episode-meta {
|
||||
color: #6c757d;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.episode-actions {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.episode-info-card {
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.episode-actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
近期最新的集数 这个新出的集数颜色那里 改成不是黄色 我想要好看点的颜色 还有 页面太空白了 别整那么空了，看着难受 clearfix
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user