ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 16:07:47 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: responsive navbar, hero và trang chi tiết phim

Browse Source 
- 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
2026-05-17 22:47:43 +07:00
parent 69f6c90eda
commit 95a150fb51
7 changed files with 379 additions and 349 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/HomeMovieCard.vue
+23 -32
View File
@@ -64,17 +64,14 @@ onBeforeUnmount(() => {
</script>
<template>
<NuxtLink
:to="movieLink"
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"
>
<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">
<NuxtLink :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"
@mouseenter="showPreview" @mouseleave="scheduleHide" @focus="showPreview" @blur="scheduleHide">
<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-linear-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="mt-1 truncate text-xs text-sky-100">{{ movie.episode || movie.year || movie.quality }}</p>
</div>
@@ -85,25 +82,15 @@ onBeforeUnmount(() => {
</NuxtLink>
<Teleport to="body">
<Transition
enter-active-class="transition duration-180 ease-out"
enter-from-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100"
leave-active-class="transition duration-120 ease-in"
leave-from-class="scale-100 opacity-100"
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"
>
<Transition enter-active-class="transition duration-180 ease-out" enter-from-class="scale-95 opacity-0"
enter-to-class="scale-100 opacity-100" leave-active-class="transition duration-120 ease-in"
leave-from-class="scale-100 opacity-100" 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">
<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">
<h3 class="line-clamp-2 text-xl font-black leading-tight text-white">
{{ movie.name }}
@@ -116,7 +103,8 @@ onBeforeUnmount(() => {
<div class="p-4 pt-3">
<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" />
Xem ngay
</span>
@@ -129,17 +117,20 @@ onBeforeUnmount(() => {
</div>
<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.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>
<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.categories?.length"> • </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>
</div>
</NuxtLink>