test
This commit is contained in:
jeremygan2021
413
src/App.css
413
src/App.css
@@ -45,6 +45,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
body, html {
|
||||
@@ -54,6 +55,8 @@ body, html {
|
||||
color: var(--text-primary);
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: anywhere;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* 移动端优化 */
|
||||
@@ -518,7 +521,7 @@ body, html {
|
||||
|
||||
.quote-line {
|
||||
width: 3px;
|
||||
height: 80px;
|
||||
height: 60px;
|
||||
background: var(--primary-color);
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.5rem;
|
||||
@@ -1032,6 +1035,314 @@ body, html {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* 团队滑动组件 - 科技风 */
|
||||
.team-slider {
|
||||
width: 100%;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.team-slider-viewport {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1040px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.team-slider-track {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.team-card {
|
||||
position: relative;
|
||||
width: 320px;
|
||||
min-width: 320px;
|
||||
height: 420px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 30px rgba(0, 245, 212, 0.12);
|
||||
backdrop-filter: blur(14px);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
border-color: rgba(0, 245, 212, 0.5);
|
||||
box-shadow: 0 14px 40px rgba(0, 245, 212, 0.25);
|
||||
}
|
||||
|
||||
/* 背景网格与扫描线增强科技感 */
|
||||
.card-bg-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(rgba(0, 245, 212, 0.08) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(0, 245, 212, 0.08) 1px, transparent 1px);
|
||||
background-size: 22px 22px, 22px 22px;
|
||||
opacity: 0.35;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-scanline {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -100%;
|
||||
height: 50%;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 245, 212, 0) 0%,
|
||||
rgba(0, 245, 212, 0.12) 50%,
|
||||
rgba(0, 245, 212, 0) 100%
|
||||
);
|
||||
filter: blur(1px);
|
||||
animation: scan-move 5s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes scan-move {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(300%); }
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
inset: -30% -30% auto -30%;
|
||||
height: 60%;
|
||||
background: radial-gradient(circle at 50% 50%, rgba(0, 245, 212, 0.18), transparent 60%);
|
||||
filter: blur(18px);
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.member-photo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 64%;
|
||||
object-fit: contain;
|
||||
object-position: 50% 10%;
|
||||
background: radial-gradient(circle at 50% 20%, rgba(0, 245, 212, 0.06), rgba(5,10,20,0.6)), rgba(5,10,20,0.6);
|
||||
opacity: 0.98;
|
||||
}
|
||||
|
||||
.member-info {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 1.2rem 1.2rem 1.4rem 1.2rem;
|
||||
background: linear-gradient(to top, rgba(5, 10, 20, 0.85), rgba(5, 10, 20, 0.2));
|
||||
}
|
||||
|
||||
.member-name {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.member-role {
|
||||
margin-top: 0.2rem;
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.member-bio-mini {
|
||||
margin-top: 0.6rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.92rem;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-clamp: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-smooth);
|
||||
z-index: 2;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.slider-btn:hover {
|
||||
border-color: rgba(0, 245, 212, 0.6);
|
||||
background: rgba(0, 245, 212, 0.12);
|
||||
box-shadow: 0 6px 20px rgba(0, 245, 212, 0.25);
|
||||
}
|
||||
|
||||
.slider-btn.prev { left: -10px; }
|
||||
.slider-btn.next { right: -10px; }
|
||||
|
||||
.slider-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -10px;
|
||||
}
|
||||
|
||||
.slider-dots .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.slider-dots .dot.active {
|
||||
background: var(--primary-color);
|
||||
box-shadow: 0 0 12px rgba(0, 245, 212, 0.7);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* 详情面板与遮罩 */
|
||||
.team-detail-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #000;
|
||||
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);
|
||||
z-index: 990;
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
padding: 1.2rem;
|
||||
color: var(--text-primary);
|
||||
max-height: calc(100vh - 96px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-close {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 8px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
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;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.detail-brand {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: contain;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.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-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.detail-role {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.detail-body p {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.detail-scroller {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
padding-right: 6px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
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;
|
||||
}
|
||||
.detail-card h5 {
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.detail-list {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.detail-list li {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.chip-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.chip {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(0, 245, 212, 0.12);
|
||||
color: var(--primary-color);
|
||||
border: 1px solid rgba(0, 245, 212, 0.3);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.team-section {
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
@@ -1950,6 +2261,7 @@ body, html {
|
||||
.hero-left,
|
||||
.product-content,
|
||||
.team-content {
|
||||
top: 80%;
|
||||
max-width: 100%;
|
||||
order: 1;
|
||||
display: flex;
|
||||
@@ -1963,7 +2275,8 @@ body, html {
|
||||
.product-visual,
|
||||
.team-visual {
|
||||
order: 2;
|
||||
margin-top: 2rem;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.hero-main-title,
|
||||
@@ -1972,29 +2285,36 @@ body, html {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: -3rem;
|
||||
}
|
||||
|
||||
/* 移动端下移主标题 */
|
||||
.hero-main-title {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-quote,
|
||||
.product-quote,
|
||||
.product-quote{
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
margin-top: 3.7rem;
|
||||
}
|
||||
|
||||
.team-quote {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
align-items: center;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 4.7rem;
|
||||
}
|
||||
|
||||
.quote-line {
|
||||
@@ -2045,6 +2365,17 @@ body, html {
|
||||
right: -40px;
|
||||
}
|
||||
|
||||
/* 团队页：移动端隐藏右侧可视容器，避免占位 */
|
||||
.team-visual-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 同时移除父容器的固定高度与外边距，防止留白 */
|
||||
.team-visual {
|
||||
height: auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.hero-progress,
|
||||
.product-progress,
|
||||
.team-progress {
|
||||
@@ -2065,6 +2396,42 @@ body, html {
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* 响应式：团队滑动卡片 */
|
||||
.team-slider-viewport {
|
||||
max-width: 92vw;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.team-card {
|
||||
width: 84vw;
|
||||
min-width: 84vw;
|
||||
height: auto;
|
||||
aspect-ratio: 3 / 4;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.member-photo {
|
||||
height: 65%;
|
||||
object-fit: contain;
|
||||
object-position: 50% 12%;
|
||||
}
|
||||
.slider-btn.prev { left: 6px; }
|
||||
.slider-btn.next { right: 6px; }
|
||||
|
||||
/* 移动端：详情底部弹层 */
|
||||
.team-detail-panel {
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(0);
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
width: 100vw;
|
||||
max-width: 100vw;
|
||||
border-radius: 18px 18px 0 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px);
|
||||
max-height: 85vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.team-detail-mask { opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* 小屏幕设备额外优化 */
|
||||
@@ -2088,16 +2455,19 @@ body, html {
|
||||
}
|
||||
|
||||
.hero-main-title,
|
||||
.product-main-title,
|
||||
.product-main-title{
|
||||
font-size: 2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.team-main-title {
|
||||
font-size: 2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: -5rem;
|
||||
}
|
||||
|
||||
/* 超小屏进一步下移主标题 */
|
||||
.hero-main-title {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
/* 保持主标题在超小屏的统一样式，避免重复覆盖 */
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.3rem;
|
||||
@@ -2114,18 +2484,21 @@ body, html {
|
||||
.visual-container,
|
||||
.team-visual-container {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
/* 限制详情头像高度，避免占满面板导致无可滚动空间 */
|
||||
.detail-portrait {
|
||||
max-height: 36vh;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.section-title .subtitle {
|
||||
opacity: 0.5;
|
||||
margin-top: 0.2rem;
|
||||
}
|
||||
|
||||
|
||||
.hero-main-title {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
/* 移除重复的 hero-main-title 顶部外边距设置，统一用上方规则控制 */
|
||||
|
||||
.cube-main {
|
||||
width: 100px;
|
||||
@@ -2189,4 +2562,8 @@ body, html {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
/* 超小屏：团队滑动卡片 */
|
||||
.team-slider-viewport { max-width: 94vw; }
|
||||
.team-card { width: 88vw; min-width: 88vw; aspect-ratio: 3 / 4; }
|
||||
.member-photo { height: 66%; object-position: 50% 14%; }
|
||||
}
|
||||
|
||||
20
src/App.js
20
src/App.js
@@ -14,6 +14,15 @@ const App = () => {
|
||||
const [isScrolling, setIsScrolling] = useState(false);
|
||||
const isScrollingRef = useRef(false);
|
||||
const currentSectionRef = useRef(0);
|
||||
const isTouchInDetailPanelRef = useRef(false);
|
||||
|
||||
const isEventFromDetailPanel = (target) => {
|
||||
if (!target) return false;
|
||||
if (typeof target.closest === 'function') {
|
||||
return !!(target.closest('.team-detail-panel') || target.closest('.detail-scroller'));
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
@@ -40,6 +49,9 @@ const App = () => {
|
||||
let touchEndY = 0;
|
||||
|
||||
const handleWheel = (e) => {
|
||||
if (isEventFromDetailPanel(e.target)) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
// 如果正在滚动中，忽略新的滚动事件
|
||||
@@ -78,14 +90,22 @@ const App = () => {
|
||||
|
||||
// 触摸事件处理
|
||||
const handleTouchStart = (e) => {
|
||||
isTouchInDetailPanelRef.current = isEventFromDetailPanel(e.target);
|
||||
touchStartY = e.touches[0].clientY;
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (isTouchInDetailPanelRef.current) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleTouchEnd = (e) => {
|
||||
if (isTouchInDetailPanelRef.current) {
|
||||
isTouchInDetailPanelRef.current = false;
|
||||
return;
|
||||
}
|
||||
if (isScrollingRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,105 @@
|
||||
import React from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
const TeamSection = ({ isActive }) => {
|
||||
const members = useMemo(() => ([
|
||||
{
|
||||
id: 'agan',
|
||||
name: '阿甘',
|
||||
role: '创始人',
|
||||
bio: '从0到1推动产品与战略落地，专注AI与工业融合。',
|
||||
avatar: '/team_image/agan.png',
|
||||
portrait: '/team_image/agan.png',
|
||||
brandLogo: '/asset/logo-bai.png',
|
||||
education: ['本科（待补充）', '硕士（待补充）'],
|
||||
experience: [
|
||||
'负责公司整体战略与产品路线',
|
||||
'推动跨部门协作与商业落地'
|
||||
],
|
||||
skills: ['战略规划', '产品设计', 'AI应用', '工业融合']
|
||||
},
|
||||
{
|
||||
id: 'liwei',
|
||||
name: '立伟',
|
||||
role: '市场运营总监',
|
||||
bio: '增长策略与品牌叙事负责人，连接产品与客户价值。',
|
||||
avatar: '/team_image/liwei.png',
|
||||
portrait: '/team_image/liwei.png',
|
||||
brandLogo: '/asset/logo-bai.png',
|
||||
education: ['本科（待补充）'],
|
||||
experience: [
|
||||
'规划年度增长与渠道策略',
|
||||
'打造品牌故事与市场活动'
|
||||
],
|
||||
skills: ['增长策略', '品牌建设', '整合营销', '渠道拓展']
|
||||
},
|
||||
{
|
||||
id: 'shuangji',
|
||||
name: '爽吉',
|
||||
role: '硬件工程师 & 硬件部门主管',
|
||||
bio: '负责高可靠硬件架构设计与产线可制造性优化。',
|
||||
avatar: '/team_image/shuangji.png',
|
||||
portrait: '/team_image/shuangji.png',
|
||||
brandLogo: '/asset/logo-bai.png',
|
||||
education: ['本科（待补充）'],
|
||||
experience: [
|
||||
'主导多款硬件平台架构设计',
|
||||
'建立DFM/DFT标准并提升良率'
|
||||
],
|
||||
skills: ['硬件架构', '嵌入式', 'DFM/DFT', '可靠性']
|
||||
},
|
||||
{
|
||||
id: 'laoxv',
|
||||
name: '老许',
|
||||
role: '工业设计工程师 & 结构件工程师',
|
||||
bio: '负责高可靠硬件架构设计与产线可制造性优化。',
|
||||
avatar: '/team_image/laoxv.png',
|
||||
portrait: '/team_image/laoxv.png',
|
||||
brandLogo: '/asset/logo-bai.png',
|
||||
education: ['本科（待补充）'],
|
||||
experience: [
|
||||
'主导多款硬件平台架构设计',
|
||||
'建立DFM/DFT标准并提升良率'
|
||||
],
|
||||
skills: ['硬件架构', '嵌入式', 'DFM/DFT', '可靠性']
|
||||
}
|
||||
|
||||
]), []);
|
||||
|
||||
const [index, setIndex] = useState(0);
|
||||
const trackRef = useRef(null);
|
||||
const firstCardRef = useRef(null);
|
||||
const [slideStep, setSlideStep] = useState(0);
|
||||
const CARD_GAP = 24; // 与样式中的间距保持一致
|
||||
const [selected, setSelected] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const measure = () => {
|
||||
if (!firstCardRef.current) return;
|
||||
const rect = firstCardRef.current.getBoundingClientRect();
|
||||
const step = Math.round(rect.width + CARD_GAP);
|
||||
setSlideStep(step);
|
||||
};
|
||||
measure();
|
||||
window.addEventListener('resize', measure);
|
||||
return () => window.removeEventListener('resize', measure);
|
||||
}, []);
|
||||
|
||||
const goPrev = () => setIndex((prev) => (prev - 1 + members.length) % members.length);
|
||||
const goNext = () => setIndex((prev) => (prev + 1) % members.length);
|
||||
|
||||
const handleDragEnd = (_e, info) => {
|
||||
const threshold = 80;
|
||||
if (info.offset.x < -threshold) {
|
||||
goNext();
|
||||
} else if (info.offset.x > threshold) {
|
||||
goPrev();
|
||||
}
|
||||
};
|
||||
|
||||
const openDetail = (member) => setSelected(member);
|
||||
const closeDetail = () => setSelected(null);
|
||||
|
||||
return (
|
||||
<div className="team-section-minimal">
|
||||
<motion.div
|
||||
@@ -16,11 +114,11 @@ const TeamSection = ({ isActive }) => {
|
||||
animate={isActive ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
>
|
||||
团队专业
|
||||
量迹AI
|
||||
<br />
|
||||
<span className="highlight-text">知识</span>
|
||||
<span className="highlight-text">2025</span>
|
||||
<br />
|
||||
与经验
|
||||
Team
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
@@ -74,6 +172,132 @@ const TeamSection = ({ isActive }) => {
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 科技感人员滑动卡片 */}
|
||||
<motion.div
|
||||
className="team-slider"
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isActive ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.9, delay: 0.6 }}
|
||||
>
|
||||
<div className="team-slider-viewport">
|
||||
<motion.div
|
||||
ref={trackRef}
|
||||
className="team-slider-track"
|
||||
drag="x"
|
||||
dragConstraints={{ left: 0, right: 0 }}
|
||||
onDragEnd={handleDragEnd}
|
||||
animate={{ x: -index * slideStep }}
|
||||
transition={{ type: 'spring', stiffness: 120, damping: 18 }}
|
||||
>
|
||||
{members.map((m, i) => (
|
||||
<div
|
||||
key={m.id}
|
||||
ref={i === 0 ? firstCardRef : undefined}
|
||||
className="team-card"
|
||||
onClick={() => openDetail(m)}
|
||||
>
|
||||
<div className="card-bg-grid" />
|
||||
<div className="card-scanline" />
|
||||
<div className="card-glow" />
|
||||
<img src={m.avatar} alt={m.name} className="member-photo" />
|
||||
<div className="member-info">
|
||||
<div className="member-name">{m.name}</div>
|
||||
<div className="member-role">{m.role}</div>
|
||||
<div className="member-bio-mini">{m.bio}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
<button className="slider-btn prev" onClick={goPrev} aria-label="prev">
|
||||
<span>←</span>
|
||||
</button>
|
||||
<button className="slider-btn next" onClick={goNext} aria-label="next">
|
||||
<span>→</span>
|
||||
</button>
|
||||
<div className="slider-dots">
|
||||
{members.map((m, i) => (
|
||||
<button
|
||||
key={m.id}
|
||||
className={`dot ${i === index ? 'active' : ''}`}
|
||||
onClick={() => setIndex(i)}
|
||||
aria-label={`go-to-${m.id}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 详情面板（桌面端右侧 / 移动端底部弹层） */}
|
||||
<AnimatePresence>
|
||||
{selected && (
|
||||
<>
|
||||
<motion.div
|
||||
className="team-detail-mask"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 0.6 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
onClick={closeDetail}
|
||||
/>
|
||||
<motion.div
|
||||
className="team-detail-panel"
|
||||
initial={{ opacity: 0, x: 40 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 40 }}
|
||||
transition={{ type: 'spring', stiffness: 180, damping: 20 }}
|
||||
>
|
||||
<button className="detail-close" onClick={closeDetail} aria-label="close">×</button>
|
||||
<div className="detail-header">
|
||||
<img src={selected.brandLogo} alt="brand" className="detail-brand" />
|
||||
<div className="detail-meta">
|
||||
<div className="detail-name">{selected.name}</div>
|
||||
<div className="detail-role">{selected.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src={selected.portrait || selected.avatar} alt={selected.name} className="detail-portrait" />
|
||||
<div className="detail-body detail-scroller">
|
||||
{selected.bio && (
|
||||
<div className="detail-card">
|
||||
<h5>简介</h5>
|
||||
<p>{selected.bio}</p>
|
||||
</div>
|
||||
)}
|
||||
{selected.education && selected.education.length > 0 && (
|
||||
<div className="detail-card">
|
||||
<h5>毕业院校</h5>
|
||||
<ul className="detail-list">
|
||||
{selected.education.map((e, i) => (
|
||||
<li key={i}>{e}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{selected.experience && selected.experience.length > 0 && (
|
||||
<div className="detail-card">
|
||||
<h5>过往经历</h5>
|
||||
<ul className="detail-list">
|
||||
{selected.experience.map((e, i) => (
|
||||
<li key={i}>{e}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{selected.skills && selected.skills.length > 0 && (
|
||||
<div className="detail-card">
|
||||
<h5>擅长技能</h5>
|
||||
<div className="chip-grid">
|
||||
{selected.skills.map((s, i) => (
|
||||
<span className="chip" key={i}>{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* 进度指示器 */}
|
||||
<motion.div
|
||||
className="team-progress"
|
||||
|
||||
Reference in New Issue
Block a user