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-03 17:24:35 +08:00
parent 99e4dd1667
commit f61f0bcc6f
15 changed files with 1385 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/pages/template/2/contact-us.astro
View File

@ -1,9 +1,12 @@
---
import Layout from "../../../layouts/Layout_2.astro";
import { getConfig } from "../../../../utils/config";
import { Image } from "astro:assets";
import { getConfig, getExtra } from "../../../../utils/config";
import { TP2_COLUMN_CONTACT_US, TP2_COLUMN_CONTACT_US_URL } from "../../../../utils/const";
import Dianhua from "../../../../public/template_2/contact-us/dianhua.svg";
import Youxiang from "../../../../public/template_2/contact-us/youxiang.svg";
import BaijiahaoLogo from '../../../../public/template_2/baijiahao.svg'
import Toutiaohao from '../../../../public/template_2/toutiaohao.svg'
// import Youxiang from "../../../../public/template_2/contact-us/youxiang.svg";
const extra = getExtra('')
const config = getConfig(Astro);
const breadcrumb = [
{ title: '主页', url: '/' },
@ -11,80 +14,167 @@ const breadcrumb = [
];
---
<Layout title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`} breadcrumb={breadcrumb}>
<div id="csr">
<!-- sec conta -->
<section class="sec_conta">
<div class="look_mainTit conta_title">如对本报告有任何建议和意见，请通过以下方式与华为<span class="nr">联系：</span></div>
<div class="conta_lists">
<div class="conta_list">
<div class="conta_ti">
<Dianhua class="conta_svg" />
<span class="look_smalTit conta_span sec_both">电话</span>
</div>
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
<div class="look_mainTit text_color conta_tx">+86-(0)755-28780808</div>
</div>
<div class="conta_list">
<div class="conta_ti">
<Youxiang class="conta_svg" />
<span class="look_smalTit conta_span sec_both">电子邮箱!!</span>
</div>
<div class="look_mainTit text_color conta_tx">
<a class="a-btn-link4 text_color" data-pagename="ConsumerCSD@Huawei.com" data-linkname="ConsumerCSD@Huawei.com" href="mailto:ConsumerCSD@Huawei.com">ConsumerCSD@Huawei.com
</a>
</div>
</div>
</div>
<main>
<div class="contact-container">
<h1 style="font-size: 5rem;margin-bottom: 5rem;">{extra.contact_us.title}</h1>
<!-- <Fragment set:html={extra.contact_us.content}/> -->
<section class="list-box">
<h2 class="list-title">在线客服</h2>
<ul>
{
extra.contact_us.telephone.map(e => {
return <li class="list-item">
<a href={`tel:${e.number}`}>
<div class="item-content">
<Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系热线"/>
<div class="txt">
<h3 style="margin-left: 1rem;font-weight: bold;">{e.number}</h3>
<h4 style="margin-left: 1rem;">24小时全国热线</h4>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li>
})
}
</ul>
<h2 class="list-title">联系邮箱</h2>
<ul>
{
extra.contact_us.email.map(e => {
return <li class="list-item">
<a href={`tel:${e.address}`}>
<div class="item-content">
<Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系邮箱"/>
<div class="txt">
<h3 style="margin-left: 1rem;font-weight: bold;">{e.address}</h3>
<h4 style="margin-left: 1rem;"></h4>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li>
})
}
</ul>
<h2 class="list-title">官方媒体平台</h2>
<ul>
{
extra.weibo_offical.address ?
<li class="list-item">
<a href={extra.weibo_offical.address} target="blank">
<div class="item-content">
<span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
<div class="txt">
<h3>{extra.weibo_offical.name}</h3>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li> : ''
}
{
extra.gongzhonghao_offical.address ?
<li class="list-item">
<a href={extra.gongzhonghao_offical.address} target="blank">
<div class="item-content">
<span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
<div class="txt">
<h3>{extra.gongzhonghao_offical.name}</h3>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li> : ''
}
{
extra.baijiahao_offical.address ?
<li class="list-item">
<a href={extra.baijiahao_offical.address} target="blank">
<div class="item-content">
<BaijiahaoLogo class="icon-lazy" />
<div class="txt">
<h3>{extra.baijiahao_offical.name}</h3>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li> : ''
}
{
extra.toutiaohao_offical.address ?
<li class="list-item">
<a href={extra.toutiaohao_offical.address} target="blank">
<div class="item-content">
<Toutiaohao class="icon-lazy"/>
<div class="txt">
<h3>{extra.toutiaohao_offical.name}</h3>
</div>
</div>
<i class="fas fa-chevron-right"></i>
</a>
</li> : ''
}
</ul>
</section>
</div>
</main>
</Layout>
<style>
#csr {
.sec_conta {
margin-left: auto;
margin-right: auto;
width: 68.22917vw;
margin-top: 10rem;
}
.sec_conta .conta_ti {
width: 100%;
height: 3.64583vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.sec_conta .conta_list {
width: 33.59375vw;
border-radius: 1.04167vw;
overflow: hidden;
background-color: #f5f5f7;
/* padding: 4.6875vw 0 1.82292vw; */
text-align: center;
}
.fa-chevron-right:before {
content: ">"
}
.sec_conta .conta_svg {
width: 3.39583vw;
}
h2 {
font-size: 2rem ;
margin-top: 4rem;
margin-bottom: 1rem;
}
.sec_conta .conta_lists {
margin-top: 3rem;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
h3 {
margin-left: 1rem;
font-weight: bold;
}
h4 {
margin-left: 1rem;
color: #7f7f7f;
}
.icon-lazy {
width: 50px;
height: 50px;
}
.contact-container {
padding-top: 5rem;
}
.list-item {
border-top: 0.01rem solid #d8d8d8;
}
.item-content{
display: flex;
justify-content: center;
}
.txt {
display: flex;
justify-content: center;
align-items: center;
}
.list-box .list-item>a {
padding: 1.5rem;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
/* height: 1.08rem; */
}
</style>