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';
+ }}
>
- 了解更多
+
+ 量迹商城