update
This commit is contained in:
toom1996
91
src/assets/css/bootstrap.css
vendored
91
src/assets/css/bootstrap.css
vendored
@ -395,76 +395,7 @@ h6 .small,
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h1 small,
|
||||
.h1 small,
|
||||
h2 small,
|
||||
.h2 small,
|
||||
h3 small,
|
||||
.h3 small,
|
||||
h1 .small,
|
||||
.h1 .small,
|
||||
h2 .small,
|
||||
.h2 .small,
|
||||
h3 .small,
|
||||
.h3 .small {
|
||||
font-size: 65%;
|
||||
}
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
h4 small,
|
||||
.h4 small,
|
||||
h5 small,
|
||||
.h5 small,
|
||||
h6 small,
|
||||
.h6 small,
|
||||
h4 .small,
|
||||
.h4 .small,
|
||||
h5 .small,
|
||||
.h5 .small,
|
||||
h6 .small,
|
||||
.h6 .small {
|
||||
font-size: 75%;
|
||||
}
|
||||
h1,
|
||||
.h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
h2,
|
||||
.h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h3,
|
||||
.h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h4,
|
||||
.h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h5,
|
||||
.h5 {
|
||||
font-size: 14px;
|
||||
}
|
||||
h6,
|
||||
.h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
@ -4114,28 +4045,10 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
|
||||
.navbar-inverse .navbar-link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.breadcrumb {
|
||||
padding: 8px 15px;
|
||||
margin-bottom: 20px;
|
||||
list-style: none;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.breadcrumb > li {
|
||||
display: inline-block;
|
||||
}
|
||||
.breadcrumb > li + li:before {
|
||||
padding: 0 5px;
|
||||
color: #ccc;
|
||||
content: "/\00a0";
|
||||
}
|
||||
.breadcrumb > .active {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pagination > li {
|
||||
|
||||
@ -7,6 +7,7 @@ main {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
/* background: var(--background-light); */
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
@ -18,7 +19,7 @@ main {
|
||||
html, body{
|
||||
font-family: 'Microsoft YaHei,SimSun,Arial,SimHei';
|
||||
font-size: 100%;
|
||||
background-color: #FFF;
|
||||
background-color: #fff;
|
||||
}
|
||||
body a{
|
||||
transition:0.5s all;
|
||||
@ -83,11 +84,11 @@ body a{
|
||||
.top-nav:after {
|
||||
clear: both;
|
||||
}
|
||||
nav {
|
||||
/* nav {
|
||||
position: relative;
|
||||
float: right;
|
||||
list-style:none;
|
||||
}
|
||||
} */
|
||||
nav ul {
|
||||
padding: 0;
|
||||
float: right;
|
||||
@ -988,7 +989,7 @@ span.default_line {
|
||||
/*-----start-contact----*/
|
||||
.contact{
|
||||
background:url(/images/contact-bg.jpg) no-repeat 0px 2px;
|
||||
padding: 3em 0 4em;
|
||||
padding: 3em 0 1em;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.contact-head h3{
|
||||
|
||||
@ -63,15 +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;
|
||||
}
|
||||
|
||||
body p {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
font-weight: 500;
|
||||
color: #737b80;
|
||||
font-family: var(--primary-font);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol {
|
||||
@ -1883,98 +1874,13 @@ section {
|
||||
}
|
||||
/*Take Website Url Section Strat Here*/
|
||||
|
||||
/*Our Latest Media Section Start Here*/
|
||||
.post-inner {
|
||||
-webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.09);
|
||||
-moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.09);
|
||||
box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.09);
|
||||
border-radius: 30px;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
background: #fff;
|
||||
margin-top: 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.post-inner .entry-media {
|
||||
position: relative;
|
||||
}
|
||||
.post-inner .entry-media .post-cat {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
.post-inner .post-cat a {
|
||||
border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background: linear-gradient(145deg,#0160e7 0%,#a644b5 100%);
|
||||
padding: 8px 10px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.post-inner .post-cat a:hover {
|
||||
background: #fff;
|
||||
color: #fe4c1c;
|
||||
box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
|
||||
-webkit-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
|
||||
-moz-box-shadow: 8px 8px 30px 0px rgba(42, 67, 113, 0.15);
|
||||
}
|
||||
.entry-media a {
|
||||
display: block;
|
||||
}
|
||||
.inner-post {
|
||||
padding: 30px;
|
||||
}
|
||||
.post-inner .entry-meta {
|
||||
text-transform: capitalize;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.post-inner .entry-meta > span {
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.post-inner .entry-meta > span i {
|
||||
margin-right: 4px;
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.post-inner .entry-meta > span a {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #a5b7d2;
|
||||
}
|
||||
.post-inner .entry-meta > span a:hover {
|
||||
color: #2b3a66;
|
||||
}
|
||||
.post-inner .entry-meta > span a:hover i {
|
||||
color: #fe4c1c;
|
||||
}
|
||||
.entry-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
/* -webkit-line-clamp: 2; */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
/* text-overflow: ellipsis; */
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.entry-title:hover {
|
||||
color: #0160e7;
|
||||
}
|
||||
@ -2161,130 +2067,6 @@ section {
|
||||
}
|
||||
/*Work Section STARTS Here*/
|
||||
|
||||
/*Latest Case Studies Section Start Here*/
|
||||
.product-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-box .portfolio-info {
|
||||
width: 270px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: -270px;
|
||||
z-index: 4;
|
||||
opacity: 0;
|
||||
transition: all 0.35s ease;
|
||||
-webkit-transition: all 0.35s ease;
|
||||
-moz-transition: all 0.35s ease;
|
||||
-o-transition: all 0.35s ease;
|
||||
-ms-transition: all 0.35s ease;
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-info-inner {
|
||||
text-align: left;
|
||||
padding: 30px 30px 10px 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: #0039e4;
|
||||
background-image: -moz-linear-gradient(145deg,#0160e7 0%,#a644b5 100%);
|
||||
background-image: -webkit-linear-gradient(145deg,#0160e7 0%,#a644b5 100%);
|
||||
background-image: linear-gradient(145deg,#0160e7 0%,#a644b5 100%);
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 15px;
|
||||
-webkit-border-top-left-radius: 15px;
|
||||
-webkit-border-top-right-radius: 0px;
|
||||
-webkit-border-bottom-right-radius: 0px;
|
||||
-webkit-border-bottom-left-radius: 15px;
|
||||
-moz-border-radius-topleft: 15px;
|
||||
-moz-border-radius-topright: 0px;
|
||||
-moz-border-radius-bottomright: 0px;
|
||||
-moz-border-radius-bottomleft: 15px;
|
||||
box-shadow: 12px 12px 30px 0px rgba(0, 57, 228, 0.3);
|
||||
-webkit-box-shadow: 12px 12px 30px 0px rgba(0, 57, 228, 0.3);
|
||||
-moz-box-shadow: 12px 12px 30px 0px rgba(0, 57, 228, 0.3);
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-info-inner h5 a:hover, .product-box .portfolio-info .portfolio-info-inner .portfolio-cates a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.product-box .portfolio-info h5 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1;
|
||||
}
|
||||
.product-box .portfolio-info h5 a {
|
||||
color: #fff;
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-cates {
|
||||
color: #fe4c1c;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-cates a {
|
||||
color: #fe4c1c;
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-cates span {
|
||||
display: inline-block;
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.product-box .portfolio-info .portfolio-cates span:last-child {
|
||||
display: none;
|
||||
}
|
||||
.product-box:hover .portfolio-info {
|
||||
right: 0px !important;
|
||||
opacity: 1;
|
||||
}
|
||||
.product-box .product-thumbnail {
|
||||
overflow: hidden;
|
||||
border-radius: 30px;
|
||||
-webkit-border-radius: 30px;
|
||||
-moz-border-radius: 30px;
|
||||
}
|
||||
.product-box img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
-webkit-transition: all 0.3s linear;
|
||||
-moz-transition: all 0.3s linear;
|
||||
-o-transition: all 0.3s linear;
|
||||
-ms-transition: all 0.3s linear;
|
||||
transition: all 0.3s linear;
|
||||
}
|
||||
.product-box:hover img {
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
#product .owl-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
#product .owl-nav button {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #2b3a66;
|
||||
border-radius: 25px;
|
||||
background-color: #f2f8ff;
|
||||
margin: 0 5px;
|
||||
}
|
||||
#product .owl-nav button:hover {
|
||||
background-color: #0160e7;
|
||||
color: #fff;
|
||||
}
|
||||
/*Latest Case Studies Section End Here*/
|
||||
/* Home 3 Client Counter Section Start Here*/
|
||||
.home_3_counter {
|
||||
@ -2959,7 +2741,7 @@ p.columns_text {
|
||||
}
|
||||
.blog-page .post-inner {
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.author-widget_wrapper {
|
||||
padding: 30px 26px;
|
||||
@ -3769,30 +3551,4 @@ opacity: 0.9 !important
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.inner-post p{
|
||||
color: #2b3a66;
|
||||
}
|
||||
|
||||
.inner-post p a{
|
||||
color: #0160e7;
|
||||
}
|
||||
|
||||
.inner-post p a:hover{
|
||||
color: #0160e7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.inner-post h2{
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.inner-post img{
|
||||
text-align: center !important;
|
||||
margin: 30px auto;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
29
src/components/Breadcrumb.astro
Normal file
29
src/components/Breadcrumb.astro
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
const {data} = Astro.props;
|
||||
---
|
||||
<div class="breadcrumb">
|
||||
<a title="首页" href="/">首页</a>
|
||||
{
|
||||
data.map((item: { title: string; link: string }) => {
|
||||
return (
|
||||
<span class="separator">/</span>
|
||||
<a href={item.link}>{item.title}</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumb {
|
||||
/* margin-left: 1rem; */
|
||||
/* margin-bottom: 1rem; */
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.breadcrumb a {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
117
src/components/Pagination.astro
Normal file
117
src/components/Pagination.astro
Normal file
@ -0,0 +1,117 @@
|
||||
---
|
||||
// 通用分页组件
|
||||
export interface Props {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
baseUrl?: string; // 基础链接，拼接?page=xxx
|
||||
pageParam?: string; // 分页参数名，默认'page'
|
||||
}
|
||||
const { currentPage = 1, totalPages = 1, baseUrl = '', pageParam = 'page' } = Astro.props;
|
||||
|
||||
function getPageUrl(page: number) {
|
||||
// if (!baseUrl) return `?${pageParam}=${page}`;
|
||||
// 若baseUrl已带?，则拼接&，否则?
|
||||
return baseUrl + `${page}`;
|
||||
}
|
||||
|
||||
const showPages = [];
|
||||
if (totalPages <= 7) {
|
||||
for (let i = 1; i <= totalPages; i++) showPages.push(i);
|
||||
} else {
|
||||
if (currentPage <= 4) {
|
||||
showPages.push(1, 2, 3, 4, 5, '...', totalPages);
|
||||
} else if (currentPage >= totalPages - 3) {
|
||||
showPages.push(1, '...', totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages);
|
||||
} else {
|
||||
showPages.push(1, '...', currentPage - 1, currentPage, currentPage + 1, '...', totalPages);
|
||||
}
|
||||
}
|
||||
|
||||
---
|
||||
<nav class="pagination">
|
||||
<ul>
|
||||
<li class={currentPage == 1 ? 'disabled' : ''}>
|
||||
<a href={currentPage == 1 ? undefined : getPageUrl(currentPage - 1)} aria-label="上一页">«</a>
|
||||
</li>
|
||||
{showPages.map(page =>
|
||||
typeof page == 'number' ? (
|
||||
<li class={page == currentPage ? 'active' : ''}>
|
||||
<a href={getPageUrl(page)}>{page}</a>
|
||||
</li>
|
||||
) : (
|
||||
<li class="ellipsis">{page}</li>
|
||||
)
|
||||
)}
|
||||
<li class={currentPage == totalPages ? 'disabled' : ''}>
|
||||
<a href={currentPage == totalPages ? undefined : getPageUrl(currentPage + 1)} aria-label="下一页">»</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.pagination ul {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.pagination li {
|
||||
min-width: 32px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: #f5f5f5;
|
||||
color: #333;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
}
|
||||
.pagination li.active {
|
||||
background: #F4BB36;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.pagination li.disabled a {
|
||||
pointer-events: none;
|
||||
color: #bbb;
|
||||
}
|
||||
.pagination li a {
|
||||
display: block;
|
||||
/* padding: 0.5rem 0.75rem; */
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.pagination li.ellipsis {
|
||||
background: none;
|
||||
color: #bbb;
|
||||
pointer-events: none;
|
||||
min-width: 24px;
|
||||
padding: 0.5rem 0.2rem;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.pagination {
|
||||
/* margin: 1rem 0; */
|
||||
font-size: 0.95rem;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.pagination ul {
|
||||
gap: 0.15rem;
|
||||
}
|
||||
.pagination li {
|
||||
min-width: 28px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pagination li a {
|
||||
padding: 0.35rem 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,7 +31,7 @@ const config = getConfig(Astro)
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<div>
|
||||
<a href="/"><img src="/images/logo40_40.png" title="logo" /></a>
|
||||
<a href="/"><img src="/images/logo40_40.png" title="logo" alt="logo" /></a>
|
||||
</div>
|
||||
<div class="logo-text">
|
||||
<p>霍尔果斯飞驰广告传媒有限公司</p>
|
||||
@ -90,11 +90,18 @@ const config = getConfig(Astro)
|
||||
</div> -->
|
||||
<div class="col-md-5 contact-right">
|
||||
<h4>联系信息</h4><br />
|
||||
<p><span class="icon1"> </span><a href="tel:4001500607">4001500607</a></p><br />
|
||||
<p><span class="icon2"> </span>hegsfeichi1@163.com</p><br />
|
||||
<p><span class="icon3"> </span><label>新疆伊犁哈萨克自治州霍尔果斯市中哈国际边境合作中心B4地块东方劲秀展厅二层9012室</label></p><br />
|
||||
<p><span class="icon1"> </span><a href="tel:4001500607" title="联系电话">4001500607</a></p><br />
|
||||
<p><span class="icon2"> </span><a href="javascript:void(0);" title="公司邮箱">hegsfeichi1@163.com</a></p><br />
|
||||
<p><span class="icon3"> </span><a href="javascript:void(0);" title="公司地址">新疆伊犁哈萨克自治州霍尔果斯市中哈国际边境合作中心B4地块东方劲秀展厅二层9012室</a></p><br />
|
||||
</div>
|
||||
<div class="clearfix"> </div>
|
||||
<div class="columns">
|
||||
<ul>
|
||||
<li><a href='/about-us'>关于我们</a></li>
|
||||
<li><a href='/news'>新闻中心</a></li>
|
||||
<li><a href='/service'>我们的服务</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -107,7 +114,7 @@ const config = getConfig(Astro)
|
||||
$().UItoTop({ easingType: 'easeOutQuart' });
|
||||
});
|
||||
</script>
|
||||
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
|
||||
<a href="javascript:void(0)" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
|
||||
</div>
|
||||
<div class="clearfix"> </div>
|
||||
</div>
|
||||
@ -149,26 +156,31 @@ const config = getConfig(Astro)
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.contact-grids {
|
||||
a {
|
||||
color:white;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul>li>a {
|
||||
color:white;
|
||||
padding:0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<style is:global>
|
||||
.container {
|
||||
/* display: flex;
|
||||
align-items: center; */
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* a {
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: unset;
|
||||
font-weight: bold;
|
||||
} */
|
||||
|
||||
.logo-text {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@ -5,60 +5,165 @@ 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)
|
||||
|
||||
const {code, data} = await newsIndex(config.id);
|
||||
// 每页显示多少条
|
||||
const limit = 12
|
||||
|
||||
// 页码
|
||||
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');
|
||||
}
|
||||
|
||||
---
|
||||
<Layout>
|
||||
<div class="site-content">
|
||||
<!-- Page-Header Section STARTS Here -->
|
||||
<div class="page-header text-center">
|
||||
<div class="container">
|
||||
<h1 class="page-title">新闻中心</h1>
|
||||
<ul id="breadcrumbs" class="breadcrumbs">
|
||||
<li>
|
||||
<a href='/' class='crumb'>首页</a> > <a href='/news' class='crumb'>新闻中心</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Page-Header Section End Here -->
|
||||
<main class="site-content">
|
||||
|
||||
<!-- Blog Grid Section Start Here -->
|
||||
<section class="blog-page">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<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-description">
|
||||
<p>SEO教程，SEO入门课程，定期分析SEO技术，大量SEO实战案例，SEO学习课程，快速掌握SEO技术。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="news-list-row">
|
||||
{
|
||||
data?.map(e => {
|
||||
return <div class="col-lg-4 col-md-6">
|
||||
<div class="post-inner">
|
||||
<div class="entry-media">
|
||||
<a href={`/news/${e.id}`} title={`${e.title}`}>
|
||||
<Image loading="eager" style={`aspect-ratio: 4 / 3;object-fit: cover;`} src={e.cover} alt={e.title} width={100} height={100} />
|
||||
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>
|
||||
</div>
|
||||
<div class="inner-post">
|
||||
<div class="entry-header">
|
||||
<div class="entry-meta">
|
||||
<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>
|
||||
<a href={`/news/${e.id}`} title={`${e.title}`} class="entry-title">{e.title}</a>
|
||||
<h2><a href={`/news/${e.id}`} title={`${e.title}`} class="entry-title news-card-title">{e.title}</a></h2>
|
||||
</div>
|
||||
<p class="entry-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/`} />
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog Grid Section End Here -->
|
||||
</div>
|
||||
</Layout>
|
||||
</div>
|
||||
<div class="slide-container">
|
||||
<div class="widget widget-tie divPrevious">
|
||||
<h3>最新文章</h3>
|
||||
<ul>
|
||||
{
|
||||
about?.map((item, index) => {
|
||||
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>
|
||||
</div>
|
||||
<div class="previous-recent-title">
|
||||
<h4 class="title">
|
||||
<a href={`news/${item.id}`} title={item.title}>{item.title}</a>
|
||||
</h4>
|
||||
<span class="info">2025-02-27</span>
|
||||
</div>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.slide-container{
|
||||
padding:1rem;
|
||||
}
|
||||
.archive-head {
|
||||
grid-column: 1 / 3;
|
||||
grid-row: 1 / 2;
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.widget {
|
||||
.title {
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-page {
|
||||
padding: 1rem;
|
||||
}
|
||||
.news-list-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
.news-card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
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;
|
||||
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;}
|
||||
/*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}
|
||||
</style>
|
||||
@ -2,6 +2,7 @@
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
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 requestUrl = Astro.request.url;
|
||||
@ -30,6 +31,7 @@ if (!data || code !== 0) {
|
||||
</div>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<!-- <Breadcrumb data={[]}/> -->
|
||||
<header>
|
||||
<h1 class="title" title={data.title}>{data.title}</h1>
|
||||
</header>
|
||||
@ -85,7 +87,10 @@ if (!data || code !== 0) {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article h1, .h1, h2, .h2, h3, .h3, h4, p {
|
||||
|
||||
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;
|
||||
@ -93,8 +98,6 @@ if (!data || code !== 0) {
|
||||
/* margin-bottom: unset; */
|
||||
}
|
||||
|
||||
article {
|
||||
|
||||
h1 {
|
||||
display: block;
|
||||
font-size: 2em;
|
||||
@ -167,6 +170,7 @@ if (!data || code !== 0) {
|
||||
display: grid;
|
||||
flex-direction: row;
|
||||
grid-template-columns: 4fr 1.5fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@ -179,9 +183,10 @@ if (!data || code !== 0) {
|
||||
.news-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
.top-icon {
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
@ -264,8 +269,6 @@ if (!data || code !== 0) {
|
||||
max-width: 1200px;
|
||||
/* margin: -2rem auto 0; */
|
||||
padding: 0 1.5rem 3rem;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
|
||||
@ -323,6 +326,7 @@ if (!data || code !== 0) {
|
||||
/* position: sticky; */
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
|
||||
5
src/pages/news/page/[...page].astro
Normal file
5
src/pages/news/page/[...page].astro
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
import News from '../../news.astro'
|
||||
const {page = 1} = Astro.params;
|
||||
---
|
||||
<News page = {page}>
|
||||
@ -31,11 +31,12 @@ export interface InewsIndex {
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
export async function newsIndex(websiteId:number = 0):Promise<result<InewsIndex[]>>{
|
||||
console.log(websiteId)
|
||||
export async function newsIndex(websiteId:number = 0, limit:number = 10, page:number = 1):Promise<result<InewsIndex[]>>{
|
||||
const client = getRpcClient()
|
||||
const result = await client.call('news/index', {
|
||||
id:websiteId
|
||||
id:websiteId,
|
||||
limit: limit,
|
||||
page: page
|
||||
})
|
||||
|
||||
return result
|
||||
|
||||
Reference in New Issue
Block a user