panhuixia/xunchiProduct
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

网站搭建完成第一版

Browse Source
This commit is contained in:
小潘
2026-05-28 17:34:34 +08:00
parent 49fb1891a3
commit 9b53072baa
4 changed files with 79 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/Navbar.jsx
+40 -11
View File
@@ -29,8 +29,37 @@ export default function Navbar() {
<style>{` <style>{`
.nav-active-tab { .nav-active-tab {
margin-top: -60px; margin-top: -60px;
padding-top: calc(2.5rem + 25px); padding-top: calc(2.5rem + 35px);
padding-bottom: 12px; padding-bottom: 16px;
position: relative;
}
.nav-active-tab::after {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 3px;
background: linear-gradient(90deg, transparent, #3b82f6, transparent);
border-radius: 2px;
box-shadow: 0 0 12px rgba(59, 130, 246, 0.5), 0 0 24px rgba(59, 130, 246, 0.2);
}
.nav-item {
position: relative;
}
.nav-item::before {
content: '';
position: absolute;
bottom: 0;
left: 10%;
right: 10%;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
opacity: 0;
transition: opacity 0.3s;
}
.nav-item:hover::before {
opacity: 1;
} }
`}</style> `}</style>
<nav <nav
@@ -38,7 +67,7 @@ export default function Navbar() {
style={!scrolled ? undefined : undefined} style={!scrolled ? undefined : undefined}
> >
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center h-[70px] overflow-visible"> <div className="flex items-center h-[80px] overflow-visible">
{/* Left: Logo + Nav */} {/* Left: Logo + Nav */}
<div className="flex items-center gap-2 shrink-0 overflow-visible"> <div className="flex items-center gap-2 shrink-0 overflow-visible">
@@ -46,20 +75,20 @@ export default function Navbar() {
<img src="/favicon.ico" alt="讯驰" className="w-[100px] h-auto" /> <img src="/favicon.ico" alt="讯驰" className="w-[100px] h-auto" />
<div className="flex flex-col leading-tight"> <div className="flex flex-col leading-tight">
<span className={`text-xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span> <span className={`text-xl font-bold tracking-wide text-white transition-colors duration-500`}>讯驰科技</span>
<span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/40 transition-colors duration-500`}>XUNCHI TECH</span> <span className={`text-[10px] tracking-[0.2em] uppercase font-medium text-white/80 transition-colors duration-500`}>XUNCHI TECH</span>
</div> </div>
</Link> </Link>
<div className="hidden lg:flex items-center gap-1 transition-colors duration-500 overflow-visible"> <div className="hidden lg:flex items-center gap-1 transition-colors duration-500 overflow-visible">
<div className="w-px h-6 bg-white mr-2" /> <div className="w-px h-7 bg-white/30 mr-3" />
{navItems.map((item) => ( {navItems.map((item) => (
<Link <Link
key={item.to} key={item.to}
to={item.to} to={item.to}
className={`relative px-5 font-medium rounded-sm transition-all duration-300 ${ className={`relative px-4 font-medium rounded-sm transition-all duration-300 nav-item ${
location.pathname === item.to location.pathname === item.to
? 'nav-active-tab text-white font-semibold bg-[#043b8f] text-[18px]' ? 'nav-active-tab text-white font-semibold text-base'
: 'text-white hover:text-white hover:bg-white/10 text-[14px] py-3' : 'text-white hover:text-white text-sm py-3'
}`} }`}
> >
{item.label} {item.label}
@@ -74,7 +103,7 @@ export default function Navbar() {
<div className={`hidden lg:flex items-center shrink-0 transition-colors duration-500`}> <div className={`hidden lg:flex items-center shrink-0 transition-colors duration-500`}>
<a <a
href="tel:07713864294" href="tel:07713864294"
className="flex items-center gap-1.5 text-[13px] font-medium text-white hover:text-white transition-all duration-300" className="flex items-center gap-1.5 text-sm font-medium text-white hover:text-white transition-all duration-300"
> >
<Phone className="w-3.5 h-3.5" /> <Phone className="w-3.5 h-3.5" />
0771-3864294 0771-3864294
@@ -103,7 +132,7 @@ export default function Navbar() {
<Link <Link
key={item.to} key={item.to}
to={item.to} to={item.to}
className={`block px-4 py-3 rounded-xl text-[14px] font-medium transition-colors ${ className={`block px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
location.pathname === item.to location.pathname === item.to
? 'text-white bg-white/[0.06]' ? 'text-white bg-white/[0.06]'
: 'text-white/50 hover:bg-white/[0.04]' : 'text-white/50 hover:bg-white/[0.04]'
@@ -113,7 +142,7 @@ export default function Navbar() {
</Link> </Link>
))} ))}
<div className="pt-3 mt-2 border-t border-white/[0.06]"> <div className="pt-3 mt-2 border-t border-white/[0.06]">
<a href="tel:07713864294" className="flex items-center gap-2 px-4 py-3 text-[#004ec4] text-[14px] font-medium"> <a href="tel:07713864294" className="flex items-center gap-2 px-5 py-3.5 text-[#043b8f] text-base font-medium">
<Phone className="w-4 h-4" /> <Phone className="w-4 h-4" />
0771-3864294 0771-3864294
</a> </a>
website/src/components/RosePieChart.jsx
+22 -29
View File
@@ -8,11 +8,8 @@ const chartData = [
{ value: 25, name: '商咖五级进阶' }, { value: 25, name: '商咖五级进阶' },
]; ];
const color = '#004ec4'; const color = '#043b8f';
// ECharts startAngle=90, 各扇形视觉中心 (0°=12点, 顺时针)
// slice0: 1:30(45°) slice1: 4:30(135°) slice2: 7:30(225°) slice3: 10:30(315°)
// 要让选中扇形中心对准右侧90°(3点方向), CSS rotate需要的角度
const rotationNeeded = [45, -45, -135, -225]; const rotationNeeded = [45, -45, -135, -225];
function normalizeAngle(a) { function normalizeAngle(a) {
@@ -34,7 +31,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
const rotationRef = useRef(0); const rotationRef = useRef(0);
const [rotation, setRotation] = useState(0); const [rotation, setRotation] = useState(0);
// 初始化图表（只执行一次）
useEffect(() => { useEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
@@ -43,10 +39,10 @@ export default function RosePieChart({ onSelect, activeIndex }) {
chartRef.current.setOption({ chartRef.current.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
backgroundColor: '#fff', backgroundColor: 'rgba(10,22,40,0.95)',
borderColor: '#e2e8f0', borderColor: 'rgba(59,130,246,0.3)',
borderWidth: 1, borderWidth: 1,
textStyle: { color: '#334155', fontSize: 13 }, textStyle: { color: '#e2e8f0', fontSize: 13 },
formatter: '{b}', formatter: '{b}',
}, },
series: [{ series: [{
@@ -54,35 +50,34 @@ export default function RosePieChart({ onSelect, activeIndex }) {
radius: ['20%', '68%'], radius: ['20%', '68%'],
center: ['50%', '50%'], center: ['50%', '50%'],
startAngle: 90, startAngle: 90,
padAngle: 2, padAngle: 3,
itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 3 }, itemStyle: { borderRadius: 6, borderWidth: 0 },
label: { label: {
show: true, show: true,
position: 'inside', position: 'inside',
color: '#004ec4', color: '#e2e8f0',
fontSize: 16, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
rotate: 'tangential', rotate: 'tangential',
formatter: '{b}', formatter: '{b}',
}, },
emphasis: { emphasis: {
scaleSize: 10, scaleSize: 12,
itemStyle: { itemStyle: {
color: '#0088cc', shadowBlur: 40,
shadowBlur: 30, shadowColor: 'rgba(59,130,246,0.5)',
shadowColor: 'rgba(0,78,196,0.35)', borderColor: 'rgba(59,130,246,0.6)',
borderColor: '#fff', borderWidth: 0,
borderWidth: 4,
}, },
label: { fontSize: 15, fontWeight: 'bold', color: '#0f172a' }, label: { fontSize: 14, fontWeight: 'bold', color: '#fff' },
}, },
data: chartData.map(d => ({ data: chartData.map((d, i) => ({
...d, ...d,
itemStyle: { color, opacity: 1, borderRadius: 4, borderColor: '#fff', borderWidth: 3 }, itemStyle: { color, opacity: 1, borderRadius: 6, borderWidth: 0 },
})), })),
animationType: 'scale', animationType: 'scale',
animationEasing: 'elasticOut', animationEasing: 'elasticOut',
animationDuration: 1000, animationDuration: 1200,
}], }],
}); });
@@ -96,7 +91,6 @@ export default function RosePieChart({ onSelect, activeIndex }) {
}; };
}, []); }, []);
// 更新颜色高亮 + CSS旋转
useEffect(() => { useEffect(() => {
const chart = chartRef.current; const chart = chartRef.current;
if (!chart) return; if (!chart) return;
@@ -112,20 +106,19 @@ export default function RosePieChart({ onSelect, activeIndex }) {
series: [{ series: [{
data: chartData.map((d, i) => ({ data: chartData.map((d, i) => ({
...d, ...d,
label: { color: isActive && activeIndex === i ? '#fff' : '#004ec4' }, label: { color: isActive && activeIndex === i ? '#fff' : '#043b8f' },
itemStyle: { itemStyle: {
color: isActive && activeIndex !== i ? '#dfedf8' : color, color: isActive && activeIndex !== i ? color + '30' : color,
opacity: 1, opacity: 1,
borderRadius: 4, borderRadius: 6,
borderColor: '#fff', borderColor: 'rgba(15,23,42,0.8)',
borderWidth: 3, borderWidth: 0,
}, },
})), })),
}], }],
}); });
}, [activeIndex]); }, [activeIndex]);
// 点击事件
useEffect(() => { useEffect(() => {
const chart = chartRef.current; const chart = chartRef.current;
if (!chart) return; if (!chart) return;
website/src/pages/Home.jsx
+15 -11
View File
@@ -203,14 +203,15 @@ export default function Home() {
const idx = activeCapability !== null ? activeCapability : i const idx = activeCapability !== null ? activeCapability : i
return ( return (
<div key={idx} className={`relative p-8 rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden ${activeCapability === idx <div key={idx} className={`relative p-8 rounded-2xl transition-all duration-500 cursor-pointer group overflow-hidden ${activeCapability === idx
? 'bg-white border border-[#004ec4]/15 shadow-[0_4px_24px_rgba(0,78,196,0.08)]' ? 'bg-white border border-[#043b8f]/20 shadow-[0_4px_24px_rgba(4,59,199,0.12)]'
: 'hover:bg-gray-50/80 border border-gray-100' : 'hover:bg-gray-50/80 border border-gray-100'
}`} onClick={() => setActiveCapability(idx)}> }`} onClick={() => setActiveCapability(idx)}>
{activeCapability === idx && ( {activeCapability === idx && (
<div className="absolute top-0 left-0 right-0 h-[2px]" <div className="absolute top-0 left-0 right-0 h-[2px]"
style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} /> style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
)} )}
<div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.02] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="absolute top-0 right-0 w-24 h-24 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute bottom-0 left-0 w-16 h-16 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="flex items-center gap-3 mb-3"> <div className="flex items-center gap-3 mb-3">
<span className={`flex items-center justify-center w-7 h-7 rounded-md text-[11px] font-black transition-colors duration-300 ${activeCapability === idx <span className={`flex items-center justify-center w-7 h-7 rounded-md text-[11px] font-black transition-colors duration-300 ${activeCapability === idx
? 'bg-[#043b8f]/[0.08] text-[#043b8f]' ? 'bg-[#043b8f]/[0.08] text-[#043b8f]'
@@ -227,14 +228,13 @@ export default function Home() {
}`}>{c.sub}</p> }`}>{c.sub}</p>
<p className="text-base text-[#334155] leading-[2] mt-4">{c.desc}</p> <p className="text-base text-[#334155] leading-[2] mt-4">{c.desc}</p>
{c.tip && ( {c.tip && (
<div className="mt-5 flex flex-wrap gap-2.5"> <div className="mt-5 flex flex-wrap gap-2">
{c.tip.split('、').map((t, ti) => ( {c.tip.split('、').map((t, ti) => (
<span key={ti} className={`relative inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-300 ${ <span key={ti} className={`px-4 py-1.5 text-sm font-medium rounded-md transition-all duration-200 ${
activeCapability === idx activeCapability === idx
? 'text-[#043b8f] bg-[#043b8f]/[0.06] border border-[#043b8f]/15' ? 'text-[#043b8f] bg-[#043b8f]/[0.08]'
: 'text-[#94a3b8] bg-gray-50 border border-gray-100' : 'text-[#94a3b8] bg-gray-50'
}`}> }`}>
<span className={`w-1 h-1 rounded-full mr-2 ${activeCapability === idx ? 'bg-[#043b8f]' : 'bg-[#94a3b8]/40'}`} />
{t} {t}
</span> </span>
))} ))}
@@ -392,17 +392,21 @@ export default function Home() {
const Icon = card.icon const Icon = card.icon
return ( return (
<ScrollReveal key={i} delay={i * 0.1}> <ScrollReveal key={i} delay={i * 0.1}>
<div className="group bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-300 hover:shadow-xl hover:shadow-blue-100/50 hover:-translate-y-1"> <div className="group relative bg-white rounded-2xl p-8 border border-gray-100 text-center h-full flex flex-col items-center transition-all duration-500 hover:shadow-xl hover:shadow-[#043b8f]/5 hover:-translate-y-1 overflow-hidden">
<div className="absolute top-0 left-0 right-0 h-[2px] opacity-0 group-hover:opacity-100 transition-opacity duration-500"
style={{ background: 'linear-gradient(90deg, transparent, #043b8f, transparent)' }} />
<div className="absolute top-0 right-0 w-20 h-20 bg-[#043b8f]/[0.03] rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="absolute bottom-0 left-0 w-14 h-14 border border-[#043b8f]/[0.06] rounded-tr-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
{/* 图标 */} {/* 图标 */}
<div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-[#004ec4]/10 to-[#004ec4]/5 flex items-center justify-center mb-5 group-hover:from-[#004ec4]/20 group-hover:to-[#004ec4]/10 transition-all duration-300"> <div className="w-16 h-16 rounded-xl bg-[#043b8f]/[0.06] border border-[#043b8f]/10 flex items-center justify-center mb-5 group-hover:bg-[#043b8f]/10 transition-all duration-300">
<Icon className="w-8 h-8 text-[#004ec4]" /> <Icon className="w-8 h-8 text-[#043b8f]" />
</div> </div>
{/* 数字 */} {/* 数字 */}
<div className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#0f172a] to-[#334155] mb-1">{card.count}</div> <div className="text-5xl font-black text-transparent bg-clip-text bg-gradient-to-b from-[#0f172a] to-[#334155] mb-1">{card.count}</div>
{/* 标题 */} {/* 标题 */}
<h3 className="text-lg font-bold text-[#0f172a] mb-3">{card.title}</h3> <h3 className="text-lg font-bold text-[#0f172a] mb-3">{card.title}</h3>
{/* 分隔线 */} {/* 分隔线 */}
<div className="w-8 h-0.5 bg-gradient-to-r from-transparent via-[#004ec4]/30 to-transparent mb-3" /> <div className="w-8 h-px bg-gradient-to-r from-transparent via-[#043b8f]/20 to-transparent mb-3" />
{/* 描述 */} {/* 描述 */}
<p className="text-sm text-[#64748b] leading-relaxed">{card.desc}</p> <p className="text-sm text-[#64748b] leading-relaxed">{card.desc}</p>
</div> </div>
website/src/pages/ProductPage.jsx
+1 -1
View File
@@ -79,7 +79,7 @@ export default function ProductPage() {
</div> </div>
{product.tags && ( {product.tags && (
<div className="flex flex-wrap justify-center gap-4 mt-10"> <div className="flex flex-wrap items-center justify-center gap-3 mt-10">
{product.tags.map((tag, i) => ( {product.tags.map((tag, i) => (
<span key={i} <span key={i}
className="relative px-6 py-2 text-sm font-bold text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5" className="relative px-6 py-2 text-sm font-bold text-white transition-all duration-200 hover:scale-105 hover:-translate-y-0.5"