test

src/App.css

@@ -1262,27 +1262,27 @@ body, html {
 .team-detail-mask {
   position: fixed;
   inset: 0;
-  background: #000;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
   z-index: 980;
 }
 /* //// / */
 .team-detail-panel {
   position: fixed;
-  right: 84px;
-  top: 10%;
-  transform: translateY(-50%);
-  width: min(420px, 40vw);
-  max-width: 92vw;
-  background: rgba(10, 15, 28, 0.9);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 16px;
-  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+  right: 0;
+  top: 0;
+  height: 100vh;
+  transform: none;
+  width: 500px;
+  max-width: 90vw;
+  background: rgba(10, 15, 28, 0.95);
+  border-left: 1px solid rgba(255,255,255,0.1);
+  box-shadow: -10px 0 40px rgba(0,0,0,0.5);
   z-index: 990;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  padding: 1.2rem;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  padding: 2.5rem;
   color: var(--text-primary);
-  max-height: calc(100vh - 96px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -1290,56 +1290,75 @@ body, html {
 
 .detail-close {
   position: absolute;
-  right: 10px;
-  top: 8px;
-  width: 32px;
-  height: 32px;
+  right: 20px;
+  top: 20px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   border: 1px solid rgba(255,255,255,0.2);
   background: rgba(255,255,255,0.06);
   color: var(--text-primary);
   cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+}
+
+.detail-close:hover {
+  background: rgba(255, 255, 255, 0.15);
+  transform: rotate(90deg);
 }
 
 .detail-header {
   display: flex;
   align-items: center;
-  gap: 12px;
-  margin-bottom: 0.8rem;
+  gap: 16px;
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .detail-brand {
-  width: 28px;
-  height: 28px;
+  width: 48px;
+  height: 48px;
   object-fit: contain;
-  opacity: 0.9;
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 12px;
 }
 
-.detail-portrait {
-  width: 100%;
-  height: auto;
-  object-fit: contain;
-  background: transparent;
-  margin: 6px 0 10px 0;
-}
-
-.detail-photo {
-  width: 64px;
-  height: 64px;
-  object-fit: contain;
-  border-radius: 10px;
-  background: rgba(255,255,255,0.06);
+.detail-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 
 .detail-name {
-  font-size: 1.2rem;
+  font-size: 1.8rem;
   font-weight: 700;
+  letter-spacing: 0.02em;
 }
 
 .detail-role {
   color: var(--primary-color);
   font-weight: 600;
-  margin-top: 2px;
+  font-size: 1rem;
+  opacity: 0.9;
+}
+
+.detail-portrait {
+  width: auto;
+  max-width: 100%;
+  max-height: 280px;
+  object-fit: contain;
+  background: transparent;
+  margin: 0 auto 2rem auto;
+  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
+  display: block;
 }
 
 .detail-body p {
@@ -1375,8 +1394,8 @@ body, html {
   background: rgba(255,255,255,0.04);
   border: 1px solid rgba(255,255,255,0.08);
   border-radius: 12px;
-  padding: 0.9rem 1rem;
-  margin-bottom: 0.8rem;
+  padding: 1.2rem;
+  margin-bottom: 1.2rem;
 }
 .detail-card h5 {
   font-size: 0.95rem;
@@ -2510,6 +2529,7 @@ body, html {
     transform: translateY(0);
     bottom: 0;
     top: auto;
+    height: auto;
     width: 100vw;
     max-width: 100vw;
     border-radius: 18px 18px 0 0;
@@ -2518,6 +2538,10 @@ body, html {
     overflow: hidden;
   }
   .team-detail-mask { opacity: 0.7; }
+  
+  .detail-portrait {
+    margin: 0 auto 1rem auto;
+  }
 }
 
 /* 小屏幕设备额外优化 */

src/components/CaseSection.js

@@ -12,7 +12,7 @@ const CaseSection = ({ isActive }) => {
       category: '餐饮场景',
       description: '定制小盖3D立体IP茶宠硬件，搭载声识WiFi语音交互与2寸显示屏，实现语音问答点餐、多语言支持与菜品推荐。',
       results: ['兼顾情绪价值与实用价值', '硬件成本低至200元/个', '实现“交互-解决-沉淀”闭环'],
-      image: '<EFBFBD>',
+      image: '☕',
       technologies: ['声识WiFi语音交互', '3D打印IP', '硬件电量管理']
     },
     {
@@ -42,7 +42,7 @@ const CaseSection = ({ isActive }) => {
       category: '政务场景',
       description: '定制政务人偶硬件，搭载麦克风与显示屏，实现直接语音唤醒与服务器直连，简化政务查询操作。',
       results: ['对老年人友好', '短询问链路响应快', '支持扫码通话/软件访问'],
-      image: '<EFBFBD>️',
+      image: '🏛',
       technologies: ['语音唤醒', '服务器直连', 'AI大模型']
     }
   ];
@@ -136,8 +136,9 @@ const CaseSection = ({ isActive }) => {
                 className="case-cta"
                 whileHover={{ scale: 1.05 }}
                 whileTap={{ scale: 0.95 }}
+                onClick={() => window.location.href = 'https://market.quant-speed.com'}
               >
-                查看详细案例
+                加入量迹商城
               </motion.button>
             </motion.div>
           </AnimatePresence>

src/components/ProductSection.js

@@ -245,8 +245,25 @@ const ProductSection = ({ isActive }) => {
             boxShadow: "0 10px 30px rgba(0, 245, 212, 0.3)"
           }}
           whileTap={{ scale: 0.95 }}
+          onClick={() => {
+            const urls = {
+              v3: 'https://market.quant-speed.com/product/2',
+              mini: 'https://market.quant-speed.com/product/1',
+              v2: 'https://market.quant-speed.com/product/3'
+            };
+            window.location.href = urls[modelKey] || 'https://market.quant-speed.com';
+          }}
         >
-          <span className="btn-text">了解更多</span>
+          <img 
+            src="/logo.svg" 
+            alt="logo" 
+            style={{ 
+              height: '20px', 
+              marginRight: '8px', 
+              filter: 'brightness(0) invert(1)' 
+            }} 
+          />
+          <span className="btn-text">量迹商城</span>
           <div className="btn-glow"></div>
           <div className="btn-arrow">→</div>
         </motion.button>