toom1996/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
toom1996
2025-07-02 16:32:48 +08:00
parent 945bb01109
commit be3b82a10a
42 changed files with 13608 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
src/components/template_2/Footer.astro Normal file
View File

@ -0,0 +1,476 @@
---
import { getConfig } from "../../../utils/config";
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_ABOUT_US, TP2_COLUMN_ABOUT_US_URL, TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL, TP2_COLUMN_PROTECT, TP2_COLUMN_PROTECT_URL } from "../../../utils/const";
const config = getConfig(Astro)
const { path = [] } = Astro.props
---
<footer class="v4 n09-footer footer" data-component="n09-footer">
<div class="container">
<div class="breadcrumbs">
<ul class="breadcrumbs__list">
{
path?.map(e => {
return <li class="breadcrumbs__item">
<a class="breadcrumbs__link" title={e.title} href={`${e.url}`}>{e.title}</a>
</li>
})
}
</ul>
</div>
<div class="usp-wrap"></div>
<div class="footer-links">
<div class="row">
<div class="col-xl-2 col-lg-4">
<div class="footer-links__block">
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
购买产品
</div>
<ul class="footer-links__list" role="menubar">
<li class="footer-links__item" role="menuitem">
<a title="手机" data-title="手机" class="footer-links__link" href="/cn/phones/">
手机
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="穿戴" data-title="穿戴" class="footer-links__link" href="/cn/wearables/">
穿戴
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="鸿蒙电脑" data-title="鸿蒙电脑" class="footer-links__link" href="/cn/harmonyos-computer/">
鸿蒙电脑
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="笔记本" data-title="笔记本" class="footer-links__link" href="/cn/laptops/">
笔记本
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="显示器" data-title="显示器" class="footer-links__link" href="/cn/monitors/">
显示器
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="打印机" data-title="打印机" class="footer-links__link" href="/cn/printers/">
打印机
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="平板" data-title="平板" class="footer-links__link" href="/cn/tablets/">
平板
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="智慧屏" data-title="智慧屏" class="footer-links__link" href="/cn/visions/">
智慧屏
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="耳机音箱" data-title="耳机音箱" class="footer-links__link" href="/cn/audio/">
耳机音箱
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="路由器" data-title="路由器" class="footer-links__link" href="/cn/routers/">
路由器
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="配件" data-title="配件" class="footer-links__link" href="/cn/accessories/overview/">
配件
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="商用产品" data-title="商用产品" class="footer-links__link" href="https://qingyun.huawei.com/products-and-solutions/?utm_medium=referral&utm_source=consumer.huawei.com" target="_blank" rel="noopener noreferrer">
商用产品
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="教育商店" data-title="教育商店" class="footer-links__link" href="https://www.vmall.com/portal/activity/index.html?pn=educationcenterpc" target="_blank" rel="noopener noreferrer">
教育商店
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="footer-links__block">
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">服务支持</div>
<ul class="footer-links__list" role="menubar">
<li class="footer-links__item" role="menuitem">
<a title="保修政策" data-title="保修政策" class="footer-links__link" href="/cn/support/warranty-policy/">
保修政策
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="上门安装" data-title="上门安装" class="footer-links__link" href="/cn/support/install/">
上门安装
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="维修服务" data-title="维修服务" class="footer-links__link" href="/cn/support/break-fix/">
维修服务
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="保修期及权益查询" data-title="保修期及权益查询" class="footer-links__link" href="/cn/support/warranty-query/">
保修期及权益查询
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="维修备件价格" data-title="维修备件价格" class="footer-links__link" href="/cn/support/sparepart-price/">
维修备件价格
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="服务进度查询" data-title="服务进度查询" class="footer-links__link" href="/cn/support/inquiry/">
服务进度查询
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title={TP2_COLUMN_CONTACT_US} class="footer-links__link" href={TP2_COLUMN_CONTACT_US_URL}>
{TP2_COLUMN_CONTACT_US}
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="服务隐私声明" data-title="服务隐私声明" class="footer-links__link" href="/cn/support/service-privacy-notice/">
服务隐私声明
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="商用服务" data-title="商用服务" class="footer-links__link" href="https://bsupport.huawei.com/" target="_blank" rel="noopener noreferrer">
商用服务
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="footer-links__block">
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
应用与下载
</div>
<ul class="footer-links__list" role="menubar">
<li class="footer-links__item" role="menuitem">
<a title="终端云服务" data-title="终端云服务" class="footer-links__link" href="/cn/mobileservices/">
终端云服务
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为商城 APP" data-title="华为商城 APP" class="footer-links__link" href="https://m.vmall.com/app/download?cid=1457312" target="_blank" rel="noopener noreferrer">
华为商城 APP
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="我的华为 APP " data-title="我的华为 APP " class="footer-links__link" href="/cn/myhuawei-app/">
我的华为 APP
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为手机助手" data-title="华为手机助手" class="footer-links__link" href="https://consumer.huawei.com/cn/support/hisuite/">
华为手机助手
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为电脑管家" data-title="华为电脑管家" class="footer-links__link" href="https://consumer.huawei.com/cn/support/pc-manager/">
华为电脑管家
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="HarmonyOS 5" data-title="HarmonyOS 5" class="footer-links__link" href="/cn/harmonyos-next/">
HarmonyOS 5
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="预置应用公示" data-title="预置应用公示" class="footer-links__link" href="/cn/support/apk/">
预置应用公示
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="HUAWEI HiCar" data-title="HUAWEI HiCar" class="footer-links__link" href="/cn/phones/hicar/">
HUAWEI HiCar
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="footer-links__block">
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
新闻中心
</div>
<ul class="footer-links__list" role="menubar">
<li class="footer-links__item" role="menuitem">
<a title={TP2_COLUMN_NEWS} class="footer-links__link" href={TP2_COLUMN_NEWS_URL}>
{TP2_COLUMN_NEWS}
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为活动" class="footer-links__link" href="/cn/press/events/">
华为活动
</a>
</li>
</ul>
</div>
</div>
<div class="col-xl-2 col-lg-4">
<div class="footer-links__block">
<div class="heading footer-links__title heading-06 js-footer-accordion-btn">
关于我们
</div>
<ul class="footer-links__list" role="menubar">
<li class="footer-links__item" role="menuitem">
<a title={TP2_COLUMN_ABOUT_US} class="footer-links__link" href={TP2_COLUMN_ABOUT_US_URL}>
{TP2_COLUMN_ABOUT_US}
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="可持续发展" data-title="可持续发展" class="footer-links__link" href="/cn/sustainability/">
可持续发展
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="隐私" data-title="隐私" class="footer-links__link" href="/cn/privacy/privacy-statement-huawei/">
隐私
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为商城" data-title="华为商城" class="footer-links__link" href="https://www.vmall.com/index.html?cid=27629229" target="_blank" rel="noopener noreferrer">
华为商城
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="HarmonyOS 开发者" data-title="HarmonyOS 开发者" class="footer-links__link" href="https://developer.huawei.com/consumer/cn/" target="_blank" rel="noopener noreferrer">
HarmonyOS 开发者
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为云" data-title="华为云" class="footer-links__link" href="https://www.huaweicloud.com/" target="_blank" rel="noopener noreferrer">
华为云
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="企业业务" data-title="企业业务" class="footer-links__link" href="https://e.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
企业业务
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="运营商网络" data-title="运营商网络" class="footer-links__link" href="https://carrier.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
运营商网络
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="华为集团" data-title="华为集团" class="footer-links__link" href="https://www.huawei.com/cn/" target="_blank" rel="noopener noreferrer">
华为集团
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="加入华为" data-title="加入华为" class="footer-links__link" href="https://career.huawei.com/reccampportal/campus4_index.html#campus4/content.html" target="_blank" rel="noopener noreferrer">
加入华为
</a>
</li>
<li class="footer-links__item" role="menuitem">
<a title="内容举报" data-title="内容举报" class="footer-links__link
goto-complaint-page" href="/cn/complaint-page/" target="_blank" rel="noopener noreferrer">
内容举报
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="contact">
<div class="row">
<div class="contact__block col-xl-2 col-md-6">
<div class="heading contact__title heading-06">
在线支持
</div>
<p class="contact__text">
<a title="消费者服务热线">消费者服务热线</a>
</p>
<p class="contact__text phone-icon">950800</p>
<p class="contact__text">
<a title="7*24小时 | 普通话">7*24小时 | 普通话</a>
</p>
<p class="contact__text phone-icon">950801</p>
<p class="contact__text">
<a href="https://celia.consumer.huawei.com/official/#/?businessUUID=fe8192189f0a40e8a883ab8bdf1ba8ea" title="在线客服 | 7*24小时" target="_blank" rel="noopener noreferrer">在线客服 | 7*24小时</a>
</p>
</div>
<div class="contact__block col-xl-2 col-md-6">
<div class="heading contact__title heading-06">
线下支持
</div>
<p class="contact__text">
<a href="/cn/support/service-center/" title="服务店查询">服务店查询</a>
</p>
<p class="contact__text">
<a href="/cn/retail/" title="零售店查询">零售店查询</a>
</p>
</div>
<!-- <div class="contact__block col-xl-4 col-md-6">
<div class="heading contact__title heading-06">
关注我们
</div>
<ul class="contact__social-links lazyload-target">
<li class="contact__social-item">
<a title="微信" class="contact__social-link" data-social="weixin">
<span class="icon-lazy" data-name="font-ico-weixin"></span>
<span class="contact__social-qrcode">
<picture>
<source class="lazyload-img" media="(max-width: 1199.98px)" data-srcset="//consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/v4/footer/weixin-mob.jpg" />
<img class="lazyload-img" data-src="//consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/v4/footer/weixin.jpg" alt="weixin" srcset="" />
</picture>
</span>
</a>
</li>
<li class="contact__social-item">
<a title="微博" class="contact__social-link" data-social="weibo" href="http://t.sina.com.cn/huaweidevice" target="_blank" rel="noopener noreferrer">
<span class="icon-lazy" data-name="font-ico-weibo"></span>
</a>
</li>
</ul>
</div> -->
</div>
</div>
<div class="footer-legals">
<div class="row">
<div class="copyright col-xl-4 col-md-8">
<small class="copyright__text">版权所有 © {config.app_company}
。保留一切权利。{config.app_biling}</small>
</div>
<div class="bottom-links col-xl-5">
<ul class="bottom-links__list">
<li class="bottom-links__item">
<a title="使用条款" class="bottom-links__link" href="/cn/legal/terms-of-use/">
使用条款
</a>
</li>
<li class="bottom-links__item">
<a title="隐私声明" class="bottom-links__link" href="/cn/privacy/privacy-policy/">
隐私声明
</a>
</li>
<li class="bottom-links__item">
<a title="法律信息" class="bottom-links__link" href="/cn/legal/">
法律信息
</a>
</li>
<li class="bottom-links__item">
<a title={TP2_COLUMN_PROTECT} class="bottom-links__link" href={TP2_COLUMN_PROTECT_URL}>
{TP2_COLUMN_PROTECT}
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<style>
.footer-legals .row {
justify-content: space-between;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
function isMobile() {
return window.innerWidth <= 991;
}
function setupFooterAccordion() {
const btns = document.querySelectorAll('.js-footer-accordion-btn');
btns.forEach(btn => {
// 先重置
btn.setAttribute('aria-expanded', 'false');
btn.classList.remove('footer-links__title--active');
const list = btn.nextElementSibling;
if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
list.style.display = '';
}
// 只在小屏下绑定
(btn as HTMLElement).onclick = function (e: MouseEvent) {
if (!isMobile()) return;
e.preventDefault();
const isActive = btn.classList.toggle('footer-links__title--active');
btn.setAttribute('aria-expanded', isActive ? 'true' : 'false');
// 展开/收起对应的 ul
if (list && list.classList.contains('footer-links__list') && list instanceof HTMLElement) {
list.style.display = isActive ? 'block' : 'none';
}
// 收起其它
btns.forEach(otherBtn => {
if (otherBtn !== btn) {
otherBtn.classList.remove('footer-links__title--active');
otherBtn.setAttribute('aria-expanded', 'false');
const otherList = otherBtn.nextElementSibling;
if (otherList && otherList.classList.contains('footer-links__list') && otherList instanceof HTMLElement) {
otherList.style.display = 'none';
}
}
});
};
});
}
// 初始化
setupFooterAccordion();
// 屏幕尺寸变化时重置
window.addEventListener('resize', setupFooterAccordion);
});
</script>