update
This commit is contained in:
toom1996
@ -74,21 +74,7 @@ body a{
|
|||||||
display:block;
|
display:block;
|
||||||
list-style:none;
|
list-style:none;
|
||||||
}
|
}
|
||||||
/* top-nav */
|
|
||||||
.top-nav:before,
|
|
||||||
.top-nav:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
list-style:none;
|
|
||||||
}
|
|
||||||
.top-nav:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
/* nav {
|
|
||||||
position: relative;
|
|
||||||
float: right;
|
|
||||||
list-style:none;
|
|
||||||
} */
|
|
||||||
nav ul {
|
nav ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
float: right;
|
float: right;
|
||||||
@ -126,17 +112,11 @@ nav a#pull {
|
|||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
nav li {
|
nav li {
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
nav li a {
|
nav li a {
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
}
|
}
|
||||||
nav a {
|
|
||||||
text-align: left;
|
|
||||||
width: 100%;
|
|
||||||
text-indent: 25px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
/*Styles for screen 515px and lower*/
|
/*Styles for screen 515px and lower*/
|
||||||
@media only screen and (max-width : 768px) {
|
@media only screen and (max-width : 768px) {
|
||||||
@ -148,14 +128,13 @@ nav a#pull {
|
|||||||
display: none;
|
display: none;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin:0;
|
margin:0;
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
nav a#pull {
|
nav a#pull {
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #F26D7D;
|
color: #F26D7D;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: absolute;
|
/* position: absolute; */
|
||||||
top:12px;
|
top:12px;
|
||||||
}
|
}
|
||||||
nav a#pull:after {
|
nav a#pull:after {
|
||||||
@ -184,7 +163,7 @@ nav a#pull {
|
|||||||
nav li {
|
nav li {
|
||||||
display: block;
|
display: block;
|
||||||
float: none;
|
float: none;
|
||||||
width: 100%;
|
/* width: 100%; */
|
||||||
}
|
}
|
||||||
nav li a {
|
nav li a {
|
||||||
border-bottom: 1px solid #576979;
|
border-bottom: 1px solid #576979;
|
||||||
|
|||||||
@ -63,12 +63,6 @@ body {
|
|||||||
font-family: -apple-system, Helvetica Neue, Arial, PingFang SC, lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
|
font-family: -apple-system, Helvetica Neue, Arial, PingFang SC, lucida grande, lucida sans unicode, lucida, helvetica, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn.focus,
|
.btn.focus,
|
||||||
.btn:focus {
|
.btn:focus {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
|
|||||||
@ -66,7 +66,7 @@ if (totalPages <= 7) {
|
|||||||
min-width: 32px;
|
min-width: 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #f5f5f5;
|
background: #fff;
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|||||||
@ -1,86 +1,138 @@
|
|||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import { getConfig } from '../../utils/config'
|
import { getConfig } from "../../utils/config";
|
||||||
import '../assets/css1/style.css'
|
import "../assets/css1/style.css";
|
||||||
import '../assets/css1/style5.css'
|
import "../assets/css1/style5.css";
|
||||||
import { newsIndex } from "../../utils/rpc";
|
import { newsIndex } from "../../utils/rpc";
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import PaginationComponent from '../components/Pagination.astro'
|
import PaginationComponent from "../components/Pagination.astro";
|
||||||
import BreadComponent from '../components/Breadcrumb.astro'
|
import BreadComponent from "../components/Breadcrumb.astro";
|
||||||
const config = getConfig(Astro)
|
const config = getConfig(Astro);
|
||||||
|
|
||||||
// 每页显示多少条
|
// 每页显示多少条
|
||||||
const limit = 12
|
const limit = 12;
|
||||||
|
|
||||||
// 页码
|
// 页码
|
||||||
const { page = 1} = Astro.props;
|
const { page = 1 } = Astro.props;
|
||||||
const {code, data, total = 0, about} = await newsIndex(config.id, limit, page);
|
const { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
|
||||||
console.log(about)
|
console.log(about);
|
||||||
if (!data || code !== 0) {
|
if (!data || code !== 0) {
|
||||||
return Astro.redirect('/404');
|
return Astro.redirect("/404");
|
||||||
}
|
}
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
<main class="site-content">
|
<main class="site-content">
|
||||||
|
|
||||||
<!-- Blog Grid Section Start Here -->
|
<!-- Blog Grid Section Start Here -->
|
||||||
<div class="blog-page">
|
<div class="blog-page">
|
||||||
<div class="news-list-container">
|
<div class="news-list-container">
|
||||||
<div class="archive-head" style="grid-column: 1 / 3;grid-row: 1 / 2;">
|
<div
|
||||||
<BreadComponent data={[{title: '新闻中心', link: '/news'}]} />
|
class="archive-head"
|
||||||
|
style="grid-column: 1 / 3;grid-row: 1 / 2;"
|
||||||
|
>
|
||||||
|
<BreadComponent
|
||||||
|
data={[{ title: "新闻中心", link: "/news" }]}
|
||||||
|
/>
|
||||||
<div class="archive-description">
|
<div class="archive-description">
|
||||||
<p>SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。</p>
|
<p>
|
||||||
</div>
|
SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="news-list-row">
|
<div class="news-list-row">
|
||||||
{
|
{
|
||||||
data?.map(e => {
|
data?.map((e) => {
|
||||||
return <div class="">
|
return (
|
||||||
<div class="post-inner news-card">
|
<div class="">
|
||||||
<div class="entry-media news-card-img">
|
<div class="post-inner news-card">
|
||||||
<a class="blog-image" href={`/news/${e.id}`} title={`${e.title}`}>
|
<div class="entry-media news-card-img">
|
||||||
<Image loading="lazy" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
|
<a
|
||||||
</a>
|
class="blog-image"
|
||||||
</div>
|
href={`/news/${e.id}`}
|
||||||
<div class="inner-post news-card-body">
|
title={`${e.title}`}
|
||||||
<div class="entry-header news-card-header">
|
>
|
||||||
<div class="entry-meta news-card-meta">
|
<Image
|
||||||
<span class="posted-on">
|
loading="lazy"
|
||||||
<span><time class="entry-date published">{e.created_at}</time></span>
|
style={`aspect-ratio: 4 / 3;object-fit: cover;`}
|
||||||
</span>
|
src={e.cover}
|
||||||
</div>
|
alt={e.title}
|
||||||
<h2><a href={`/news/${e.id}`} title={`${e.title}`} class="entry-title news-card-title">{e.title}</a></h2>
|
width={100}
|
||||||
|
height={100}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="inner-post news-card-body">
|
||||||
|
<div class="entry-header news-card-header">
|
||||||
|
<div class="entry-meta news-card-meta">
|
||||||
|
<span class="posted-on">
|
||||||
|
<span>
|
||||||
|
<time class="entry-date published">
|
||||||
|
{e.created_at}
|
||||||
|
</time>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h2>
|
||||||
|
<a
|
||||||
|
href={`/news/${e.id}`}
|
||||||
|
title={`${e.title}`}
|
||||||
|
class="entry-title news-card-title"
|
||||||
|
>
|
||||||
|
{e.title}
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<p class="entry-summary news-card-summary">
|
||||||
|
{e.description}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<p class="entry-summary news-card-summary">{e.description}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
);
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<PaginationComponent totalPages={total} currentPage={page} baseUrl={`/news/page/`} />
|
<PaginationComponent
|
||||||
|
totalPages={total}
|
||||||
|
currentPage={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) => {
|
about?.map((item, index) => {
|
||||||
return <li class={`previous-${index + 1}`}>
|
return (
|
||||||
<div class="previous-one-img">
|
<li class={`previous-${index + 1}`}>
|
||||||
<a href={`news/${item.id}`} title={item.title}>
|
<div class="previous-one-img">
|
||||||
<Image src={item.cover} alt={item.title} height={100} width={100}/>
|
<a
|
||||||
|
href={`news/${item.id}`}
|
||||||
|
title={item.title}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={item.cover}
|
||||||
|
alt={item.title}
|
||||||
|
height={100}
|
||||||
|
width={100}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="previous-recent-title">
|
||||||
|
<h4 class="title">
|
||||||
|
<a
|
||||||
|
href={`news/${item.id}`}
|
||||||
|
title={item.title}
|
||||||
|
>
|
||||||
|
{item.title}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</h4>
|
||||||
<div class="previous-recent-title">
|
<span class="info">2025-02-27</span>
|
||||||
<h4 class="title">
|
</div>
|
||||||
<a href={`news/${item.id}`} title={item.title}>{item.title}</a>
|
</li>
|
||||||
</h4>
|
);
|
||||||
<span class="info">2025-02-27</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
@ -90,8 +142,55 @@ if (!data || code !== 0) {
|
|||||||
</Layout>
|
</Layout>
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.slide-container{
|
@media screen and (max-width:980px) {
|
||||||
padding:1rem;
|
.site-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.slide-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width:980px) {
|
||||||
|
.site-content {
|
||||||
|
display: grid;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-template-columns: 4fr 1.5fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width:768px) {
|
||||||
|
.news-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-image {
|
||||||
|
width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width:768px) {
|
||||||
|
.news-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-image {
|
||||||
|
flex: 0 0 260px;
|
||||||
|
max-width: 260px;
|
||||||
|
padding: 1rem;
|
||||||
|
background: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.slide-container {
|
||||||
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
.archive-head {
|
.archive-head {
|
||||||
grid-column: 1 / 3;
|
grid-column: 1 / 3;
|
||||||
@ -115,11 +214,6 @@ if (!data || code !== 0) {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
}
|
|
||||||
.news-card-body {
|
.news-card-body {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -128,42 +222,121 @@ if (!data || code !== 0) {
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-content {
|
.news-card-img {
|
||||||
display: grid;
|
|
||||||
flex-direction: row;
|
|
||||||
grid-template-columns: 4fr 1.5fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blog-image {
|
|
||||||
flex: 0 0 260px;
|
|
||||||
max-width: 260px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: #ffffff;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.news-card-img {
|
.sidebar {
|
||||||
display:flex;
|
float: left;
|
||||||
|
margin-left: -360px;
|
||||||
|
width: 360px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.widget {
|
||||||
|
height: fit-content;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 15px 20px 10px 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.widget-tie h3 {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 21px;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
font-size: 15px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.widget-tie h3:after {
|
||||||
|
content: "";
|
||||||
|
width: 70px;
|
||||||
|
height: 1px;
|
||||||
|
background: #e94c3d;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: -1px;
|
||||||
|
}
|
||||||
|
.widget ul {
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.following {
|
||||||
|
width: 360px;
|
||||||
|
}
|
||||||
|
.following2 {
|
||||||
|
position: fixed;
|
||||||
|
_position: absolute;
|
||||||
|
top: 65px;
|
||||||
|
z-index: 999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar{float:left;margin-left:-360px;width:360px;position:relative}
|
|
||||||
.widget{height:fit-content;background-color:#fff;border:1px solid #eee;overflow:hidden;padding:15px 20px 10px 20px;margin-bottom:20px}
|
|
||||||
.widget-tie h3{padding-bottom:10px;margin-bottom:21px;border-bottom:1px solid #ebebeb;font-size:15px;position:relative}
|
|
||||||
.widget-tie h3:after{content:"";width:70px;height:1px;background:#e94c3d;position:absolute;left:0;bottom:-1px}
|
|
||||||
.widget ul{margin:0;list-style:none;padding:0;}
|
|
||||||
.following{width:360px;}.following2{position:fixed;_position:absolute;top:65px;z-index:999;}
|
|
||||||
/*divPrevious*/
|
/*divPrevious*/
|
||||||
.divPrevious li{position:relative;margin-top:20px;overflow:hidden}
|
.divPrevious li {
|
||||||
.divPrevious li.previous-1{margin-bottom:0}
|
position: relative;
|
||||||
.divPrevious li.previous-1 .previous-recent-title{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);padding:5px 15px;margin-left:0}
|
margin-top: 20px;
|
||||||
.divPrevious li.previous-1 .previous-one-img{float:none;width:auto;height:auto;max-height:initial;position:relative;margin-top:0}
|
overflow: hidden;
|
||||||
.divPrevious li.previous-1 .previous-one-img img{width:320px;height:180px;vertical-align:middle}
|
}
|
||||||
.divPrevious li.previous-1 .previous-recent-title h4{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
.divPrevious li.previous-1 {
|
||||||
.divPrevious li.previous-1 .previous-recent-title h4 a{color:#E4E4E4}
|
margin-bottom: 0;
|
||||||
.divPrevious li.previous-1 .previous-recent-title span{color:#CCC}
|
}
|
||||||
.divPrevious li .previous-one-img{float:left;width:75px;height:auto;max-height:75px;position:relative;margin-top:3px}
|
.divPrevious li.previous-1 .previous-recent-title {
|
||||||
.divPrevious li .previous-one-img img{width:75px;height:auto;aspect-ratio: 4 / 3;object-fit: cover;}
|
position: absolute;
|
||||||
.divPrevious li .previous-recent-title{margin-left:85px}
|
bottom: 0;
|
||||||
.divPrevious li .previous-recent-title h4{font-size:13px;font-weight:400;line-height:1.6;margin-bottom:0}
|
left: 0;
|
||||||
.divPrevious li .previous-recent-title span{font-size:12px;color:#9A9A9A}
|
right: 0;
|
||||||
</style>
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 5px 15px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-one-img {
|
||||||
|
float: none;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
max-height: initial;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-one-img img {
|
||||||
|
width: 320px;
|
||||||
|
height: 180px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title h4 {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title h4 a {
|
||||||
|
color: #e4e4e4;
|
||||||
|
}
|
||||||
|
.divPrevious li.previous-1 .previous-recent-title span {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-one-img {
|
||||||
|
float: left;
|
||||||
|
width: 75px;
|
||||||
|
height: auto;
|
||||||
|
max-height: 75px;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 3px;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-one-img img {
|
||||||
|
width: 75px;
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: 4 / 3;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title {
|
||||||
|
margin-left: 85px;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title h4 {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.divPrevious li .previous-recent-title span {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #9a9a9a;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -82,6 +82,11 @@ if (!data || code !== 0) {
|
|||||||
</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 {
|
.news-content img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user