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/5/about-us.astro Normal file
View File

@ -0,0 +1,144 @@
---
import Layout from "../../../layouts/Layout_5.astro";
import { getConfig, getExtra, getTp5Extra } 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 = getTp5Extra(config.app_extra_tag);
console.log(extra)
---
<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 slot="banner-slot">
<!-- 活动与新闻-->
<div class="hcomponent-page-info">
<div class="news-detail-title">
<div class="container-custom fix-p-color">
<h1 style="color: #000000;"><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%;
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/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>

348
src/pages/template/5/index.astro Normal file
View File

@ -0,0 +1,348 @@
---
import "swiper/swiper-bundle.css";
import Layout from "../../../layouts/Layout_5.astro";
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
import { Image } from 'astro:assets';
import { getConfig, getTp5Extra } 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 = getTp5Extra(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}
>
<section class="banner-section" slot="banner-slot">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="banner_content" data-aos="fade-down">
<h1>知屿寻光 </h1>
<h3 class="text-white">学徒追光，知海寻明</h3>
<p class="text-white">"知屿寻光"是一款融合课程学习与阅读功能的综合平台，专为热爱知识和自我提升的用户打造。平台汇聚了各类精品课程、书籍、讲座等资源，涵盖了从文学艺术到科技创新、从职场技能到个人成长等多个领域，满足不同用户的学习需求。我们致力于为用户提供多元化的知识获取渠道，无论是通过系统化的课程学习，还是通过随时随地的书籍阅读，都能帮助用户轻松提升自我、拓宽视野。平台不仅注重知识的深度与专业性，还鼓励用户参与其中，分享与交流，激发学习动力和创造力。</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="banner_wrapper2">
<figure class="mb-0 bannerphoneback">
<img src="./template_5/images/bannerphoneback-image1.png" alt="">
</figure>
<figure class="mb-0 bannerphone2" >
<img class="img-fluid" src="./template_5/images/bannerphone2-img.png" alt="">
</figure>
<figure class="mb-0 bannerphone-circleicon">
<img src="./template_5/images/bannerphone-circleicon.png" alt="">
</figure>
<figure class="mb-0 bannerphone-circle">
<img class="img-fluid" src="./template_5/images/bannerphone-circle.png" alt="">
</figure>
<figure class="mb-0 bannerphone1">
<img src="./template_5/images/bannerphone1-img.png" alt="">
</figure>
</div>
</div>
</div>
<figure class="mb-0 bannersidecircle1" data-aos="fade-left">
<img src="./template_5/images/banner-sidecircle1.png" alt="">
</figure>
<figure class="mb-0 bannersidecircle2" data-aos="fade-left">
<img src="./template_5/images/banner-sidecircle2.png" alt="">
</figure>
</div>
</section>
<!-- Partner -->
<div class="partner-section d-none d-lg-inline">
<div class="container">
<div class="partner_box" data-aos="fade-up">
<ul class="mb-0 list-unstyled">
<li>
<figure class="mb-0 partner1 partner2">
<Image class="shareIcon" height={50} width={50} alt="huawei" src={`/common/huawei.svg`} />
</figure>
</li>
<li>
<figure class="mb-0 partner1 partner3">
<Image class="shareIcon" height={50} width={50} alt="vivo" src={`/common/vivo.svg`} />
</figure>
</li>
<li>
<figure class="mb-0 partner1 partner4">
<Image class="shareIcon" height={50} width={50} alt="xiaomi" src={`/common/xiaomi.svg`} />
</figure>
</li>
<li>
<figure class="mb-0 partner1 partner5">
<Image class="shareIcon" height={50} width={50} alt="oppo" src={`/common/oppo.svg`} />
</figure>
</li>
<li>
<figure class="mb-0 partner1 partner5">
<Image class="shareIcon" height={50} width={50} alt="meizu" src={`/common/meizu.svg`} />
</figure>
</li>
</ul>
</div>
</div>
</div>
<!-- About Us -->
<section class="aboutus-section overflow-hidden">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="aboutus_content">
<h4>关于我们</h4>
<h2 class="mb-0 ">为什么选择我们</h2>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-12">
<div class="aboutus_text" data-aos="fade-left">
<p class="mb-0 ">我们努力以专业目全面的课程体系设置，全方位满足用户多样化的学习需求，助力用户在不同知识与技能维度实现自我提升。</p>
</div>
</div>
</div>
</div>
</section>
<!-- Features -->
<section class="basic-feature" id="basic-feature">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="feature_wrapperleft">
<figure class="mb-0 feature-circle">
<img class="img-fluid" src="./template_5/images/feature-circle.png" alt="">
</figure>
<figure class="mb-0 featurephoneback">
<img src="./template_5/images/featurephoneback-img.png" alt="">
</figure>
<figure class="mb-0 featurephone">
<img class="img-fluid" src="./template_5/images/featurephone-img.png" alt="">
</figure>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="feature_wrapperright">
<div class="feature_content">
<h4>专注于产品自身</h4>
<h2>我们具有以下优势</h2>
</div>
<div class="feature_lowercontent" data-aos="fade-up">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<div class="feature-box">
<figure class="feature-marketicon">
<img src="./template_5/images/feature-marketicon.png" alt="" class="img-fluid">
</figure>
<h6>丰富的书籍资源</h6>
<p class="text-size-18 mb-0">涵盖哲学系列、名人史迹、历史研究、地域文明、文化理论。</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<div class="feature-design">
<div class="feature-box">
<figure class="feature-graphicon feature-box-2">
<img src="./template_5/images/feature-graphicon.png" alt="" class="img-fluid">
</figure>
<h6>离线阅读</h6>
<p class="text-size-18 mb-0">支持离线阅读，无网络也能畅游书海。</p>
</div>
</div>
</div>
</div>
<div class="feature-downcontent">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<div class="feature-box">
<figure class="feature-graphicon feature-box-3">
<img src="./template_5/images/feature-supporticon.png" alt="" class="img-fluid">
</figure>
<h6>深度视频课程</h6>
<p class="text-size-18 mb-0">理解世界的本质逻辑，开阔视野，了解多元文明。</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-12">
<div class="feature-design feature-guide">
<div class="feature-box">
<figure class="feature-guideicon feature-box-4">
<img src="./template_5/images/feature-guideicon.png" alt="" class="img-fluid">
</figure>
<h6>提供全天候服务支持</h6>
<p class="text-size-18 mb-0">提供7×24小时在线咨询服务，第一时间获得解答和支持。</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Ease of Search -->
<section class="search-section">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="search_content" data-aos="fade-up">
<figure class="search-icon">
<img src="./template_5/images/search-icon.png" alt="" class="img-fluid">
</figure>
<h2>丰富的阅读种类</h2>
<p>"知屿寻光"提供丰富的阅读种类，涵盖多个领域，助力个人成长与全方位提升。无论是探索个人成长的心灵修养，还是深入社会人文的思考，亦或学习经济管理与职场效能的实用知识，平台都为您精心推荐相关书籍。通过多元化的阅读资源，您将获得关于人际沟通的技巧、领导力的提升，以及工作效率的优化，帮助您在个人与职业生活中不断取得突破与进步。</p>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<div class="search_wrapper">
<figure class="mb-0 search-sidecircle">
<img class="img-fluid" src="./template_5/images/search-sidecircle.png" alt="">
</figure>
<figure class="mb-0 search-phoneback">
<img src="./template_5/images/search-phoneback.png" alt="">
</figure>
<figure class="mb-0 search-phone1">
<img class="img-fluid" src="./template_5/images/search-phone1.png" alt="">
</figure>
<figure class="mb-0 search-phone2">
<img class="img-fluid" src="./template_5/images/search-phone2.png" alt="">
</figure>
</div>
</div>
</div>
<!-- Manage -->
<div class="manage-section">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-1 order-2">
<div class="manage_wrapper">
<figure class="mb-0 manage-sidecircle">
<img class="img-fluid" src="./template_5/images/manage-sidecircle.png" alt="">
</figure>
<figure class="mb-0 manage-phoneback">
<img src="./template_5/images/manage-phoneback.png" alt="">
</figure>
<figure class="mb-0 manage-phone2">
<img class="img-fluid" src="./template_5/images/manage-phone2.png" alt="">
</figure>
<figure class="mb-0 manage-phone1">
<img class="img-fluid" src="./template_5/images/manage-phone1.png" alt="">
</figure>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12 order-md-2 order-1">
<div class="manage_content" data-aos="fade-up">
<figure class="search-icon manage-icon">
<img src="./template_5/images/manage-icon.png" alt="" class="img-fluid">
</figure>
<h2>个性化推荐系统</h2>
<p>通过深入分析用户的阅读历史和兴趣偏好，我们的智能推荐系统能够精准地为您推荐与您口味相符的书籍。无论是您经常阅读的类型还是您尚未接触的新领域，系统都会为您精心挑选相关内容，帮助您发掘更多感兴趣的书籍。这样，您可以轻松拓展阅读范围，享受更加个性化和丰富的阅读体验。</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- statistics -->
<section class="statistics-section" id="statistics">
<div class="container">
<figure class="mb-0 statistics-sidelayer">
<img src="./template_5/images/statistics-sidelayer.png" alt="">
</figure>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<div class="statistics_content">
<h4 class="text-white">我们努力做得更好</h4>
<h2 class="text-white">持续创新，用户至上</h2>
<p class="text-white">我们不仅注重于产品自身，更注重于用户的体验。</p>
</div>
</div>
</div>
<div class="statistics-value" data-aos="fade-down">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<div class="number1">
<span class="value1 counter">500000</span>
<sup class="mb-0 plus">+</sup>
<span class="text1">累计下载次数</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<div class="number1">
<span class="value1 counter">25</span>
<sup class="mb-0 plus">+</sup>
<span class="text1 text2">学习课程</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<div class="number1">
<span class="value1 counter">6</span>
<sup class="mb-0 plus">大</sup>
<span class="mb-0 text1 text3">课程分类</span>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-6">
<div class="number1 number4">
<span class="value1 counter">7</span>
<sup class="mb-0 plus">24</sup>
<span class="mb-0 text1 text4">在线服务</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Available -->
<section class="available-section" id="get-app">
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-7 col-sm-12 col-12">
<div class="available_content">
<h2 class="text-white">在各大应用商店中下载</h2>
<p class="text-white">知屿寻光是一款全新推出的智能应用，致力于为用户提供精准的内容推荐和个性化服务。现在，您可以通过各大应用平台轻松下载并体验，为您的生活增添更多色彩与便利。</p>
</div>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-12">
<div class="available_wrapper">
<figure class="mb-0 available-phone1">
<img class="img-fluid" src="./template_5/images/available-phone1.png" alt="">
</figure>
<figure class="mb-0 available-phone3">
<img src="./template_5/images/available-phone3.png" alt="">
</figure>
</div>
</div>
</div>
<figure class="mb-0 available-phone2">
<img class="img-fluid" src="./template_5/images/available-phone2.png" alt="">
</figure>
<figure class="mb-0 available-sidelayer">
<img src="./template_5/images/available-sidelayer.png" alt="">
</figure>
</div>
</section>
</Layout>
<style>
.partner_box ul {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
@media screen and (max-width: 991px) {
.partner_box ul {
justify-content: unset;
}
}
</style>

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

@ -0,0 +1,224 @@
---
import Layout from '../../../layouts/Layout_5.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/5/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>