---
import Layout from "../layouts/Layout.astro";
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);

// 每页显示多少条
const limit = 10;

// 页码
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");
}
---

<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;"
                >
                    <div>
                        <BreadComponent data={breadcrumb} />
                    </div>
                    
                    <div class="archive-description">
                        <p><Fragment set:html={columnDesc}></p>
                    </div>
                </div>
                <div class="news-list-row">
                    {
                        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>
                                        </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>
                                                <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>
                <PaginationComponent
                    totalPages={Number(total)}
                    currentPage={Number(page)}
                    baseUrl={`/news/page/`}
                />
            </div>
        </div>
        <div class="slide-container">
            <div class="widget widget-tie divPrevious">
                <h3>热门文章</h3>
                <ul>
                    {
                        hot?.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>

    @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;
        }
    }

    .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;
        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-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #ffffff;
    }

    .news-card-img {
        display: flex;
    }

    .news-card-summary {
        color:#6e6e6e
    }

    .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, 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>