toom1996/huoerguosifeichi
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-17 11:37:30 +08:00
parent 4a1dbac02f
commit 5d55667cd3
5 changed files with 272 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/assets/css/theme-style.css
View File

@ -74,21 +74,7 @@ body a{
display:block;
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 {
padding: 0;
float: right;
@ -126,17 +112,11 @@ nav a#pull {
height: auto;
}
nav li {
width: 100%;
position: relative;
}
nav li a {
border-bottom: 1px solid #eee;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 768px) {
@ -148,14 +128,13 @@ nav a#pull {
display: none;
height: auto;
margin:0;
background: #fff;
}
nav a#pull {
display: block;
position: relative;
color: #F26D7D;
text-align: right;
position: absolute;
/* position: absolute; */
top:12px;
}
nav a#pull:after {
@ -184,7 +163,7 @@ nav a#pull {
nav li {
display: block;
float: none;
width: 100%;
/* width: 100%; */
}
nav li a {
border-bottom: 1px solid #576979;

6
src/assets/css1/style.css
View File

@ -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;
}
p,
ul,
ol {
margin-bottom: 30px;
}
.btn.focus,
.btn:focus {
box-shadow: none !important;

2
src/components/Pagination.astro
View File

@ -66,7 +66,7 @@ if (totalPages <= 7) {
min-width: 32px;
text-align: center;
border-radius: 4px;
background: #f5f5f5;
background: #fff;
color: #333;
font-size: 1rem;
user-select: none;

309
src/pages/news.astro
View File

@ -1,65 +1,102 @@
---
import Layout from "../layouts/Layout.astro";
import { getConfig } from '../../utils/config'
import '../assets/css1/style.css'
import '../assets/css1/style5.css'
import { getConfig } from "../../utils/config";
import "../assets/css1/style.css";
import "../assets/css1/style5.css";
import { newsIndex } from "../../utils/rpc";
import { Image } from "astro:assets";
import PaginationComponent from '../components/Pagination.astro'
import BreadComponent from '../components/Breadcrumb.astro'
const config = getConfig(Astro)
import PaginationComponent from "../components/Pagination.astro";
import BreadComponent from "../components/Breadcrumb.astro";
const config = getConfig(Astro);
// 每页显示多少条
const limit = 12
const limit = 12;
// 页码
const { page = 1} = Astro.props;
const {code, data, total = 0, about} = await newsIndex(config.id, limit, page);
console.log(about)
const { page = 1 } = Astro.props;
const { code, data, total = 0, about } = await newsIndex(config.id, limit, page);
console.log(about);
if (!data || code !== 0) {
return Astro.redirect('/404');
return Astro.redirect("/404");
}
---
<Layout>
<main class="site-content">
<!-- Blog Grid Section Start Here -->
<div class="blog-page">
<div class="news-list-container">
<div class="archive-head" style="grid-column: 1 / 3;grid-row: 1 / 2;">
<BreadComponent data={[{title: '新闻中心', link: '/news'}]} />
<div
class="archive-head"
style="grid-column: 1 / 3;grid-row: 1 / 2;"
>
<BreadComponent
data={[{ title: "新闻中心", link: "/news" }]}
/>
<div class="archive-description">
<p>SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。</p>
<p>
SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。
</p>
</div>
</div>
<div class="news-list-row">
{
data?.map(e => {
return <div class="">
data?.map((e) => {
return (
<div class="">
<div class="post-inner news-card">
<div class="entry-media news-card-img">
<a class="blog-image" href={`/news/${e.id}`} title={`${e.title}`}>
<Image loading="lazy" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
<a
class="blog-image"
href={`/news/${e.id}`}
title={`${e.title}`}
>
<Image
loading="lazy"
style={`aspect-ratio: 4 / 3;object-fit: cover;`}
src={e.cover}
alt={e.title}
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>
<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>
<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>
<p class="entry-summary news-card-summary">
{e.description}
</p>
</div>
</div>
</div>
);
})
}
</div>
<PaginationComponent totalPages={total} currentPage={page} baseUrl={`/news/page/`} />
<PaginationComponent
totalPages={total}
currentPage={page}
baseUrl={`/news/page/`}
/>
</div>
</div>
<div class="slide-container">
@ -68,19 +105,34 @@ if (!data || code !== 0) {
<ul>
{
about?.map((item, index) => {
return <li class={`previous-${index + 1}`}>
return (
<li class={`previous-${index + 1}`}>
<div class="previous-one-img">
<a href={`news/${item.id}`} title={item.title}>
<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
href={`news/${item.id}`}
title={item.title}
>
{item.title}
</a>
</h4>
<span class="info">2025-02-27</span>
</div>
</li>
);
})
}
</ul>
@ -90,8 +142,55 @@ if (!data || code !== 0) {
</Layout>
<style>
.slide-container{
padding:1rem;
@media screen and (max-width:980px) {
.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 {
grid-column: 1 / 3;
@ -115,11 +214,6 @@ if (!data || code !== 0) {
flex-direction: column;
}
.news-card {
display: flex;
flex-direction: row;
border: 1px solid #eee;
}
.news-card-body {
flex: 1;
display: flex;
@ -128,42 +222,121 @@ if (!data || code !== 0) {
background: #ffffff;
}
.site-content {
display: grid;
flex-direction: row;
grid-template-columns: 4fr 1.5fr;
}
.blog-image {
flex: 0 0 260px;
max-width: 260px;
padding: 1rem;
background: #ffffff;
.news-card-img {
display: flex;
}
.news-card-img {
display:flex;
.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;
}
.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 li{position:relative;margin-top:20px;overflow:hidden}
.divPrevious li.previous-1{margin-bottom:0}
.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}
.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}
.divPrevious li {
position: relative;
margin-top: 20px;
overflow: hidden;
}
.divPrevious li.previous-1 {
margin-bottom: 0;
}
.divPrevious li.previous-1 .previous-recent-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
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>

5
src/pages/news/[...slug].astro
View File

@ -82,6 +82,11 @@ if (!data || code !== 0) {
</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;