From 4cdcafa01ce783955156cdc3b6b50b26a4f9a327 Mon Sep 17 00:00:00 2001 From: jeremygan2021 Date: Fri, 13 Feb 2026 21:48:12 +0800 Subject: [PATCH] test --- src/App.css | 106 +++++++++++++++++++------------ src/components/CaseSection.js | 7 +- src/components/ProductSection.js | 19 +++++- 3 files changed, 87 insertions(+), 45 deletions(-) diff --git a/src/App.css b/src/App.css index 2f247b7..9d818d3 100644 --- a/src/App.css +++ b/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; + } } /* 小屏幕设备额外优化 */ diff --git a/src/components/CaseSection.js b/src/components/CaseSection.js index 61d2cbf..97b60aa 100644 --- a/src/components/CaseSection.js +++ b/src/components/CaseSection.js @@ -12,7 +12,7 @@ const CaseSection = ({ isActive }) => { category: '餐饮场景', description: '定制小盖3D立体IP茶宠硬件，搭载声识WiFi语音交互与2寸显示屏，实现语音问答点餐、多语言支持与菜品推荐。', results: ['兼顾情绪价值与实用价值', '硬件成本低至200元/个', '实现“交互-解决-沉淀”闭环'], - image: '�', + image: '☕', technologies: ['声识WiFi语音交互', '3D打印IP', '硬件电量管理'] }, { @@ -42,7 +42,7 @@ const CaseSection = ({ isActive }) => { category: '政务场景', description: '定制政务人偶硬件，搭载麦克风与显示屏，实现直接语音唤醒与服务器直连，简化政务查询操作。', results: ['对老年人友好', '短询问链路响应快', '支持扫码通话/软件访问'], - image: '�️', + 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'} > - 查看详细案例 + 加入量迹商城 diff --git a/src/components/ProductSection.js b/src/components/ProductSection.js index b2e6d15..cb5da63 100644 --- a/src/components/ProductSection.js +++ b/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'; + }} > - 了解更多 + logo + 量迹商城
→