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-14 14:44:23 +08:00
parent 4cde0fb334
commit ce686563bf
154 changed files with 19355 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
src/pages/template/5/contact-us.astro Normal file
View File

@ -0,0 +1,216 @@
---
import Layout from "../../../layouts/Layout_5.astro";
import { Image } from "astro:assets";
import { getConfig, getExtra, getTp5Extra } 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/common/baijiahao.svg'
import Toutiaohao from '../../../../public/common/toutiaohao.svg'
import Douyin from '../../../../public/common/douyin.svg'
import Youxiang from '../../../../public/common/youxiang.svg'
const config = getConfig(Astro);
const extra = getTp5Extra(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;color:#000000">{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; */
}
main {
max-width: 1200px;
width: 100%;
box-sizing: border-box;
flex: 1 1 0%;
/* padding: 5rem; */
margin: 0px auto;
padding-top: 5rem;
}
</style>