luDaoWenMai.php 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <?php
  2. require_once 'CommonQuery.php';
  3. // 轮播图数据 - 修改为单张图片
  4. $carouselItems = [
  5. [
  6. "image" => "/images/test-header-6.png",
  7. "alt" => "鹭岛文脉"
  8. ]
  9. ];
  10. // 获取URL参数 - 当前页码
  11. $currentPage = isset($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0 ? intval($_GET['page']) : 1;
  12. // 每页显示的文章数量
  13. $pageSize = 6;
  14. // 主频道名称
  15. $mainChannelName = "鹭岛文脉";
  16. // 获取文章列表和总页数
  17. $articleResult = loadListByChannelNameAndPage($pageSize, $mainChannelName, $currentPage);
  18. $luDaoItems = $articleResult['list'];
  19. $totalPages = $articleResult['totalPages'];
  20. ?>
  21. <!DOCTYPE html>
  22. <html lang="zh-CN">
  23. <head>
  24. <meta charset="UTF-8">
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26. <title>厦门市文化遗产保护中心 - 鹭岛文脉</title>
  27. <link rel="stylesheet" href="/css/fonts.css">
  28. <link rel="stylesheet" href="/css/fontawesome.min.css">
  29. <link rel="stylesheet" href="/css/bootstrap.min.css">
  30. <link rel="stylesheet" href="/css/swiper-bundle.min.css">
  31. <link rel="stylesheet" href="/css/style.css">
  32. <script src="/js/jquery-3.7.1.js"></script>
  33. <script src="/js/bootstrap.bundle.js"></script>
  34. <script src="/js/swiper-bundle.min.js"></script>
  35. </head>
  36. <body>
  37. <?php include __DIR__ . '/components/navbar.php'; ?>
  38. <!-- 轮播图 -->
  39. <div class="swiper mySwiper" style="width: 100%; height: 400px;">
  40. <div class="swiper-wrapper">
  41. <?php foreach ($carouselItems as $item): ?>
  42. <div class="swiper-slide">
  43. <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
  44. </div>
  45. <?php endforeach; ?>
  46. </div>
  47. <div class="swiper-pagination"></div>
  48. <div class="swiper-button-prev"></div>
  49. <div class="swiper-button-next"></div>
  50. </div>
  51. <!-- 主要内容 -->
  52. <div class="main-content">
  53. <div class="container">
  54. <div class="content">
  55. <!-- 精彩推荐网格布局 -->
  56. <div class="featured-section">
  57. <div class="section-title center large">
  58. <h2 class="icon">鹭岛文脉</h2>
  59. </div>
  60. <div class="featured-grid">
  61. <?php if (!empty($luDaoItems)): ?>
  62. <?php foreach ($luDaoItems as $item): ?>
  63. <div class="featured-card">
  64. <img
  65. src="<?php echo isset($item['image']) ? $item['image'] : '/images/test-header-1.png'; ?>"
  66. alt="<?php echo isset($item['title']) ? $item['title'] : '鹭岛文脉'; ?>"
  67. >
  68. <p>
  69. <a href="./xinWenXiangQing.php?id=<?php echo isset($item['id']) ? $item['id'] : ''; ?>">
  70. <?php echo isset($item['title']) ? $item['title'] : ''; ?>
  71. </a>
  72. </p>
  73. </div>
  74. <?php endforeach; ?>
  75. <?php else: ?>
  76. <div class="no-news text-center w-100">暂无相关数据</div>
  77. <?php endif; ?>
  78. </div>
  79. </div>
  80. <!-- 分页 -->
  81. <?php if ($totalPages > 1): ?>
  82. <nav aria-label="List Page navigation" class="mt-6">
  83. <ul class="pagination justify-content-center">
  84. <!-- 上一页 -->
  85. <li class="page-item <?php echo $currentPage <= 1 ? 'disabled' : ''; ?>">
  86. <a
  87. class="page-link"
  88. href="?page=<?php echo $currentPage - 1; ?>"
  89. aria-label="Previous"
  90. >
  91. <span aria-hidden="true">&laquo;</span>
  92. </a>
  93. </li>
  94. <!-- 页码 -->
  95. <?php for ($i = 1; $i <= $totalPages; $i++): ?>
  96. <li class="page-item <?php echo $i == $currentPage ? 'active' : ''; ?>">
  97. <a class="page-link" href="?page=<?php echo $i; ?>">
  98. <?php echo $i; ?>
  99. </a>
  100. </li>
  101. <?php endfor; ?>
  102. <!-- 下一页 -->
  103. <li class="page-item <?php echo $currentPage >= $totalPages ? 'disabled' : ''; ?>">
  104. <a
  105. class="page-link"
  106. href="?page=<?php echo $currentPage + 1; ?>"
  107. aria-label="Next"
  108. >
  109. <span aria-hidden="true">&raquo;</span>
  110. </a>
  111. </li>
  112. </ul>
  113. </nav>
  114. <?php endif; ?>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. <?php include __DIR__ . '/components/footer.php'; ?>
  120. <script>
  121. $(document).ready(function() {
  122. // 初始化 Swiper
  123. const swiper = new Swiper(".mySwiper", {
  124. slidesPerView: 1,
  125. spaceBetween: 30,
  126. loop: true,
  127. pagination: {
  128. el: ".swiper-pagination",
  129. clickable: true,
  130. },
  131. navigation: {
  132. nextEl: ".swiper-button-next",
  133. prevEl: ".swiper-button-prev",
  134. },
  135. autoplay: {
  136. delay: 5000,
  137. disableOnInteraction: false,
  138. },
  139. });
  140. });
  141. </script>
  142. </body>
  143. </html>