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:focus {
|
||||
color: #E74C3C;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
|
||||
@ -6,7 +6,7 @@ const {data} = Astro.props;
|
||||
{
|
||||
data.map((item: { title: string; link: string }) => {
|
||||
return (
|
||||
<span class="separator">/</span>
|
||||
<span class="separator"> > </span>
|
||||
<a href={item.link}>{item.title}</a>
|
||||
)
|
||||
})
|
||||
@ -17,6 +17,8 @@ const {data} = Astro.props;
|
||||
.breadcrumb {
|
||||
/* margin-left: 1rem; */
|
||||
/* margin-bottom: 1rem; */
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@ if (totalPages <= 7) {
|
||||
showPages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(showPages)
|
||||
---
|
||||
<nav class="pagination">
|
||||
<ul>
|
||||
|
||||
@ -40,7 +40,7 @@ const {desc = '霍尔果斯飞驰广告传媒有限公司是一家充满活力
|
||||
<nav class="top-nav">
|
||||
<ul class="top-nav">
|
||||
<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="/about" class="scroll">关于我们 <span> </span></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">
|
||||
<ul>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -10,12 +10,12 @@ import BreadComponent from "../components/Breadcrumb.astro";
|
||||
const config = getConfig(Astro);
|
||||
|
||||
// 每页显示多少条
|
||||
const limit = 12;
|
||||
const limit = 10;
|
||||
|
||||
// 页码
|
||||
const { page = 1 } = Astro.props;
|
||||
const { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
|
||||
console.log(total)
|
||||
const { page = 1, columnDesc = `霍尔果斯飞驰广告有限公司致力于分享从基础到进阶的SEO优化策略、广告投放方法、内容运营技巧和网站转化率提升方案。` ,breadcrumb = [{ title: "资讯", link: "/news" }] } = Astro.props;
|
||||
const { code, data, total = 0, hot } = await newsIndex(config.id, limit, page);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
@ -30,13 +30,12 @@ if (!data || code !== 0) {
|
||||
class="archive-head"
|
||||
style="grid-column: 1 / 3;grid-row: 1 / 2;"
|
||||
>
|
||||
<BreadComponent
|
||||
data={[{ title: "行业专栏", link: "/news" }]}
|
||||
/>
|
||||
<div>
|
||||
<BreadComponent data={breadcrumb} />
|
||||
</div>
|
||||
|
||||
<div class="archive-description">
|
||||
<p>
|
||||
欢迎来到我们的<a href="/news">行业专栏</a>，这里汇聚了关于数字营销、SEO优化及互联网行业最新动态的深度分析与实战经验。随着数字化转型的加速，越来越多的企业在探索如何在互联网浪潮中脱颖而出。我们专注于为营销人员、SEO专家以及各类企业提供最新的行业洞察、策略解析以及实用技巧。
|
||||
</p>
|
||||
<p><Fragment set:html={columnDesc}></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-list-row">
|
||||
@ -85,6 +84,10 @@ if (!data || code !== 0) {
|
||||
<p class="entry-summary news-card-summary">
|
||||
{e.description}
|
||||
</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>
|
||||
@ -93,18 +96,18 @@ if (!data || code !== 0) {
|
||||
}
|
||||
</div>
|
||||
<PaginationComponent
|
||||
totalPages={total}
|
||||
currentPage={page}
|
||||
totalPages={Number(total)}
|
||||
currentPage={Number(page)}
|
||||
baseUrl={`/news/page/`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-container">
|
||||
<div class="widget widget-tie divPrevious">
|
||||
<h3>最新文章</h3>
|
||||
<h3>热门文章</h3>
|
||||
<ul>
|
||||
{
|
||||
about?.map((item, index) => {
|
||||
hot?.map((item, index) => {
|
||||
return (
|
||||
<li class={`previous-${index + 1}`}>
|
||||
<div class="previous-one-img">
|
||||
@ -189,9 +192,19 @@ if (!data || code !== 0) {
|
||||
}
|
||||
}
|
||||
|
||||
.archive-description {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.slide-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.news-card-header > h2 {
|
||||
margin: 1rem 0 1rem 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.archive-head {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
@ -226,6 +239,10 @@ if (!data || code !== 0) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.news-card-summary {
|
||||
color:#6e6e6e
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
float: left;
|
||||
margin-left: -360px;
|
||||
|
||||
@ -1,48 +1,56 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import { getConfig } from '../../../utils/config'
|
||||
import { getConfig } from "../../../utils/config";
|
||||
import { newsDetail } from "../../../utils/rpc";
|
||||
import Breadcrumb from "../../components/Breadcrumb.astro";
|
||||
const { slug } = Astro.params;
|
||||
const config = getConfig(Astro)
|
||||
const config = getConfig(Astro);
|
||||
const requestUrl = Astro.request.url;
|
||||
const breadcrumb = [{title: '资讯', link: '/news'},{title: '教程', link: '/news/tech'}, {title: '正文', link: ''}]
|
||||
if (!slug) {
|
||||
return Astro.redirect('/404');
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
|
||||
if (slug == 'seo_tech') {
|
||||
return Astro.rewrite('/')
|
||||
if (slug == "seo_tech") {
|
||||
return Astro.rewrite("/");
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug, config);
|
||||
|
||||
const { code, data } = await newsDetail(slug, config);
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
return Astro.redirect("/404");
|
||||
}
|
||||
---
|
||||
|
||||
<Layout
|
||||
desc={data.description}
|
||||
keywords={data.keywords}
|
||||
title={`${data.title} - ${config.app_name}`}
|
||||
>
|
||||
<div class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
||||
<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 class="product-tabs-wrap container">
|
||||
<div class="product-tabs__heading">
|
||||
<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 class="v4 header-placeholder nav-v2" id="header-placeholder"></div>
|
||||
<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 class="product-tabs-wrap container">
|
||||
<div class="product-tabs__heading">
|
||||
<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>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<!-- <Breadcrumb data={[]}/> -->
|
||||
<Breadcrumb data={breadcrumb} />
|
||||
<header>
|
||||
<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>
|
||||
<article class="news-detail-content">
|
||||
<div class="top-icon"></div>
|
||||
@ -58,16 +66,28 @@ if (!data || code !== 0) {
|
||||
data.prevNews && (
|
||||
<div>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
{
|
||||
data.nextNews && (
|
||||
<div>
|
||||
<div>
|
||||
<span>下一篇: </span>
|
||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
||||
</div>
|
||||
<a
|
||||
class="news-next news-link"
|
||||
title={data.nextNews.title}
|
||||
href={`/news/${data.nextNews.id}`}
|
||||
>
|
||||
{data.nextNews.title}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
@ -75,180 +95,232 @@ if (!data || code !== 0) {
|
||||
<aside class="news-sidebar">
|
||||
<div class="related-news">
|
||||
<h3>相关推荐</h3>
|
||||
<div class="top-icon"></div>
|
||||
<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>
|
||||
))}
|
||||
{
|
||||
data.about.map((item) => (
|
||||
<li>
|
||||
<a
|
||||
class="news-link"
|
||||
title={item.title}
|
||||
href={`/news/${item.id}`}
|
||||
>
|
||||
<span class="related-title">{item.title}</span>
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</Layout>
|
||||
<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) {
|
||||
.header_full_banner {
|
||||
padding-left: 125px;
|
||||
}
|
||||
}
|
||||
.news-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
article {
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
article {
|
||||
|
||||
h1, .h1, h2, .h2, h3, .h3, h4, p {
|
||||
font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
|
||||
/* text-indent: unset !important; */
|
||||
margin: 15px;
|
||||
/* margin-top: 0.5rem; */
|
||||
/* margin-bottom: unset; */
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
unicode-bidi: isolate;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
margin-block-start: 0.67em;
|
||||
margin-block-end: 0.67em;
|
||||
margin-inline-start: 0px;
|
||||
margin-inline-end: 0px;
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
article h1, .h1, h2, .h2, h3, .h3, h4{
|
||||
font-weight: 700;
|
||||
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;
|
||||
}
|
||||
|
||||
</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>
|
||||
.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 {
|
||||
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;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.top-icon {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
border-bottom: 1px solid #e0e0e0
|
||||
}
|
||||
.top-icon {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
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-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;
|
||||
}
|
||||
.news-meta {
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
color: black;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.8rem;
|
||||
margin-top: 0.8rem;
|
||||
/* line-height: 1.4; */
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-meta span{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.news-meta span {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-date::before {
|
||||
content: '📅';
|
||||
}
|
||||
@ -257,155 +329,155 @@ if (!data || code !== 0) {
|
||||
content: '👤';
|
||||
} */
|
||||
|
||||
.news-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.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 {
|
||||
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-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;
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.news-detail-content {
|
||||
border-right: 1px solid var(--text-primary);
|
||||
/* padding: 3rem; */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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-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 {
|
||||
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 {
|
||||
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-images img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
.news-sidebar {
|
||||
padding: 1.5rem;
|
||||
/* position: sticky; */
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
padding: 0 1.5rem 3rem;
|
||||
/* position: sticky; */
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news li {
|
||||
/* margin-bottom: 1.2rem;
|
||||
.related-news li {
|
||||
/* margin-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 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
.news-share {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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-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>
|
||||
}
|
||||
</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
|
||||
created_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[]>>{
|
||||
const client = getRpcClient()
|
||||
@ -52,6 +54,8 @@ export interface InewsDetail {
|
||||
content: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
column_tag: string
|
||||
column_tag_url: string
|
||||
about: {
|
||||
id: number
|
||||
title: string
|
||||
|
||||
Reference in New Issue
Block a user