mirror of
https://github.com/ngthanhvu/kr-phim.git
synced 2026-08-10 17:47:47 +00:00
ngthanhvu
f42dff9b0a
- Implemented `getEpisodeDisplay` function to format episode information for movies. - Updated movie display components to show episode information using the new function. - Added `episodeTotal` field to the movies schema and updated related API endpoints to handle this new field. - Enhanced movie synchronization process to fetch and store episode totals from external sources. - Created a new error page component for better user experience on 404 errors. - Added migration scripts to update the database schema for episode totals.
86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowLeft, Home, Search } from 'lucide-vue-next'
|
|
|
|
const props = defineProps<{
|
|
error: {
|
|
statusCode: number
|
|
message: string
|
|
}
|
|
}>()
|
|
|
|
const router = useRouter()
|
|
const keyword = ref('')
|
|
|
|
function handleSearch() {
|
|
if (keyword.value.trim()) {
|
|
router.push({ path: '/phim', query: { q: keyword.value.trim() } })
|
|
}
|
|
}
|
|
|
|
function goBack() {
|
|
router.back()
|
|
}
|
|
|
|
function goHome() {
|
|
router.push('/')
|
|
}
|
|
|
|
useHead({
|
|
title: `${props.error?.statusCode || 404} - Không tìm thấy trang - CineK`,
|
|
meta: [
|
|
{ name: 'robots', content: 'noindex' },
|
|
],
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main class="min-h-screen overflow-hidden bg-black">
|
|
<AppHeader />
|
|
|
|
<section
|
|
class="relative mx-auto flex min-h-[80vh] max-w-390 items-center justify-center px-4 pt-24 sm:px-6 lg:px-8 xl:px-10">
|
|
<!-- Background glow -->
|
|
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div
|
|
class="absolute left-1/2 top-1/2 size-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow-400/5 blur-3xl" />
|
|
<div
|
|
class="absolute left-1/4 top-1/3 size-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow-300/5 blur-2xl" />
|
|
</div>
|
|
|
|
<!-- Dot pattern -->
|
|
<div class="absolute inset-0 pointer-events-none opacity-20 hidden md:block"
|
|
style="background-image:radial-gradient(rgba(250,204,21,0.3) 0.5px, transparent 1px);background-size:4px 4px">
|
|
</div>
|
|
|
|
<div class="relative z-10 w-full max-w-xl text-center">
|
|
<!-- 404 Number -->
|
|
<div class="relative mb-8">
|
|
<span class="text-[10rem] font-black leading-none tracking-tighter text-white sm:text-[12rem]">
|
|
{{ error?.statusCode || 404 }}
|
|
</span>
|
|
<div class="absolute inset-0 blur-3xl opacity-20">
|
|
<span class="text-[10rem] font-black leading-none tracking-tighter text-yellow-400 sm:text-[12rem]">
|
|
{{ error?.statusCode || 404 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- Error message -->
|
|
<p class="mt-3 text-base leading-relaxed text-slate-400 sm:text-lg">
|
|
Trang bạn đang tìm không tồn tại hoặc đã bị xóa.
|
|
</p>
|
|
<!-- Action buttons -->
|
|
<div class="mt-8 flex items-center justify-center gap-3">
|
|
<button type="button"
|
|
class="inline-flex h-12 items-center gap-2 rounded-xl bg-yellow-400 px-5 text-sm font-black text-slate-950 transition hover:bg-yellow-300"
|
|
@click="goHome">
|
|
<Home class="size-4" />
|
|
Về trang chủ
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<AppFooter />
|
|
</main>
|
|
</template>
|