| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <?php
- require_once 'CommonQuery.php';
- // 轮播图数据 - 修改为单张图片
- $carouselItems = [
- [
- "image" => "/images/test-header-6.png",
- "alt" => "鹭岛文脉"
- ]
- ];
- // 获取URL参数 - 当前页码
- $currentPage = isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0 ? intval($_GET['page']) : 1;
- // 每页显示的文章数量
- $pageSize = 6;
- // 主频道名称
- $mainChannelName = "鹭岛文脉";
- // 获取文章列表和总页数
- $articleResult = loadListByChannelNameAndPage($pageSize, $mainChannelName, $currentPage);
- $luDaoItems = $articleResult['list'];
- $totalPages = $articleResult['totalPages'];
- ?>
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>厦门市文化遗产保护中心 - 鹭岛文脉</title>
- <link rel="stylesheet" href="/css/fonts.css">
- <link rel="stylesheet" href="/css/fontawesome.min.css">
- <link rel="stylesheet" href="/css/bootstrap.min.css">
- <link rel="stylesheet" href="/css/swiper-bundle.min.css">
- <link rel="stylesheet" href="/css/style.css">
- <script src="/js/jquery-3.7.1.js"></script>
- <script src="/js/bootstrap.bundle.js"></script>
- <script src="/js/swiper-bundle.min.js"></script>
- </head>
- <body>
- <?php include __DIR__ . '/components/navbar.php'; ?>
- <!-- 轮播图 -->
- <div class="swiper mySwiper" style="width: 100%; height: 400px;">
- <div class="swiper-wrapper">
- <?php foreach ($carouselItems as $item): ?>
- <div class="swiper-slide">
- <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
- </div>
- <?php endforeach; ?>
- </div>
- <div class="swiper-pagination"></div>
- <div class="swiper-button-prev"></div>
- <div class="swiper-button-next"></div>
- </div>
- <!-- 主要内容 -->
- <div class="main-content">
- <div class="container">
- <div class="content">
-
- <!-- 精彩推荐网格布局 -->
- <div class="featured-section">
- <div class="section-title center large">
- <h2 class="icon">鹭岛文脉</h2>
- </div>
- <div class="featured-grid">
- <?php if (!empty($luDaoItems)): ?>
- <?php foreach ($luDaoItems as $item): ?>
- <div class="featured-card">
- <img
- src="<?php echo isset($item['image']) ? $item['image'] : '/images/test-header-1.png'; ?>"
- alt="<?php echo isset($item['title']) ? $item['title'] : '鹭岛文脉'; ?>"
- >
- <p>
- <a href="./xinWenXiangQing.php?id=<?php echo isset($item['id']) ? $item['id'] : ''; ?>">
- <?php echo isset($item['title']) ? $item['title'] : ''; ?>
- </a>
- </p>
- </div>
- <?php endforeach; ?>
- <?php else: ?>
- <div class="no-news text-center w-100">暂无相关数据</div>
- <?php endif; ?>
- </div>
- </div>
-
- <!-- 分页 -->
- <?php if ($totalPages > 1): ?>
- <nav aria-label="List Page navigation" class="mt-6">
- <ul class="pagination justify-content-center">
- <!-- 上一页 -->
- <li class="page-item <?php echo $currentPage <= 1 ? 'disabled' : ''; ?>">
- <a
- class="page-link"
- href="?page=<?php echo $currentPage - 1; ?>"
- aria-label="Previous"
- >
- <span aria-hidden="true">«</span>
- </a>
- </li>
-
- <!-- 页码 -->
- <?php for ($i = 1; $i <= $totalPages; $i++): ?>
- <li class="page-item <?php echo $i == $currentPage ? 'active' : ''; ?>">
- <a class="page-link" href="?page=<?php echo $i; ?>">
- <?php echo $i; ?>
- </a>
- </li>
- <?php endfor; ?>
-
- <!-- 下一页 -->
- <li class="page-item <?php echo $currentPage >= $totalPages ? 'disabled' : ''; ?>">
- <a
- class="page-link"
- href="?page=<?php echo $currentPage + 1; ?>"
- aria-label="Next"
- >
- <span aria-hidden="true">»</span>
- </a>
- </li>
- </ul>
- </nav>
- <?php endif; ?>
- </div>
- </div>
- </div>
- </div>
- <?php include __DIR__ . '/components/footer.php'; ?>
- <script>
- $(document).ready(function() {
- // 初始化 Swiper
- const swiper = new Swiper(".mySwiper", {
- slidesPerView: 1,
- spaceBetween: 30,
- loop: true,
- pagination: {
- el: ".swiper-pagination",
- clickable: true,
- },
- navigation: {
- nextEl: ".swiper-button-next",
- prevEl: ".swiper-button-prev",
- },
- autoplay: {
- delay: 5000,
- disableOnInteraction: false,
- },
- });
-
- });
- </script>
- </body>
- </html>
|