提交 fc025301 authored 作者: 王鹏飞's avatar 王鹏飞

feat: 添加华为数通认证页面,包含课程体系与报名功能

上级 2d758558
<template>
<main class="hw-page">
<section id="home" class="hw-hero">
<svg class="hero-tech" viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<radialGradient id="hw-glow-cyan" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#2bd4ff" stop-opacity=".55" /><stop offset="100%" stop-color="#2bd4ff" stop-opacity="0" /></radialGradient>
<radialGradient id="hw-glow-red" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#ff5a5f" stop-opacity=".6" /><stop offset="100%" stop-color="#c7000b" stop-opacity="0" /></radialGradient>
</defs>
<g class="net-float">
<g>
<circle cx="120" cy="120" r="44" fill="url(#hw-glow-cyan)" /><circle cx="320" cy="80" r="40" fill="url(#hw-glow-cyan)" />
<circle cx="540" cy="160" r="50" fill="url(#hw-glow-red)" /><circle cx="760" cy="90" r="40" fill="url(#hw-glow-cyan)" />
<circle cx="980" cy="140" r="42" fill="url(#hw-glow-cyan)" /><circle cx="1120" cy="220" r="48" fill="url(#hw-glow-red)" />
<circle cx="200" cy="300" r="44" fill="url(#hw-glow-cyan)" /><circle cx="420" cy="360" r="50" fill="url(#hw-glow-red)" />
<circle cx="640" cy="300" r="42" fill="url(#hw-glow-cyan)" /><circle cx="860" cy="340" r="42" fill="url(#hw-glow-cyan)" />
<circle cx="1060" cy="400" r="44" fill="url(#hw-glow-cyan)" /><circle cx="300" cy="500" r="42" fill="url(#hw-glow-cyan)" />
<circle cx="560" cy="520" r="50" fill="url(#hw-glow-red)" /><circle cx="820" cy="520" r="42" fill="url(#hw-glow-cyan)" />
<circle cx="1040" cy="540" r="42" fill="url(#hw-glow-cyan)" />
</g>
<g class="net-lines">
<line class="net-line" x1="120" y1="120" x2="320" y2="80" /><line class="net-line" x1="320" y1="80" x2="540" y2="160" />
<line class="net-line" x1="540" y1="160" x2="760" y2="90" /><line class="net-line" x1="760" y1="90" x2="980" y2="140" />
<line class="net-line" x1="980" y1="140" x2="1120" y2="220" /><line class="net-line" x1="120" y1="120" x2="200" y2="300" />
<line class="net-line" x1="200" y1="300" x2="420" y2="360" /><line class="net-line" x1="420" y1="360" x2="640" y2="300" />
<line class="net-line" x1="640" y1="300" x2="860" y2="340" /><line class="net-line" x1="860" y1="340" x2="1060" y2="400" />
<line class="net-line" x1="1060" y1="400" x2="1120" y2="220" /><line class="net-line" x1="200" y1="300" x2="300" y2="500" />
<line class="net-line" x1="420" y1="360" x2="560" y2="520" /><line class="net-line" x1="640" y1="300" x2="560" y2="520" />
<line class="net-line" x1="860" y1="340" x2="820" y2="520" /><line class="net-line" x1="1060" y1="400" x2="1040" y2="540" />
<line class="net-line" x1="300" y1="500" x2="560" y2="520" /><line class="net-line" x1="560" y1="520" x2="820" y2="520" />
<line class="net-line" x1="820" y1="520" x2="1040" y2="540" /><line class="net-line" x1="540" y1="160" x2="640" y2="300" />
<line class="net-line" x1="760" y1="90" x2="860" y2="340" /><line class="net-line" x1="320" y1="80" x2="200" y2="300" />
<line class="net-line" x1="980" y1="140" x2="860" y2="340" />
</g>
<g>
<circle class="net-node net-pulse" cx="120" cy="120" r="3" /><circle class="net-node net-pulse" cx="320" cy="80" r="3" />
<circle class="net-node red net-pulse" cx="540" cy="160" r="3.5" /><circle class="net-node net-pulse" cx="760" cy="90" r="3" />
<circle class="net-node net-pulse" cx="980" cy="140" r="3" /><circle class="net-node red net-pulse" cx="1120" cy="220" r="3.5" />
<circle class="net-node net-pulse" cx="200" cy="300" r="3" /><circle class="net-node red net-pulse" cx="420" cy="360" r="3.5" />
<circle class="net-node net-pulse" cx="640" cy="300" r="3" /><circle class="net-node net-pulse" cx="860" cy="340" r="3" />
<circle class="net-node net-pulse" cx="1060" cy="400" r="3" /><circle class="net-node net-pulse" cx="300" cy="500" r="3" />
<circle class="net-node red net-pulse" cx="560" cy="520" r="3.5" /><circle class="net-node net-pulse" cx="820" cy="520" r="3" />
<circle class="net-node net-pulse" cx="1040" cy="540" r="3" />
</g>
</g>
</svg>
<div class="hw-container hero-content">
<h1>华为 · <span>数通认证</span></h1>
<p class="hero-subtitle">路由与交换,把控网络互连的核心</p>
<p class="hero-desc">面向网络工程、通信技术、云计算等相关专业,构建从 HCIA 到 HCIE 的完整 Datacom 技术进阶体系。真设备、真环境、真项目、真案例,助力学员成为企业级网络架构师。</p>
<div class="hero-actions"><a href="#courses" class="hw-btn btn-primary">查看认证体系</a><a href="#register" class="hw-btn btn-outline">立即报名</a></div>
</div>
</section>
<section id="intro" class="hw-section section-alt">
<div class="hw-container">
<div class="section-header"><h2 class="section-title">赢自认证,智驭未来</h2><p class="section-desc">华为认证覆盖 ICT 全技术领域,数通(Datacom)方向聚焦 IP 网络、路由交换、园区网、广域承载等核心能力,是网络工程师职业进阶的黄金路径。</p></div>
<div class="intro-tagline"><span>真设备</span><span>真环境</span><span>真项目</span><span>真案例</span></div>
<div class="intro-grid"><article v-for="item in introCards" :key="item.title" class="intro-card"><div class="intro-icon">{{ item.icon }}</div><h3>{{ item.title }}</h3><p>{{ item.desc }}</p></article></div>
</div>
</section>
<section id="courses" class="hw-section">
<div class="hw-container">
<div class="section-header"><h2 class="section-title">Datacom 认证课程体系</h2><p class="section-desc">从入门到专家,三个级别对应不同岗位能力要求,学员可依据基础与目标灵活选择。</p></div>
<div class="course-grid"><article v-for="course in courses" :key="course.level" class="course-card" :class="{ featured: course.featured }"><span class="course-badge">{{ course.badge }}</span><div class="course-header"><div class="course-level">{{ course.level }}</div><h3>{{ course.title }}</h3><div class="course-sub">{{ course.english }}</div></div><div class="course-body"><ul><li v-for="item in course.items" :key="item">{{ item }}</li></ul></div><div class="course-footer"><a href="#register" class="hw-btn" :class="course.featured ? 'btn-primary' : 'btn-outline'">选择该级别</a></div></article></div>
</div>
</section>
<section id="register" class="hw-section section-alt">
<div class="hw-container">
<div class="section-header"><h2 class="section-title">快速报名通道</h2><p class="section-desc">提交报名信息后,课程顾问将在 1 个工作日内联系您,确认学习方案与开班安排。</p></div>
<div class="reg-wrap">
<div class="reg-steps"><article v-for="(item, index) in registrationSteps" :key="item.title" class="reg-step"><div class="step-num">{{ index + 1 }}</div><div><h3>{{ item.title }}</h3><p>{{ item.desc }}</p></div></article></div>
<div class="form-card"><h3>填写报名信息</h3><p class="form-hint">带 * 项为必填,我们严格保护您的个人信息。</p><form @submit.prevent="submitRegister"><div class="form-row"><label>姓名 *<input v-model="registerForm.name" type="text" placeholder="请输入姓名" /></label><label>联系电话 *<input v-model="registerForm.phone" type="tel" placeholder="请输入手机号" /></label></div><label>意向级别<select v-model="registerForm.level"><option>HCIA-Datacom</option><option>HCIP-Datacom</option><option>HCIE-Datacom</option></select></label><label>备注需求<textarea v-model="registerForm.note" placeholder="可填写您的基础、目标考试时间或其他需求"></textarea></label><button type="submit" class="hw-btn btn-primary form-submit" :disabled="submitting">{{ submitting ? '提交中…' : '提交报名' }}</button></form></div>
</div>
</div>
</section>
<section id="schedule" class="hw-section">
<div class="hw-container">
<div class="section-header"><h2 class="section-title">近期开班安排</h2><p class="section-desc">以下为数通方向近期计划开班,名额有限,开放报名中。</p></div>
<div class="schedule-table-wrap"><table class="schedule-table"><thead><tr><th>序号</th><th>班级名称</th><th>技术领域</th><th>开班科目</th><th>认证类型</th><th>开班日期</th><th>名额</th><th>咨询报名</th></tr></thead><tbody><tr v-for="item in schedules" :key="item.no"><td data-label="序号">{{ item.no }}</td><td data-label="班级名称">{{ item.name }}</td><td data-label="技术领域">{{ item.field }}</td><td data-label="开班科目">{{ item.subject }}</td><td data-label="认证类型">{{ item.type }}</td><td data-label="开班日期">{{ item.date }}</td><td data-label="名额" class="status-open">开放报名</td><td data-label="咨询报名"><a href="#register" class="hw-btn btn-primary table-btn">立即咨询</a></td></tr></tbody></table></div>
</div>
</section>
</main>
</template>
<script>
import { submit } from '@/api/index'
export default {
data() {
return {
courses: [
{ level: 'HCIA-Datacom', title: '数通工程师', english: 'Huawei Certified ICT Associate', badge: '入门', featured: false, items: ['TCP/IP 协议基础与以太网交换技术', '静态路由与动态路由(RIP/OSPF)原理', '园区网基础设计与华为设备配置', 'IPv6 基础与网络自动化入门'] },
{ level: 'HCIP-Datacom', title: '高级网络工程师', english: 'Huawei Certified ICT Professional', badge: '进阶', featured: true, items: ['高级路由协议(OSPF/IS-IS/BGP)与策略部署', '企业园区网、WLAN、SD-WAN 架构设计', '网络可靠性技术与大规模网络运维', '网络切片、IPv6+ 及智能网络解决方案'] },
{ level: 'HCIE-Datacom', title: '网络架构专家', english: 'Huawei Certified ICT Expert', badge: '专家', featured: false, items: ['复杂园区网、广域承载网与数据中心网络设计', '高级故障定位、性能优化与安全加固', '网络自动化与智能化运维(Python/NetConf/YANG)', 'HCIE 笔试 + 实验 + 面试全流程辅导'] }
],
introCards: [
{ icon: '⌁', title: '企业级网络技术', desc: '覆盖路由交换、WLAN、网络安全、SD-WAN 等企业网络关键技术,紧贴行业真实需求。' },
{ icon: '⌘', title: '真实实验环境', desc: '华为官方 eNSP 与真实设备结合,提供端到端网络搭建、故障排查与优化训练。' },
{ icon: '↗', title: '完整进阶路径', desc: '从 HCIA 助理工程师、HCIP 高级工程师到 HCIE 专家,逐级打通职业发展通道。' },
{ icon: '◇', title: '就业竞争力提升', desc: '华为认证全球认可,是 ICT 行业人才招聘、晋升与项目投标的重要资质背书。' }
],
registrationSteps: [
{ title: '选择认证级别', desc: '根据基础和职业目标,选择 HCIA / HCIP / HCIE Datacom 课程。' },
{ title: '提交报名信息', desc: '填写姓名、联系方式与报名需求,完成在线预约。' },
{ title: '顾问确认方案', desc: '课程顾问沟通学习计划、实验环境与考试规划,锁定名额。' },
{ title: '开课学习', desc: '按开班计划参加线上直播或线下集训,配套实验与答疑。' }
],
schedules: [
{ no: 1, name: '华为伙伴 数通HCIA1期', field: '数通', subject: 'HCIA-Datacom', type: '职业认证', date: '2026.9.15 - 2026.9.20' },
{ no: 2, name: '华为伙伴 数通HCIA2期', field: '数通', subject: 'HCIA-Datacom', type: '职业认证', date: '2026.10.10 - 2026.10.15' },
{ no: 3, name: '华为伙伴 数通HCIP1期', field: '数通', subject: 'HCIP-Datacom', type: '职业认证', date: '2026.11.1 - 2026.11.5' },
{ no: 4, name: '华为伙伴 数通HCIP2期', field: '数通', subject: 'HCIP-Datacom', type: '职业认证', date: '2026.11.10 - 2026.11.15' },
{ no: 5, name: '华为伙伴 数通HCIP3期', field: '数通', subject: 'HCIP-Datacom', type: '职业认证', date: '2026.11.20 - 2026.11.25' },
{ no: 6, name: '华为伙伴 数通HCIP4期', field: '数通', subject: 'HCIP-Datacom', type: '职业认证', date: '2026.12.1 - 2026.12.5' }
],
registerForm: { name: '', phone: '', level: 'HCIP-Datacom', note: '' },
submitting: false
}
},
methods: {
notify(message, type) {
this.$notify({ type: type || 'danger', message })
},
async submitRegister() {
const name = this.registerForm.name.trim()
const phone = this.registerForm.phone.trim()
if (!name) return this.notify('请填写姓名')
if (!/^1[3-9]\d{9}$/.test(phone)) return this.notify('请输入正确的手机号')
if (this.submitting) return
this.submitting = true
try {
await submit({ name, phone, project_id: 5010, comment: `#意向级别:${this.registerForm.level};#备注需求:${this.registerForm.note}` })
this.notify('报名信息已提交,课程顾问将尽快与您联系!', 'success')
this.registerForm.name = ''
this.registerForm.phone = ''
this.registerForm.note = ''
} catch (error) {
this.notify('提交失败,请稍后重试')
} finally {
this.submitting = false
}
}
}
}
</script>
<style lang="scss" scoped>
.hw-page { --hw-red:#c7000b; --hw-red-dark:#a00008; --hw-red-light:#fff0f1; --hw-text:#1a1a1a; --hw-border:#e8e8e8; color:var(--hw-text); background:#fff; line-height:1.7; font-family:'PingFang SC','Microsoft YaHei',sans-serif; *,*::before,*::after{box-sizing:border-box} h1,h2,h3,p{margin:0} a{color:inherit;text-decoration:none} .btn-primary{color:#fff} .btn-primary:hover{color:#fff} }
.hw-container{width:100%;max-width:7.5rem;margin:0 auto;padding:0 .15rem}.hw-section{padding:.56rem 0}.section-alt{background:#f7f8fa}.section-header{max-width:7.2rem;margin:0 auto .32rem;text-align:center}.section-title{margin-bottom:.1rem;font-size:.24rem;font-weight:700;line-height:1.3}.section-desc{color:#444;font-size:.14rem}.hw-btn{display:inline-flex;align-items:center;justify-content:center;min-height:.42rem;padding:.08rem .2rem;border:1.5px solid transparent;border-radius:999px;font-size:.14rem;font-weight:600;cursor:pointer;transition:.25s ease}.btn-primary{background:var(--hw-red);color:#fff;box-shadow:0 .06rem .18rem rgba(199,0,11,.22)}.btn-outline{border-color:var(--hw-red);color:var(--hw-red);background:transparent}
.hw-hero{position:relative;min-height:4.8rem;display:flex;align-items:flex-end;overflow:hidden;background:radial-gradient(12rem 6.2rem at 82% -12%,rgba(199,0,11,.38),transparent 60%),radial-gradient(9rem 5.2rem at -5% 120%,rgba(0,118,255,.2),transparent 55%),linear-gradient(135deg,#061224,#0b1c3f 48%,#0a1330)}.hw-hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:.48rem .48rem;mask-image:radial-gradient(circle at 50% 38%,#000 25%,transparent 78%)}.hero-tech{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.net-float{animation:hw-drift 26s ease-in-out infinite alternate;transform-origin:center}.net-line{stroke:rgba(120,200,255,.2);stroke-width:1}.net-node{fill:#2bd4ff}.net-node.red{fill:#ff5a5f}.net-pulse{transform-box:fill-box;transform-origin:center;animation:hw-pulse 3.4s ease-in-out infinite}@keyframes hw-pulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}@keyframes hw-drift{to{transform:translate(20px,-16px)}}.hero-content{position:relative;z-index:1;width:100%;padding-bottom:.4rem;color:#fff;text-align:center}.hero-content h1{margin-bottom:.12rem;font-size:.4rem;font-weight:800;line-height:1.15;letter-spacing:.02rem}.hero-content h1 span{color:#ff4d4f}.hero-subtitle{margin-bottom:.12rem;color:rgba(255,255,255,.95);font-size:.18rem;font-weight:500}.hero-desc{max-width:5.6rem;margin:0 auto .24rem;color:rgba(255,255,255,.78);font-size:.14rem}.hero-actions{display:flex;justify-content:center;gap:.1rem;flex-wrap:wrap}.hero-actions .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.intro-tagline{display:flex;justify-content:center;gap:.12rem;flex-wrap:wrap;margin-bottom:.28rem;font-size:.16rem;font-weight:700}.intro-tagline span{display:flex;align-items:center;gap:.12rem}.intro-tagline span:not(:last-child):after{content:'·';color:var(--hw-red);font-size:.22rem;line-height:1}.intro-grid,.course-grid{display:grid;grid-template-columns:1fr;gap:.16rem}.intro-card,.course-card,.reg-step,.form-card,.schedule-table-wrap{border-radius:.12rem;box-shadow:0 .04rem .2rem rgba(0,0,0,.06)}.intro-card{padding:.24rem .2rem;background:#fff;text-align:center;transition:.3s ease}.intro-icon{display:grid;place-items:center;width:.44rem;height:.44rem;margin:0 auto .12rem;border-radius:.12rem;background:var(--hw-red-light);color:var(--hw-red);font-size:.24rem;font-weight:700}.intro-card h3{margin-bottom:.08rem;font-size:.17rem}.intro-card p,.reg-step p{color:#444;font-size:.14rem}.course-grid{gap:.2rem}.course-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:#fff}.course-badge{position:absolute;top:.16rem;right:.16rem;padding:.04rem .1rem;border-radius:999px;background:var(--hw-red);color:#fff;font-size:.11rem;font-weight:700}.course-header{padding:.24rem .2rem .18rem;border-bottom:1px solid var(--hw-border);background:linear-gradient(135deg,#f8f9fb,#fff);text-align:center}.course-level{margin-bottom:.06rem;color:var(--hw-red);font-size:.13rem;font-weight:700}.course-header h3{margin-bottom:.06rem;font-size:.2rem;font-weight:800}.course-sub,.form-hint{color:#888;font-size:.13rem}.course-body{flex:1;padding:.2rem}.course-body ul{padding:0;margin:0;list-style:none}.course-body li{display:flex;gap:.08rem;margin-bottom:.1rem;color:#444;font-size:.14rem}.course-body li:before{content:'✓';flex-shrink:0;color:var(--hw-red);font-weight:700}.course-footer{padding:.16rem .2rem .2rem}.course-footer .hw-btn{width:100%}
.reg-wrap{display:grid;grid-template-columns:1fr;gap:.24rem;align-items:center}.reg-steps{display:flex;flex-direction:column;gap:.12rem}.reg-step{display:flex;gap:.14rem;align-items:flex-start;padding:.16rem;background:#fff}.step-num{display:grid;place-items:center;flex-shrink:0;width:.36rem;height:.36rem;border-radius:50%;background:var(--hw-red);color:#fff;font-weight:700}.reg-step h3{margin:.01rem 0 .04rem;font-size:.16rem}.form-card{padding:.24rem .2rem;background:#fff}.form-card h3{margin-bottom:.06rem;font-size:.2rem}.form-hint{margin-bottom:.2rem}.form-row{display:grid;grid-template-columns:1fr;gap:0}.form-card label{display:block;margin-bottom:.14rem;font-size:.13rem;font-weight:600}.form-card input,.form-card select,.form-card textarea{display:block;width:100%;padding:.1rem .12rem;margin-top:.05rem;border:1px solid var(--hw-border);border-radius:.08rem;outline:0;background:#fff;color:var(--hw-text);font:inherit;font-size:.14rem}.form-card textarea{min-height:.8rem;resize:vertical}.form-submit{width:100%;border:0}.form-submit:disabled{cursor:wait;opacity:.65}.schedule-table-wrap{overflow-x:auto;overflow-y:hidden;background:#fff}.schedule-table{width:8rem;border-collapse:collapse;font-size:.13rem}.schedule-table th{padding:.12rem .14rem;border-bottom:1px solid var(--hw-border);background:#fafbfc;color:#444;font-weight:600;text-align:left}.schedule-table td{padding:.14rem;border-bottom:1px solid var(--hw-border)}.schedule-table tr:last-child td{border-bottom:0}.status-open{color:#2aa515;font-weight:600}.table-btn{min-height:.34rem;min-width:1.02rem;padding:.06rem .14rem;font-size:.12rem;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.net-float,.net-pulse,.intro-card,.course-card,.reg-step,.hw-btn{animation:none;transition:none}}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑!
请 注册 或者 后发表评论