mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 14:27:47 +00:00
feat: responsive navbar, hero và trang chi tiết phim
- Navbar: thêm hamburger menu + sidebar slide trên mobile - Hero: responsive height, font-size, buttons, ẩn thumbnail carousel trên mobile - Logo: nhỏ hơn trên mobile - Trang chi tiết phim: layout mobile giống Ophim, nút xem đỏ, action buttons có label - Movie card: điều chỉnh padding trên mobile
This commit is contained in:
ngthanhvu
@@ -1,9 +1,10 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Search } from 'lucide-vue-next'
|
import { Menu, Search, X } from 'lucide-vue-next'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
|
const keyword = ref(typeof route.query.q === 'string' ? route.query.q : '')
|
||||||
|
const mobileMenuOpen = ref(false)
|
||||||
|
|
||||||
const navItems = [
|
const navItems = [
|
||||||
{ label: 'Trang chủ', to: '/' },
|
{ label: 'Trang chủ', to: '/' },
|
||||||
@@ -24,37 +25,88 @@ function submitSearch() {
|
|||||||
query: q ? { q } : undefined,
|
query: q ? { q } : undefined,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function closeMobileMenu() {
|
||||||
|
mobileMenuOpen.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(() => route.path, () => {
|
||||||
|
closeMobileMenu()
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/78 backdrop-blur-xl">
|
<header class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/78 backdrop-blur-xl">
|
||||||
<nav class="mx-auto grid max-w-[1560px] grid-cols-[auto_1fr] items-center gap-4 px-4 py-3 sm:px-6 lg:grid-cols-[auto_1fr_auto] lg:px-8 xl:px-10">
|
<nav class="mx-auto flex max-w-390 items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8 xl:px-10">
|
||||||
<AppLogo />
|
<AppLogo />
|
||||||
|
|
||||||
<div class="no-scrollbar order-3 col-span-2 flex items-center justify-center gap-4 overflow-x-auto text-sm font-semibold text-slate-200 lg:order-none lg:col-span-1 lg:gap-7">
|
<div class="hidden lg:flex lg:items-center lg:gap-7 lg:text-sm lg:font-semibold lg:text-slate-200">
|
||||||
<NuxtLink
|
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to" class="shrink-0 transition hover:text-sky-200"
|
||||||
v-for="item in navItems"
|
:class="isActive(item.to) ? 'text-sky-200' : 'text-slate-200'">
|
||||||
:key="item.to"
|
|
||||||
:to="item.to"
|
|
||||||
class="shrink-0 transition hover:text-sky-200"
|
|
||||||
:class="isActive(item.to) ? 'text-sky-200' : 'text-slate-200'"
|
|
||||||
>
|
|
||||||
{{ item.label }}
|
{{ item.label }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form
|
<form
|
||||||
class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-sky-950/20 sm:max-w-sm"
|
class="ml-auto flex w-full max-w-xs items-center rounded-full border border-white/10 bg-white/8 px-4 py-2 shadow-2xl shadow-sky-950/20 sm:max-w-sm"
|
||||||
@submit.prevent="submitSearch"
|
@submit.prevent="submitSearch">
|
||||||
>
|
|
||||||
<Search class="mr-3 size-4 shrink-0 text-sky-200" />
|
<Search class="mr-3 size-4 shrink-0 text-sky-200" />
|
||||||
<input
|
<input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
|
||||||
v-model="keyword"
|
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
|
||||||
type="search"
|
|
||||||
placeholder="Tìm phim Hàn Quốc..."
|
|
||||||
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400"
|
|
||||||
>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
<button type="button"
|
||||||
|
class="grid size-10 shrink-0 place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16 lg:hidden"
|
||||||
|
aria-label="Mở menu" @click="mobileMenuOpen = true">
|
||||||
|
<Menu class="size-5" />
|
||||||
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition name="sidebar">
|
||||||
|
<div v-if="mobileMenuOpen" class="fixed inset-0 z-60 lg:hidden">
|
||||||
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeMobileMenu" />
|
||||||
|
<div class="absolute inset-y-0 left-0 w-72 bg-slate-950 shadow-2xl">
|
||||||
|
<div class="flex items-center justify-between border-b border-white/10 px-4 py-4">
|
||||||
|
<AppLogo />
|
||||||
|
<button type="button"
|
||||||
|
class="grid size-10 place-items-center rounded-lg border border-white/10 bg-white/8 text-white transition hover:bg-white/16"
|
||||||
|
aria-label="Đóng menu" @click="closeMobileMenu">
|
||||||
|
<X class="size-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-col gap-1 p-4">
|
||||||
|
<NuxtLink v-for="item in navItems" :key="item.to" :to="item.to"
|
||||||
|
class="rounded-lg px-4 py-3 text-base font-semibold text-slate-200 transition hover:bg-white/8 hover:text-sky-200"
|
||||||
|
:class="isActive(item.to) ? 'bg-white/8 text-sky-200' : ''" @click="closeMobileMenu">
|
||||||
|
{{ item.label }}
|
||||||
|
</NuxtLink>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.sidebar-enter-active,
|
||||||
|
.sidebar-leave-active {
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-enter-active>div:last-child,
|
||||||
|
.sidebar-leave-active>div:last-child {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-enter-from,
|
||||||
|
.sidebar-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-enter-from>div:last-child,
|
||||||
|
.sidebar-leave-to>div:last-child {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -5,13 +5,13 @@ import { Play } from 'lucide-vue-next'
|
|||||||
<template>
|
<template>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
to="/"
|
to="/"
|
||||||
class="group inline-flex h-10 min-w-[132px] shrink-0 flex-row flex-nowrap items-center gap-2.5 whitespace-nowrap"
|
class="group inline-flex h-8 min-w-[100px] shrink-0 flex-row flex-nowrap items-center gap-2 whitespace-nowrap sm:h-10 sm:min-w-[132px] sm:gap-2.5"
|
||||||
aria-label="KR PHIM"
|
aria-label="KR PHIM"
|
||||||
>
|
>
|
||||||
<span class="grid size-9 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200">
|
<span class="grid size-7 shrink-0 place-items-center rounded-lg border border-sky-200/80 bg-black/30 text-white shadow-lg shadow-black/20 transition group-hover:border-sky-300 group-hover:text-sky-200 sm:size-9">
|
||||||
<Play class="ml-0.5 size-5 fill-current" />
|
<Play class="ml-0.5 size-4 fill-current sm:size-5" />
|
||||||
</span>
|
</span>
|
||||||
<span class="inline-flex items-baseline text-2xl font-black uppercase leading-none tracking-tight">
|
<span class="inline-flex items-baseline text-xl font-black uppercase leading-none tracking-tight sm:text-2xl">
|
||||||
<span class="text-sky-300">KR</span><span class="text-white">PHIM</span>
|
<span class="text-sky-300">KR</span><span class="text-white">PHIM</span>
|
||||||
</span>
|
</span>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|||||||
@@ -64,17 +64,14 @@ onBeforeUnmount(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<NuxtLink
|
<NuxtLink :to="movieLink"
|
||||||
:to="movieLink"
|
class="group relative block h-78 w-44 shrink-0 snap-start transition duration-300 hover:z-30 hover:-translate-y-1 sm:h-82 sm:w-52 xl:w-56"
|
||||||
class="group relative block h-[19.5rem] w-44 shrink-0 snap-start transition duration-300 hover:z-30 hover:-translate-y-1 sm:h-[20.5rem] sm:w-52 xl:w-56"
|
@mouseenter="showPreview" @mouseleave="scheduleHide" @focus="showPreview" @blur="scheduleHide">
|
||||||
@mouseenter="showPreview"
|
<div
|
||||||
@mouseleave="scheduleHide"
|
class="absolute inset-0 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:ring-sky-300/60">
|
||||||
@focus="showPreview"
|
<img :src="movie.thumb || movie.poster" :alt="movie.name"
|
||||||
@blur="scheduleHide"
|
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||||||
>
|
<div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
|
||||||
<div class="absolute inset-0 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:ring-sky-300/60">
|
|
||||||
<img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
|
||||||
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
|
|
||||||
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
|
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
|
||||||
<p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
|
<p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -85,25 +82,15 @@ onBeforeUnmount(() => {
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<Teleport to="body">
|
<Teleport to="body">
|
||||||
<Transition
|
<Transition enter-active-class="transition duration-180 ease-out" enter-from-class="scale-95 opacity-0"
|
||||||
enter-active-class="transition duration-180 ease-out"
|
enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-120 ease-in"
|
||||||
enter-from-class="scale-95 opacity-0"
|
leave-from-class="scale-100 opacity-100" leave-to-class="scale-95 opacity-0">
|
||||||
enter-to-class="scale-100 opacity-100"
|
<NuxtLink v-if="isPreviewVisible" :to="movieLink"
|
||||||
leave-active-class="transition duration-120 ease-in"
|
class="fixed z-90 hidden origin-top-left overflow-hidden rounded-xl bg-[#1a0b14] text-white shadow-2xl shadow-black/60 ring-1 ring-sky-300/45 sm:block"
|
||||||
leave-from-class="scale-100 opacity-100"
|
:style="previewStyle" @mouseenter="keepPreview" @mouseleave="scheduleHide">
|
||||||
leave-to-class="scale-95 opacity-0"
|
|
||||||
>
|
|
||||||
<NuxtLink
|
|
||||||
v-if="isPreviewVisible"
|
|
||||||
:to="movieLink"
|
|
||||||
class="fixed z-[90] hidden origin-top-left overflow-hidden rounded-xl bg-[#1a0b14] text-white shadow-2xl shadow-black/60 ring-1 ring-sky-300/45 sm:block"
|
|
||||||
:style="previewStyle"
|
|
||||||
@mouseenter="keepPreview"
|
|
||||||
@mouseleave="scheduleHide"
|
|
||||||
>
|
|
||||||
<div class="relative h-44 overflow-hidden">
|
<div class="relative h-44 overflow-hidden">
|
||||||
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover">
|
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover">
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-[#1a0b14] via-[#1a0b14]/30 to-transparent" />
|
<div class="absolute inset-0 bg-linear-to-t from-[#1a0b14] via-[#1a0b14]/30 to-transparent" />
|
||||||
<div class="absolute inset-x-0 bottom-0 p-4">
|
<div class="absolute inset-x-0 bottom-0 p-4">
|
||||||
<h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
|
<h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
|
||||||
{{ movie.name }}
|
{{ movie.name }}
|
||||||
@@ -116,7 +103,8 @@ onBeforeUnmount(() => {
|
|||||||
|
|
||||||
<div class="p-4 pt-3">
|
<div class="p-4 pt-3">
|
||||||
<div class="grid grid-cols-[1fr_6.25rem_6.25rem] gap-2">
|
<div class="grid grid-cols-[1fr_6.25rem_6.25rem] gap-2">
|
||||||
<span class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-sky-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
|
<span
|
||||||
|
class="inline-flex h-10 items-center justify-center gap-2 rounded-md bg-sky-400 px-4 text-sm font-black text-slate-950 transition hover:bg-white">
|
||||||
<Play class="size-4 fill-current" />
|
<Play class="size-4 fill-current" />
|
||||||
Xem ngay
|
Xem ngay
|
||||||
</span>
|
</span>
|
||||||
@@ -129,17 +117,20 @@ onBeforeUnmount(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
|
<div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
|
||||||
<span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{ movie.quality }}</span>
|
<span v-if="movie.quality" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
|
||||||
|
movie.quality }}</span>
|
||||||
<span v-if="movie.lang" class="rounded bg-sky-300 px-2.5 py-1.5 text-slate-950">{{ movie.lang }}</span>
|
<span v-if="movie.lang" class="rounded bg-sky-300 px-2.5 py-1.5 text-slate-950">{{ movie.lang }}</span>
|
||||||
<span v-if="movie.time" class="rounded bg-white px-2.5 py-1.5 text-slate-950">{{ movie.time }}</span>
|
<span v-if="movie.time" class="rounded bg-white px-2.5 py-1.5 text-slate-950">{{ movie.time }}</span>
|
||||||
<span v-if="movie.episode" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{ movie.episode }}</span>
|
<span v-if="movie.episode" class="rounded bg-black/28 px-2.5 py-1.5 text-white ring-1 ring-white/10">{{
|
||||||
|
movie.episode }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p class="mt-3 line-clamp-2 text-xs font-bold leading-6 text-slate-200">
|
<p class="mt-3 line-clamp-2 text-xs font-bold leading-6 text-slate-200">
|
||||||
<template v-if="movie.countries?.length">{{ movie.countries.slice(0, 2).join(' • ') }}</template>
|
<template v-if="movie.countries?.length">{{ movie.countries.slice(0, 2).join(' • ') }}</template>
|
||||||
<template v-if="movie.countries?.length && movie.categories?.length"> • </template>
|
<template v-if="movie.countries?.length && movie.categories?.length"> • </template>
|
||||||
<template v-if="movie.categories?.length">{{ movie.categories.slice(0, 3).join(' • ') }}</template>
|
<template v-if="movie.categories?.length">{{ movie.categories.slice(0, 3).join(' • ') }}</template>
|
||||||
<template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập nhật</template>
|
<template v-if="!movie.countries?.length && !movie.categories?.length">Phim Hàn Quốc Vietsub mới cập
|
||||||
|
nhật</template>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|||||||
+70
-99
@@ -76,116 +76,99 @@ useHead({
|
|||||||
<main class="min-h-screen overflow-hidden">
|
<main class="min-h-screen overflow-hidden">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<section v-if="hero" class="relative h-[680px] min-h-[680px] overflow-hidden pt-28 sm:h-[720px] sm:min-h-[720px] lg:h-[760px] lg:min-h-[760px] lg:pt-16">
|
<section v-if="hero"
|
||||||
|
class="relative h-130 min-h-130 overflow-hidden pt-20 sm:h-160 sm:min-h-160 sm:pt-24 lg:h-190 lg:min-h-190 lg:pt-16">
|
||||||
<TransitionGroup name="hero-fade">
|
<TransitionGroup name="hero-fade">
|
||||||
<img
|
<img v-for="(slide, index) in heroSlides" v-show="index === heroIndex" :key="`${slide.source}-${slide.slug}`"
|
||||||
v-for="(slide, index) in heroSlides"
|
:src="slide.poster || slide.thumb" :alt="slide.name" class="absolute inset-0 h-full w-full object-cover">
|
||||||
v-show="index === heroIndex"
|
|
||||||
:key="`${slide.source}-${slide.slug}`"
|
|
||||||
:src="slide.poster || slide.thumb"
|
|
||||||
:alt="slide.name"
|
|
||||||
class="absolute inset-0 h-full w-full object-cover"
|
|
||||||
>
|
|
||||||
</TransitionGroup>
|
</TransitionGroup>
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/76 to-slate-950/10" />
|
<div class="absolute inset-0 bg-linear-to-r from-slate-950 via-slate-950/76 to-slate-950/10" />
|
||||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/20 to-slate-950/30" />
|
<div class="absolute inset-0 bg-linear-to-t from-slate-950 via-slate-950/20 to-slate-950/30" />
|
||||||
<div class="absolute inset-y-0 right-0 hidden w-1/2 bg-gradient-to-l from-sky-950/18 to-transparent lg:block" />
|
<div class="absolute inset-y-0 right-0 hidden w-1/2 bg-linear-to-l from-sky-950/18 to-transparent lg:block" />
|
||||||
|
|
||||||
<div class="relative mx-auto grid h-full max-w-[1560px] content-center px-4 pb-28 pt-16 sm:px-6 lg:px-8 xl:px-10">
|
<div
|
||||||
|
class="relative mx-auto grid h-full max-w-390 content-center px-4 pb-20 pt-12 sm:px-6 sm:pb-24 sm:pt-16 lg:px-8 lg:pb-28 xl:px-10">
|
||||||
<div class="max-w-5xl">
|
<div class="max-w-5xl">
|
||||||
<p class="mb-3 text-sm font-semibold text-sky-200">
|
<p class="mb-2 text-xs font-semibold text-sky-200 sm:mb-3 sm:text-sm">
|
||||||
Chỉ phim Hàn Quốc
|
Chỉ phim Hàn Quốc
|
||||||
</p>
|
</p>
|
||||||
<h1 class="max-w-5xl text-3xl font-black leading-tight text-white drop-shadow-2xl sm:text-5xl lg:text-6xl">
|
<h1 class="max-w-5xl text-2xl font-black leading-tight text-white drop-shadow-2xl sm:text-4xl lg:text-6xl">
|
||||||
{{ hero.name }}
|
{{ hero.name }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="mt-3 max-w-2xl text-lg text-sky-100">
|
<p class="mt-2 max-w-2xl text-sm text-sky-100 sm:mt-3 sm:text-lg">
|
||||||
{{ hero.originName || 'Kho phim Hàn Vietsub mới cập nhật' }}
|
{{ hero.originName || 'Kho phim Hàn Vietsub mới cập nhật' }}
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-5 flex flex-wrap gap-2 text-sm font-bold text-slate-100">
|
<div class="mt-3 flex flex-wrap gap-1.5 text-xs font-bold text-slate-100 sm:mt-5 sm:gap-2 sm:text-sm">
|
||||||
<span v-if="hero.rating" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">IMDb {{ hero.rating.toFixed(1) }}</span>
|
<span v-if="hero.rating" class="rounded bg-black/35 px-2 py-1.5 ring-1 ring-white/10 sm:px-3 sm:py-2">IMDb
|
||||||
<span v-if="hero.quality" class="rounded bg-sky-300 px-3 py-2 text-slate-950">{{ hero.quality }}</span>
|
{{ hero.rating.toFixed(1) }}</span>
|
||||||
<span v-if="hero.lang" class="rounded bg-white px-3 py-2 text-slate-950">{{ hero.lang }}</span>
|
<span v-if="hero.quality" class="rounded bg-sky-300 px-2 py-1.5 text-slate-950 sm:px-3 sm:py-2">{{
|
||||||
<span v-if="hero.year" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.year }}</span>
|
hero.quality }}</span>
|
||||||
<span v-if="hero.episode" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.episode }}</span>
|
<span v-if="hero.lang" class="rounded bg-white px-2 py-1.5 text-slate-950 sm:px-3 sm:py-2">{{ hero.lang
|
||||||
|
}}</span>
|
||||||
|
<span v-if="hero.year" class="rounded bg-black/35 px-2 py-1.5 ring-1 ring-white/10 sm:px-3 sm:py-2">{{
|
||||||
|
hero.year }}</span>
|
||||||
|
<span v-if="hero.episode" class="rounded bg-black/35 px-2 py-1.5 ring-1 ring-white/10 sm:px-3 sm:py-2">{{
|
||||||
|
hero.episode }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="hero.categories?.length" class="mt-4 flex flex-wrap gap-2 text-sm font-semibold text-white">
|
<div v-if="hero.categories?.length"
|
||||||
<span
|
class="mt-3 flex flex-wrap gap-1.5 text-xs font-semibold text-white sm:mt-4 sm:gap-2 sm:text-sm">
|
||||||
v-for="category in hero.categories.slice(0, 4)"
|
<span v-for="category in hero.categories.slice(0, 4)" :key="category"
|
||||||
:key="category"
|
class="rounded bg-white/12 px-2 py-1 backdrop-blur sm:px-3 sm:py-1.5">
|
||||||
class="rounded bg-white/12 px-3 py-1.5 backdrop-blur"
|
|
||||||
>
|
|
||||||
{{ category }}
|
{{ category }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="mt-5 max-w-2xl text-sm leading-7 text-slate-100 sm:text-base">
|
<p class="mt-3 max-w-2xl text-xs leading-6 text-slate-100 sm:mt-5 sm:text-sm sm:leading-7">
|
||||||
{{ hero.originName ? `${hero.originName}. ` : '' }}{{ hero.time || 'Phim Hàn Quốc Vietsub mới cập nhật.' }}
|
{{ hero.originName ? `${hero.originName}. ` : '' }}{{ hero.time || 'Phim Hàn Quốc Vietsub mới cập nhật.' }}
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-8 flex items-center gap-4">
|
<div class="mt-6 flex items-center gap-3 sm:mt-8 sm:gap-4">
|
||||||
<NuxtLink
|
<NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
||||||
:to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
class="grid size-12 shrink-0 place-items-center rounded-full bg-sky-300 text-slate-950 shadow-2xl shadow-sky-950/50 transition hover:scale-105 hover:bg-white sm:size-16"
|
||||||
class="grid size-16 shrink-0 place-items-center rounded-full bg-sky-300 text-slate-950 shadow-2xl shadow-sky-950/50 transition hover:scale-105 hover:bg-white"
|
aria-label="Xem ngay">
|
||||||
aria-label="Xem ngay"
|
<Play class="size-6 fill-current sm:size-7" />
|
||||||
>
|
|
||||||
<Play class="size-7 fill-current" />
|
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16 sm:size-12"
|
||||||
class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
|
aria-label="Yêu thích">
|
||||||
aria-label="Yêu thích"
|
<Heart class="size-4 sm:size-5" />
|
||||||
>
|
|
||||||
<Heart class="size-5" />
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16 sm:size-12"
|
||||||
class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
|
aria-label="Thêm vào thư viện">
|
||||||
aria-label="Thêm vào thư viện"
|
<BookPlus class="size-4 sm:size-5" />
|
||||||
>
|
|
||||||
<BookPlus class="size-5" />
|
|
||||||
</button>
|
</button>
|
||||||
<NuxtLink
|
<NuxtLink :to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
||||||
:to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
class="grid size-10 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16 sm:size-12"
|
||||||
class="grid size-12 shrink-0 place-items-center rounded-full border border-white/20 bg-black/28 text-white backdrop-blur transition hover:bg-white/16"
|
aria-label="Thông tin phim">
|
||||||
aria-label="Thông tin phim"
|
<Info class="size-4 sm:size-5" />
|
||||||
>
|
|
||||||
<Info class="size-5" />
|
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="absolute bottom-12 right-4 flex max-w-[calc(100%-2rem)] items-center gap-3 sm:right-6 lg:right-8">
|
<div
|
||||||
<button
|
class="absolute bottom-8 right-4 hidden max-w-[calc(100%-2rem)] items-center gap-2 sm:flex sm:bottom-12 sm:right-6 sm:gap-3 lg:right-8">
|
||||||
type="button"
|
<button type="button"
|
||||||
class="hidden size-10 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:grid"
|
class="hidden size-9 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:size-10 sm:grid"
|
||||||
aria-label="Phim trước"
|
aria-label="Phim trước" @click="previousHero">
|
||||||
@click="previousHero"
|
<ChevronLeft class="size-4 sm:size-5" />
|
||||||
>
|
|
||||||
<ChevronLeft class="size-5" />
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="no-scrollbar flex gap-3 overflow-x-auto pb-2">
|
<div class="no-scrollbar flex gap-2 overflow-x-auto pb-2 sm:gap-3">
|
||||||
<button
|
<button v-for="(slide, index) in heroSlides" :key="`${slide.source}-${slide.slug}-thumb`" type="button"
|
||||||
v-for="(slide, index) in heroSlides"
|
class="relative h-12 w-20 shrink-0 overflow-hidden rounded-md border bg-slate-900 shadow-lg shadow-black/30 transition sm:h-16 sm:w-32"
|
||||||
:key="`${slide.source}-${slide.slug}-thumb`"
|
|
||||||
type="button"
|
|
||||||
class="relative h-14 w-28 shrink-0 overflow-hidden rounded-md border bg-slate-900 shadow-lg shadow-black/30 transition sm:h-16 sm:w-32"
|
|
||||||
:class="index === heroIndex ? 'border-sky-300 ring-2 ring-sky-300/45' : 'border-white/15 opacity-70 hover:opacity-100'"
|
:class="index === heroIndex ? 'border-sky-300 ring-2 ring-sky-300/45' : 'border-white/15 opacity-70 hover:opacity-100'"
|
||||||
@click="selectHero(index)"
|
@click="selectHero(index)">
|
||||||
>
|
|
||||||
<img :src="slide.thumb || slide.poster" :alt="slide.name" class="h-full w-full object-cover">
|
<img :src="slide.thumb || slide.poster" :alt="slide.name" class="h-full w-full object-cover">
|
||||||
<span class="absolute inset-x-0 bottom-0 truncate bg-black/55 px-1 py-0.5 text-[10px] font-semibold text-white">
|
<span
|
||||||
|
class="absolute inset-x-0 bottom-0 truncate bg-black/55 px-1 py-0.5 text-[9px] font-semibold text-white sm:text-[10px]">
|
||||||
{{ slide.name }}
|
{{ slide.name }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<button type="button"
|
||||||
type="button"
|
class="hidden size-9 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:size-10 sm:grid"
|
||||||
class="hidden size-10 shrink-0 place-items-center rounded-full border border-white/15 bg-black/35 text-white backdrop-blur transition hover:bg-white/15 sm:grid"
|
aria-label="Phim tiếp theo" @click="nextHero">
|
||||||
aria-label="Phim tiếp theo"
|
<ChevronRight class="size-4 sm:size-5" />
|
||||||
@click="nextHero"
|
|
||||||
>
|
|
||||||
<ChevronRight class="size-5" />
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -198,13 +181,10 @@ useHead({
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<div class="relative z-10 mx-auto -mt-10 max-w-[1560px] px-4 pb-16 sm:px-6 lg:px-8 xl:px-10">
|
<div class="relative z-10 mx-auto -mt-10 max-w-390 px-4 pb-16 sm:px-6 lg:px-8 xl:px-10">
|
||||||
<div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
|
<div v-if="sourceStatus.length" class="mb-8 hidden flex-wrap gap-2 text-xs text-slate-300 sm:flex">
|
||||||
<span
|
<span v-for="source in sourceStatus" :key="source.name"
|
||||||
v-for="source in sourceStatus"
|
class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
|
||||||
:key="source.name"
|
|
||||||
class="rounded-full border border-white/10 bg-white/8 px-3 py-1"
|
|
||||||
>
|
|
||||||
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
|
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -214,16 +194,11 @@ useHead({
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
<div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
|
||||||
<div v-for="item in 12" :key="item" class="aspect-[2/3] animate-pulse rounded-md bg-white/10" />
|
<div v-for="item in 12" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section
|
<section v-for="(row, index) in rows" v-show="row.items.length"
|
||||||
v-for="(row, index) in rows"
|
:id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'" :key="row.title" class="mb-12">
|
||||||
v-show="row.items.length"
|
|
||||||
:id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'"
|
|
||||||
:key="row.title"
|
|
||||||
class="mb-12"
|
|
||||||
>
|
|
||||||
<div class="mb-4 flex items-end justify-between gap-4">
|
<div class="mb-4 flex items-end justify-between gap-4">
|
||||||
<h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
|
<h2 class="text-2xl font-extrabold text-white">{{ row.title }}</h2>
|
||||||
<NuxtLink :to="row.to" class="text-sm font-semibold text-sky-200 hover:text-white">
|
<NuxtLink :to="row.to" class="text-sm font-semibold text-sky-200 hover:text-white">
|
||||||
@@ -231,12 +206,8 @@ useHead({
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="no-scrollbar -mx-4 flex snap-x gap-4 overflow-x-auto px-4 pb-5">
|
<div class="no-scrollbar -mx-4 ml-0.5 flex snap-x gap-4 overflow-x-auto px-4 pb-5 sm:ml-0">
|
||||||
<HomeMovieCard
|
<HomeMovieCard v-for="movie in row.items" :key="`${movie.source}-${movie.slug}`" :movie="movie" />
|
||||||
v-for="movie in row.items"
|
|
||||||
:key="`${movie.source}-${movie.slug}`"
|
|
||||||
:movie="movie"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+90
-52
@@ -1,8 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
|
import { ChevronDown, Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const selectedServer = ref(0)
|
const selectedServer = ref(0)
|
||||||
|
const movieInfoOpen = ref(false)
|
||||||
|
|
||||||
const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
|
const { data: movie, pending, error } = await useFetch(`/api/movies/${route.params.slug}`, {
|
||||||
query: {
|
query: {
|
||||||
@@ -48,8 +49,9 @@ useHead(() => ({
|
|||||||
<main class="min-h-screen bg-[#08090d] text-white">
|
<main class="min-h-screen bg-[#08090d] text-white">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<div v-if="pending" class="mx-auto grid min-h-screen max-w-[1560px] gap-6 px-4 pt-36 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 lg:pt-40 xl:px-10">
|
<div v-if="pending"
|
||||||
<div class="h-[36rem] animate-pulse rounded-md bg-white/10" />
|
class="mx-auto grid min-h-screen max-w-390 gap-6 px-4 pt-36 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 lg:pt-40 xl:px-10">
|
||||||
|
<div class="h-114 animate-pulse rounded-md bg-white/10" />
|
||||||
<div class="h-80 animate-pulse rounded-md bg-white/10" />
|
<div class="h-80 animate-pulse rounded-md bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -61,21 +63,24 @@ useHead(() => ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<section class="relative overflow-hidden pt-32 lg:pt-16">
|
<section class="relative overflow-hidden pt-20 lg:pt-16">
|
||||||
<div class="absolute inset-x-0 top-0 h-[28rem] overflow-hidden">
|
<div class="absolute inset-x-0 top-0 h-96 overflow-hidden sm:h-112">
|
||||||
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
|
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
|
||||||
<div class="absolute inset-0 bg-gradient-to-b from-slate-950/45 via-[#08090d]/80 to-[#08090d]" />
|
<div class="absolute inset-0 bg-linear-to-b from-slate-950/25 via-[#08090d]/75 to-[#08090d]" />
|
||||||
<div class="absolute inset-0 bg-gradient-to-r from-[#08090d] via-transparent to-[#08090d]" />
|
<div class="absolute inset-0 bg-linear-to-r from-[#08090d] via-transparent to-[#08090d]" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="relative mx-auto grid max-w-[1560px] gap-6 px-4 py-20 sm:px-6 lg:grid-cols-[22rem_minmax(0,1fr)] lg:px-8 xl:px-10">
|
<div class="relative mx-auto max-w-390 px-3 pb-8 pt-5 sm:px-6 sm:py-10 lg:px-8 xl:px-10">
|
||||||
<aside class="rounded-md border border-white/10 bg-[#15161b]/95 p-5 shadow-2xl shadow-black/40">
|
<div class="lg:grid lg:grid-cols-[22rem_minmax(0,1fr)] lg:gap-6">
|
||||||
<img :src="movie.thumb || movie.poster" :alt="movie.name" class="mx-auto aspect-[2/3] w-48 rounded-md object-cover shadow-xl shadow-black/40">
|
<aside class="mb-3 flex flex-col items-center text-center lg:mb-6 lg:items-start lg:text-left">
|
||||||
|
<img :src="movie.thumb || movie.poster" :alt="movie.name"
|
||||||
|
class="mx-auto aspect-2/3 w-29 rounded-md object-cover shadow-xl shadow-black/40 sm:w-52 lg:w-full">
|
||||||
|
|
||||||
<h1 class="mt-5 text-2xl font-black leading-tight">{{ movie.name }}</h1>
|
<h1 class="mt-4 text-[1.35rem] font-black leading-tight sm:text-2xl lg:mt-5">{{ movie.name }}</h1>
|
||||||
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-200">{{ movie.originName }}</p>
|
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-slate-100 sm:text-sky-200">{{
|
||||||
|
movie.originName }}</p>
|
||||||
|
|
||||||
<div class="mt-4 flex flex-wrap gap-2 text-xs font-black">
|
<div class="mt-3 hidden flex-wrap justify-center gap-2 text-xs font-black sm:flex lg:justify-start">
|
||||||
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
|
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
|
||||||
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
|
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
|
||||||
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
|
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
|
||||||
@@ -85,77 +90,109 @@ useHead(() => ({
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="movie.categories?.length" class="mt-4">
|
<div v-if="movie.categories?.length" class="mt-3 hidden sm:block lg:mt-4">
|
||||||
<span class="rounded bg-white/12 px-3 py-1 text-xs font-bold">{{ movie.categories[0] }}</span>
|
<span class="rounded bg-white/12 px-3 py-1 text-xs font-bold">{{ movie.categories[0] }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-5 space-y-3 text-sm leading-6 text-slate-300">
|
<div class="mt-4 hidden space-y-3 text-sm leading-6 text-slate-300 sm:block lg:mt-5">
|
||||||
<p v-if="movie.content">
|
<p v-if="movie.content">
|
||||||
<span class="block font-black text-white">Giới thiệu:</span>
|
<span class="block font-black text-white">Giới thiệu:</span>
|
||||||
{{ movie.content }}
|
{{ movie.content }}
|
||||||
</p>
|
</p>
|
||||||
<p><span class="font-black text-white">Số tập:</span> {{ episodeCount || movie.episode || 'Đang cập nhật' }}</p>
|
<p><span class="font-black text-white">Số tập:</span> {{
|
||||||
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{ movie.countries.join(', ') }}</p>
|
episodeCount || movie.episode || 'Đang cập nhật'
|
||||||
<p v-if="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{ movie.actors.slice(0, 6).join(', ') }}</p>
|
}}</p>
|
||||||
|
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
|
||||||
|
movie.countries.join(', ') }}</p>
|
||||||
|
<p v-if="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{
|
||||||
|
movie.actors.slice(0, 6).join(', ') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<section class="rounded-md border border-white/10 bg-[#15161b]/95 p-5 shadow-2xl shadow-black/40">
|
<section
|
||||||
<div class="flex flex-col gap-4 border-b border-white/10 pb-5 lg:flex-row lg:items-center lg:justify-between">
|
class="mt-0 rounded-none border-y border-white/10 bg-transparent px-0 pb-0 pt-3 shadow-none sm:mt-0 sm:rounded-md sm:border sm:bg-[#15161b]/95 sm:p-5 sm:shadow-2xl sm:shadow-black/40 lg:p-5">
|
||||||
<div class="flex flex-wrap gap-3">
|
<button type="button"
|
||||||
<NuxtLink
|
class="mx-auto flex items-center gap-1 pb-3 text-sm font-bold text-sky-200 sm:hidden"
|
||||||
:to="firstWatchLink"
|
:aria-expanded="movieInfoOpen" @click="movieInfoOpen = !movieInfoOpen">
|
||||||
class="inline-flex h-12 items-center justify-center gap-2 rounded-full bg-sky-400 px-7 text-sm font-black text-slate-950 transition hover:bg-white"
|
<span>Thông tin phim</span>
|
||||||
>
|
<ChevronDown class="size-4 transition" :class="movieInfoOpen ? 'rotate-180' : ''" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div v-if="movieInfoOpen"
|
||||||
|
class="mb-4 space-y-3 border-b border-white/10 pb-4 text-sm leading-6 text-slate-300 sm:hidden">
|
||||||
|
<p v-if="movie.content">
|
||||||
|
<span class="block font-black text-white">Giới thiệu:</span>
|
||||||
|
{{ movie.content }}
|
||||||
|
</p>
|
||||||
|
<p><span class="font-black text-white">Số tập:</span> {{
|
||||||
|
episodeCount || movie.episode || 'Đang cập nhật'
|
||||||
|
}}</p>
|
||||||
|
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
|
||||||
|
movie.countries.join(', ') }}</p>
|
||||||
|
<p v-if="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{
|
||||||
|
movie.actors.slice(0, 6).join(', ') }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-col gap-4 border-b border-white/10 pb-4 sm:flex-row sm:items-center sm:justify-between sm:pb-5">
|
||||||
|
<div class="flex flex-wrap justify-center gap-3 sm:justify-start">
|
||||||
|
<NuxtLink :to="firstWatchLink"
|
||||||
|
class="inline-flex h-12 w-full items-center justify-center gap-2 rounded-full bg-linear-to-r from-sky-400 to-sky-300 px-7 text-sm font-black text-slate-950 transition hover:from-sky-300 hover:to-white sm:w-auto">
|
||||||
<Play class="size-4 fill-current" />
|
<Play class="size-4 fill-current" />
|
||||||
Xem ngay
|
Xem Ngay
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Yêu thích">
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between gap-3 px-8 sm:justify-center sm:px-0">
|
||||||
|
<button type="button"
|
||||||
|
class="flex flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-sky-200"
|
||||||
|
aria-label="Yêu thích">
|
||||||
<Heart class="size-5" />
|
<Heart class="size-5" />
|
||||||
|
<span>Yêu thích</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Thêm vào">
|
<button type="button"
|
||||||
|
class="flex flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-sky-200"
|
||||||
|
aria-label="Thêm vào">
|
||||||
<Plus class="size-5" />
|
<Plus class="size-5" />
|
||||||
|
<span>Thêm vào</span>
|
||||||
</button>
|
</button>
|
||||||
<button type="button" class="grid h-12 w-14 place-items-center rounded-full text-sm font-bold text-white transition hover:bg-white/10" aria-label="Chia sẻ">
|
<button type="button"
|
||||||
|
class="flex flex-col items-center gap-1 text-xs font-bold text-white transition hover:text-sky-200"
|
||||||
|
aria-label="Chia sẻ">
|
||||||
<Share2 class="size-5" />
|
<Share2 class="size-5" />
|
||||||
|
<span>Chia sẻ</span>
|
||||||
</button>
|
</button>
|
||||||
|
<div v-if="movie.rating"
|
||||||
|
class="inline-flex items-center gap-1.5 rounded-full bg-sky-400 px-3 py-1.5 text-sm font-black text-slate-950">
|
||||||
|
<Star class="size-3.5 fill-current" />
|
||||||
|
{{ movie.rating.toFixed(1) }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="movie.rating" class="inline-flex items-center gap-3 rounded-full bg-white/8 px-4 py-2 text-sm font-bold text-slate-200">
|
|
||||||
<span class="rounded bg-sky-300 px-2 py-1 text-xs font-black text-slate-950">IMDb</span>
|
|
||||||
<span>{{ movie.rating.toFixed(1) }}</span>
|
|
||||||
<span class="text-slate-400">Đánh giá</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex gap-6 border-b border-white/10 pt-5 text-sm font-black">
|
<div
|
||||||
<button type="button" class="border-b-2 border-sky-300 pb-4 text-sky-200">Tập phim</button>
|
class="mt-3 flex justify-between gap-6 border-b border-white/10 px-6 text-sm font-black sm:mt-0 sm:justify-center sm:px-0 sm:pt-5">
|
||||||
<button type="button" class="pb-4 text-slate-300">Diễn viên</button>
|
<button type="button" class="border-b-2 border-sky-300 px-5 pb-3 text-sky-200 sm:px-0">Tập phim</button>
|
||||||
|
<button type="button" class="pb-3 text-slate-300">Diễn viên</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pt-7">
|
<div class="px-0 pt-6 sm:px-0 sm:pt-5">
|
||||||
<h2 class="text-xl font-black">Danh sách tập</h2>
|
<h2 class="text-[1.08rem] font-black sm:text-xl">Danh sách tập</h2>
|
||||||
|
|
||||||
<div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
|
<div v-if="servers.length > 1" class="mt-3 flex gap-2 overflow-x-auto pb-2">
|
||||||
<button
|
<button v-for="(server, index) in servers" :key="server.name" type="button"
|
||||||
v-for="(server, index) in servers"
|
|
||||||
:key="server.name"
|
|
||||||
type="button"
|
|
||||||
class="shrink-0 rounded px-4 py-2 text-sm font-black"
|
class="shrink-0 rounded px-4 py-2 text-sm font-black"
|
||||||
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
||||||
@click="selectedServer = index"
|
@click="selectedServer = index">
|
||||||
>
|
|
||||||
{{ server.name }}
|
{{ server.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="activeServer?.episodes?.length" class="mt-3 grid gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-3 lg:grid-cols-6">
|
<div v-if="activeServer?.episodes?.length"
|
||||||
<NuxtLink
|
class="mt-3 grid grid-cols-3 gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-3 lg:grid-cols-6">
|
||||||
v-for="(episode, index) in activeServer.episodes"
|
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
|
||||||
:key="`${episode.name}-${index}`"
|
|
||||||
:to="episodeLink(index)"
|
:to="episodeLink(index)"
|
||||||
class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition hover:bg-sky-400 hover:text-slate-950"
|
class="rounded-md bg-white/10 px-4 py-3 text-center text-sm font-black text-white transition first:bg-sky-400 first:text-slate-950 hover:bg-sky-400 hover:text-slate-950">
|
||||||
>
|
|
||||||
{{ episode.name }}
|
{{ episode.name }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
@@ -166,6 +203,7 @@ useHead(() => ({
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
+31
-55
@@ -84,7 +84,7 @@ useHead({
|
|||||||
<main class="min-h-screen bg-slate-950">
|
<main class="min-h-screen bg-slate-950">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<section class="mx-auto max-w-[1560px] px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
|
<section class="mx-auto max-w-390 px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
|
||||||
<div class="mb-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
|
<div class="mb-8 flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-sm font-semibold text-sky-200">Kho phim Hàn Quốc</p>
|
<p class="text-sm font-semibold text-sky-200">Kho phim Hàn Quốc</p>
|
||||||
@@ -94,39 +94,25 @@ useHead({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex w-full flex-col gap-3 sm:flex-row lg:max-w-3xl">
|
<div class="flex w-full flex-col gap-3 sm:flex-row lg:max-w-3xl">
|
||||||
<div class="flex min-w-0 flex-1 items-center rounded-full border border-white/10 bg-white/8 px-4 py-3 shadow-2xl shadow-sky-950/20">
|
<div
|
||||||
|
class="flex min-w-0 flex-1 items-center rounded-full border border-white/10 bg-white/8 px-4 py-3 shadow-2xl shadow-sky-950/20">
|
||||||
<Search class="mr-3 size-4 shrink-0 text-sky-200" />
|
<Search class="mr-3 size-4 shrink-0 text-sky-200" />
|
||||||
<input
|
<input v-model="keyword" type="search" placeholder="Tìm phim Hàn Quốc..."
|
||||||
v-model="keyword"
|
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400">
|
||||||
type="search"
|
|
||||||
placeholder="Tìm phim Hàn Quốc..."
|
|
||||||
class="w-full bg-transparent text-sm text-white outline-none placeholder:text-slate-400"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-3 rounded-full border border-white/10 bg-white/8 p-1 text-sm font-bold text-slate-200">
|
<div
|
||||||
<button
|
class="grid grid-cols-3 rounded-full border border-white/10 bg-white/8 p-1 text-sm font-bold text-slate-200">
|
||||||
type="button"
|
<button type="button" class="rounded-full px-4 py-2 transition"
|
||||||
class="rounded-full px-4 py-2 transition"
|
:class="type === 'all' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'all'">
|
||||||
:class="type === 'all' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
|
|
||||||
@click="type = 'all'"
|
|
||||||
>
|
|
||||||
Tất cả
|
Tất cả
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="button" class="rounded-full px-4 py-2 transition"
|
||||||
type="button"
|
:class="type === 'series' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'series'">
|
||||||
class="rounded-full px-4 py-2 transition"
|
|
||||||
:class="type === 'series' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
|
|
||||||
@click="type = 'series'"
|
|
||||||
>
|
|
||||||
Phim bộ
|
Phim bộ
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button type="button" class="rounded-full px-4 py-2 transition"
|
||||||
type="button"
|
:class="type === 'single' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'" @click="type = 'single'">
|
||||||
class="rounded-full px-4 py-2 transition"
|
|
||||||
:class="type === 'single' ? 'bg-sky-300 text-slate-950' : 'hover:text-white'"
|
|
||||||
@click="type = 'single'"
|
|
||||||
>
|
|
||||||
Phim lẻ
|
Phim lẻ
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -134,11 +120,8 @@ useHead({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
|
<div v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
|
||||||
<span
|
<span v-for="source in sourceStatus" :key="source.name"
|
||||||
v-for="source in sourceStatus"
|
class="rounded-full border border-white/10 bg-white/8 px-3 py-1">
|
||||||
:key="source.name"
|
|
||||||
class="rounded-full border border-white/10 bg-white/8 px-3 py-1"
|
|
||||||
>
|
|
||||||
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
|
{{ source.name }}: {{ source.ok ? 'sẵn sàng' : 'đang bị chặn' }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -148,19 +131,17 @@ useHead({
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
|
<div v-if="pending" class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
|
||||||
<div v-for="item in 18" :key="item" class="aspect-[2/3] animate-pulse rounded-md bg-white/10" />
|
<div v-for="item in 18" :key="item" class="aspect-2/3 animate-pulse rounded-md bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
|
<div v-else class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
|
||||||
<NuxtLink
|
<NuxtLink v-for="movie in filteredMovies" :key="`${movie.source}-${movie.slug}`"
|
||||||
v-for="movie in filteredMovies"
|
:to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }" class="group">
|
||||||
:key="`${movie.source}-${movie.slug}`"
|
<div
|
||||||
:to="{ path: `/phim/${movie.slug}`, query: { source: movie.source } }"
|
class="relative aspect-2/3 overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
|
||||||
class="group"
|
<img :src="movie.thumb || movie.poster" :alt="movie.name"
|
||||||
>
|
class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
||||||
<div class="relative aspect-[2/3] overflow-hidden rounded-md bg-slate-900 shadow-xl shadow-black/25 ring-1 ring-white/10 transition duration-300 group-hover:-translate-y-1 group-hover:ring-sky-300/60">
|
<div class="absolute inset-x-0 bottom-0 bg-linear-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
|
||||||
<img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-full w-full object-cover transition duration-500 group-hover:scale-105">
|
|
||||||
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-950/70 to-transparent p-3">
|
|
||||||
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
|
<p class="line-clamp-2 text-sm font-bold leading-snug text-white">{{ movie.name }}</p>
|
||||||
<p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
|
<p class="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -171,27 +152,22 @@ useHead({
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="!pending && !filteredMovies.length" class="rounded-md border border-white/10 bg-white/8 p-8 text-center text-slate-300">
|
<div v-if="!pending && !filteredMovies.length"
|
||||||
|
class="rounded-md border border-white/10 bg-white/8 p-8 text-center text-slate-300">
|
||||||
Không có phim phù hợp.
|
Không có phim phù hợp.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="movies.length" class="flex items-center justify-center gap-3 pt-10">
|
<div v-if="movies.length" class="flex items-center justify-center gap-3 pt-10">
|
||||||
<button
|
<button type="button" :disabled="page === 1"
|
||||||
type="button"
|
|
||||||
:disabled="page === 1"
|
|
||||||
class="grid size-11 place-items-center rounded-full border border-white/15 bg-white/8 text-white disabled:cursor-not-allowed disabled:opacity-40"
|
class="grid size-11 place-items-center rounded-full border border-white/15 bg-white/8 text-white disabled:cursor-not-allowed disabled:opacity-40"
|
||||||
aria-label="Trang trước"
|
aria-label="Trang trước" @click="previousPage">
|
||||||
@click="previousPage"
|
|
||||||
>
|
|
||||||
<ChevronLeft class="size-5" />
|
<ChevronLeft class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
<span class="text-sm text-slate-300">Trang {{ page }}<template v-if="totalPages"> / {{ totalPages }}</template></span>
|
<span class="text-sm text-slate-300">Trang {{ page }}<template v-if="totalPages"> / {{ totalPages
|
||||||
<button
|
}}</template></span>
|
||||||
type="button"
|
<button type="button"
|
||||||
class="grid size-11 place-items-center rounded-full bg-sky-300 text-slate-950 hover:bg-white"
|
class="grid size-11 place-items-center rounded-full bg-sky-300 text-slate-950 hover:bg-white"
|
||||||
aria-label="Trang sau"
|
aria-label="Trang sau" @click="nextPage">
|
||||||
@click="nextPage"
|
|
||||||
>
|
|
||||||
<ChevronRight class="size-5" />
|
<ChevronRight class="size-5" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+47
-45
@@ -1,5 +1,5 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Heart, Play, Plus, Share2 } from 'lucide-vue-next'
|
import { Heart, Play, Plus, Share2, Star } from 'lucide-vue-next'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const selectedServer = ref(Math.max(Number(route.query.server || 0), 0))
|
const selectedServer = ref(Math.max(Number(route.query.server || 0), 0))
|
||||||
@@ -59,7 +59,7 @@ useHead(() => ({
|
|||||||
<main class="min-h-screen bg-[#08090d] text-white">
|
<main class="min-h-screen bg-[#08090d] text-white">
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
||||||
<div v-if="pending" class="mx-auto min-h-screen max-w-[1560px] px-4 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
|
<div v-if="pending" class="mx-auto min-h-screen max-w-390 px-4 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
|
||||||
<div class="aspect-video animate-pulse rounded-md bg-white/10" />
|
<div class="aspect-video animate-pulse rounded-md bg-white/10" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -71,100 +71,102 @@ useHead(() => ({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<section class="mx-auto max-w-[1560px] px-4 pb-16 pt-36 sm:px-6 lg:px-8 lg:pt-28 xl:px-10">
|
<section class="mx-auto max-w-390 px-3 pb-16 pt-24 sm:px-6 sm:pt-36 lg:px-8 lg:pt-28 xl:px-10">
|
||||||
<NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }" class="text-sm font-bold text-sky-200 hover:text-white">
|
<NuxtLink :to="{ path: `/phim/${route.params.slug}`, query: { source: route.query.source } }"
|
||||||
|
class="text-sm font-bold text-slate-100 hover:text-sky-200">
|
||||||
‹ Chi tiết phim
|
‹ Chi tiết phim
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|
||||||
<div class="mt-4 overflow-hidden rounded-md border border-white/10 bg-black shadow-2xl shadow-black/40">
|
<div class="mt-4 overflow-hidden rounded-md border border-white/10 bg-black shadow-2xl shadow-black/40">
|
||||||
<div class="relative aspect-video bg-slate-950">
|
<div class="relative aspect-video bg-slate-950">
|
||||||
<iframe
|
<iframe v-if="playerUrl && hasStarted" :src="playerUrl"
|
||||||
v-if="playerUrl && hasStarted"
|
:title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`" class="h-full w-full"
|
||||||
:src="playerUrl"
|
|
||||||
:title="`${movie.name} - ${activeEpisode?.name || 'Tập phim'}`"
|
|
||||||
class="h-full w-full"
|
|
||||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||||
allowfullscreen
|
allowfullscreen />
|
||||||
/>
|
<button v-else type="button" class="absolute inset-0 text-white" :aria-label="`Phát ${movie.name}`"
|
||||||
<button
|
@click="startPlayer">
|
||||||
v-else
|
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-45">
|
||||||
type="button"
|
<div class="absolute inset-0 bg-black/45" />
|
||||||
class="absolute inset-0 text-white"
|
|
||||||
:aria-label="`Phát ${movie.name}`"
|
|
||||||
@click="startPlayer"
|
|
||||||
>
|
|
||||||
<img :src="movie.poster || movie.thumb" :alt="movie.name" class="h-full w-full object-cover opacity-35">
|
|
||||||
<div class="absolute inset-0 bg-black/40" />
|
|
||||||
<div class="absolute inset-0 grid place-items-center">
|
<div class="absolute inset-0 grid place-items-center">
|
||||||
<span class="grid size-16 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-xl shadow-sky-950/30">
|
<span
|
||||||
|
class="grid size-16 place-items-center rounded-full bg-sky-400 text-slate-950 shadow-xl shadow-sky-950/30">
|
||||||
<Play class="size-7 fill-current" />
|
<Play class="size-7 fill-current" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap gap-4 border-t border-white/10 px-4 py-3 text-xs font-bold text-slate-300">
|
<div
|
||||||
<button type="button" class="inline-flex items-center gap-1 hover:text-white"><Heart class="size-3" /> Yêu thích</button>
|
class="flex items-center justify-center gap-7 border-t border-white/10 px-4 py-4 text-xs font-bold text-slate-100 sm:justify-start sm:gap-4 sm:py-3">
|
||||||
<button type="button" class="inline-flex items-center gap-1 hover:text-white"><Plus class="size-3" /> Thêm vào</button>
|
<button type="button" class="inline-flex items-center gap-2 hover:text-sky-200">
|
||||||
<button type="button" class="inline-flex items-center gap-1 hover:text-white"><Share2 class="size-3" /> Chia sẻ</button>
|
<Heart class="size-4 sm:size-3" /> Yêu thích
|
||||||
|
</button>
|
||||||
|
<button type="button" class="inline-flex items-center gap-2 hover:text-sky-200">
|
||||||
|
<Plus class="size-4 sm:size-3" /> Thêm vào
|
||||||
|
</button>
|
||||||
|
<button type="button" class="inline-flex items-center gap-2 hover:text-sky-200">
|
||||||
|
<Share2 class="size-4 sm:size-3" /> Chia sẻ
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-5 grid gap-6 lg:grid-cols-[minmax(0,1fr)_24rem]">
|
<div class="mt-5 grid gap-6 lg:grid-cols-[minmax(0,1fr)_24rem]">
|
||||||
<section>
|
<section>
|
||||||
<div class="flex gap-4">
|
<div class="flex gap-4">
|
||||||
<img :src="movie.thumb || movie.poster" :alt="movie.name" class="h-28 w-20 rounded-md object-cover">
|
<img :src="movie.thumb || movie.poster" :alt="movie.name"
|
||||||
|
class="hidden h-28 w-20 rounded-md object-cover sm:block">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-2xl font-black leading-tight">{{ movie.name }}</h1>
|
<h1 class="text-[1.35rem] font-black leading-tight sm:text-2xl">{{ movie.name }}</h1>
|
||||||
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-200">{{ movie.originName }}</p>
|
<p v-if="movie.originName" class="mt-1 text-sm font-bold text-sky-200">{{ movie.originName }}</p>
|
||||||
<div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
|
<div class="mt-3 flex flex-wrap gap-2 text-xs font-black">
|
||||||
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
|
<span v-if="movie.quality" class="rounded bg-white/12 px-2 py-1">{{ movie.quality }}</span>
|
||||||
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
|
<span v-if="movie.episode" class="rounded bg-white/12 px-2 py-1">{{ movie.episode }}</span>
|
||||||
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
|
<span v-if="movie.time" class="rounded bg-white/12 px-2 py-1">{{ movie.time }}</span>
|
||||||
<span class="rounded bg-sky-400 px-2 py-1 text-slate-950">Đang xem {{ activeEpisode?.name || 'Tập 1' }}</span>
|
<span v-if="movie.rating"
|
||||||
|
class="inline-flex items-center gap-1 rounded bg-sky-400 px-2 py-1 text-slate-950">
|
||||||
|
<Star class="size-3 fill-current" />
|
||||||
|
{{ movie.rating.toFixed(1) }}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-300">{{ movie.content }}</p>
|
<p v-if="movie.content" class="mt-4 text-sm leading-7 text-slate-200">{{ movie.content }}</p>
|
||||||
|
|
||||||
<div class="mt-5 rounded-md bg-sky-400 px-4 py-3 text-sm font-black text-slate-950">
|
<div class="mt-5 rounded-md bg-sky-400 px-4 py-3 text-sm font-black text-slate-950">
|
||||||
Đang xem {{ activeEpisode?.name || 'Tập 1' }}
|
Đang xem {{ activeEpisode?.name || 'Tập 1' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
|
<div v-if="servers.length > 1" class="mt-4 flex gap-2 overflow-x-auto pb-2">
|
||||||
<button
|
<button v-for="(server, index) in servers" :key="server.name" type="button"
|
||||||
v-for="(server, index) in servers"
|
|
||||||
:key="server.name"
|
|
||||||
type="button"
|
|
||||||
class="shrink-0 rounded px-4 py-2 text-sm font-black"
|
class="shrink-0 rounded px-4 py-2 text-sm font-black"
|
||||||
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
:class="selectedServer === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
||||||
@click="selectServer(index)"
|
@click="selectServer(index)">
|
||||||
>
|
|
||||||
{{ server.name }}
|
{{ server.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="activeServer?.episodes?.length" class="mt-3 grid gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-4 lg:grid-cols-6">
|
<div v-if="activeServer?.episodes?.length"
|
||||||
<NuxtLink
|
class="mt-3 grid grid-cols-3 gap-2 rounded-md border border-white/10 p-3 sm:grid-cols-4 lg:grid-cols-6">
|
||||||
v-for="(episode, index) in activeServer.episodes"
|
<NuxtLink v-for="(episode, index) in activeServer.episodes" :key="`${episode.name}-${index}`"
|
||||||
:key="`${episode.name}-${index}`"
|
|
||||||
:to="episodeLink(index)"
|
:to="episodeLink(index)"
|
||||||
class="rounded-md px-4 py-3 text-center text-sm font-black transition"
|
class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-3 text-center text-sm font-black transition"
|
||||||
:class="selectedEpisode === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'"
|
:class="selectedEpisode === index ? 'bg-sky-400 text-slate-950' : 'bg-white/10 text-white hover:bg-white/16'">
|
||||||
>
|
<Play class="size-3 fill-current" />
|
||||||
{{ episode.name }}
|
{{ episode.name }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<aside class="rounded-md border border-white/10 bg-white/5 p-5 lg:self-start">
|
<aside class="hidden rounded-md border border-white/10 bg-white/5 p-5 sm:block lg:self-start">
|
||||||
<h2 class="text-base font-black">Thông tin phim</h2>
|
<h2 class="text-base font-black">Thông tin phim</h2>
|
||||||
<div class="mt-4 space-y-3 text-sm text-slate-300">
|
<div class="mt-4 space-y-3 text-sm text-slate-300">
|
||||||
<p><span class="font-black text-white">Số tập:</span> {{ movie.episode || 'Đang cập nhật' }}</p>
|
<p><span class="font-black text-white">Số tập:</span> {{ movie.episode || 'Đang cập nhật' }}</p>
|
||||||
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{ movie.countries.join(', ') }}</p>
|
<p v-if="movie.countries?.length"><span class="font-black text-white">Quốc gia:</span> {{
|
||||||
|
movie.countries.join(', ') }}</p>
|
||||||
<p v-if="movie.year"><span class="font-black text-white">Năm:</span> {{ movie.year }}</p>
|
<p v-if="movie.year"><span class="font-black text-white">Năm:</span> {{ movie.year }}</p>
|
||||||
<p v-if="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{ movie.actors.slice(0, 6).join(', ') }}</p>
|
<p v-if="movie.actors?.length"><span class="font-black text-white">Diễn viên:</span> {{
|
||||||
|
movie.actors.slice(0, 6).join(', ') }}</p>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user