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
+70
-99
@@ -76,116 +76,99 @@ useHead({
|
||||
<main class="min-h-screen overflow-hidden">
|
||||
<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">
|
||||
<img
|
||||
v-for="(slide, index) in heroSlides"
|
||||
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"
|
||||
>
|
||||
<img v-for="(slide, index) in heroSlides" 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>
|
||||
<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-gradient-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-0 bg-linear-to-r from-slate-950 via-slate-950/76 to-slate-950/10" />
|
||||
<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-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">
|
||||
<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
|
||||
</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 }}
|
||||
</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' }}
|
||||
</p>
|
||||
<div class="mt-5 flex flex-wrap gap-2 text-sm font-bold text-slate-100">
|
||||
<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.quality" class="rounded bg-sky-300 px-3 py-2 text-slate-950">{{ hero.quality }}</span>
|
||||
<span v-if="hero.lang" class="rounded bg-white px-3 py-2 text-slate-950">{{ hero.lang }}</span>
|
||||
<span v-if="hero.year" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.year }}</span>
|
||||
<span v-if="hero.episode" class="rounded bg-black/35 px-3 py-2 ring-1 ring-white/10">{{ hero.episode }}</span>
|
||||
<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-2 py-1.5 ring-1 ring-white/10 sm:px-3 sm:py-2">IMDb
|
||||
{{ hero.rating.toFixed(1) }}</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">{{
|
||||
hero.quality }}</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 v-if="hero.categories?.length" class="mt-4 flex flex-wrap gap-2 text-sm font-semibold text-white">
|
||||
<span
|
||||
v-for="category in hero.categories.slice(0, 4)"
|
||||
:key="category"
|
||||
class="rounded bg-white/12 px-3 py-1.5 backdrop-blur"
|
||||
>
|
||||
<div v-if="hero.categories?.length"
|
||||
class="mt-3 flex flex-wrap gap-1.5 text-xs font-semibold text-white sm:mt-4 sm:gap-2 sm:text-sm">
|
||||
<span v-for="category in hero.categories.slice(0, 4)" :key="category"
|
||||
class="rounded bg-white/12 px-2 py-1 backdrop-blur sm:px-3 sm:py-1.5">
|
||||
{{ category }}
|
||||
</span>
|
||||
</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.' }}
|
||||
</p>
|
||||
<div class="mt-8 flex items-center gap-4">
|
||||
<NuxtLink
|
||||
:to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
||||
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"
|
||||
>
|
||||
<Play class="size-7 fill-current" />
|
||||
<div class="mt-6 flex items-center gap-3 sm:mt-8 sm:gap-4">
|
||||
<NuxtLink :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"
|
||||
aria-label="Xem ngay">
|
||||
<Play class="size-6 fill-current sm:size-7" />
|
||||
</NuxtLink>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<Heart class="size-5" />
|
||||
<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"
|
||||
aria-label="Yêu thích">
|
||||
<Heart class="size-4 sm:size-5" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
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"
|
||||
>
|
||||
<BookPlus class="size-5" />
|
||||
<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"
|
||||
aria-label="Thêm vào thư viện">
|
||||
<BookPlus class="size-4 sm:size-5" />
|
||||
</button>
|
||||
<NuxtLink
|
||||
:to="{ path: `/phim/${hero.slug}`, query: { source: hero.source } }"
|
||||
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"
|
||||
>
|
||||
<Info class="size-5" />
|
||||
<NuxtLink :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"
|
||||
aria-label="Thông tin phim">
|
||||
<Info class="size-4 sm:size-5" />
|
||||
</NuxtLink>
|
||||
</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">
|
||||
<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"
|
||||
aria-label="Phim trước"
|
||||
@click="previousHero"
|
||||
>
|
||||
<ChevronLeft class="size-5" />
|
||||
<div
|
||||
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">
|
||||
<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"
|
||||
aria-label="Phim trước" @click="previousHero">
|
||||
<ChevronLeft class="size-4 sm:size-5" />
|
||||
</button>
|
||||
|
||||
<div class="no-scrollbar flex gap-3 overflow-x-auto pb-2">
|
||||
<button
|
||||
v-for="(slide, index) in heroSlides"
|
||||
: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"
|
||||
<div class="no-scrollbar flex gap-2 overflow-x-auto pb-2 sm:gap-3">
|
||||
<button v-for="(slide, index) in heroSlides" :key="`${slide.source}-${slide.slug}-thumb`" type="button"
|
||||
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"
|
||||
: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">
|
||||
<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 }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
aria-label="Phim tiếp theo"
|
||||
@click="nextHero"
|
||||
>
|
||||
<ChevronRight class="size-5" />
|
||||
<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"
|
||||
aria-label="Phim tiếp theo" @click="nextHero">
|
||||
<ChevronRight class="size-4 sm:size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -198,13 +181,10 @@ useHead({
|
||||
</div>
|
||||
</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 v-if="sourceStatus.length" class="mb-8 flex flex-wrap gap-2 text-xs text-slate-300">
|
||||
<span
|
||||
v-for="source in sourceStatus"
|
||||
:key="source.name"
|
||||
class="rounded-full border border-white/10 bg-white/8 px-3 py-1"
|
||||
>
|
||||
<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 hidden flex-wrap gap-2 text-xs text-slate-300 sm:flex">
|
||||
<span v-for="source in sourceStatus" :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' }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -214,16 +194,11 @@ useHead({
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<section
|
||||
v-for="(row, index) in rows"
|
||||
v-show="row.items.length"
|
||||
:id="index === 0 ? 'latest' : index === 1 ? 'series' : 'movies'"
|
||||
:key="row.title"
|
||||
class="mb-12"
|
||||
>
|
||||
<section v-for="(row, index) in rows" 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">
|
||||
<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">
|
||||
@@ -231,12 +206,8 @@ useHead({
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div class="no-scrollbar -mx-4 flex snap-x gap-4 overflow-x-auto px-4 pb-5">
|
||||
<HomeMovieCard
|
||||
v-for="movie in row.items"
|
||||
:key="`${movie.source}-${movie.slug}`"
|
||||
:movie="movie"
|
||||
/>
|
||||
<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 v-for="movie in row.items" :key="`${movie.source}-${movie.slug}`" :movie="movie" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user