diff --git a/src/App.css b/src/App.css index 1b3414f..a02cef9 100644 --- a/src/App.css +++ b/src/App.css @@ -1332,6 +1332,7 @@ body, html { background: rgba(255, 255, 255, 0.05); padding: 8px; border-radius: 12px; + filter: brightness(0) invert(1); } .detail-meta { @@ -2023,10 +2024,53 @@ body, html { /* 移动端页面指示器优化 */ @media (max-width: 768px) { .section-indicators { - right: 1rem; - padding: 0.8rem 0.4rem; - gap: 0.8rem; - border-radius: 15px; + right: 1.5rem; + padding: 1.2rem 0.8rem; /* 放大容器 */ + gap: 1.5rem; /* 增加间距 */ + border-radius: 20px; + background: rgba(10, 15, 28, 0.8); + backdrop-filter: blur(16px); + } + + .indicator { + width: 16px; /* 放大圆点 */ + height: 16px; + } + + /* 移动端显示标签 */ + .indicator::after { + content: attr(title); + position: absolute; + right: 35px; /* 文字在圆点左侧 */ + top: 50%; + transform: translateY(-50%); + background: rgba(10, 15, 28, 0.9); + color: rgba(255, 255, 255, 0.7); + padding: 4px 10px; + border-radius: 6px; + font-size: 12px; + white-space: nowrap; + opacity: 0; /* 默认隐藏,保持界面清爽 */ + visibility: hidden; + transition: all 0.3s ease; + border: 1px solid rgba(255, 255, 255, 0.1); + pointer-events: none; + } + + /* 激活项始终显示标签 */ + .indicator.active::after { + opacity: 1; + visibility: visible; + color: var(--primary-color); + border-color: rgba(0, 245, 212, 0.3); + font-weight: 500; + } + + /* 触摸/点击指示器区域时显示所有标签,方便用户预览跳转 */ + .section-indicators:active .indicator::after, + .section-indicators:hover .indicator::after { + opacity: 1; + visibility: visible; } } diff --git a/src/App.js b/src/App.js index bbe86ba..b1ce4a5 100644 --- a/src/App.js +++ b/src/App.js @@ -161,12 +161,12 @@ const App = () => { touchEndY = e.changedTouches[0].clientY; const deltaY = touchStartY - touchEndY; - const minSwipeDistance = 50; // 最小滑动距离 + const minSwipeDistance = 30; // 降低滑动阈值,提高灵敏度 (原 50) // 获取当前激活的 section 容器 const scroller = containerRef.current?.querySelector(`.section[data-index="${currentSectionRef.current}"]`); - const tolerance = 5; + const tolerance = 10; // 增加边界容差 (原 5) const isScrollable = scroller ? scroller.scrollHeight > scroller.clientHeight + 1 : false; const atTop = scroller ? scroller.scrollTop <= tolerance : true; const atBottom = scroller ? Math.abs(scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop) <= tolerance : true; diff --git a/src/components/TeamSection.js b/src/components/TeamSection.js index f80ad77..124b87f 100644 --- a/src/components/TeamSection.js +++ b/src/components/TeamSection.js @@ -1,5 +1,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; +import logoBai from '../asset/logo-bai.png'; const SkillIcon = ({ skill }) => { const s = skill.toLowerCase(); @@ -138,7 +139,7 @@ const TeamSection = ({ isActive }) => { bio: '从0到1推动产品与战略落地,专注AI与工业融合。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/agan.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/agan.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, education: ['SFC 西蒙菲莎数据科学系'], experience: [ '负责公司整体战略与产品路线', @@ -153,7 +154,7 @@ const TeamSection = ({ isActive }) => { bio: '深耕AI智能体控制论,团队核心技术研发带头人。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/azhi.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/azhi.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, education: ['本科:UBC', '硕士:3D AI重建领域论文发表(3DV)'], experience: [ '主导核心技术智能体控制技术的攻坚', @@ -168,7 +169,7 @@ const TeamSection = ({ isActive }) => { bio: '增长策略与品牌叙事负责人,连接产品与客户价值。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/liwei.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/liwei.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, experience: [ '规划年度增长与渠道策略', '打造品牌故事与市场活动' @@ -182,7 +183,7 @@ const TeamSection = ({ isActive }) => { bio: '负责高可靠硬件架构设计与产线可制造性优化。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/laoxv.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/laoxv.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, experience: [ '硬件结构件建模设计', '前后端运维全栈工程师' @@ -196,7 +197,7 @@ const TeamSection = ({ isActive }) => { bio: '负责高可靠硬件架构设计与产线可制造性优化。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/shuangji.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/shuangji.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, experience: [ '主导多款硬件平台架构设计', '建立PCB/DFT标准并提升良率' @@ -210,7 +211,7 @@ const TeamSection = ({ isActive }) => { bio: '技术与市场的桥梁,确保AI方案精准匹配线下场景需求。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/jingwei.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/jingwei.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, experience: [ '主导餐饮、办公、政务等场景的AI方案设计', '3D空间智能资深产品经理,将技术转化为可落地的商业产品' @@ -224,7 +225,7 @@ const TeamSection = ({ isActive }) => { bio: '全链路技术开发多面手,支撑AI交互体验的流畅性与完整性。', avatar: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/xiaoma.png', portrait: 'https://tangledup-ai-staging.oss-cn-shanghai.aliyuncs.com/web/quant-speed_page/public/team_image/xiaoma.png', - brandLogo: '/asset/logo-bai.png', + brandLogo: logoBai, experience: [ '负责前端页面设计,打造AI小程序、硬件配套的交互界面', '主导后端API服务开发,保障软件与硬件的无缝对接'