| public/images/logo.jpg | 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/app/globals.css | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/app/layout.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/app/page.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/Card.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/layout/Navbar.tsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
public/images/logo.jpg
@@ -1,8 +1,18 @@ @import "tailwindcss"; :root { --background: #ffffff; --foreground: #171717; /* 现代科技感主题配色 */ --ai-primary: #1E2B63; /* 深蓝色 - 主要背景色 */ --ai-secondary: #6ADBFF; /* 天蓝色 - 点缀色调 */ --ai-accent: #5E72EB; /* 紫蓝色 - 强调色调 */ --ai-highlight: #FF9190; /* 粉红色 - 高亮色调 */ --ai-surface: #F7F9FF; /* 淡蓝白色 - 提供清晰视觉空间 */ --ai-dark: #0A1033; /* 深蓝色 - 暗色调 */ --ai-contrast: #FF6A88; /* 粉红色 - 用于行动点强调 */ /* 基础颜色设置 */ --background: var(--ai-surface); --foreground: #1E2B63; } @theme inline { @@ -14,13 +24,160 @@ @media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; --background: var(--ai-dark); --foreground: #E9EFFD; } } body { background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; } /* 导航栏特效样式 */ .hover\:shadow-glow:hover { box-shadow: 0 0 15px rgba(106, 219, 255, 0.5); } /* Logo圆环脉冲动画 */ @keyframes logo-ring-pulse { 0% { opacity: 0.15; box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15); } 25% { opacity: 0.35; box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2); } 50% { opacity: 0.65; box-shadow: 0 0 0 2px rgba(136, 219, 255, 0.25); } 75% { opacity: 0.35; box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2); } 100% { opacity: 0.15; box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15); } } .animate-logo-pulse { animation: logo-ring-pulse 6s ease-in-out infinite; } /* AI数据流效果动画 */ @keyframes dataflowY { 0% { transform: translateY(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes dataflowX { 0% { transform: translateX(-100%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } .animate-dataflowY { animation: dataflowY 3s infinite; } .animate-dataflowX { animation: dataflowX 4s infinite; } /* 按钮倾斜动画 */ @keyframes tilt { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } } .animate-tilt { animation: tilt 10s ease-in-out infinite; } /* AI元素扫描线动画 */ @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .animate-scanline { animation: scanline 2s linear infinite; } /* 基础渐变动画 */ @keyframes gradient-flow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .bg-gradient-animate { background-size: 200% 200%; animation: gradient-flow 8s ease infinite; } /* 新增高光效果 */ @keyframes shimmer { 0% { opacity: 0.5; transform: translateX(-100%); } 100% { opacity: 0; transform: translateX(100%); } } .shimmer-effect::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100% ); animation: shimmer 2s infinite; } src/app/layout.tsx
@@ -2,6 +2,7 @@ import { Inter } from "next/font/google"; import "./globals.css"; import Navbar from "@/components/layout/Navbar"; import Image from 'next/image'; const inter = Inter({ subsets: ["latin"] }); @@ -19,38 +20,57 @@ <html lang="zh"> <body className={inter.className}> <Navbar /> <main className="min-h-screen bg-gray-50 pt-16"> <main className="min-h-screen bg-gradient-to-b from-[var(--ai-surface)] to-white pt-16"> {children} </main> <footer className="bg-[#2F3C7E] text-white py-8"> <footer className="bg-gradient-to-br from-[var(--ai-primary)] to-[var(--ai-dark)] text-white py-10"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="mb-8 flex justify-center flex-col items-center"> <div className="relative w-16 h-16 mb-3"> <Image src="/images/logo.jpg" alt="帷幄君成Logo" width={64} height={64} className="object-contain" priority /> </div> <div className="text-xl font-bold">帷幄君成</div> <div className="text-sm text-gray-300 mt-1">智能物流解决方案</div> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div> <h3 className="text-lg font-semibold mb-4">关于我们</h3> <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">关于我们</h3> <ul className="space-y-2"> <li>公司介绍</li> <li>联系方式</li> <li>加入我们</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">公司介绍</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">联系方式</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">加入我们</li> </ul> </div> <div> <h3 className="text-lg font-semibold mb-4">产品服务</h3> <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">产品服务</h3> <ul className="space-y-2"> <li>数字员工</li> <li>智能客服</li> <li>物流解决方案</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">数字员工</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">智能客服</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">物流解决方案</li> </ul> </div> <div> <h3 className="text-lg font-semibold mb-4">帮助中心</h3> <h3 className="text-lg font-semibold mb-4 text-[#F5A800]">帮助中心</h3> <ul className="space-y-2"> <li>使用指南</li> <li>常见问题</li> <li>技术支持</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">使用指南</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">常见问题</li> <li className="hover:text-[#F5A800] transition-colors cursor-pointer">技术支持</li> </ul> </div> </div> <div className="mt-8 pt-8 border-t border-gray-700 text-center"> <div className="mt-8 pt-8 border-t border-opacity-20 border-[#F5A800] text-center"> <div className="flex items-center justify-center mb-4"> <span className="inline-block w-2 h-2 bg-[#00A0E9] rounded-full mr-2 animate-pulse"></span> <span className="inline-block w-2 h-2 bg-[#5D54A4] rounded-full mx-2 animate-pulse delay-300"></span> <span className="inline-block w-2 h-2 bg-[#F5A800] rounded-full ml-2 animate-pulse delay-500"></span> </div> <p>© 2024 帷幄君成. All rights reserved.</p> </div> </div> src/app/page.tsx
@@ -46,9 +46,16 @@ return ( <div className="flex"> <Sidebar /> <div className="flex-1 p-6 md:p-8"> <div className="flex-1 p-6 md:p-8 bg-gradient-to-b from-[var(--ai-surface)] to-white"> <div className="max-w-7xl mx-auto"> <h1 className="text-2xl font-bold text-[#2F3C7E] mb-6">场景模拟</h1> <div className="mb-8"> <h1 className="text-3xl font-bold text-[var(--ai-primary)] mb-2"> AI场景模拟 <span className="ml-2 inline-block w-2 h-2 rounded-full bg-[var(--ai-secondary)] animate-pulse"></span> </h1> <p className="text-gray-600">选择以下场景，体验人工智能如何解决实际业务问题</p> <div className="h-1 w-24 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-accent)] mt-4"></div> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {services.map((service, index) => ( <Card src/components/Card.tsx
@@ -13,23 +13,25 @@ const Card = ({ title, description, imageUrl, onClick }: CardProps) => { return ( <motion.div whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02, boxShadow: '0 10px 25px -5px rgba(0, 184, 212, 0.1), 0 10px 10px -5px rgba(0, 184, 212, 0.05)' }} whileTap={{ scale: 0.98 }} className="bg-white rounded-xl shadow-lg overflow-hidden cursor-pointer" className="bg-white backdrop-blur-sm bg-opacity-90 rounded-xl border border-[var(--ai-secondary)] border-opacity-20 shadow-md overflow-hidden cursor-pointer transition-all" onClick={onClick} > <div className="relative h-48"> <div className="relative h-48 overflow-hidden"> <div className="absolute inset-0 bg-gradient-to-tr from-[var(--ai-primary)] to-transparent opacity-10 z-0"></div> <Image src={imageUrl} alt={title} fill className="object-contain p-4" className="object-contain p-4 z-10" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> <div className="p-4"> <h3 className="text-lg font-semibold text-[#2F3C7E] mb-2">{title}</h3> <div className="p-5 border-t border-[var(--ai-secondary)] border-opacity-10"> <h3 className="text-lg font-semibold text-[var(--ai-primary)] mb-2">{title}</h3> <p className="text-gray-600 text-sm">{description}</p> <div className="mt-4 h-1 w-16 bg-gradient-to-r from-[var(--ai-secondary)] to-[var(--ai-highlight)]"></div> </div> </motion.div> ); src/components/layout/Navbar.tsx
@@ -2,77 +2,203 @@ import Link from 'next/link'; import Image from 'next/image'; import { useState } from 'react'; import { useState, useEffect } from 'react'; const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [scrolled, setScrolled] = useState(false); const [activeMenu, setActiveMenu] = useState(''); // 监听滚动事件，为导航栏添加滚动效果 useEffect(() => { const handleScroll = () => { if (window.scrollY > 10) { setScrolled(true); } else { setScrolled(false); } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ( <nav className="fixed top-0 left-0 w-full bg-[#2F3C7E] text-white z-50"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex items-center justify-between h-16"> {/* Logo */} <div className="flex-shrink-0"> <nav className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${ scrolled ? 'bg-gradient-to-r from-[#1E2B63]/95 to-[#0A1033]/95 backdrop-blur-md shadow-lg py-2' : 'bg-gradient-to-r from-[#1E2B63] to-[#0A1033] py-2' }`} > <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15"> <div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div> <div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div> </div> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> <div className="flex items-center justify-between"> {/* Logo区域 */} <div className="flex-shrink-0 relative z-10 group"> <Link href="/" className="flex items-center"> <div className="w-8 h-8 bg-[#e1c7f1] rounded-lg flex items-center justify-center"> <span className="text-[#2F3C7E] text-sm font-bold">帷</span> {/* Logo主体 */} <div className="flex items-center"> <div className="relative w-11 h-11"> {/* 基础Logo背景 */} <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-[#1E2B63] to-[#131C41] shadow-inner"></div> {/* 发光圆环 - 闪烁效果 */} <div className="absolute inset-0 rounded-full border-[1.5px] border-[#88dbff] animate-logo-pulse"></div> {/* Logo图片 */} <Image src="/images/logo.jpg" alt="帷幄君成Logo" width={44} height={44} className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] h-[85%] rounded-full object-cover z-10" priority /> </div> {/* 公司名称 */} <div className="ml-3 relative"> <h1 className="text-xl font-bold text-white tracking-wide relative"> 帷幄君成 <span className="absolute -bottom-0.5 left-0 w-full h-[2px] bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF]"></span> </h1> </div> </div> <span className="ml-2 text-xl font-bold">帷幄君成</span> </Link> </div> {/* Desktop Menu */} {/* 中央装饰元素 */} <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2"> <div className="relative h-4 w-32"> <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"> <span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span> </div> <div className="absolute top-1/2 left-0 right-0 h-[1px]"> <div className="h-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div> </div> </div> </div> {/* 导航菜单 */} <div className="hidden md:flex items-center space-x-8"> <Link href="/platform" className="hover:text-[#FBEAEB]">数字员工平台</Link> <Link href="/chat" className="hover:text-[#FBEAEB]">聊天室</Link> <Link href="/training" className="hover:text-[#FBEAEB]">训练场</Link> <Link href="/platform" className="relative px-3 py-2 text-gray-100 text-sm font-medium" onMouseEnter={() => setActiveMenu('platform')} onMouseLeave={() => setActiveMenu('')} > <span className="relative z-10">数字员工平台</span> <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent transition-all duration-300 ${activeMenu === 'platform' ? 'w-full' : 'w-0'}`}></span> </Link> <Link href="/chat" className="relative px-3 py-2 text-gray-100 text-sm font-medium" onMouseEnter={() => setActiveMenu('chat')} onMouseLeave={() => setActiveMenu('')} > <span className="relative z-10">聊天室</span> <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent transition-all duration-300 ${activeMenu === 'chat' ? 'w-full' : 'w-0'}`}></span> </Link> <Link href="/training" className="relative px-3 py-2 text-gray-100 text-sm font-medium" onMouseEnter={() => setActiveMenu('training')} onMouseLeave={() => setActiveMenu('')} > <span className="relative z-10">训练场</span> <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent transition-all duration-300 ${activeMenu === 'training' ? 'w-full' : 'w-0'}`}></span> </Link> {/* 登录按钮 */} <div className="relative group ml-6"> <button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2 rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)] hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300"> <span className="relative z-10">登录</span> <div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> </button> </div> </div> {/* Login Button */} <div className="hidden md:flex items-center"> <button className="bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full"> 登录 </button> </div> {/* Mobile Menu Button */} {/* 移动端菜单按钮 */} <div className="md:hidden"> <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-[#FBEAEB]" className="relative w-10 h-10 flex items-center justify-center focus:outline-none" aria-label="Toggle navigation menu" > <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" > {isMenuOpen ? ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /> ) : ( <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" /> )} </svg> <div className="relative"> <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 transform ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span> <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 mt-1 ${isMenuOpen ? 'opacity-0' : ''}`}></span> <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 mt-1 transform ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span> </div> </button> </div> </div> </div> {/* Mobile Menu */} {isMenuOpen && ( <div className="md:hidden"> <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <Link href="/platform" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">数字员工平台</Link> <Link href="/chat" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">聊天室</Link> <Link href="/training" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">训练场</Link> <button className="w-full mt-4 bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full"> {/* 移动端菜单 */} <div className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${ isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0' }`} > <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] border-t border-[#6ADBFF]/10"> <Link href="/platform" className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200" > 数字员工平台 </Link> <Link href="/chat" className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200" > 聊天室 </Link> <Link href="/training" className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200" > 训练场 </Link> <div className="pt-3 pb-1"> <button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190] text-white font-medium px-6 py-2 rounded-md"> 登录 </button> </div> </div> )} </div> </nav> ); }; export default Navbar; export default Navbar; // 添加到CSS文件中的全局样式 // .hover:shadow-glow:hover { // box-shadow: 0 0 15px rgba(255, 65, 108, 0.5); // }
