update
This commit is contained in:
katelya
+205
-580
@@ -4,15 +4,16 @@
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面进入动画 */
|
||||
/* 页面进入动画 - iOS Safari兼容 */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -28,7 +29,7 @@
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
/* KatelyaTV Logo 彩虹渐变动画 */
|
||||
/* KatelyaTV Logo 彩虹渐变动画 - 简化版本 */
|
||||
.katelya-logo {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
@@ -45,14 +46,15 @@
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: rainbow-flow 4s ease-in-out infinite, logo-glow 2s ease-in-out infinite alternate;
|
||||
animation: rainbow-flow 4s ease-in-out infinite;
|
||||
position: relative;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
@keyframes rainbow-flow {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
@@ -60,15 +62,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-glow {
|
||||
0% {
|
||||
filter: drop-shadow(0 0 5px rgba(108, 92, 231, 0.4));
|
||||
}
|
||||
100% {
|
||||
filter: drop-shadow(0 0 20px rgba(108, 92, 231, 0.8)) drop-shadow(0 0 30px rgba(255, 107, 107, 0.4));
|
||||
}
|
||||
}
|
||||
|
||||
/* 主内容区大型 KatelyaTV Logo 容器 */
|
||||
.main-logo-container {
|
||||
padding: 3rem 0 4rem 0;
|
||||
@@ -81,7 +74,7 @@
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 背景光效 */
|
||||
/* 背景光效 - 简化版本 */
|
||||
.logo-background-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@@ -96,13 +89,14 @@
|
||||
rgba(76, 205, 196, 0.08) 60%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: glow-pulse 4s ease-in-out infinite, glow-rotate 20s linear infinite;
|
||||
animation: glow-pulse 4s ease-in-out infinite;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
@@ -112,16 +106,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glow-rotate {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 主内容区大型 Logo */
|
||||
/* 主内容区大型 Logo - 简化版本 */
|
||||
.main-katelya-logo {
|
||||
font-size: 4rem;
|
||||
font-weight: 900;
|
||||
@@ -141,7 +126,7 @@
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: rainbow-flow-main 6s ease-in-out infinite, logo-float 3s ease-in-out infinite, logo-glow-main 4s ease-in-out infinite;
|
||||
animation: rainbow-flow-main 6s ease-in-out infinite;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
letter-spacing: 0.02em;
|
||||
@@ -151,7 +136,8 @@
|
||||
}
|
||||
|
||||
@keyframes rainbow-flow-main {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
25% {
|
||||
@@ -165,54 +151,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes logo-glow-main {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 20px rgba(147, 112, 219, 0.4)) drop-shadow(0 0 40px rgba(255, 107, 107, 0.2));
|
||||
}
|
||||
33% {
|
||||
filter: drop-shadow(0 0 30px rgba(76, 205, 196, 0.4)) drop-shadow(0 0 50px rgba(69, 183, 209, 0.3));
|
||||
}
|
||||
66% {
|
||||
filter: drop-shadow(0 0 25px rgba(255, 198, 69, 0.4)) drop-shadow(0 0 45px rgba(253, 121, 168, 0.3));
|
||||
}
|
||||
}
|
||||
|
||||
/* 主 Logo 副标题 */
|
||||
.main-logo-subtitle {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: rgba(147, 112, 219, 0.8);
|
||||
animation: subtitle-shimmer 5s ease-in-out infinite;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.dark .main-logo-subtitle {
|
||||
color: rgba(186, 85, 211, 0.9);
|
||||
color: rgba(196, 181, 253, 0.8);
|
||||
}
|
||||
|
||||
@keyframes subtitle-shimmer {
|
||||
0%, 100% {
|
||||
opacity: 0.7;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Logo 装饰性粒子效果 */
|
||||
/* 装饰性粒子效果 - 简化版本 */
|
||||
.logo-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -227,25 +180,25 @@
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: particle-float 8s linear infinite;
|
||||
animation: particle-float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.particle-1 {
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
right: 20%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #fd79a8);
|
||||
animation-delay: 0s;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.particle-2 {
|
||||
top: 70%;
|
||||
right: 20%;
|
||||
top: 60%;
|
||||
left: 20%;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: linear-gradient(45deg, #4ecdc4, #45b7d1);
|
||||
animation-delay: -2s;
|
||||
background: linear-gradient(45deg, #45b7d1, #96ceb4);
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.particle-3 {
|
||||
@@ -285,20 +238,21 @@
|
||||
}
|
||||
|
||||
@keyframes particle-float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) translateX(0px) rotate(0deg);
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px);
|
||||
opacity: 0.3;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-20px) translateX(10px) rotate(90deg);
|
||||
transform: translateY(-20px) translateX(10px);
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) translateX(-15px) rotate(180deg);
|
||||
transform: translateY(-10px) translateX(-15px);
|
||||
opacity: 0.6;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-25px) translateX(5px) rotate(270deg);
|
||||
transform: translateY(-25px) translateX(5px);
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@@ -309,20 +263,20 @@
|
||||
padding: 2rem 0 3rem 0;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.main-katelya-logo {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
|
||||
.main-logo-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
|
||||
.logo-background-glow {
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
|
||||
.particle {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
@@ -332,11 +286,11 @@
|
||||
.main-katelya-logo {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.main-logo-subtitle {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
|
||||
.logo-background-glow {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
@@ -353,34 +307,83 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bottom-logo-container::before {
|
||||
content: '';
|
||||
/* 浮动几何形状装饰 - 简化版本 */
|
||||
.floating-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(147, 112, 219, 0.1),
|
||||
transparent
|
||||
);
|
||||
animation: shimmer-sweep 3s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes shimmer-sweep {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape:nth-child(1) {
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
animation-delay: -1s;
|
||||
}
|
||||
|
||||
.shape:nth-child(2) {
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: linear-gradient(45deg, #45b7d1, #96ceb4);
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.shape:nth-child(3) {
|
||||
bottom: 30%;
|
||||
left: 20%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background: linear-gradient(45deg, #ffc645, #fd79a8);
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.shape:nth-child(4) {
|
||||
top: 40%;
|
||||
right: 25%;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
left: 100%;
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
opacity: 0.1;
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-15px) rotate(90deg);
|
||||
opacity: 0.3;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px) rotate(180deg);
|
||||
opacity: 0.2;
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-20px) rotate(270deg);
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* 底部 Logo */
|
||||
.bottom-logo {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 800;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
#ff6b6b,
|
||||
@@ -390,526 +393,148 @@
|
||||
#ffc645,
|
||||
#fd79a8,
|
||||
#6c5ce7,
|
||||
#a29bfe,
|
||||
#ff6b6b
|
||||
#a29bfe
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: rainbow-flow 3s ease-in-out infinite, pulse-scale 2s ease-in-out infinite;
|
||||
animation: rainbow-flow 4s ease-in-out infinite;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
letter-spacing: 0.05em;
|
||||
text-shadow: 0 0 30px rgba(147, 112, 219, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes pulse-scale {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
/* iOS Safari兼容性优化 */
|
||||
@supports (-webkit-touch-callout: none) {
|
||||
/* iOS Safari特定样式 */
|
||||
.animate-pulse {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.particle {
|
||||
animation: none;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.shape {
|
||||
animation: none;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.logo-background-glow {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.main-katelya-logo {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.katelya-logo {
|
||||
animation: none;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端底部 Logo 调整 */
|
||||
@media (max-width: 768px) {
|
||||
.bottom-logo {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.bottom-logo-container {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 按钮悬停效果增强 */
|
||||
.btn-purple {
|
||||
background: linear-gradient(135deg, #9370db, #ba55d3);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-purple::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn-purple:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-purple:hover {
|
||||
background: linear-gradient(135deg, #8a2be2, #9370db);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(147, 112, 219, 0.4);
|
||||
}
|
||||
|
||||
/* 导航项悬停动画 */
|
||||
.nav-item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #9370db, transparent);
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 卡片悬停增强效果 */
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-hover::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, transparent, rgba(147, 112, 219, 0.1), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-hover:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 20px 40px rgba(147, 112, 219, 0.2);
|
||||
}
|
||||
|
||||
/* 浮动几何图形 */
|
||||
.floating-shapes {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
opacity: 0.1;
|
||||
animation: float-rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
.shape:nth-child(1) {
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
|
||||
border-radius: 50%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape:nth-child(2) {
|
||||
top: 70%;
|
||||
right: 15%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
|
||||
transform: rotate(45deg);
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.shape:nth-child(3) {
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
width: 80px;
|
||||
height: 20px;
|
||||
background: linear-gradient(45deg, #ffc645, #fd79a8);
|
||||
border-radius: 10px;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.shape:nth-child(4) {
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: linear-gradient(45deg, #96ceb4, #45b7d1);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
@keyframes float-rotate {
|
||||
0% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
opacity: 0.1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-20px) rotate(360deg);
|
||||
opacity: 0.1;
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 基础样式 */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari and Opera */
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--foreground-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
/* 阻止 iOS Safari 拉动回弹 */
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
color: rgb(var(--foreground-rgb));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 动态背景特效 - 增强版 */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -2;
|
||||
pointer-events: none;
|
||||
background: linear-gradient(45deg, #e6e6fa, #dda0dd, #c8a2c8, #f0e6ff, #e6e6fa, #d8bfd8, #e6e6fa);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientFlow 12s ease infinite;
|
||||
}
|
||||
|
||||
/* 流光背景动画 */
|
||||
@keyframes gradientFlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
33% {
|
||||
background-position: 100% 0%;
|
||||
}
|
||||
66% {
|
||||
background-position: 0% 100%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式背景 */
|
||||
html.dark body::before {
|
||||
background: linear-gradient(45deg, #2a0845, #4a0e4e, #1a0a2e, #16213e, #2a0845, #3d1f69, #2a0845);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientFlow 12s ease infinite;
|
||||
}
|
||||
|
||||
/* 增强的浮动装饰元素 */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(3px 3px at 20px 30px, rgba(147, 112, 219, 0.5), transparent),
|
||||
radial-gradient(2px 2px at 40px 70px, rgba(186, 85, 211, 0.4), transparent),
|
||||
radial-gradient(1px 1px at 90px 40px, rgba(221, 160, 221, 0.5), transparent),
|
||||
radial-gradient(2px 2px at 130px 80px, rgba(147, 112, 219, 0.4), transparent),
|
||||
radial-gradient(3px 3px at 160px 30px, rgba(138, 43, 226, 0.5), transparent),
|
||||
radial-gradient(1px 1px at 200px 90px, rgba(219, 112, 147, 0.4), transparent),
|
||||
radial-gradient(2px 2px at 250px 50px, rgba(147, 112, 219, 0.5), transparent),
|
||||
radial-gradient(4px 4px at 300px 120px, rgba(255, 107, 107, 0.3), transparent),
|
||||
radial-gradient(2px 2px at 350px 40px, rgba(76, 205, 196, 0.4), transparent);
|
||||
background-repeat: repeat;
|
||||
background-size: 350px 250px;
|
||||
animation: sparkle 25s linear infinite, float 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
75% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) translateX(0px) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-15px) translateX(10px) rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-8px) translateX(-8px) rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-20px) translateX(5px) rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 - 增强版 */
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(147, 112, 219, 0.1);
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, rgba(147, 112, 219, 0.3), rgba(186, 85, 211, 0.4));
|
||||
background: rgba(156, 163, 175, 0.5);
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(180deg, rgba(147, 112, 219, 0.6), rgba(186, 85, 211, 0.7));
|
||||
background: rgba(156, 163, 175, 0.7);
|
||||
}
|
||||
|
||||
/* 视频卡片悬停效果 */
|
||||
.video-card-hover {
|
||||
transition: transform 0.3s ease;
|
||||
/* 暗色主题滚动条 */
|
||||
.dark ::-webkit-scrollbar-thumb {
|
||||
background: rgba(75, 85, 99, 0.5);
|
||||
}
|
||||
|
||||
.video-card-hover:hover {
|
||||
transform: scale(1.05);
|
||||
.dark ::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(75, 85, 99, 0.7);
|
||||
}
|
||||
|
||||
/* 渐变遮罩 */
|
||||
.gradient-overlay {
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 0.8) 100%
|
||||
);
|
||||
}
|
||||
|
||||
/* 优化的圆角容器样式 - 主内容区 - 修改透明度为50% */
|
||||
.rounded-container {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
/* 将透明度从0.85调整为0.5 (50%) */
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
backdrop-filter: blur(25px);
|
||||
border: 1px solid rgba(147, 112, 219, 0.2);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(147, 112, 219, 0.12),
|
||||
0 1px 0 rgba(255, 255, 255, 0.9) inset,
|
||||
0 0 0 1px rgba(147, 112, 219, 0.05) inset;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
/* 确保容器占据完整的分配空间 */
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rounded-container::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, rgba(147, 112, 219, 0.5), rgba(255, 107, 107, 0.3), rgba(147, 112, 219, 0.5), transparent);
|
||||
animation: shimmerTop 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmerTop {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.dark .rounded-container {
|
||||
/* 暗色模式下也将透明度调整为0.5 (50%) */
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(147, 112, 219, 0.3);
|
||||
box-shadow:
|
||||
0 8px 40px rgba(147, 112, 219, 0.25),
|
||||
0 1px 0 rgba(147, 112, 219, 0.15) inset,
|
||||
0 0 0 1px rgba(147, 112, 219, 0.1) inset;
|
||||
}
|
||||
|
||||
.dark .rounded-container::before {
|
||||
background: linear-gradient(90deg, transparent, rgba(147, 112, 219, 0.7), rgba(255, 107, 107, 0.4), rgba(147, 112, 219, 0.7), transparent);
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.rounded-container:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 15px 50px rgba(147, 112, 219, 0.2),
|
||||
0 1px 0 rgba(255, 255, 255, 0.95) inset,
|
||||
0 0 0 1px rgba(147, 112, 219, 0.1) inset;
|
||||
}
|
||||
|
||||
.dark .rounded-container:hover {
|
||||
box-shadow:
|
||||
0 15px 50px rgba(147, 112, 219, 0.35),
|
||||
0 1px 0 rgba(147, 112, 219, 0.25) inset,
|
||||
0 0 0 1px rgba(147, 112, 219, 0.2) inset;
|
||||
}
|
||||
|
||||
/* 响应式容器边距 */
|
||||
@media (max-width: 768px) {
|
||||
.rounded-container {
|
||||
border-radius: 16px;
|
||||
/* 移动端时恢复全宽 */
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏移动端（<768px）垂直滚动条 */
|
||||
@media (max-width: 767px) {
|
||||
html,
|
||||
body {
|
||||
-ms-overflow-style: none; /* IE & Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar,
|
||||
body::-webkit-scrollbar {
|
||||
display: none; /* Chrome Safari */
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏所有滚动条（兼容 WebKit、Firefox、IE/Edge） */
|
||||
/* 基础样式重置 */
|
||||
* {
|
||||
-ms-overflow-style: none; /* IE & Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* View Transitions API 动画 */
|
||||
@keyframes slide-from-top {
|
||||
from {
|
||||
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
|
||||
}
|
||||
to {
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 链接样式 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
input,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* 图片样式 */
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 选择文本样式 */
|
||||
::selection {
|
||||
background: rgba(147, 112, 219, 0.3);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.dark ::selection {
|
||||
background: rgba(196, 181, 253, 0.3);
|
||||
}
|
||||
|
||||
/* 焦点样式 */
|
||||
:focus {
|
||||
outline: 2px solid rgba(147, 112, 219, 0.5);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 减少动画偏好 */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-from-bottom {
|
||||
from {
|
||||
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
|
||||
}
|
||||
to {
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation-duration: 0.8s;
|
||||
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
/*
|
||||
切换时，旧的视图不应该有动画，它应该在下面，等待被新的视图覆盖。
|
||||
这可以防止在动画完成前，页面底部提前变色。
|
||||
*/
|
||||
::view-transition-old(root) {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
/* 从浅色到深色：新内容（深色）从顶部滑入 */
|
||||
html.dark::view-transition-new(root) {
|
||||
animation-name: slide-from-top;
|
||||
}
|
||||
|
||||
/* 从深色到浅色：新内容（浅色）从底部滑入 */
|
||||
html:not(.dark)::view-transition-new(root) {
|
||||
animation-name: slide-from-bottom;
|
||||
}
|
||||
|
||||
/* 强制播放器内部的 video 元素高度为 100%，并保持内容完整显示 */
|
||||
div[data-media-provider] video {
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.art-poster {
|
||||
background-size: contain !important; /* 使图片完整展示 */
|
||||
background-position: center center !important; /* 居中显示 */
|
||||
background-repeat: no-repeat !important; /* 防止重复 */
|
||||
background-color: #000 !important; /* 其余区域填充为黑色 */
|
||||
}
|
||||
|
||||
/* 隐藏移动端竖屏时的 pip 按钮 */
|
||||
@media (max-width: 768px) {
|
||||
.art-control-pip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.art-control-fullscreenWeb {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.art-control-volume {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
+7
-7
@@ -36,11 +36,11 @@ export const viewport: Viewport = {
|
||||
// 浮动几何形状组件
|
||||
const FloatingShapes = () => {
|
||||
return (
|
||||
<div className="floating-shapes">
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className='floating-shapes'>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -93,7 +93,7 @@ export default async function RootLayout({
|
||||
>
|
||||
{/* 浮动几何形状装饰 */}
|
||||
<FloatingShapes />
|
||||
|
||||
|
||||
<ThemeProvider
|
||||
attribute='class'
|
||||
defaultTheme='system'
|
||||
@@ -107,4 +107,4 @@ export default async function RootLayout({
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+86
-75
@@ -8,6 +8,7 @@ import { Suspense, useEffect, useState } from 'react';
|
||||
|
||||
import { checkForUpdates, CURRENT_VERSION, UpdateStatus } from '@/lib/version';
|
||||
|
||||
import IOSCompatibility from '@/components/IOSCompatibility';
|
||||
import { useSite } from '@/components/SiteProvider';
|
||||
import { ThemeToggle } from '@/components/ThemeToggle';
|
||||
|
||||
@@ -150,96 +151,106 @@ function LoginPageClient() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
|
||||
<div className='absolute top-4 right-4'>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 dark:from-zinc-900/90 dark:via-zinc-900/70 dark:to-zinc-900/40 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800'>
|
||||
{/* 渐变酷炫Logo */}
|
||||
<h1 className='relative tracking-tight text-center text-3xl font-extrabold mb-8 drop-shadow-lg'>
|
||||
<span className='bg-gradient-to-r from-purple-400 via-pink-500 to-purple-600 dark:from-purple-300 dark:via-pink-400 dark:to-purple-500 bg-clip-text text-transparent animate-pulse'>
|
||||
{siteName}
|
||||
</span>
|
||||
{/* 添加发光效果 */}
|
||||
<span className='absolute inset-0 bg-gradient-to-r from-purple-400 via-pink-500 to-purple-600 dark:from-purple-300 dark:via-pink-400 dark:to-purple-500 bg-clip-text text-transparent blur-sm opacity-50 animate-pulse'>
|
||||
{siteName}
|
||||
</span>
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit} className='space-y-8'>
|
||||
{shouldAskUsername && (
|
||||
<IOSCompatibility>
|
||||
<div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
|
||||
{/* iOS Safari兼容的背景渐变 */}
|
||||
<div className='absolute inset-0 bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-50 dark:from-gray-900 dark:via-purple-900 dark:to-indigo-900'></div>
|
||||
|
||||
{/* 简化的装饰性元素 - iOS Safari兼容 */}
|
||||
<div className='absolute inset-0 overflow-hidden pointer-events-none'>
|
||||
<div className='absolute top-1/4 left-1/4 w-32 h-32 bg-purple-200 dark:bg-purple-800 rounded-full opacity-20 blur-xl'></div>
|
||||
<div className='absolute bottom-1/4 right-1/4 w-40 h-40 bg-pink-200 dark:bg-pink-800 rounded-full opacity-20 blur-xl'></div>
|
||||
<div className='absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-indigo-200 dark:bg-indigo-800 rounded-full opacity-15 blur-lg'></div>
|
||||
</div>
|
||||
|
||||
<div className='absolute top-4 right-4'>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
<div className='relative z-10 w-full max-w-md rounded-3xl bg-white/90 dark:bg-zinc-900/90 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800 border border-gray-200'>
|
||||
{/* 简化的Logo - iOS Safari兼容 */}
|
||||
<h1 className='text-center text-3xl font-extrabold mb-8'>
|
||||
<span className='bg-gradient-to-r from-purple-600 via-pink-600 to-purple-600 dark:from-purple-400 dark:via-pink-400 dark:to-purple-400 bg-clip-text text-transparent'>
|
||||
{siteName}
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<form onSubmit={handleSubmit} className='space-y-8'>
|
||||
{shouldAskUsername && (
|
||||
<div>
|
||||
<label htmlFor='username' className='sr-only'>
|
||||
用户名
|
||||
</label>
|
||||
<input
|
||||
id='username'
|
||||
type='text'
|
||||
autoComplete='username'
|
||||
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white dark:bg-zinc-800'
|
||||
placeholder='输入用户名'
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor='username' className='sr-only'>
|
||||
用户名
|
||||
<label htmlFor='password' className='sr-only'>
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
id='username'
|
||||
type='text'
|
||||
autoComplete='username'
|
||||
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
|
||||
placeholder='输入用户名'
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
id='password'
|
||||
type='password'
|
||||
autoComplete='current-password'
|
||||
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-gray-300 dark:ring-gray-600 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white dark:bg-zinc-800'
|
||||
placeholder='输入访问密码'
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label htmlFor='password' className='sr-only'>
|
||||
密码
|
||||
</label>
|
||||
<input
|
||||
id='password'
|
||||
type='password'
|
||||
autoComplete='current-password'
|
||||
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
|
||||
placeholder='输入访问密码'
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
{error && (
|
||||
<p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
|
||||
)}
|
||||
|
||||
{/* 登录 / 注册按钮 */}
|
||||
{shouldAskUsername && enableRegister ? (
|
||||
<div className='flex gap-4'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={handleRegister}
|
||||
disabled={!password || !username || loading}
|
||||
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
>
|
||||
{loading ? '注册中...' : '注册'}
|
||||
</button>
|
||||
{/* 登录 / 注册按钮 */}
|
||||
{shouldAskUsername && enableRegister ? (
|
||||
<div className='flex gap-4'>
|
||||
<button
|
||||
type='button'
|
||||
onClick={handleRegister}
|
||||
disabled={!password || !username || loading}
|
||||
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
>
|
||||
{loading ? '注册中...' : '注册'}
|
||||
</button>
|
||||
<button
|
||||
type='submit'
|
||||
disabled={
|
||||
!password || loading || (shouldAskUsername && !username)
|
||||
}
|
||||
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type='submit'
|
||||
disabled={
|
||||
!password || loading || (shouldAskUsername && !username)
|
||||
}
|
||||
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
className='inline-flex w-full justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
type='submit'
|
||||
disabled={
|
||||
!password || loading || (shouldAskUsername && !username)
|
||||
}
|
||||
className='inline-flex w-full justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
||||
>
|
||||
{loading ? '登录中...' : '登录'}
|
||||
</button>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* 版本信息显示 */}
|
||||
<VersionDisplay />
|
||||
</div>
|
||||
{/* 版本信息显示 */}
|
||||
<VersionDisplay />
|
||||
</div>
|
||||
</IOSCompatibility>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -249,4 +260,4 @@ export default function LoginPage() {
|
||||
<LoginPageClient />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+33
-36
@@ -26,30 +26,26 @@ import VideoCard from '@/components/VideoCard';
|
||||
// 主内容区大型 KatelyaTV Logo 组件
|
||||
const MainKatelyaLogo = () => {
|
||||
return (
|
||||
<div className="main-logo-container">
|
||||
<div className='main-logo-container'>
|
||||
{/* 背景光效 */}
|
||||
<div className="logo-background-glow"></div>
|
||||
|
||||
<div className='logo-background-glow'></div>
|
||||
|
||||
{/* 主 Logo */}
|
||||
<div className="main-katelya-logo">
|
||||
KatelyaTV
|
||||
</div>
|
||||
|
||||
<div className='main-katelya-logo'>KatelyaTV</div>
|
||||
|
||||
{/* 副标题 */}
|
||||
<div className="mt-3 text-center">
|
||||
<div className="main-logo-subtitle">
|
||||
极致影视体验，尽在指尖
|
||||
</div>
|
||||
<div className='mt-3 text-center'>
|
||||
<div className='main-logo-subtitle'>极致影视体验，尽在指尖</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 装饰性粒子效果 */}
|
||||
<div className="logo-particles">
|
||||
<div className="particle particle-1"></div>
|
||||
<div className="particle particle-2"></div>
|
||||
<div className="particle particle-3"></div>
|
||||
<div className="particle particle-4"></div>
|
||||
<div className="particle particle-5"></div>
|
||||
<div className="particle particle-6"></div>
|
||||
<div className='logo-particles'>
|
||||
<div className='particle particle-1'></div>
|
||||
<div className='particle particle-2'></div>
|
||||
<div className='particle particle-3'></div>
|
||||
<div className='particle particle-4'></div>
|
||||
<div className='particle particle-5'></div>
|
||||
<div className='particle particle-6'></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -58,20 +54,18 @@ const MainKatelyaLogo = () => {
|
||||
// KatelyaTV 底部 Logo 组件
|
||||
const BottomKatelyaLogo = () => {
|
||||
return (
|
||||
<div className="bottom-logo-container">
|
||||
<div className='bottom-logo-container'>
|
||||
{/* 浮动几何形状装饰 */}
|
||||
<div className="floating-shapes">
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className="shape"></div>
|
||||
<div className='floating-shapes'>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
<div className='shape'></div>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="bottom-logo">
|
||||
KatelyaTV
|
||||
</div>
|
||||
<div className="mt-2 text-sm text-gray-500 dark:text-gray-400 opacity-75">
|
||||
|
||||
<div className='text-center'>
|
||||
<div className='bottom-logo'>KatelyaTV</div>
|
||||
<div className='mt-2 text-sm text-gray-500 dark:text-gray-400 opacity-75'>
|
||||
Powered by MoonTV Core
|
||||
</div>
|
||||
</div>
|
||||
@@ -215,7 +209,7 @@ function HomeClient() {
|
||||
<div className='px-4 sm:px-8 lg:px-12 py-4 sm:py-8 overflow-visible'>
|
||||
{/* 主内容区大型 KatelyaTV Logo - 仅在首页显示 */}
|
||||
{activeTab === 'home' && <MainKatelyaLogo />}
|
||||
|
||||
|
||||
{/* 顶部 Tab 切换 */}
|
||||
<div className='mb-8 flex justify-center'>
|
||||
<CapsuleSwitch
|
||||
@@ -253,7 +247,10 @@ function HomeClient() {
|
||||
{/* 优化收藏夹网格布局，确保在新的居中布局下完美对齐 */}
|
||||
<div className='grid grid-cols-3 gap-x-2 gap-y-14 sm:gap-y-20 px-0 sm:px-2 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-6 lg:gap-x-8 justify-items-center'>
|
||||
{favoriteItems.map((item) => (
|
||||
<div key={item.id + item.source} className='w-full max-w-44'>
|
||||
<div
|
||||
key={item.id + item.source}
|
||||
className='w-full max-w-44'
|
||||
>
|
||||
<VideoCard
|
||||
query={item.search_title}
|
||||
{...item}
|
||||
@@ -269,7 +266,7 @@ function HomeClient() {
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
{/* 收藏夹页面底部 Logo */}
|
||||
<BottomKatelyaLogo />
|
||||
</>
|
||||
@@ -420,7 +417,7 @@ function HomeClient() {
|
||||
))}
|
||||
</ScrollableRow>
|
||||
</section>
|
||||
|
||||
|
||||
{/* 首页底部 Logo */}
|
||||
<BottomKatelyaLogo />
|
||||
</>
|
||||
@@ -471,4 +468,4 @@ export default function Home() {
|
||||
<HomeClient />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface IOSCompatibilityProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function IOSCompatibility({ children }: IOSCompatibilityProps) {
|
||||
const [isIOS, setIsIOS] = useState(false);
|
||||
const [isSafari, setIsSafari] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 检测iOS设备
|
||||
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
setIsIOS(iOS);
|
||||
|
||||
// 检测Safari浏览器
|
||||
const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
||||
setIsSafari(safari);
|
||||
|
||||
// 如果是iOS Safari，添加特定的CSS类
|
||||
if (iOS && safari) {
|
||||
document.documentElement.classList.add('ios-safari');
|
||||
document.body.classList.add('ios-safari');
|
||||
}
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
document.documentElement.classList.remove('ios-safari');
|
||||
document.body.classList.remove('ios-safari');
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 如果是iOS Safari，应用特定的样式优化
|
||||
useEffect(() => {
|
||||
if (isIOS && isSafari) {
|
||||
// 禁用一些可能导致性能问题的CSS属性
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.ios-safari * {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.ios-safari .animate-pulse {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .particle {
|
||||
animation: none !important;
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.ios-safari .shape {
|
||||
animation: none !important;
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
|
||||
.ios-safari .logo-background-glow {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .main-katelya-logo {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .katelya-logo {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .bottom-logo {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .backdrop-blur-xl {
|
||||
backdrop-filter: none !important;
|
||||
-webkit-backdrop-filter: none !important;
|
||||
}
|
||||
|
||||
.ios-safari .bg-white\\/90 {
|
||||
background-color: rgba(255, 255, 255, 0.95) !important;
|
||||
}
|
||||
|
||||
.ios-safari .dark .bg-zinc-900\\/90 {
|
||||
background-color: rgba(24, 24, 27, 0.95) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
return () => {
|
||||
document.head.removeChild(style);
|
||||
};
|
||||
}
|
||||
}, [isIOS, isSafari]);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
export default IOSCompatibility;
|
||||
@@ -61,8 +61,8 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||||
}}
|
||||
>
|
||||
{/* 顶部装饰线 */}
|
||||
<div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-purple-500/50 to-transparent"></div>
|
||||
|
||||
<div className='absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-purple-500/50 to-transparent'></div>
|
||||
|
||||
<ul className='flex items-center'>
|
||||
{navItems.map((item) => {
|
||||
const active = isActive(item.href);
|
||||
@@ -71,16 +71,16 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`flex flex-col items-center justify-center w-full h-14 gap-1 text-xs transition-all duration-200 relative ${
|
||||
active
|
||||
? 'transform -translate-y-1'
|
||||
active
|
||||
? 'transform -translate-y-1'
|
||||
: 'hover:transform hover:-translate-y-0.5'
|
||||
}`}
|
||||
>
|
||||
{/* 激活状态的背景光晕 */}
|
||||
{active && (
|
||||
<div className="absolute inset-0 bg-purple-500/10 rounded-lg mx-2 my-1 border border-purple-300/20"></div>
|
||||
<div className='absolute inset-0 bg-purple-500/10 rounded-lg mx-2 my-1 border border-purple-300/20'></div>
|
||||
)}
|
||||
|
||||
|
||||
<item.icon
|
||||
className={`h-6 w-6 transition-all duration-200 ${
|
||||
active
|
||||
@@ -106,4 +106,4 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileBottomNav;
|
||||
export default MobileBottomNav;
|
||||
|
||||
@@ -41,4 +41,4 @@ const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default MobileHeader;
|
||||
export default MobileHeader;
|
||||
|
||||
@@ -188,11 +188,17 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
||||
{/* 使用flex布局实现三等分 */}
|
||||
<div className='flex w-full min-h-screen md:min-h-[calc(100vh-10rem)]'>
|
||||
{/* 左侧留白区域 - 占1/6 */}
|
||||
<div className='hidden md:block flex-shrink-0' style={{ width: '16.67%' }}></div>
|
||||
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{ width: '16.67%' }}
|
||||
></div>
|
||||
|
||||
{/* 主内容区 - 占2/3 */}
|
||||
<div className='flex-1 md:flex-none rounded-container w-full' style={{ width: '66.67%' }}>
|
||||
<div
|
||||
<div
|
||||
className='flex-1 md:flex-none rounded-container w-full'
|
||||
style={{ width: '66.67%' }}
|
||||
>
|
||||
<div
|
||||
className='p-4 md:p-8 lg:p-10'
|
||||
style={{
|
||||
paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
|
||||
@@ -201,9 +207,12 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 右侧留白区域 - 占1/6 */}
|
||||
<div className='hidden md:block flex-shrink-0' style={{ width: '16.67%' }}></div>
|
||||
<div
|
||||
className='hidden md:block flex-shrink-0'
|
||||
style={{ width: '16.67%' }}
|
||||
></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
@@ -217,4 +226,4 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default PageLayout;
|
||||
export default PageLayout;
|
||||
|
||||
@@ -272,4 +272,4 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
export default Sidebar;
|
||||
|
||||
Reference in New Issue
Block a user