update
This commit is contained in:
toom1996
1
src/assets/css/bootstrap.css
vendored
1
src/assets/css/bootstrap.css
vendored
@ -294,7 +294,6 @@ a {
|
|||||||
a:hover,
|
a:hover,
|
||||||
a:focus {
|
a:focus {
|
||||||
color: #E74C3C;
|
color: #E74C3C;
|
||||||
text-decoration: underline;
|
|
||||||
}
|
}
|
||||||
a:focus {
|
a:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
|
|||||||
@ -6,7 +6,7 @@ const {data} = Astro.props;
|
|||||||
{
|
{
|
||||||
data.map((item: { title: string; link: string }) => {
|
data.map((item: { title: string; link: string }) => {
|
||||||
return (
|
return (
|
||||||
<span class="separator">/</span>
|
<span class="separator"> > </span>
|
||||||
<a href={item.link}>{item.title}</a>
|
<a href={item.link}>{item.title}</a>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
@ -17,6 +17,8 @@ const {data} = Astro.props;
|
|||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
/* margin-left: 1rem; */
|
/* margin-left: 1rem; */
|
||||||
/* margin-bottom: 1rem; */
|
/* margin-bottom: 1rem; */
|
||||||
|
padding: 1rem;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,7 +26,7 @@ if (totalPages <= 7) {
|
|||||||
showPages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
showPages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(showPages)
|
||||||
---
|
---
|
||||||
<nav class="pagination">
|
<nav class="pagination">
|
||||||
<ul>
|
<ul>
|
||||||
|
|||||||
@ -40,7 +40,7 @@ const {desc = '霍尔果斯飞驰广告传媒有限公司是一家充满活力
|
|||||||
<nav class="top-nav">
|
<nav class="top-nav">
|
||||||
<ul class="top-nav">
|
<ul class="top-nav">
|
||||||
<li class=""><a href="/" class="scroll">首页 <span> </span></a></li>
|
<li class=""><a href="/" class="scroll">首页 <span> </span></a></li>
|
||||||
<li class="page-scroll"><a href="/news" class="scroll">行业专栏<span> </span></a></li>
|
<li class="page-scroll"><a href="/news" class="scroll">资讯<span> </span></a></li>
|
||||||
<li class="page-scroll"><a href="/service" class="scroll">我们的服务 <span> </span></a></li>
|
<li class="page-scroll"><a href="/service" class="scroll">我们的服务 <span> </span></a></li>
|
||||||
<li class="page-scroll"><a href="/about" class="scroll">关于我们 <span> </span></a></li>
|
<li class="page-scroll"><a href="/about" class="scroll">关于我们 <span> </span></a></li>
|
||||||
<li class="contatct-active" class="page-scroll"><a href="#contact" class="scroll">联系我们</a></li>
|
<li class="contatct-active" class="page-scroll"><a href="#contact" class="scroll">联系我们</a></li>
|
||||||
@ -97,7 +97,7 @@ const {desc = '霍尔果斯飞驰广告传媒有限公司是一家充满活力
|
|||||||
<div class="columns">
|
<div class="columns">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href='/about-us'>关于我们</a></li>
|
<li><a href='/about-us'>关于我们</a></li>
|
||||||
<li><a href='/news'>行业专栏</a></li>
|
<li><a href='/news'>资讯</a></li>
|
||||||
<li><a href='/service'>我们的服务</a></li>
|
<li><a href='/service'>我们的服务</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,12 +10,12 @@ import BreadComponent from "../components/Breadcrumb.astro";
|
|||||||
const config = getConfig(Astro);
|
const config = getConfig(Astro);
|
||||||
|
|
||||||
// 每页显示多少条
|
// 每页显示多少条
|
||||||
const limit = 12;
|
const limit = 10;
|
||||||
|
|
||||||
// 页码
|
// 页码
|
||||||
const { page = 1 } = Astro.props;
|
const { page = 1, columnDesc = `霍尔果斯飞驰广告有限公司致力于分享从基础到进阶的SEO优化策略、广告投放方法、内容运营技巧和网站转化率提升方案。` ,breadcrumb = [{ title: "资讯", link: "/news" }] } = Astro.props;
|
||||||
const { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
|
const { code, data, total = 0, hot } = await newsIndex(config.id, limit, page);
|
||||||
console.log(total)
|
|
||||||
if (!data || code !== 0) {
|
if (!data || code !== 0) {
|
||||||
return Astro.redirect("/404");
|
return Astro.redirect("/404");
|
||||||
}
|
}
|
||||||
@ -30,13 +30,12 @@ if (!data || code !== 0) {
|
|||||||
class="archive-head"
|
class="archive-head"
|
||||||
style="grid-column: 1 / 3;grid-row: 1 / 2;"
|
style="grid-column: 1 / 3;grid-row: 1 / 2;"
|
||||||
>
|
>
|
||||||
<BreadComponent
|
<div>
|
||||||
data={[{ title: "行业专栏", link: "/news" }]}
|
<BreadComponent data={breadcrumb} />
|
||||||
/>
|
</div>
|
||||||
|
|
||||||
<div class="archive-description">
|
<div class="archive-description">
|
||||||
<p>
|
<p><Fragment set:html={columnDesc}></p>
|
||||||
欢迎来到我们的<a href="/news">行业专栏</a>，这里汇聚了关于数字营销、SEO优化及互联网行业最新动态的深度分析与实战经验。随着数字化转型的加速，越来越多的企业在探索如何在互联网浪潮中脱颖而出。我们专注于为营销人员、SEO专家以及各类企业提供最新的行业洞察、策略解析以及实用技巧。
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="news-list-row">
|
<div class="news-list-row">
|
||||||
@ -85,6 +84,10 @@ if (!data || code !== 0) {
|
|||||||
<p class="entry-summary news-card-summary">
|
<p class="entry-summary news-card-summary">
|
||||||
{e.description}
|
{e.description}
|
||||||
</p>
|
</p>
|
||||||
|
<div>
|
||||||
|
<a href={e.column_tag_url}><span class="label label-success">{e.column_tag}</span></a>
|
||||||
|
{/* <a href={e.column_tag_url}><span class="label label-info">{e.column_tag}</span></a> */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -93,18 +96,18 @@ if (!data || code !== 0) {
|
|||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<PaginationComponent
|
<PaginationComponent
|
||||||
totalPages={total}
|
totalPages={Number(total)}
|
||||||
currentPage={page}
|
currentPage={Number(page)}
|
||||||
baseUrl={`/news/page/`}
|
baseUrl={`/news/page/`}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="slide-container">
|
<div class="slide-container">
|
||||||
<div class="widget widget-tie divPrevious">
|
<div class="widget widget-tie divPrevious">
|
||||||
<h3>最新文章</h3>
|
<h3>热门文章</h3>
|
||||||
<ul>
|
<ul>
|
||||||
{
|
{
|
||||||
about?.map((item, index) => {
|
hot?.map((item, index) => {
|
||||||
return (
|
return (
|
||||||
<li class={`previous-${index + 1}`}>
|
<li class={`previous-${index + 1}`}>
|
||||||
<div class="previous-one-img">
|
<div class="previous-one-img">
|
||||||
@ -189,9 +192,19 @@ if (!data || code !== 0) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.archive-description {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
.slide-container {
|
.slide-container {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.news-card-header > h2 {
|
||||||
|
margin: 1rem 0 1rem 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
.archive-head {
|
.archive-head {
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
grid-row: 1 / 2;
|
grid-row: 1 / 2;
|
||||||
@ -226,6 +239,10 @@ if (!data || code !== 0) {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.news-card-summary {
|
||||||
|
color:#6e6e6e
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: -360px;
|
margin-left: -360px;
|
||||||
|
|||||||
@ -1,48 +1,56 @@
|
|||||||
---
|
---
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import { getConfig } from '../../../utils/config'
|
import { getConfig } from "../../../utils/config";
|
||||||
import { newsDetail } from "../../../utils/rpc";
|
import { newsDetail } from "../../../utils/rpc";
|
||||||
import Breadcrumb from "../../components/Breadcrumb.astro";
|
import Breadcrumb from "../../components/Breadcrumb.astro";
|
||||||
const { slug } = Astro.params;
|
const { slug } = Astro.params;
|
||||||
const config = getConfig(Astro)
|
const config = getConfig(Astro);
|
||||||
const requestUrl = Astro.request.url;
|
const requestUrl = Astro.request.url;
|
||||||
|
const breadcrumb = [{title: '资讯', link: '/news'},{title: '教程', link: '/news/tech'}, {title: '正文', link: ''}]
|
||||||
if (!slug) {
|
if (!slug) {
|
||||||
return Astro.redirect('/404');
|
return Astro.redirect("/404");
|
||||||
}
|
}
|
||||||
|
|
||||||
if (slug == 'seo_tech') {
|
if (slug == "seo_tech") {
|
||||||
return Astro.rewrite('/')
|
return Astro.rewrite("/");
|
||||||
}
|
}
|
||||||
|
|
||||||
const {code, data} = await newsDetail(slug, config);
|
const { code, data } = await newsDetail(slug, config);
|
||||||
|
|
||||||
if (!data || code !== 0) {
|
if (!data || code !== 0) {
|
||||||
return Astro.redirect('/404');
|
return Astro.redirect("/404");
|
||||||
}
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
desc={data.description}
|
desc={data.description}
|
||||||
keywords={data.keywords}
|
keywords={data.keywords}
|
||||||
title={`${data.title} - ${config.app_name}`}
|
title={`${data.title} - ${config.app_name}`}
|
||||||
>
|
>
|
||||||
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
||||||
<div class="html-text-component parbase">
|
<div class="html-text-component parbase">
|
||||||
<div class="v4 n06-news-second-navigation" id="news-second-navigation-v4" data-component="n06-news-second-navigation">
|
<div
|
||||||
<div class="product-tabs-wrap container">
|
class="v4 n06-news-second-navigation"
|
||||||
<div class="product-tabs__heading">
|
id="news-second-navigation-v4"
|
||||||
<div class="product-tabs__title body-medium">
|
data-component="n06-news-second-navigation"
|
||||||
<!-- <a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a> -->
|
>
|
||||||
</div>
|
<div class="product-tabs-wrap container">
|
||||||
</div>
|
<div class="product-tabs__heading">
|
||||||
</div>
|
<div class="product-tabs__title body-medium">
|
||||||
|
<!-- <a title={TP2_COLUMN_NEWS} href={TP2_COLUMN_NEWS_URL} class="product-link product-link__active">{TP2_COLUMN_NEWS}</a> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<main class="news-main">
|
<main class="news-main">
|
||||||
<div class="news-container">
|
<div class="news-container">
|
||||||
<!-- <Breadcrumb data={[]}/> -->
|
<Breadcrumb data={breadcrumb} />
|
||||||
<header>
|
<header>
|
||||||
<h1 class="title" title={data.title}>{data.title}</h1>
|
<h1 class="title" title={data.title}>{data.title}</h1>
|
||||||
<span class="label label-default">Label</span>
|
<span>{data.created_at}</span>
|
||||||
|
<a href={data.column_tag_url}
|
||||||
|
><span class="label label-success">{data.column_tag}</span></a
|
||||||
|
>
|
||||||
</header>
|
</header>
|
||||||
<article class="news-detail-content">
|
<article class="news-detail-content">
|
||||||
<div class="top-icon"></div>
|
<div class="top-icon"></div>
|
||||||
@ -58,16 +66,28 @@ if (!data || code !== 0) {
|
|||||||
data.prevNews && (
|
data.prevNews && (
|
||||||
<div>
|
<div>
|
||||||
<span>上一篇: </span>
|
<span>上一篇: </span>
|
||||||
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
|
<a
|
||||||
|
class="news-prev news-link"
|
||||||
|
title={data.prevNews.title}
|
||||||
|
href={`/news/${data.prevNews.id}`}
|
||||||
|
>
|
||||||
|
{data.prevNews.title}
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
data.nextNews && (
|
data.nextNews && (
|
||||||
<div>
|
<div>
|
||||||
<span>下一篇: </span>
|
<span>下一篇: </span>
|
||||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
<a
|
||||||
</div>
|
class="news-next news-link"
|
||||||
|
title={data.nextNews.title}
|
||||||
|
href={`/news/${data.nextNews.id}`}
|
||||||
|
>
|
||||||
|
{data.nextNews.title}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
@ -75,180 +95,232 @@ if (!data || code !== 0) {
|
|||||||
<aside class="news-sidebar">
|
<aside class="news-sidebar">
|
||||||
<div class="related-news">
|
<div class="related-news">
|
||||||
<h3>相关推荐</h3>
|
<h3>相关推荐</h3>
|
||||||
<div class="top-icon"></div>
|
|
||||||
<ul>
|
<ul>
|
||||||
{data.about.map(item => (
|
{
|
||||||
<li>
|
data.about.map((item) => (
|
||||||
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
|
<li>
|
||||||
<span class="related-title">{item.title}</span>
|
<a
|
||||||
{/* <span class="related-date">{item.date}</span> */}
|
class="news-link"
|
||||||
</a>
|
title={item.title}
|
||||||
</li>
|
href={`/news/${item.id}`}
|
||||||
))}
|
>
|
||||||
|
<span class="related-title">{item.title}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))
|
||||||
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
</main>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
<style is:inline>
|
<style is:inline>
|
||||||
|
@media (min-width: 1200px) and (max-width: 1500px) {
|
||||||
|
.header_full_banner {
|
||||||
|
padding-left: 125px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.news-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
@media (min-width: 1200px) and (max-width: 1500px) {
|
article {
|
||||||
.header_full_banner {
|
h1,
|
||||||
padding-left: 125px;
|
.h1,
|
||||||
}
|
h2,
|
||||||
}
|
.h2,
|
||||||
.news-content img {
|
h3,
|
||||||
max-width: 100%;
|
.h3,
|
||||||
height: auto;
|
h4,
|
||||||
|
p,
|
||||||
|
ol > li,
|
||||||
|
ul > li
|
||||||
|
{
|
||||||
|
font:
|
||||||
|
14px Helvetica Neue,
|
||||||
|
Helvetica,
|
||||||
|
PingFang SC,
|
||||||
|
Tahoma,
|
||||||
|
Arial,
|
||||||
|
sans-serif;
|
||||||
|
/* text-indent: unset !important; */
|
||||||
|
/* margin: 15px; */
|
||||||
|
/* margin-top: 0.5rem; */
|
||||||
|
/* margin-bottom: unset; */
|
||||||
|
letter-spacing: .5px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
text-align: justify;
|
||||||
|
color: #3b3b3b;
|
||||||
|
font-weight: 400;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
article {
|
display: block;
|
||||||
|
font-size: 2em;
|
||||||
h1, .h1, h2, .h2, h3, .h3, h4, p {
|
margin-block-start: 0.67em;
|
||||||
font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
|
margin-block-end: 0.67em;
|
||||||
/* text-indent: unset !important; */
|
margin-inline-start: 0px;
|
||||||
margin: 15px;
|
margin-inline-end: 0px;
|
||||||
/* margin-top: 0.5rem; */
|
font-weight: bold;
|
||||||
/* margin-bottom: unset; */
|
unicode-bidi: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h2 {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 2em;
|
font-size: 1.5em;
|
||||||
margin-block-start: 0.67em;
|
margin-block-start: 0.83em;
|
||||||
margin-block-end: 0.67em;
|
margin-block-end: 0.83em;
|
||||||
margin-inline-start: 0px;
|
margin-inline-start: 0px;
|
||||||
margin-inline-end: 0px;
|
margin-inline-end: 0px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
unicode-bidi: isolate;
|
unicode-bidi: isolate;
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin-block-start: 0.83em;
|
|
||||||
margin-block-end: 0.83em;
|
|
||||||
margin-inline-start: 0px;
|
|
||||||
margin-inline-end: 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
unicode-bidi: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.17em;
|
|
||||||
margin-block-start: 1em;
|
|
||||||
margin-block-end: 1em;
|
|
||||||
margin-inline-start: 0px;
|
|
||||||
margin-inline-end: 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
unicode-bidi: isolate;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
display: block;
|
|
||||||
margin-block-start: 1.33em;
|
|
||||||
margin-block-end: 1.33em;
|
|
||||||
margin-inline-start: 0px;
|
|
||||||
margin-inline-end: 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
unicode-bidi: isolate;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.83em;
|
|
||||||
margin-block-start: 1.67em;
|
|
||||||
margin-block-end: 1.67em;
|
|
||||||
margin-inline-start: 0px;
|
|
||||||
margin-inline-end: 0px;
|
|
||||||
font-weight: bold;
|
|
||||||
unicode-bidi: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
display: block;
|
|
||||||
margin-block-start: 1em;
|
|
||||||
margin-block-end: 1em;
|
|
||||||
margin-inline-start: 0px;
|
|
||||||
margin-inline-end: 0px;
|
|
||||||
unicode-bidi: isolate;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
article h1, .h1, h2, .h2, h3, .h3, h4{
|
h3 {
|
||||||
font-weight: 700;
|
display: block;
|
||||||
|
font-size: 1.17em;
|
||||||
|
margin-block-start: 1em;
|
||||||
|
margin-block-end: 1em;
|
||||||
|
margin-inline-start: 0px;
|
||||||
|
margin-inline-end: 0px;
|
||||||
|
font-weight: bold;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
display: block;
|
||||||
|
margin-block-start: 1.33em;
|
||||||
|
margin-block-end: 1.33em;
|
||||||
|
margin-inline-start: 0px;
|
||||||
|
margin-inline-end: 0px;
|
||||||
|
font-weight: bold;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
h5 {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.83em;
|
||||||
|
margin-block-start: 1.67em;
|
||||||
|
margin-block-end: 1.67em;
|
||||||
|
margin-inline-start: 0px;
|
||||||
|
margin-inline-end: 0px;
|
||||||
|
font-weight: bold;
|
||||||
|
unicode-bidi: isolate;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
p {
|
||||||
|
display: block;
|
||||||
|
margin-block-start: 1em;
|
||||||
|
margin-block-end: 1em;
|
||||||
|
margin-inline-start: 0px;
|
||||||
|
margin-inline-end: 0px;
|
||||||
|
unicode-bidi: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1,
|
||||||
|
.h1,
|
||||||
|
h2,
|
||||||
|
.h2,
|
||||||
|
h3,
|
||||||
|
.h3,
|
||||||
|
h4 {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
border-bottom: none !important;
|
||||||
|
padding: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > h1 {
|
||||||
|
margin: unset;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style>
|
<style>
|
||||||
|
.related-news > h3:after {
|
||||||
|
content: "";
|
||||||
|
width: 70px;
|
||||||
|
height: 1px;
|
||||||
|
background: #e94c3d;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
|
.related-news > h3 {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin: unset;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.news-main {
|
||||||
|
display: grid;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-template-columns: 4fr 1.5fr;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
.news-main {
|
.news-main {
|
||||||
display: grid;
|
|
||||||
flex-direction: row;
|
|
||||||
grid-template-columns: 4fr 1.5fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
.news-main {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-container {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.top-icon {
|
.top-icon {
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
border-bottom: 1px solid #e0e0e0
|
border-bottom: 1px solid #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-date {
|
.news-date {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #d0021b;
|
color: #d0021b;
|
||||||
line-height: 17px;
|
line-height: 17px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
display: inline-block
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-meta {
|
.news-meta {
|
||||||
border-bottom: 1px solid var(--text-primary);
|
border-bottom: 1px solid var(--text-primary);
|
||||||
color: black;
|
color: black;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
font-size: 2rem;
|
font-size: 1.5rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 0.8rem;
|
||||||
line-height: 1.4;
|
margin-top: 0.8rem;
|
||||||
}
|
/* line-height: 1.4; */
|
||||||
|
}
|
||||||
|
|
||||||
.news-meta {
|
.news-meta {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-meta span{
|
.news-meta span {
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-author a {
|
.news-author a {
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
.news-date::before {
|
.news-date::before {
|
||||||
content: '📅';
|
content: '📅';
|
||||||
}
|
}
|
||||||
@ -257,155 +329,155 @@ if (!data || code !== 0) {
|
|||||||
content: '👤';
|
content: '👤';
|
||||||
} */
|
} */
|
||||||
|
|
||||||
.news-tags {
|
.news-tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-tag {
|
.news-tag {
|
||||||
background: rgba(255, 255, 255, 0.15);
|
background: rgba(255, 255, 255, 0.15);
|
||||||
color: white;
|
color: white;
|
||||||
padding: 0.3rem 1rem;
|
padding: 0.3rem 1rem;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-tag:hover {
|
.news-tag:hover {
|
||||||
background: rgba(255, 255, 255, 0.25);
|
background: rgba(255, 255, 255, 0.25);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-container {
|
.news-container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
/* margin: -2rem auto 0; */
|
padding: 1.5rem;
|
||||||
padding: 0 1.5rem 3rem;
|
position: relative;
|
||||||
/* gap: 2.5rem; */
|
display: flex;
|
||||||
position: relative;
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
display: flex;
|
.news-detail-content {
|
||||||
justify-content: center;
|
border-right: 1px solid var(--text-primary);
|
||||||
}
|
/* padding: 3rem; */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.news-detail-content {
|
.news-content {
|
||||||
border-right: 1px solid var(--text-primary);
|
padding-top: 3rem;
|
||||||
/* padding: 3rem; */
|
font-size: 1.1rem;
|
||||||
position: relative;
|
line-height: 1.3;
|
||||||
overflow: hidden;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.news-content {
|
.news-images {
|
||||||
padding-top: 3rem;
|
display: grid;
|
||||||
font-size: 1.1rem;
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
line-height: 1.3;
|
gap: 1.5rem;
|
||||||
}
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.news-images {
|
.news-images img {
|
||||||
display: grid;
|
width: 100%;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
height: auto;
|
||||||
gap: 1.5rem;
|
border-radius: var(--radius-lg);
|
||||||
margin-bottom: 2rem;
|
box-shadow: var(--shadow-md);
|
||||||
}
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.news-images img {
|
.news-images img:hover {
|
||||||
width: 100%;
|
transform: scale(1.02);
|
||||||
height: auto;
|
}
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
box-shadow: var(--shadow-md);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-images img:hover {
|
.news-content p {
|
||||||
transform: scale(1.02);
|
margin-bottom: 1.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content p {
|
.news-content p:last-child {
|
||||||
margin-bottom: 1.8rem;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-content p:last-child {
|
.news-navigation {
|
||||||
margin-bottom: 0;
|
margin-top: 1rem;
|
||||||
}
|
border-top: 1px solid var(--divider-color);
|
||||||
|
}
|
||||||
|
|
||||||
.news-navigation {
|
.news-sidebar {
|
||||||
margin-top: 1rem;
|
padding: 1.5rem;
|
||||||
border-top: 1px solid var(--divider-color);
|
/* position: sticky; */
|
||||||
}
|
top: 2rem;
|
||||||
|
height: fit-content;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
.news-sidebar {
|
.related-news ul {
|
||||||
padding: 0 1.5rem 3rem;
|
list-style: none;
|
||||||
/* position: sticky; */
|
padding: 0;
|
||||||
top: 2rem;
|
margin: 0;
|
||||||
height: fit-content;
|
}
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-news ul {
|
.related-news li {
|
||||||
list-style: none;
|
/* margin-bottom: 1.2rem;
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-news li {
|
|
||||||
/* margin-bottom: 1.2rem;
|
|
||||||
padding-bottom: 1.2rem; */
|
padding-bottom: 1.2rem; */
|
||||||
border-bottom: 1px solid var(--divider-color);
|
border-bottom: 1px solid var(--divider-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-news li:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-news a {
|
||||||
|
color: #000000;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
padding: 0.2rem;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-news a:hover {
|
||||||
|
transform: translateX(5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-title {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.related-date {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
.news-sidebar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.news-detail-content {
|
||||||
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-news li:last-child {
|
.news-share {
|
||||||
margin-bottom: 0;
|
flex-wrap: wrap;
|
||||||
padding-bottom: 0;
|
gap: 0.8rem;
|
||||||
border-bottom: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-news a {
|
.share-btn {
|
||||||
color: #000000;
|
width: 100%;
|
||||||
display: flex;
|
text-align: center;
|
||||||
flex-direction: column;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
padding: 0.2rem;
|
|
||||||
border-radius: var(--radius-md);
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.related-news a:hover {
|
</style>
|
||||||
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-sidebar {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
|
||||||
|
|
||||||
.news-detail-content {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.news-share {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-btn {
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
7
src/pages/news/tech/[...page].astro
Normal file
7
src/pages/news/tech/[...page].astro
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
import News from '../../news.astro'
|
||||||
|
const {page = 1} = Astro.params;
|
||||||
|
const breadcrumb = [{title: '资讯', link: '/news'}, {title: '教程', link: '/news/tech'}]
|
||||||
|
const columnDesc = '精选覆盖SEO优化、数字广告投放、网站转化率提升等多个方向的实用教程，帮助企业在2025年抓住数字营销红利。由霍尔果斯飞驰广告有限公司多年的实战经验总结，适用于各类企业与网站运营者。'
|
||||||
|
---
|
||||||
|
<News page = {page} breadcrumb = {breadcrumb} columnDesc = {columnDesc}>
|
||||||
@ -30,6 +30,8 @@ export interface InewsIndex {
|
|||||||
content: string
|
content: string
|
||||||
created_at: string
|
created_at: string
|
||||||
updated_at: string
|
updated_at: string
|
||||||
|
column_tag: string
|
||||||
|
column_tag_url: string
|
||||||
}
|
}
|
||||||
export async function newsIndex(websiteId:number = 0, limit:number = 10, page:number = 1):Promise<result<InewsIndex[]>>{
|
export async function newsIndex(websiteId:number = 0, limit:number = 10, page:number = 1):Promise<result<InewsIndex[]>>{
|
||||||
const client = getRpcClient()
|
const client = getRpcClient()
|
||||||
@ -52,6 +54,8 @@ export interface InewsDetail {
|
|||||||
content: string
|
content: string
|
||||||
created_at: string
|
created_at: string
|
||||||
updated_at: string
|
updated_at: string
|
||||||
|
column_tag: string
|
||||||
|
column_tag_url: string
|
||||||
about: {
|
about: {
|
||||||
id: number
|
id: number
|
||||||
title: string
|
title: string
|
||||||
|
|||||||
Reference in New Issue
Block a user