danWeiGaiKuang.php 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <?php
  2. // 轮播图数据 - 修改为单张图片
  3. $carouselItems = [
  4. [
  5. "image" => "/images/test-header-3.png",
  6. "alt" => "部门概况"
  7. ]
  8. ];
  9. $newsData =
  10. [
  11. "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
  12. "content" => "内容内容内容内容内容内容内容内容内容内容内容内容",
  13. "date" => "2025-12-07",
  14. "views" => "2025-12-07",
  15. ];
  16. ?>
  17. <!DOCTYPE html>
  18. <html lang="zh-CN">
  19. <head>
  20. <meta charset="UTF-8">
  21. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  22. <title>厦门市文化遗产保护中心 - <?php echo $newsData['title']; ?></title>
  23. <link rel="stylesheet" href="/css/fonts.css">
  24. <link rel="stylesheet" href="/css/fontawesome.min.css">
  25. <link rel="stylesheet" href="/css/bootstrap.min.css">
  26. <link rel="stylesheet" href="/css/swiper-bundle.min.css">
  27. <link rel="stylesheet" href="/css/style.css">
  28. <script src="/js/jquery-3.7.1.js"></script>
  29. <script src="/js/bootstrap.bundle.js"></script>
  30. <script src="/js/swiper-bundle.min.js"></script>
  31. </head>
  32. <body>
  33. <?php include __DIR__ . '/components/navbar.php'; ?>
  34. <!-- 轮播图 -->
  35. <div class="swiper mySwiper" style="width: 100%; height: 400px;">
  36. <div class="swiper-wrapper">
  37. <?php foreach ($carouselItems as $item): ?>
  38. <div class="swiper-slide">
  39. <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
  40. </div>
  41. <?php endforeach; ?>
  42. </div>
  43. <div class="swiper-pagination"></div>
  44. <div class="swiper-button-prev"></div>
  45. <div class="swiper-button-next"></div>
  46. </div>
  47. <!-- 主要内容 -->
  48. <div class="main-content">
  49. <div class="container">
  50. <div class="row">
  51. <!-- 左侧导航 -->
  52. <div class="col col-sm-12 col-md-3 col-lg-3">
  53. <div class="sidebar">
  54. <div class="title">
  55. <h2>部门概况</h2>
  56. </div>
  57. <ul class="sidebar-menu">
  58. <li><a href="#">中心简介<i class="fa fa-arrow-right"></i></a></li>
  59. <li><a href="#">机构设置<i class="fa fa-arrow-right"></i></a></li>
  60. </ul>
  61. </div>
  62. </div>
  63. <!-- 右侧内容 -->
  64. <div class="col col-sm-12 col-md-9 col-lg-9">
  65. <div class="content">
  66. <div class="section-title">
  67. <h2 class="icon">中心简介</h2>
  68. <nav aria-label="breadcrumb">
  69. <ol class="breadcrumb">
  70. <li class="breadcrumb-item"><a href="/">首页</a></li>
  71. <li class="breadcrumb-item active" aria-current="page">部门概况</li>
  72. </ol>
  73. </nav>
  74. </div>
  75. <div class="news-detail">
  76. <p><?php echo $newsData['content']; ?></p>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <?php include __DIR__ . '/components/footer.php'; ?>
  84. <script>
  85. $(document).ready(function() {
  86. // 初始化 Swiper
  87. const swiper = new Swiper(".mySwiper", {
  88. slidesPerView: 1,
  89. spaceBetween: 30,
  90. loop: true,
  91. pagination: {
  92. el: ".swiper-pagination",
  93. clickable: true,
  94. },
  95. navigation: {
  96. nextEl: ".swiper-button-next",
  97. prevEl: ".swiper-button-prev",
  98. },
  99. autoplay: {
  100. delay: 5000,
  101. disableOnInteraction: false,
  102. },
  103. });
  104. });
  105. </script>
  106. </body>
  107. </html>