From 603dfbbc103e6b4468234ce47f308688e11a59f8 Mon Sep 17 00:00:00 2001
From: wwwwwwwww <526125649@qq.com>
Date: Thu, 18 Jun 2026 15:11:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=89=8D=E5=8F=B0=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E9=A1=B5=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 video-gen-app/src/index.css           | 84 +++++++++++++++++++++++++++
 video-gen-app/src/pages/LoginPage.tsx | 50 ++++++++++------
 2 files changed, 115 insertions(+), 19 deletions(-)

diff --git a/video-gen-app/src/index.css b/video-gen-app/src/index.css
index 634ebb66..53195dae 100644
--- a/video-gen-app/src/index.css
+++ b/video-gen-app/src/index.css
@@ -32,6 +32,90 @@ html, body {
 ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
 
+/* ── Electric Border Animation ─────────── */
+@keyframes electric-pulse {
+  0%, 100% { opacity: 0.4; filter: blur(1px); }
+  50% { opacity: 1; filter: blur(0); }
+}
+@keyframes electric-flow {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.electric-border-card {
+  position: relative;
+}
+
+.electric-border {
+  position: absolute;
+  inset: -2px;
+  border-radius: 16px;
+  background: linear-gradient(
+    90deg,
+    #6366f1,
+    #8b5cf6,
+    #a855f7,
+    #6366f1,
+    #8b5cf6,
+    #a855f7,
+    #6366f1
+  );
+  background-size: 300% 100%;
+  animation: electric-flow 3s linear infinite, electric-pulse 2s ease-in-out infinite;
+  z-index: 0;
+}
+
+.electric-border-inner {
+  position: absolute;
+  inset: 2px;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(12px);
+  z-index: 0;
+}
+
+.electric-border-card:hover .electric-border {
+  animation-duration: 1.5s, 1s;
+  opacity: 0.8;
+}
+
+/* ── Shiny Text Animation ─────────────── */
+@keyframes shiny {
+  0% {
+    background-position: -200% center;
+  }
+  100% {
+    background-position: 200% center;
+  }
+}
+
+.shiny-text-container {
+  margin-bottom: 16px;
+}
+
+.shiny-text {
+  font-size: 24px;
+  font-weight: 700;
+  background: linear-gradient(
+    90deg,
+    #6366f1 0%,
+    #8b5cf6 20%,
+    #a855f7 40%,
+    #c084fc 50%,
+    #a855f7 60%,
+    #8b5cf6 80%,
+    #6366f1 100%
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shiny 3s linear infinite;
+  display: inline-block;
+  letter-spacing: 1px;
+}
+
 /* ── Keyframe Animations ───────────────── */
 @keyframes fadeInUp {
   from { opacity: 0; transform: translateY(20px); }
diff --git a/video-gen-app/src/pages/LoginPage.tsx b/video-gen-app/src/pages/LoginPage.tsx
index a828b8cc..9d3c3946 100644
--- a/video-gen-app/src/pages/LoginPage.tsx
+++ b/video-gen-app/src/pages/LoginPage.tsx
@@ -261,9 +261,9 @@ const LoginPage: React.FC = () => {
   };
 
   const features = [
-    { icon: <BulbOutlined />, title: 'AI 智能优化', desc: '输入原始提示词，AI 自动为您生成专业级视频描述' },
-    { icon: <PlayCircleOutlined />, title: '一键生成视频', desc: '支持多种画质与时长选择，最快 30 秒出片' },
-    { icon: <HistoryOutlined />, title: '项目维度管理', desc: '按项目组织视频，支持多种行业模板' },
+    { icon: <BulbOutlined />, title: 'AI 智能优化', desc: '输入原始提示词，AI 自动为您生成专业级视频、图片描述' },
+    { icon: <PlayCircleOutlined />, title: '一键生成视频、图片', desc: '支持多种规格生成视频、图片' },
+    { icon: <HistoryOutlined />, title: '项目维度管理', desc: '按项目行业分类视频、图片，支持多种行业' },
   ];
 
   const inputStyle: React.CSSProperties = {
@@ -324,26 +324,38 @@ const LoginPage: React.FC = () => {
                 {siteName}
               </span>
             </div>
+            <div className="shiny-text-container">
+              <span className="shiny-text">AI赋能创意，素材触手可及</span>
+            </div>
             <Typography.Paragraph style={{ color: '#64748b', fontSize: 17, maxWidth: 480, lineHeight: 1.8 }}>
-              专业的 AI 视频生成平台，通过智能提示词优化，<br />让您的创意快速转化为精美视频
+              专业的 AI 素材生成平台，通过智能提示词优化，<br />让您的创意快速转化为精美视频、图片
             </Typography.Paragraph>
           </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
             {features.map((f, i) => (
-              <div key={i} style={{
-                display: 'flex', gap: 16, alignItems: 'flex-start',
-                padding: '18px 22px', borderRadius: 14,
-                background: 'rgba(255,255,255,0.7)',
-                border: '1px solid rgba(99,102,241,0.1)',
-                backdropFilter: 'blur(10px)',
-              }}>
-                <div style={{
-                  width: 44, height: 44, borderRadius: 12, flexShrink: 0,
-                  background: 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15))',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  color: '#6366f1', fontSize: 20,
-                }}>{f.icon}</div>
-                <div>
+              <div 
+                key={i} 
+                className="electric-border-card"
+                style={{
+                  position: 'relative',
+                  display: 'flex', gap: 16, alignItems: 'flex-start',
+                  padding: '18px 22px', borderRadius: 14,
+                  background: 'rgba(255,255,255,0.85)',
+                  backdropFilter: 'blur(12px)',
+                  overflow: 'hidden',
+                }}
+              >
+                <div className="electric-border" />
+                <div className="electric-border-inner" />
+                <div style={{ position: 'relative', zIndex: 1 }}>
+                  <div style={{
+                    width: 44, height: 44, borderRadius: 12, flexShrink: 0,
+                    background: 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15))',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: '#6366f1', fontSize: 20,
+                  }}>{f.icon}</div>
+                </div>
+                <div style={{ position: 'relative', zIndex: 1 }}>
                   <Typography.Text style={{ color: '#1e293b', fontSize: 15, fontWeight: 600, display: 'block', marginBottom: 4 }}>{f.title}</Typography.Text>
                   <Typography.Text style={{ color: '#64748b', fontSize: 13, lineHeight: 1.6 }}>{f.desc}</Typography.Text>
                 </div>