Files
dsh f81d41c5ca 初始化:炫恒网络官网(五个页面)
站点:纯静态 HTML + CSS + 原生 JS,零框架零构建
页面:首页 / 合作品牌 / 荣誉资质 / 客户案例 / 关于我们

内容:
- site/          站点本体(含已压缩 webp 图片,约 4.8 MB)
- deploy/        Docker Compose / Caddy / Apache 部署配置
- _tools/        开发自检脚本与部署脚本
- Dockerfile     自建 nginx 镜像方案
- README.md      项目文档

设计:品牌黄 #ffc107 + 白,深蓝仅用于页脚;菜单长期置顶;
      交互动效只加在关键词与区块级元素上。

素材说明:原始素材(背景图/老网站/方案/荣誉资质/合作品牌,约 290 MB)
         未纳入版本控制,站点使用的是 site/assets 内已处理压缩的图片。
2026-10-13 16:12:41 +08:00

449 lines
22 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>关于我们 | 上海炫恒网络系统有限公司</title>
<meta name="description" content="上海炫恒网络系统有限公司成立于 2004 年,是专业从事计算机网络信息产业销售及系统集成的高科技企业,提供网络系统集成解决方案、信息安全解决方案与管理服务。">
<meta name="theme-color" content="#ffc61a">
<link rel="icon" href="favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="assets/img/misc/favicon-180x180.png">
<link rel="stylesheet" href="assets/lqip.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<a class="skip" href="#main">跳到主要内容</a>
<div class="progress" aria-hidden="true"></div>
<header class="header">
<div class="header__inner">
<a class="brand" href="index.html" aria-label="上海炫恒网络系统有限公司 首页">
<img class="brand__mark" src="assets/img/misc/logo-256.png" alt="" width="42" height="42">
<span class="brand__text">
<span class="brand__cn">炫恒网络</span>
<span class="brand__en">Xuanheng Network</span>
</span>
</a>
<nav class="nav" aria-label="主导航">
<ul class="nav__list">
<li><a class="nav__link" href="index.html">首页</a></li>
<li><a class="nav__link" href="brands.html">合作品牌</a></li>
<li><a class="nav__link" href="honors.html">荣誉资质</a></li>
<li><a class="nav__link" href="cases.html">客户案例</a></li>
<li><a class="nav__link" href="about.html" aria-current="page">关于我们</a></li>
</ul>
</nav>
<a class="btn btn--sm header__cta" href="#contact">联系我们 <i data-icon="arrowRight"></i></a>
<button class="burger" type="button" aria-label="打开菜单" aria-expanded="false" aria-controls="drawer">
<span></span><span></span><span></span>
</button>
</div>
</header>
<div class="drawer" id="drawer">
<a class="drawer__link" href="index.html">首页 <i data-icon="arrowRight"></i></a>
<a class="drawer__link" href="brands.html">合作品牌 <i data-icon="arrowRight"></i></a>
<a class="drawer__link" href="honors.html">荣誉资质 <i data-icon="arrowRight"></i></a>
<a class="drawer__link" href="cases.html">客户案例 <i data-icon="arrowRight"></i></a>
<a class="drawer__link" href="about.html">关于我们 <i data-icon="arrowRight"></i></a>
<div class="drawer__foot">
<div class="drawer__contact"><b>021-51629599</b>webmaster@xuanheng.info</div>
<a class="btn" href="#contact">免费咨询方案 <i data-icon="arrowRight"></i></a>
</div>
</div>
<main id="main">
<!-- ========================================================== 页头 -->
<section class="pagehead">
<div class="pagehead__bg" data-lqip="hero/hero-1" data-bg="assets/img/hero/hero-1.webp" aria-hidden="true"></div>
<div class="wrap wrap--wide pagehead__inner">
<nav class="crumb" aria-label="面包屑">
<a href="index.html">首页</a><span class="sep">/</span><span aria-current="page">关于我们</span>
</nav>
<h1>关于炫恒</h1>
<p>上海炫恒网络系统有限公司 —— 专业提供网络系统集成解决方案、信息安全解决方案以及管理服务。让先进的信息技术与网络技术,真正服务于客户的业务。</p>
</div>
<div class="pagehead__rule" aria-hidden="true"></div>
</section>
<!-- ========================================================== 企业简介 -->
<section class="section">
<div class="wrap">
<div class="split split--wide-left">
<div data-reveal="left">
<span class="eyebrow">Company Profile</span>
<h2>企业简介</h2>
<p>
上海炫恒网络系统有限公司是一家专业从事计算机网络信息产业的销售及系统集成的高科技企业。
公司致力于将先进的信息技术和网络技术运用到客户的管理与业务活动中,曾经参与合作过银行、证券、
保险、政府机关、制造行业、商贸中心等行业的计算机系统建设。
</p>
<p>
公司可以为客户提供网络前提分布系统、网络技术工程、系统安装、系统方案设计、全国外包服务、
电脑及网络产品采购。公司专注于企业应用系统集成和专业全程跟踪维护服务;同时,我们还为客户提供
专业、稳定、有效的外包服务 —— 从高质量的硬件配备到专业的软件开发,都可以满足客户的要求,
确保客户满意。
</p>
<div class="grid grid--2" style="margin-top:26px">
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="rocket"></i></span>
<div><b>成立时间</b><span>2004 年,深耕企业级网络二十余年</span></div>
</div>
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="network"></i></span>
<div><b>核心业务</b><span>网络系统集成 · 信息安全 · 管理服务</span></div>
</div>
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="mapPin"></i></span>
<div><b>办公网络</b><span>上海总部,业务覆盖北京、南京等地</span></div>
</div>
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="headset"></i></span>
<div><b>服务模式</b><span>方案设计 + 部署实施 + 全程运维</span></div>
</div>
</div>
</div>
<div data-reveal="right">
<div class="figure" data-lqip="hero/hero-3" style="aspect-ratio:4/5;background-size:cover">
<img data-src="assets/img/hero/hero-3.webp" alt="炫恒网络企业形象" width="1200" height="1500" loading="lazy" decoding="async">
</div>
</div>
</div>
</div>
</section>
<!-- ========================================================== 发展历程 -->
<section class="section section--alt">
<div class="wrap">
<div class="split" style="align-items:start">
<div data-reveal="left">
<span class="eyebrow">Milestones</span>
<h2>一路走来</h2>
<p>从区域渠道到行业白金,从产品销售到整体方案与运维服务,我们把每一步都走成了能力。</p>
<div class="stats" style="margin-top:30px">
<div class="stat"><b><span data-count="20" data-unit="+">0</span></b><span>深耕网络行业(年)</span></div>
<div class="stat"><b><span data-count="2000" data-unit="+">0</span></b><span>累计交付项目</span></div>
</div>
</div>
<div data-reveal="right">
<div class="timeline">
<div class="tl-item">
<b>2004</b>
<p>在上海、北京、南京成立总部和分公司,成为思科华东区核心渠道。</p>
</div>
<div class="tl-item">
<b>2010</b>
<p>开始面向用户提供完整的网络和统一通讯解决方案,致力于技术为核心的发展方向。</p>
</div>
<div class="tl-item">
<b>2012</b>
<p>进入上海政采供应商,面向医院用户提供订制一站式 IT 解决方案。</p>
</div>
<div class="tl-item">
<b>2018</b>
<p>成为锐捷网络行业白金,开始在商贸地产行业与锐捷的深度合作。</p>
</div>
<div class="tl-item">
<b>2019</b>
<p>成为锐捷网络企业市场商业白金、服务商。</p>
</div>
<div class="tl-item">
<b>2020</b>
<p>成为锐捷网络 SMB 核心分销商。</p>
</div>
<div class="tl-item">
<b>2021 - 2022</b>
<p>成为锐捷商业白金、行业白金,销量在行业中遥遥领先。</p>
</div>
<div class="tl-item">
<b>至今</b>
<p>持续在地产商旅、制造、金融、医疗、连锁零售等行业交付网络方案与运维服务。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========================================================== 服务体系 -->
<section class="section" id="service">
<div class="wrap">
<div class="blockhead" style="margin-left:auto;margin-right:auto;text-align:center" data-reveal>
<span class="eyebrow">Service System</span>
<h2>服务体系</h2>
<p class="blockhead__desc">公司力求为客户提供优质、高效益、低成本的产品与服务。在成长的路上,感恩有您。</p>
</div>
<div class="grid grid--2" style="gap:clamp(18px,2.6vw,32px)">
<div data-reveal="left">
<div class="card" style="padding:clamp(24px,2.8vw,36px);height:100%">
<div class="card__icon"><i data-icon="target"></i></div>
<h3>服务宗旨</h3>
<p>
提供崭新的 IT 应用技术服务。公司与全球知名 IT 厂商携手,力求成为理念领先、管理一流、
专注于 IT 服务的高新技术企业。
</p>
<p>
我们秉承「标准、诚实、负责、尊重、快速」的服务原则,凭借深厚的技术背景以及专业的服务团队,
以领先的网络安全技术为基础,以细致、完善的服务为手段,以诚信服务客户为己任,
致力成为中国最具规模和实力的共享网络服务平台。
</p>
</div>
</div>
<div data-reveal="right">
<div class="card" style="padding:clamp(24px,2.8vw,36px);height:100%">
<div class="card__icon"><i data-icon="eye"></i></div>
<h3>我们的愿望与任务</h3>
<p><b>愿望:</b>不管在哪一天,同哪一位合作伙伴,我们都将不断超越期望,共创成功。</p>
<p><b>任务:</b>成为中国最好的 IT 服务商,使客户、伙伴、员工获得最大价值。</p>
<p style="margin-bottom:0">
<b>承诺:</b>「优化网络结构、提高网络应用、带进前沿技术、改善服务流程、规避网络风险、
跨越地域时空、服务 IT 中国」—— 这是我们对客户的承诺,更是我们的使命。
</p>
</div>
</div>
</div>
<div class="blockhead" style="margin:clamp(44px,5vw,72px) auto clamp(26px,3vw,40px);text-align:center" data-reveal>
<span class="eyebrow">Values</span>
<h2>共同的价值观</h2>
<p class="blockhead__desc">我们承诺以如下价值观,指导我们的决策和行为。</p>
</div>
<div class="grid grid--auto">
<article class="card">
<span class="card__num">01</span>
<div class="card__icon"><i data-icon="cert"></i></div>
<h3>Standard 标准</h3>
<p>基于 ITIL 服务管理体系,建立完整的服务模式,为客户提供专业服务。</p>
</article>
<article class="card">
<span class="card__num">02</span>
<div class="card__icon"><i data-icon="handshake"></i></div>
<h3>Honest 诚实</h3>
<p>始终努力去做正确的事,坚持以事实为基础,正确估计和认识风险。</p>
</article>
<article class="card">
<span class="card__num">03</span>
<div class="card__icon"><i data-icon="shield"></i></div>
<h3>Accountability 负责</h3>
<p>主动承担帮助客户成功的责任,不为短期的自身利益牺牲客户利益。</p>
</article>
<article class="card">
<span class="card__num">04</span>
<div class="card__icon"><i data-icon="users"></i></div>
<h3>Respect 尊重</h3>
<p>重视客户的企业文化和差异,满足客户的不同需求。</p>
</article>
<article class="card">
<span class="card__num">05</span>
<div class="card__icon"><i data-icon="rocket"></i></div>
<h3>Express 快速</h3>
<p>第一时间反应,健康有效处理,清晰完整反馈。</p>
</article>
</div>
</div>
</section>
<!-- ========================================================== 服务流程与内容 -->
<section class="section section--alt">
<div class="wrap">
<div class="blockhead" data-reveal>
<span class="eyebrow">Process</span>
<h2>服务流程与内容</h2>
<p class="blockhead__desc">把服务拆成可执行、可检查的动作,客户才知道我们每天在做什么。</p>
</div>
<div class="flow">
<div class="flow__item"><b>定期维护</b><p>按周期巡检设备、链路与无线环境,输出巡检报告与改进建议。</p></div>
<div class="flow__item"><b>增值服务</b><p>网络优化、容量评估、版本升级与安全策略梳理,让网络跟上业务。</p></div>
<div class="flow__item"><b>故障分级响应</b><p>按业务影响程度分级,对应不同响应时间与处理流程。</p></div>
<div class="flow__item"><b>故障处理流程</b><p>受理、定位、处置、验证、回访,全流程记录可追溯。</p></div>
<div class="flow__item"><b>服务质量管理</b><p>服务组织架构清晰、职责明确,定期复盘服务质量指标。</p></div>
</div>
<div class="grid grid--3" style="margin-top:clamp(30px,3.6vw,50px)">
<article class="card">
<div class="card__icon"><i data-icon="layers"></i></div>
<h3>服务组织架构</h3>
<p>项目经理统筹,技术工程师分专业方向支撑,服务台统一受理与跟踪。</p>
</article>
<article class="card">
<div class="card__icon"><i data-icon="settings"></i></div>
<h3>服务内容</h3>
<p>网络与安全设备维护、无线优化、故障处理、备件与升级支持、技术咨询。</p>
</article>
<article class="card">
<div class="card__icon"><i data-icon="chart"></i></div>
<h3>服务质量管理</h3>
<p>响应及时率、故障解决率、客户满意度定期统计,持续改进服务过程。</p>
</article>
</div>
</div>
</section>
<!-- ========================================================== 联系我们 -->
<section class="section" id="contact">
<div class="wrap">
<div class="split" style="align-items:start;gap:clamp(30px,4.4vw,60px)">
<div data-reveal="left">
<span class="eyebrow">Contact Us</span>
<h2>联系我们</h2>
<p>公司力求为客户提供优质、高效益、低成本的产品,服务更多客户。在成长的路上,感恩有您。</p>
<div class="grid" style="gap:14px;margin-top:26px">
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="phone"></i></span>
<div><b>联系电话 &amp; 邮箱</b>
<a href="tel:02151629599">021-51629599</a><br>
<a href="mailto:webmaster@xuanheng.info">webmaster@xuanheng.info</a>
</div>
</div>
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="mapPin"></i></span>
<div><b>公司地址</b>
<span>上海市普陀区中山北路 3323 号<br>春之声大厦 1501 室</span>
</div>
</div>
<div class="infoblock">
<span class="infoblock__ico"><i data-icon="clock"></i></span>
<div><b>工作时间</b>
<span>周一至周五 9:00 - 18:00<br>周六、周日及法定节假日休息</span>
</div>
</div>
</div>
<div class="badge-list" style="margin-top:22px">
<span class="badge"><i data-icon="spark"></i> 方案咨询</span>
<span class="badge"><i data-icon="settings"></i> 设备维护</span>
<span class="badge"><i data-icon="network"></i> 系统运维</span>
<span class="badge"><i data-icon="lock"></i> 信息安全</span>
</div>
</div>
<div data-reveal="right">
<div class="card" style="padding:clamp(24px,2.8vw,38px);border-color:var(--y-200)">
<h3 style="margin-bottom:6px">客户留言</h3>
<p class="small" style="margin-bottom:22px">您可以在这里留下意见和建议,我们会及时回复。(<span class="req">*</span> 为必填项)</p>
<form class="form" data-validate novalidate>
<div class="form__ok" role="status" aria-live="polite">
<i data-icon="check" data-icon-class="ico--solid"></i>
<span>提交成功,感谢您的留言!我们会在 1 个工作日内与您联系。</span>
</div>
<div class="form__row">
<div class="field">
<label for="f-name">您的姓名 <span class="req">*</span></label>
<input id="f-name" name="name" type="text" placeholder="请输入姓名" data-required="true" data-label="姓名" autocomplete="name">
<span class="field__err"></span>
</div>
<div class="field">
<label for="f-phone">联系电话 <span class="req">*</span></label>
<input id="f-phone" name="phone" type="tel" placeholder="请输入手机号或座机" data-required="true" data-label="联系电话" autocomplete="tel">
<span class="field__err"></span>
</div>
</div>
<div class="form__row">
<div class="field">
<label for="f-mail">电子邮箱</label>
<input id="f-mail" name="email" type="email" placeholder="name@company.com" autocomplete="email">
<span class="field__err"></span>
</div>
<div class="field">
<label for="f-company">公司名称</label>
<input id="f-company" name="company" type="text" placeholder="请输入公司名称" autocomplete="organization">
<span class="field__err"></span>
</div>
</div>
<div class="field">
<label for="f-subject">咨询主题 <span class="req">*</span></label>
<select id="f-subject" name="subject" data-required="true" data-label="咨询主题">
<option value="">请选择咨询主题</option>
<option>网络方案设计与实施</option>
<option>无线网络覆盖优化</option>
<option>信息安全与出口合规</option>
<option>IT 运维与外包服务</option>
<option>产品选型与采购</option>
<option>其他问题</option>
</select>
<span class="field__err"></span>
</div>
<div class="field">
<label for="f-msg">需求描述 <span class="req">*</span></label>
<textarea id="f-msg" name="message" placeholder="请简单描述您的场景,例如场地规模、终端数量、现有网络问题等" data-required="true" data-label="需求描述"></textarea>
<span class="field__err"></span>
</div>
<p class="form__note">提交后我们仅将信息用于本次业务联系,不会对外提供。</p>
<button class="btn btn--lg" type="submit">提交信息 <i data-icon="arrowRight"></i></button>
</form>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap">
<div class="footer__grid">
<div class="footer__col">
<div class="footer__brand">
<img class="brand__mark" src="assets/img/misc/logo-256.png" alt="" width="42" height="42">
<span class="brand__text">
<span class="brand__cn">炫恒网络</span>
<span class="brand__en">Xuanheng Network</span>
</span>
</div>
<p>上海炫恒网络系统有限公司<br>专业提供网络系统集成解决方案、信息安全解决方案以及管理服务。</p>
</div>
<div class="footer__col">
<h4>关于我们</h4>
<div class="footer__links">
<a href="about.html">企业简介</a>
<a href="brands.html">合作品牌</a>
<a href="honors.html">荣誉资质</a>
<a href="cases.html">客户案例</a>
</div>
</div>
<div class="footer__col">
<h4>发现更多</h4>
<div class="footer__links">
<a href="cases.html#realestate">地产商旅案例</a>
<a href="cases.html#industry">工厂制造案例</a>
<a href="cases.html#finance">金融行业案例</a>
<a href="cases.html#medical">医疗行业案例</a>
<a href="cases.html#retail">商业连锁案例</a>
</div>
</div>
<div class="footer__col">
<h4>联系我们</h4>
<ul class="footer__contact">
<li><i data-icon="mapPin"></i><span>上海市普陀区中山北路 3323 号<br>春之声大厦 1501 室</span></li>
<li><i data-icon="phone"></i><a href="tel:02151629599">021-51629599</a></li>
<li><i data-icon="mail"></i><a href="mailto:webmaster@xuanheng.info">webmaster@xuanheng.info</a></li>
<li><i data-icon="clock"></i><span>周一至周五 9:00 - 18:00</span></li>
</ul>
</div>
</div>
<div class="footer__bottom">
<span>Copyright © 2024 上海炫恒网络系统有限公司 <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">沪ICP备19026453号</a></span>
</div>
</div>
</footer>
<button class="totop" type="button" aria-label="回到顶部"><i data-icon="arrowUp"></i></button>
<script src="assets/lqip.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>