88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<NuxtLayout>
|
|
<FlashBanner />
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import FlashBanner from '~/components/FlashBanner.vue'
|
|
</script>
|
|
|
|
<style>
|
|
:root {
|
|
--soft-page-bg: radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.08), transparent 28%),
|
|
radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.08), transparent 30%),
|
|
linear-gradient(180deg, #f8fbff, #f3f5f8);
|
|
|
|
/* --- Nebula Glass Tokens --- */
|
|
/* Colors */
|
|
--color-primary-start: #8b5cf6; /* Electric Purple */
|
|
--color-primary-end: #3b82f6; /* Neon Blue */
|
|
--color-accent-beam: #a855f7; /* Neon Purple Beam */
|
|
|
|
--color-text-main: #1e293b; /* Slate 800 */
|
|
--color-text-sub: #64748b; /* Slate 500 */
|
|
--color-text-active: #ffffff;
|
|
|
|
--color-glass-bg: rgba(255, 255, 255, 0.65);
|
|
--color-glass-border: rgba(255, 255, 255, 0.8);
|
|
--color-glass-hover: rgba(255, 255, 255, 0.85);
|
|
|
|
/* Dimensions */
|
|
--sidebar-width-expanded: 80px;
|
|
--sidebar-width-collapsed: 72px;
|
|
--sidebar-radius: 40px; /* Super Capsule */
|
|
|
|
--card-radius-lg: 24px;
|
|
--card-radius-md: 16px;
|
|
--card-radius-sm: 12px;
|
|
|
|
/* Shadows */
|
|
--shadow-glass-floating:
|
|
0 10px 30px -10px rgba(68, 70, 245, 0.15),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
|
|
--shadow-glass-hover:
|
|
0 20px 40px -10px rgba(68, 70, 245, 0.25),
|
|
0 8px 12px -4px rgba(0, 0, 0, 0.1);
|
|
|
|
--shadow-neon-glow: 0 0 12px rgba(168, 85, 247, 0.6);
|
|
|
|
/* Transitions */
|
|
--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
|
|
--duration-normal: 0.3s;
|
|
/* --- Home Plaza Redesign Tokens --- */
|
|
--color-bg-plaza: #ffffff;
|
|
--color-bg-list-card: #f8fafc;
|
|
--color-border-light: #f1f5f9;
|
|
|
|
--grad-feature-overlay: linear-gradient(135deg, rgba(236, 72, 153, 0.85), rgba(59, 130, 246, 0.85));
|
|
--grad-primary-btn: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
|
|
--shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.08);
|
|
--shadow-btn: 0 4px 12px rgba(99, 102, 241, 0.3);
|
|
|
|
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--duration-hover: 0.3s;
|
|
}
|
|
.article-root {
|
|
background: var(--soft-page-bg);
|
|
}
|
|
html,body,#__nuxt{ margin: 0;padding: 0; }
|
|
|
|
/* 禁用默认的页面转场动画，使用自定义的共享元素转场 */
|
|
.article-card-enter-active,
|
|
.article-card-leave-active {
|
|
transition: none !important;
|
|
}
|
|
.article-card-enter-from,
|
|
.article-card-leave-to,
|
|
.article-card-enter-to,
|
|
.article-card-leave-from {
|
|
opacity: 1 !important;
|
|
transform: none !important;
|
|
}
|
|
</style>
|