206 lines
8.6 KiB
Plaintext
206 lines
8.6 KiB
Plaintext
---
|
|
import Layout from "../../../layouts/Layout_2.astro";
|
|
import { Image } from "astro:assets";
|
|
import { getConfig, getExtra } from "../../../../utils/config";
|
|
import {
|
|
TP2_COLUMN_CONTACT_US,
|
|
TP2_COLUMN_CONTACT_US_URL,
|
|
TP2_COLUMN_INDEX,
|
|
TP2_COLUMN_INDEX_URL,
|
|
} from "../../../../utils/const";
|
|
import BaijiahaoLogo from '../../../../public/template_2/baijiahao.svg'
|
|
import Toutiaohao from '../../../../public/template_2/toutiaohao.svg'
|
|
import Douyin from '../../../../public/template_2/douyin.svg'
|
|
import Youxiang from '../../../../public/template_2/youxiang.svg'
|
|
const config = getConfig(Astro);
|
|
const extra = getExtra(config.app_extra_tag)
|
|
const breadcrumb = [
|
|
{ title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
|
|
{ title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
|
|
];
|
|
// 页面描述
|
|
const desc = extra.contact_us.telephone.map(item => item.number).join('; ');
|
|
---
|
|
<Layout
|
|
title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`}
|
|
description={`${config.app_name}24小时客服电话 - ${desc}`}
|
|
keywords={config.app_keywords}
|
|
breadcrumb={breadcrumb}
|
|
>
|
|
<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>
|
|
|
|
{extra.contact_us.email.length > 0 ? <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/youxiang.svg" 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> : ''
|
|
}
|
|
{
|
|
extra.douyin_offical.address ?
|
|
<li class="list-item">
|
|
<a href={extra.douyin_offical.address} target="blank">
|
|
<div class="item-content">
|
|
<Douyin class="icon-lazy"/>
|
|
<div class="txt">
|
|
<h3>{extra.douyin_offical.name}</h3>
|
|
</div>
|
|
</div>
|
|
<i class="fas fa-chevron-right"></i>
|
|
</a>
|
|
</li> : ''
|
|
}
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</Layout>
|
|
<style>
|
|
|
|
.fa-chevron-right:before {
|
|
content: ">"
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2rem ;
|
|
margin-top: 4rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
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> |