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

144
src/pages/template/4/about-us.astro Normal file
View File

@ -0,0 +1,144 @@
---
import Layout from "../../../layouts/Layout_4.astro";
import { getConfig, getExtra, getTp4Extra } from "../../../../utils/config";
import {
TP2_COLUMN_ABOUT_US,
TP2_COLUMN_ABOUT_US_URL,
TP2_COLUMN_INDEX,
TP2_COLUMN_INDEX_URL,
} from "../../../../utils/const";
const config = getConfig(Astro);
const extra = getTp4Extra(config.app_extra_tag);
---
<Layout
title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
description={`关于我们 - ${config.app_name}`}
keywords={config.app_keywords}
>
<div id="content" class="main" data-site="中国">
<main>
<div>
<!-- 活动与新闻-->
<div class="hcomponent-page-info">
<div class="news-detail-title">
<div class="container-custom fix-p-color">
<h1><span>{extra.about_us.title}{config.app_name}</span></h1>
</div>
</div>
</div>
</div>
<div class="container-custom hcomponent-share-bar">
<div class="container-custom">
<ul class="share-box list-unstyled hasLine">
<li class="line"></li>
</ul>
</div>
</div>
<div >
<div class="hcomponent-news-detail-content">
<div class="news-detail-box container-custom clearfix">
<div class="news-detail-content">
<Fragment set:html={extra.about_us.content} />
<p style="text-align: right;">{config.app_company}</p>
</div>
</div>
</div>
</div>
</main>
</div>
</Layout>
<style>
.main {
max-width: 1200px;
width: 100%;
box-sizing: border-box;
flex: 1 1 0%;
padding: 5rem;
margin: 0px auto;
padding-top: 5rem;
h1 {
span {
font-weight: bold;
}
margin-top: 0;
text-align: center;
font-size: 2rem;
}
.container-custom {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px
}
}
p {
color: #666;
font-size: 1em;
line-height: 1.95em;
margin: 0
}
@media (max-width:767px) {
.container-custom>.container-custom {
padding: 0;
}
}
.mt20{
margin-top: 20px;
}
.main .bottom-box .share-box {
margin: 20px auto 0 auto;
}
.main .share-box {
padding-left: 0;
padding-right: 0;
text-align: center;
margin-bottom: 30px;
width: 100%;
position: relative;
z-index: 99;
}
.share-box.list-unstyled:not(.hasLine){
margin-bottom: 0;
}
.main .share-box li .wechat-qrcode {
top: 30px;
height: 240px;
}
.main .share-box li .wechat-qrcode p {
text-align: center;
margin: 0;
padding: 0;
}
.main .hasLine .line {
position: absolute;
width: 100%;
height: 1px;
background: #dddddd;
top: 0;
left: 0;
top: 50%;
margin-top: -1px;
}
.main .share-box.s-bottom {
border-bottom: 1px solid #ddd;
padding-top: 40px;
padding-bottom: 40px;
margin: 20px auto 0 auto;
}
.news-detail-box {
margin-top: 5rem;
}
</style>

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

@ -0,0 +1,216 @@
---
import Layout from "../../../layouts/Layout_4.astro";
import { Image } from "astro:assets";
import { getConfig, getExtra, getTp4Extra } 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 = getTp4Extra(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; */
}
main {
max-width: 1200px;
width: 100%;
box-sizing: border-box;
flex: 1 1 0%;
padding: 5rem;
margin: 0px auto;
padding-top: 5rem;
}
</style>

313
src/pages/template/4/index.astro Normal file
View File

