From 9b53072baa4de3635b664390f2351940fc7190ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=BD=98?=
 <16176807+xaioppan@user.noreply.gitee.com>
Date: Thu, 28 May 2026 17:34:34 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E7=AB=99=E6=90=AD=E5=BB=BA=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=AC=AC=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/components/Navbar.jsx       | 53 +++++++++++++++++++------
 website/src/components/RosePieChart.jsx | 51 ++++++++++--------------
 website/src/pages/Home.jsx              | 26 +++++++-----
 website/src/pages/ProductPage.jsx       |  2 +-
 4 files changed, 79 insertions(+), 53 deletions(-)

diff --git a/website/src/components/Navbar.jsx b/website/src/components/Navbar.jsx
index 4e0777f..6d32854 100644
--- a/website/src/components/Navbar.jsx
+++ b/website/src/components/Navbar.jsx
@@ -27,10 +27,39 @@ export default function Navbar() {
   return (
     <>
       <style>{`
-        .nav-active-tab { 
+        .nav-active-tab {
           margin-top: -60px;
-          padding-top: calc(2.5rem + 25px);
-          padding-bottom: 12px;
+          padding-top: calc(2.5rem + 35px);
+          padding-bottom: 16px;
+          position: relative;
+        }
+        .nav-active-tab::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 10%;
+          right: 10%;
+          height: 3px;
+          background: linear-gradient(90deg, transparent, #3b82f6, transparent);
+          border-radius: 2px;
+          box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), 0 0 24px rgba(59, 130, 246, 0.2);
+        }
+        .nav-item {
+          position: relative;
+        }
+        .nav-item::before {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 10%;
+          right: 10%;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+          opacity: 0;
+          transition: opacity 0.3s;
+        }
+        .nav-item:hover::before {
+          opacity: 1;
         }
       `}</style>
       <nav
@@ -38,7 +67,7 @@ export default function Navbar() {
         style={!scrolled ? undefined : undefined}
       >
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex items-center h-[70px] overflow-visible">
+          <div className="flex items-center h-[80px] overflow-visible">
 
             {/* Left: Logo + Nav */}
             <div className="flex items-center gap-2 shrink-0 overflow-visible">
@@ -46,20 +75,20 @@ export default function Navbar() {
                 <img src="/favicon.ico" alt="讯驰" className="w-[100px] h-auto" />
                 <div className="flex flex-col leading-tight">
                   <span className={`text-xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
-                  <span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/40 transition-colors duration-500`}>XUNCHI TECH</span>
+                  <span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/80 transition-colors duration-500`}>XUNCHI TECH</span>
                 </div>
               </Link>
 
               <div className="hidden lg:flex items-center gap-1 transition-colors duration-500 overflow-visible">
-                <div className="w-px h-6 bg-white mr-2" />
+                <div className="w-px h-7 bg-white/30 mr-3" />
                 {navItems.map((item) => (
                   <Link
                     key={item.to}
                     to={item.to}
-                    className={`relative px-5 font-medium rounded-sm transition-all duration-300 ${
+                    className={`relative px-4 font-medium rounded-sm transition-all duration-300 nav-item ${
                       location.pathname === item.to
-                        ? 'nav-active-tab text-white font-semibold bg-[#043b8f] text-[18px]'
-                        : 'text-white hover:text-white hover:bg-white/10 text-[14px] py-3'
+                        ? 'nav-active-tab text-white font-semibold text-base'
+                        : 'text-white hover:text-white text-sm py-3'
                     }`}
                   >
                     {item.label}
@@ -74,7 +103,7 @@ export default function Navbar() {
             <div className={`hidden lg:flex items-center shrink-0 transition-colors duration-500`}>
               <a
                 href="tel:07713864294"
-                className="flex items-center gap-1.5 text-[13px] font-medium text-white hover:text-white transition-all duration-300"
+                className="flex items-center gap-1.5 text-sm font-medium text-white hover:text-white transition-all duration-300"
               >
                 <Phone className="w-3.5 h-3.5" />
                 0771-3864294
@@ -103,7 +132,7 @@ export default function Navbar() {
               <Link
                 key={item.to}
                 to={item.to}
-                className={`block px-4 py-3 rounded-xl text-[14px] font-medium transition-colors ${
+                className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
                   location.pathname === item.to
                     ? 'text-white bg-white/[0.06]'
                     : 'text-white/50 hover:bg-white/[0.04]'
@@ -113,7 +142,7 @@ export default function Navbar() {
               </Link>
             ))}
             <div className="pt-3 mt-2 border-t border-white/[0.06]">
-              <a href="tel:07713864294" className="flex items-center gap-2 px-4 py-3 text-[#004ec4] text-[14px] font-medium">
+              <a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#043b8f] text-base font-medium">
                 <Phone className="w-4 h-4" />
                 0771-3864294
               </a>
diff --git a/website/src/components/RosePieChart.jsx b/website/src/components/RosePieChart.jsx
index ac40d4d..3f858fd 100644
--- a/website/src/components/RosePieChart.jsx
+++ b/website/src/components/RosePieChart.jsx
@@ -8,11 +8,8 @@ const chartData = [
   { value: 25, name: '商咖五级进阶' },
 ];
 
-const color = '#004ec4';
+const color = '#043b8f';
 
-// ECharts startAngle=90, 各扇形视觉中心 (0°=12点, 顺时针)
-// slice0: 1:30(45°)  slice1: 4:30(135°)  slice2: 7:30(225°)  slice3: 10:30(315°)
-// 要让选中扇形中心对准右侧90°(3点方向), CSS rotate需要的角度
 const rotationNeeded = [45, -45, -135, -225];
 
 function normalizeAngle(a) {
@@ -34,7 +31,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
   const rotationRef = useRef(0);
   const [rotation, setRotation] = useState(0);
 
-  // 初始化图表（只执行一次）
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -43,10 +39,10 @@ export default function RosePieChart({ onSelect, activeIndex }) {
     chartRef.current.setOption({
       tooltip: {
         trigger: 'item',
-        backgroundColor: '#fff',
-        borderColor: '#e2e8f0',
+        backgroundColor: 'rgba(10,22,40,0.95)',
+        borderColor: 'rgba(59,130,246,0.3)',
         borderWidth: 1,
-        textStyle: { color: '#334155', fontSize: 13 },
+        textStyle: { color: '#e2e8f0', fontSize: 13 },
         formatter: '{b}',
       },
       series: [{
@@ -54,35 +50,34 @@ export default function RosePieChart({ onSelect, activeIndex }) {
         radius: ['20%', '68%'],
         center: ['50%', '50%'],
         startAngle: 90,
-        padAngle: 2,
-        itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 3 },
+        padAngle: 3,
+        itemStyle: { borderRadius: 6, borderWidth: 0 },
         label: {
           show: true,
           position: 'inside',
-          color: '#004ec4',
-          fontSize: 16,
+          color: '#e2e8f0',
+          fontSize: 15,
           fontWeight: 'bold',
           rotate: 'tangential',
           formatter: '{b}',
         },
         emphasis: {
-          scaleSize: 10,
+          scaleSize: 12,
           itemStyle: {
-            color: '#0088cc',
-            shadowBlur: 30,
-            shadowColor: 'rgba(0,78,196,0.35)',
-            borderColor: '#fff',
-            borderWidth: 4,
+            shadowBlur: 40,
+            shadowColor: 'rgba(59,130,246,0.5)',
+            borderColor: 'rgba(59,130,246,0.6)',
+            borderWidth: 0,
           },
-          label: { fontSize: 15, fontWeight: 'bold', color: '#0f172a' },
+          label: { fontSize: 14, fontWeight: 'bold', color: '#fff' },
         },
-        data: chartData.map(d => ({
+        data: chartData.map((d, i) => ({
           ...d,
-          itemStyle: { color, opacity: 1, borderRadius: 4, borderColor: '#fff', borderWidth: 3 },
+          itemStyle: { color, opacity: 1, borderRadius: 6, borderWidth: 0 },
         })),
         animationType: 'scale',
         animationEasing: 'elasticOut',
-        animationDuration: 1000,
+        animationDuration: 1200,
       }],
     });
 
@@ -96,7 +91,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
     };
   }, []);
 
-  // 更新颜色高亮 + CSS旋转
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart) return;
@@ -112,20 +106,19 @@ export default function RosePieChart({ onSelect, activeIndex }) {
       series: [{
         data: chartData.map((d, i) => ({
           ...d,
-          label: { color: isActive && activeIndex === i ? '#fff' : '#004ec4' },
+          label: { color: isActive && activeIndex === i ? '#fff' : '#043b8f' },
           itemStyle: {
-            color: isActive && activeIndex !== i ? '#dfedf8' : color,
+            color: isActive && activeIndex !== i ? color + '30' : color,
             opacity: 1,
-            borderRadius: 4,
-            borderColor: '#fff',
-            borderWidth: 3,
+            borderRadius: 6,
+            borderColor: 'rgba(15,23,42,0.8)',
+            borderWidth: 0,
           },
         })),
       }],
     });
   }, [activeIndex]);
 
-  // 点击事件
   useEffect(() => {
     const chart = chartRef.current;
     if (!chart) return;
diff --git a/website/src/pages/Home.jsx b/website/src/pages/Home.jsx
index 466c27b..c8ceb04 100644
--- a/website/src/pages/Home.jsx
+++ b/website/src/pages/Home.jsx
@@ -203,14 +203,15 @@ export default function Home() {
                   const idx = activeCapability !== null ? activeCapability : i
                   return (
                     <div key={idx} className={`relative p-8 rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden ${activeCapability === idx
-                      ? 'bg-white border border-[#004ec4]/15 shadow-[0_4px_24px_rgba(0,78,196,0.08)]'
+                      ? 'bg-white border border-[#043b8f]/20 shadow-[0_4px_24px_rgba(4,59,199,0.12)]'
                       : 'hover:bg-gray-50/80 border border-gray-100'
                       }`} onClick={() => setActiveCapability(idx)}>
                       {activeCapability === idx && (
                         <div className="absolute top-0 left-0 right-0 h-[2px]"
                           style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
                       )}
-                      <div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.02] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      <div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                       <div className="flex items-center gap-3 mb-3">
                         <span className={`flex items-center justify-center w-7 h-7 rounded-md text-[11px] font-black transition-colors duration-300 ${activeCapability === idx
                           ? 'bg-[#043b8f]/[0.08] text-[#043b8f]'
@@ -227,14 +228,13 @@ export default function Home() {
                         }`}>{c.sub}</p>
                       <p className="text-base text-[#334155] leading-[2] mt-4">{c.desc}</p>
                       {c.tip && (
-                        <div className="mt-5 flex flex-wrap gap-2.5">
+                        <div className="mt-5 flex flex-wrap gap-2">
                           {c.tip.split('、').map((t, ti) => (
-                            <span key={ti} className={`relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 ${
+                            <span key={ti} className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all duration-200 ${
                               activeCapability === idx
-                                ? 'text-[#043b8f] bg-[#043b8f]/[0.06] border border-[#043b8f]/15'
-                                : 'text-[#94a3b8] bg-gray-50 border border-gray-100'
+                                ? 'text-[#043b8f] bg-[#043b8f]/[0.08]'
+                                : 'text-[#94a3b8] bg-gray-50'
                             }`}>
-                              <span className={`w-1 h-1 rounded-full mr-2 ${activeCapability === idx ? 'bg-[#043b8f]' : 'bg-[#94a3b8]/40'}`} />
                               {t}
                             </span>
                           ))}
@@ -392,17 +392,21 @@ export default function Home() {
               const Icon = card.icon
               return (
                 <ScrollReveal key={i} delay={i * 0.1}>
-                  <div className="group bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-300 hover:shadow-xl hover:shadow-blue-100/50 hover:-translate-y-1">
+                  <div className="group relative bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-500 hover:shadow-xl hover:shadow-[#043b8f]/5 hover:-translate-y-1 overflow-hidden">
+                    <div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                      style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
+                    <div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                    <div className="absolute bottom-0 left-0 w-14 h-14 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                     {/* 图标 */}
-                    <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#004ec4]/10 to-[#004ec4]/5 flex items-center justify-center mb-5 group-hover:from-[#004ec4]/20 group-hover:to-[#004ec4]/10 transition-all duration-300">
-                      <Icon className="w-8 h-8 text-[#004ec4]" />
+                    <div className="w-16 h-16 rounded-xl bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mb-5 group-hover:bg-[#043b8f]/10 transition-all duration-300">
+                      <Icon className="w-8 h-8 text-[#043b8f]" />
                     </div>
                     {/* 数字 */}
                     <div className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#0f172a] to-[#334155] mb-1">{card.count}</div>
                     {/* 标题 */}
                     <h3 className="text-lg font-bold text-[#0f172a] mb-3">{card.title}</h3>
                     {/* 分隔线 */}
-                    <div className="w-8 h-0.5 bg-gradient-to-r from-transparent via-[#004ec4]/30 to-transparent mb-3" />
+                    <div className="w-8 h-px bg-gradient-to-r from-transparent via-[#043b8f]/20 to-transparent mb-3" />
                     {/* 描述 */}
                     <p className="text-sm text-[#64748b] leading-relaxed">{card.desc}</p>
                   </div>
diff --git a/website/src/pages/ProductPage.jsx b/website/src/pages/ProductPage.jsx
index 17505e8..12131d6 100644
--- a/website/src/pages/ProductPage.jsx
+++ b/website/src/pages/ProductPage.jsx
@@ -79,7 +79,7 @@ export default function ProductPage() {
             </div>
 
             {product.tags && (
-              <div className="flex flex-wrap justify-center gap-4 mt-10">
+              <div className="flex flex-wrap items-center justify-center gap-3 mt-10">
                 {product.tags.map((tag, i) => (
                   <span key={i}
                     className="relative px-6 py-2 text-sm font-bold text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5"