@ -0,0 +1,313 @@
---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_4.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getTp4Extra } from "../../../../utils/config";
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
import { newsIndex } from "../../../../utils/rpc";
const config = getConfig(Astro)
const extra = getTp4Extra(config.app_extra_tag);
const {code, data} = await newsIndex(config.id, 3);
const breadcrumb = [{
title: TP2_COLUMN_INDEX,
url: TP2_COLUMN_INDEX_URL
}]
---
<Layout
title={`${config.app_name}`}
description={config.app_description}
keywords={config.app_keywords}
breadcrumb={breadcrumb}
>
<main>
<div class="app_slider d-flex align-items-center fix">
<div class="App_shape-circle">
<img class="shapeAbsoulute scale-upOne d-sm-none d-md-block" src="/template_4/images/shape/circle.png" alt=""/>
<img class="shape10" src="/template_4/images/shape/shape10.png" alt=""/>
<img class="shape13" src="/template_4/images/shape/shape13.png" alt=""/>
</div>
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4">
<div class="App_shape wow fadeInLeft d-sm-none d-md-block d-none d-sm-block" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInLeft;">
<img src="/template_4/images/shape/mainshape.png" alt=""/>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 d-flex align-items-center">
<div class="app_sliderContent">
<div class="shapeesright">
<img class="shape1" src="/template_4/images/shape/shape1.png" alt=""/>
<img class="shape2" src="/template_4/images/shape/shape2.png" alt=""/>
<img class="shape3" src="/template_4/images/shape/shape3.png" alt=""/>
<img class="shape4" src="/template_4/images/shape/shape4.png" alt=""/>
<img class="shape5" src="/template_4/images/shape/shape5.png" alt=""/>
<img class="shape6" src="/template_4/images/shape/shape6.png" alt=""/>
<img class="shape7" src="/template_4/images/shape/shape7.png" alt=""/>
<img class="shape8" src="/template_4/images/shape/shape8.png" alt=""/>
<img class="shape9" src="/template_4/images/shape/shape9.png" alt=""/>
<img class="shape11" src="/template_4/images/shape/shape5.png" alt=""/>
</div>
<h2 class="hero-two-title">{extra.sc1.text1}<br> {extra.sc1.text2}</h2>
<p>{extra.sc1.text3}</p>
</div>
</div>
</div>
</div>
</div>
<!-- FETURES START -->
<div class="homefeture_1 pt-115 pb-130">
<div class="container">
<div class="app_left_shape">
<img class="leftanimation d-none d-sm-block" src="/template_4/images/shape/left.png" alt="leftshape"/>
<img src="/template_4/images/shape/shape7.png" alt="leftshape"/>
<img class="downsahpe d-none d-sm-block" src="/template_4/images/shape/shape3.png" alt="leftshape"/>
</div>
<div class="section_title_wrapper text-center wow fadeInUp mb-70" data-wow-delay="0.3s" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;">
<h2 class="section-title">{extra.sc2.text1}</h2>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
<div class="feabox mb-30">
<div class="feabox__img mb-50">
<Image src={`/template_4/images/fetures/forma1.svg`} alt="pic" width={80} height={80}/>
</div>
<div class="feabox__content">
<h3 class="feabox-title tcolor0">{extra.sc2.text2}</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
<div class="feabox mb-30 clr1">
<div class="feabox__img img1 mb-50">
<img src="/template_4/images/fetures/Forma2.png" alt="form2"/>
</div>
<div class="feabox__content">
<h3 class="feabox-title tcolor1">{extra.sc2.text3}</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
<div class="feabox mb-30 clr2">
<div class="feabox__img img2 mb-50">
<img src="/template_4/images/fetures/Forma3.png" alt="form3"/>
</div>
<div class="feabox__content">
<h3 class="feabox-title tcolor2">{extra.sc2.text4}</h3>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-6 feabox-container">
<div class="feabox mb-30 clr3">
<div class="feabox__img img3 mb-50">
<img src="/template_4/images/fetures/Forma4.png" alt="form4"/>
</div>
<div class="feabox__content">
<h3 class="feabox-title tcolor3">{extra.sc2.text5}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- FETURES END -->
<!-- APP DETAILS START -->
<div class="app_details pb-20">
<div class="container">
<div class="row align-items-center">
<div class="col-xl-7 col-lg-6 col-md-12">
<div class="details_content pb-70">
<h2 class="section-title section_title_large">{extra.sc3.text1}</h2>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="feature3">
<div class="feature3__image">
<img class="pb-30" src="/template_4/images/service/s7.png" alt="details"/>
</div>
<div class="feature3__content">
<h4 class="content_title">{extra.sc3.text2}</h4>
<p>{extra.sc3.text3}</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="feature3 pl-40">
<div class="feature3__image febg1">
<img class="pb-30" src="/template_4/images/fetures/s2.png" alt="details"/>
</div>
<div class="feature3__content">
<h4 class="content_title">{extra.sc3.text4}</h4>
<p>{extra.sc3.text5}</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="feature3">
<div class="feature3__image febg2">
<img class="pb-30" src="/template_4/images/fetures/s3.png" alt="details"/>
</div>
<div class="feature3__content">
<h4 class="content_title">{extra.sc3.text6}</h4>
<p>{extra.sc3.text7}</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6">
<div class="feature3 pl-40">
<div class="feature3__image febg3">
<img class="pb-30" src="/template_4/images/fetures/s4.png" alt="details"/>
</div>
<div class="feature3__content">
<h4 class="content_title">{extra.sc3.text8}</h4>
<p>{extra.sc3.text9}</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-6 col-lg-6 col-md-12 d-md-none d-lg-block d-sm-none d-md-block d-sm-block">
<div class="wow zoomIn" data-wow-delay=".3s" style="visibility: visible; animation-delay: 0.2s; animation-name: zoomIn;">
<img src="/template_4/images/fetures/mockup.png" alt="blogshape"/>
</div>
</div>
</div>
</div>
</div>
<!-- APP DETAILS END -->
<!-- DOWNLOAD START -->
<div class="download-area pt-50 mt-100">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-4 col-sm-12 d-sm-none d-md-block">
<div class="download_image">
<img class="dw d-none d-sm-block" src="/template_4/images/shape/iphon2.png" alt="download_shape"/>
<img class="downloadpos d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/iphone3.png" alt="download_shape"/>
<img class="downloadpos2 d-md-none d-lg-block d-none d-sm-block" src="/template_4/images/shape/circle.png" alt="download_shape"/>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-8 col-sm-12">
<div class="download_content pl-105 pt-90">
<h2 class="section-title">{extra?.sc4?.text1}</h2>
<p>{extra?.sc4?.text2}</p>
<div class="download-btn">
<a class="tp_download" href={extra?.sc4?.text3}><Image width={50} height={50} alt="huawei-store" src={`/template_4/images/store/huawei.svg`} /></a>
<a class="tp_download" href={extra?.sc4?.text4}><Image width={50} height={50} alt="xiaomi-store" src={`/template_4/images/store/xiaomi.svg`} /></a>
<a class="tp_download" href={extra?.sc4?.text5}><Image width={50} height={50} alt="tencent-store" src={`/template_4/images/store/tencent.svg`} /></a>
<a class="tp_download" href={extra?.sc4?.text6}><Image width={50} height={50} alt="wandoujia-store" src={`/template_4/images/store/wandoujia.svg`} /></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- DOWNLOAD END -->
<div class="blog3">
<div class="container">
<div class="section_title_wrapper mb-60 text-center">
<h2 class="section-title team_title_h3">新闻产品资讯</h2>
</div>
<div class="row">
{
data.map(item => {
return <div class="col-xl-4 col-lg-4 col-md-6">
<div class="blog">
<a href={`/news/${item.id}`}>
<div class="blog__image">
<Image class="blog-image" width={100} height={100} alt={item.title} src={item.cover} />
{/* <img src="assets/img/Blog/blog1.png" alt="blogImage"> */}
</div>
<div class="blog__meta">
<span>{item.created_at}</span>
<div><h3 class="title">{item.title}</h3></div>
</div>
</a>
</div>
</div>
})
}
</div>
</div>
</div>
<!-- TRY START -->
<div class="social_share mb-100">
<div class="container">
<div class="section_title_wrapper mb-80 text-center mt-115">
<h2 class="section-title mb-20">{extra?.sc5?.text1}</p>
</div>
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
<div class="share align-items-center mb-30">
<div class="share__icon">
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/vivo.svg`} />
</div>
<div class="share__content">
<h4>vivo</h4>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
<div class="share align-items-center mb-30">
<div class="share__icon">
<!-- <img src="assets/img/social/twitter.png" alt="shareIcon"> -->
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/huawei.svg`} />
</div>
<div class="share__content">
<h4>华为</h4>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
<div class="share align-items-center mb-30">
<div class="share__icon">
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/xiaomi.svg`} />
</div>
<div class="share__content">
<h4>小米</h4>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-4 col-md-6 share-container">
<div class="share align-items-center mb-30">
<div class="share__icon">
<Image class="shareIcon" height={100} width={100} alt="huawei" src={`/common/oppo.svg`} />
</div>
<div class="share__content">
<h4>OPPO</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- TRY END -->
</main>
</Layout>
<style>
.blog-image {
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
-webkit-line-clamp: 1;
overflow: hidden;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.title {
-webkit-line-clamp: 1;
overflow: hidden;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>

224
src/pages/template/4/news.astro Normal file
View File

@ -0,0 +1,224 @@
---
import Layout from '../../../layouts/Layout_4.astro';
import { newsIndex } from '../../../../utils/rpc';
import { getConfig } from '../../../../utils/config';
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from '../../../../utils/const';
const config = getConfig(Astro)
const {code, data} = await newsIndex(config.id);
---
<Layout
title={TP2_COLUMN_NEWS + `- ${config.app_name}`}
description={`新闻专栏 - ${config.app_name}`}
keywords={config.app_keywords}
>
<main class="v4 main page-news">
<div class="news-list-component">
<div class="container">
<div class="wrap wrap--small">
<div class="result-product">
<div class="result-product__items news-archive-items">
{
data.map(news => (
<a href={`/news/${news.id}`} title={news.title} class="result-product__item result-product__item--border">
<div class="result-product__content">
<span class="result-product__label">{news.created_at}</span>
<div class="heading result-product__title">{news.title}</div>
<p class="result-product__info">{news.description}</p>
</div>
<div class="result-product__media ">
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="">
</div>
</a>
))
}
</div>
</div>
</div>
</div>
</div>
</main>
</Layout>
<style>
.page-news {
background-color: #fff !important;
padding-top: 5rem;
.result-product__image {
border-radius: 16px;
}
.columns-name {
font-size: 5rem;
padding: 3rem;
}
@media only screen and (max-width: 767.98px) {
.columns-name {
font-size: 2rem;
padding: 1rem;
}
}
.result-product__media {
-webkit-box-flex: 0;
-webkit-flex: 0 0 260px;
-ms-flex: 0 0 260px;
flex: 0 0 260px;
max-width: 260px;
height: 173.3px;
position: relative
}
.result-product__image {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
border: 0;
vertical-align: middle;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
cursor: pointer
}
.result-product__item {
justify-content: space-between;
align-items: center;
}
.result-product__info {
font-size: 16px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.5
}
.result-product__label {
font-size: 14px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.71;
display: block;
margin-bottom: 8px
}
.result-product__title {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #000;
display: block;
margin-bottom: 8px;
max-height: 120px;
overflow: hidden
}
.result-product__item--border {
border-bottom: 1px solid #ededed
}
.result-product__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 32px 0
}
.result-product {
margin-bottom: 80px
}
.result-product:last-of-type {
margin-bottom: 0
}
.result-product__items {
display: block;
background-color: #fff
}
.result-product__item {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding: 32px 0
}
@media only screen and (min-width: 1200px) {
.no-touch .result-product__item:hover .result-product__title {
color:#7f7f7f
}
.no-touch .result-product__item:hover .result-product__image--thumb::before {
opacity: .5
}
}
@media screen and (max-width: 768px) {
.result-product__media {
-webkit-box-flex: 0;
-webkit-flex: 0 0 120px;
-ms-flex: 0 0 120px;
flex: 0 0 120px;
height: 90px;
background-color: unset
}
.result-product__info {
display: none;
}
.result-product__title {
font-size: 15px;
}
.result-product__content {
display: flex;
flex-direction: column-reverse;
}
}
.result-product__item--border {
border-bottom: 1px solid #ededed
}
.result-product__item-title {
font-size: 22px;
font-weight: 700;
line-height: 1.45;
color: #000;
display: block;
padding-bottom: 24px;
padding-top: 80px
}
.result-product__item-title--big {
font-size: 32px;
line-height: 1.25;
letter-spacing: -0.5px
}
.result-product__label {
font-size: 14px;
font-weight: 500;
color: #7f7f7f;
line-height: 1.71;
display: block;
margin-bottom: 8px
}
.result-product__content-text {
position: relative;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 50%;
max-width: 730px;
padding-right: 20px
}
}
</style>

336
src/pages/template/4/news/[...slug].astro Normal file
View File

@ -0,0 +1,336 @@
---
import Layout from '../../../../layouts/Layout_4.astro';
import { newsDetail } from '../../../../../utils/rpc';
import { getConfig } from '../../../../../utils/config';
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../../utils/const';
const { slug } = Astro.params;
const config = getConfig(Astro)
if (!slug) {
return Astro.redirect('/500');
}
const {code, data} = await newsDetail(slug, config.id);
if (!data || code !== 0) {
return Astro.redirect('/404');
}
const breadcrumb = [{
title: '主页',
url: '/'
}, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
---
<Layout breadcrumb={breadcrumb} title={`${data.title} - ${config.app_name}`} keywords={data.keywords} description={data.description}>
<div>
<main class="news-main">
<div class="news-container">
<article class="news-detail-content">
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
<h1 class="title" title="标题">{data.title}</h1>
<div class="top-icon"></div>
<div class="news-content" set:html={data.content}>
</div>
<div class="news-navigation">
{
data.prevNews && (
<div>
<span>上一篇: </span>
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
</div>
)
}
{
data.nextNews && (
<div>
<span>下一篇: </span>
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
</div>
)
}
</div>
</article>
<!-- <aside class="news-sidebar">
<div class="related-news">
<h3>相关新闻</h3>
<ul>
{data.about.map(item => (
<li>
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
<span class="related-title">{item.title}</span>
{/* <span class="related-date">{item.date}</span> */}
</a>
</li>
))}
</ul>
</div>
</aside> -->
</div>
</main>
</div>
<style is:inline>
.news-content p {
margin: 20px 0;
color: #6f6f6f;
font-size: 18px;
line-height: 32px;
}
.news-content img {
max-width: 100%;
height: auto;
}
</style>
<style>
main {
margin-top: 5rem;
}
article {
width: 50rem;
}
/* .news-main {
margin-top: 5rem;
} */
.top-icon {
padding-bottom: 30px;
border-bottom: 1px solid #e0e0e0
}
.news-date {
font-weight: 700;
font-size: 14px;
color: #d0021b;
line-height: 17px;
margin-bottom: 30px;
display: inline-block
}
.news-meta {
border-bottom: 1px solid var(--text-primary);
color: black;
padding-bottom: 1rem;
margin-bottom: 1rem;
}
.title {
font-size: 2.5rem;
text-align: left;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
line-height: 1.4;
}
.news-meta {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 1.5rem;
}
.news-meta span{
color: var(--text-primary);
}
/* .news-date, .news-author {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
} */
.news-author a {
color: black;
text-decoration: none;
}
/*
.news-date::before {
content: '📅';
}
.news-author::before {
content: '👤';
} */
.news-tags {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.news-tag {
background: rgba(255, 255, 255, 0.15);
color: white;
padding: 0.3rem 1rem;
border-radius: var(--radius-md);
font-size: 0.9rem;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.news-tag:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
}
.news-container {
/* max-width: 1200px; */
/* margin: -2rem auto 0; */
/* padding: 0 1.5rem 3rem; */
/* display: grid; */
/* grid-template-columns: 1fr 320px; */
/* gap: 2.5rem; */
position: relative;
display: flex;
justify-content: center;
}
.news-detail-content {
border-right: 1px solid var(--text-primary);
padding: 3rem;
position: relative;
overflow: hidden;
}
.news-content {
padding-top: 3rem;
font-size: 1.1rem;
line-height: 1.3;
}
.news-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.news-images img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
transition: transform 0.3s ease;
}
.news-images img:hover {
transform: scale(1.02);
}
.news-content p {
margin-bottom: 1.8rem;
}
.news-content p:last-child {
margin-bottom: 0;
}
.news-navigation {
margin-top: 1rem;
padding-top: 2rem;
border-top: 1px solid var(--divider-color);
}
.news-sidebar {
position: sticky;
top: 2rem;
height: fit-content;
}
.related-news {
padding: 1rem;
/* box-shadow: var(--shadow-lg); */
}
.related-news h3 {
font-size: 1.2rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--text-primary);
}
.related-news ul {
list-style: none;
padding: 0;
margin: 0;
}
.related-news li {
/* margin-bottom: 1.2rem;
padding-bottom: 1.2rem; */
border-bottom: 1px solid var(--divider-color);
}
.related-news li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.related-news a {
display: flex;
flex-direction: column;
gap: 0.5rem;
text-decoration: none;
/* color: var(--text-secondary); */
/* color: black; */
transition: all 0.3s ease;
padding: 0.4rem;
border-radius: var(--radius-md);
}
.related-news a:hover {
transform: translateX(5px);
}
.related-title {
font-size: 1rem;
line-height: 1.5;
}
.related-date {
font-size: 0.9rem;
color: var(--text-tertiary);
}
@media (max-width: 1024px) {
.news-container {
grid-template-columns: 1fr;
margin-top: -1rem;
}
.news-sidebar {
position: static;
}
}
@media (max-width: 480px) {
.news-detail-content {
padding: 1.5rem;
border: none;
}
.news-share {
flex-wrap: wrap;
gap: 0.8rem;
}
.share-btn {
width: 100%;
text-align: center;
}
}
</style>
</Layout>