快乐的梦鱼 11 tuntia sitten
vanhempi
commit
3580d9df9c
13 muutettua tiedostoa jossa 1159 lisäystä ja 85 poistoa
  1. 8 8
      components/navbar.php
  2. 140 34
      css/style.css
  3. 1 1
      css/style.css.map
  4. 166 42
      css/style.scss
  5. 87 0
      danWeiGaiKuang.php
  6. 197 0
      dangnJianGongZuo.php
  7. 87 0
      gongZuoDongTai.php
  8. BIN
      images/test-header-2.png
  9. 87 0
      lianXiWoMeng.php
  10. 87 0
      luDaoWenMai.php
  11. 87 0
      wenBaoJiaYuan.php
  12. 125 0
      xinWenXiangQing.php
  13. 87 0
      zhengCeFaGui.php

+ 8 - 8
components/navbar.php

@@ -1,13 +1,13 @@
 <?php
 $navItems = [
   ["name" => "首页", "url" => "/"],
-  ["name" => "党建工作", "url" => "#"],
-  ["name" => "单位概况", "url" => "#"],
-  ["name" => "工作动态", "url" => "#"],
-  ["name" => "文化保护", "url" => "#"],
-  ["name" => "景区风采", "url" => "#"],
-  ["name" => "政策法规", "url" => "#"],
-  ["name" => "联系我们", "url" => "#"]
+  ["name" => "党建工作", "url" => "/dangnJianGongZuo.php"],
+  ["name" => "单位概况", "url" => "/danWeiGaiKuang.php"],
+  ["name" => "工作动态", "url" => "/gongZuoDongTai.php"],
+  ["name" => "文化保护", "url" => "/wenBaoJiaYuan.php"],
+  ["name" => "鹭岛文脉", "url" => "/luDaoWenMai.php"],
+  ["name" => "政策法规", "url" => "/zhengCeFaGui.php"],
+  ["name" => "联系我们", "url" => "/lianXiWoMeng.php"]
 ];
 ?>
 <!-- 头部 -->
@@ -15,7 +15,7 @@ $navItems = [
   <div class="inner">
     <div class="logo">厦门市文化遗产保护中心</div>
     <!-- 导航 -->
-    <nav>
+    <nav class="main-nav">
       <div class="container">
         <ul class="nav-list">
           <?php foreach ($navItems as $item): ?>

+ 140 - 34
css/style.css

@@ -5,7 +5,8 @@
   --color-secondary: #ac361e;
   --color-text: #333;
   --color-text-light: #fff;
-  --color-border: #999;
+  --color-text-secondary: #888;
+  --color-border: #ddd;
   --color-box: #f9fafb;
   --color-mask: rgba(0, 0, 0, 0.4);
   --swiper-navigation-color: var(--color-primary);
@@ -77,30 +78,30 @@ button i {
 }
 
 /* 导航样式 */
-nav {
+nav.main-nav {
   position: relative;
 }
-nav .nav-list {
+nav.main-nav .nav-list {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0;
 }
-nav .nav-item {
+nav.main-nav .nav-item {
   position: relative;
 }
-nav .nav-item.active a {
+nav.main-nav .nav-item.active a {
   font-weight: bold;
   color: var(--color-primary);
 }
-nav a {
+nav.main-nav a {
   display: block;
   color: var(--color-text);
   padding: 12px 20px;
   font-weight: 500;
   transition: background-color 0.3s;
 }
-nav a:hover, nav a:active {
+nav.main-nav a:hover, nav.main-nav a:active {
   color: var(--color-primary);
 }
 
@@ -153,7 +154,9 @@ nav a:hover, nav a:active {
 /* 标题样式 */
 .section-title {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--color-primary);
@@ -295,7 +298,6 @@ nav a:hover, nav a:active {
   transform: scale(1.05);
 }
 
-/* 工作动态和党建工作区域 */
 .news-item {
   padding: 12px 0;
   border-bottom: 1px dashed #ddd;
@@ -456,6 +458,98 @@ footer {
   cursor: pointer;
 }
 
+.sidebar .title {
+  position: relative;
+  padding: 20px;
+  background-color: var(--color-primary);
+  color: var(--color-text-light);
+  text-align: center;
+  border-radius: 4px 4px 0 0;
+  background-image: url(/images/tab-active.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 100px;
+  margin-bottom: 20px;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+}
+.sidebar .title h2 {
+  position: relative;
+  margin: 0;
+  font-size: 40px;
+  font-weight: bold;
+  z-index: 2;
+}
+
+.sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.sidebar-menu li {
+  border-bottom: 1px solid var(--color-border);
+}
+.sidebar-menu li.active a {
+  color: var(--color-primary);
+}
+.sidebar-menu li a {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  color: var(--color-text);
+  text-decoration: none;
+  transition: all 0.3s;
+}
+.sidebar-menu li a i {
+  color: var(--color-primary);
+}
+.sidebar-menu li a:hover {
+  color: var(--color-primary);
+}
+.sidebar-menu li:last-child {
+  border-bottom: none;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+.pagination li {
+  margin: 0 5px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.pagination li.active {
+  border-color: var(--color-primary);
+}
+.pagination li.active a {
+  color: var(--color-primary);
+}
+
+.news-detail h1 {
+  text-align: center;
+  font-size: 30px;
+}
+.news-detail .times {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  color: var(--color-text-secondary);
+  padding: 20px 0;
+  margin-bottom: 20px;
+  border-bottom: 1px solid var(--color-border);
+}
+.news-detail .times p {
+  margin-bottom: 0;
+  font-size: 15px;
+}
+
 @media (max-width: 992px) {
   .featured-image {
     width: 100%;
@@ -464,20 +558,36 @@ footer {
   .featured-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  header .inner {
+    padding: 0 30px;
+  }
+  header .logo {
+    font-size: 20px;
+  }
+  nav.main-nav .nav-item {
+    padding: 0;
+  }
+  nav.main-nav .nav-item a {
+    padding: 10px 5px;
+  }
 }
 @media (max-width: 768px) {
-  .nav-list {
-    flex-wrap: wrap;
+  header .inner {
+    padding: 0 30px;
   }
-  .nav-item a {
-    padding: 10px 15px;
+  header .logo {
+    font-size: 20px;
   }
-  .services-grid {
-    grid-template-columns: 1fr;
+  header .mobile-menu-toggle {
+    display: unset;
+    width: 40px;
+    height: 40px;
   }
-}
-@media (max-width: 576px) {
-  header nav {
+  header .search-bar button {
+    width: 40px;
+    height: 40px;
+  }
+  nav.main-nav {
     position: absolute;
     top: 0;
     opacity: 0;
@@ -490,32 +600,22 @@ footer {
     transform: translateY(-100%);
     z-index: 100;
   }
-  header nav.show {
+  nav.main-nav.show {
     display: block;
     opacity: 1;
     transform: translateY(0%);
   }
-  .nav-list {
+  nav.main-nav .nav-list {
     flex-direction: column;
   }
-  .nav-item {
+  nav.main-nav .nav-item {
     margin-bottom: 10px;
   }
-  header .inner {
-    padding: 0 20px;
-  }
-  header .mobile-menu-toggle {
-    display: unset;
-    width: 40px;
-    height: 40px;
-  }
-  .search-bar button {
-    width: 40px;
-    height: 40px;
-  }
-  header .logo {
-    font-size: 18px;
+  .services-grid {
+    grid-template-columns: 1fr;
   }
+}
+@media (max-width: 576px) {
   .featured-grid {
     grid-template-columns: 1fr;
   }
@@ -528,6 +628,12 @@ footer {
   .services-grid {
     padding: 210px 30px 40px 30px;
   }
+  header .inner {
+    padding: 0 20px;
+  }
+  header .logo {
+    font-size: 18px;
+  }
 }
 
 /*# sourceMappingURL=style.css.map */

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 1 - 1
css/style.css.map


+ 166 - 42
css/style.scss

@@ -4,7 +4,8 @@
   --color-secondary: #ac361e;
   --color-text: #333;
   --color-text-light: #fff;
-  --color-border: #999;
+  --color-text-secondary: #888;
+  --color-border: #ddd;
   --color-box: #f9fafb;
   --color-mask: rgba(0, 0, 0, 0.4);
 
@@ -80,7 +81,7 @@ button {
 
 
 /* 导航样式 */
-nav {
+nav.main-nav {
   position: relative;
 
   .nav-list {
@@ -160,7 +161,9 @@ nav {
 /* 标题样式 */
 .section-title {
   display: flex;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--color-primary);
@@ -314,7 +317,6 @@ nav {
   }
 }
 
-/* 工作动态和党建工作区域 */
 .news-item {
   padding: 12px 0;
   border-bottom: 1px dashed #ddd;
@@ -344,7 +346,6 @@ nav {
   }
 }
 
-
 /* 精彩推荐区域 */
 .featured-section {
   margin-bottom: 40px;
@@ -479,8 +480,112 @@ footer {
   }
 }
 
-@media (max-width: 992px) {
+.sidebar {
+  .title {
+    position: relative;
+    padding: 20px;
+    background-color: var(--color-primary);
+    color: var(--color-text-light);
+    text-align: center;
+    border-radius: 4px 4px 0 0;
+    background-image: url(/images/tab-active.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    height: 100px;
+    margin-bottom: 20px;
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+
+    h2 {
+      position: relative;
+      margin: 0;
+      font-size: 40px;
+      font-weight: bold;
+      z-index: 2;
+    }
+  }
+}
+.sidebar-menu {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  
+  li {
+    border-bottom: 1px solid var(--color-border);
+
+
+    &.active a {
+      color: var(--color-primary);
+    }
+    a {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px 20px;
+      color: var(--color-text);
+      text-decoration: none;
+      transition: all 0.3s;
+      
+      i {
+        color: var(--color-primary);
+      }
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+
+  li {
+    margin: 0 5px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    
+    &.active {
+      border-color: var(--color-primary);
+
+      a {
+        color: var(--color-primary);
+      }
+    }
+  }
+}
+
+.news-detail {
+  h1 {
+    text-align: center;
+    font-size: 30px;
+  }
+  .times {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    color: var(--color-text-secondary);
+    padding: 20px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px solid var(--color-border);
 
+    p {
+      margin-bottom: 0;
+      font-size: 15px;
+    }
+  }
+}
+
+@media (max-width: 992px) {
   .featured-image {
     width: 100%;
     height: 300px;
@@ -488,22 +593,41 @@ footer {
   .featured-grid {
     grid-template-columns: repeat(2, 1fr);
   }
-}
-
-@media (max-width: 768px) {
-  .nav-list {
-    flex-wrap: wrap;
-  }
-  .nav-item a {
-    padding: 10px 15px;
+  header { 
+    .inner {
+      padding: 0 30px;
+    }
+    .logo {
+      font-size: 20px;
+    }
   }
-  .services-grid {
-    grid-template-columns: 1fr;
+  nav.main-nav .nav-item {
+    padding: 0;
+    a {
+      padding: 10px 5px;
+    }
   }
 }
 
-@media (max-width: 576px) {
-  header nav {
+@media (max-width: 768px) { 
+  header { 
+    .inner {
+      padding: 0 30px;
+    }
+    .logo {
+      font-size: 20px;
+    }
+    .mobile-menu-toggle {
+      display: unset;
+      width: 40px;
+      height: 40px;
+    }
+    .search-bar button {
+      width: 40px;
+      height: 40px;
+    }
+  }
+  nav.main-nav {
     position: absolute;
     top: 0;
     opacity: 0;
@@ -515,33 +639,25 @@ footer {
     transition: all 0.3s;
     transform: translateY(-100%);
     z-index: 100;
+
+    &.show {
+      display: block;
+      opacity: 1;
+      transform: translateY(0%);
+    }
+    .nav-list {
+      flex-direction: column;
+    }
+    .nav-item {
+      margin-bottom: 10px;
+    }
   }
-  header nav.show {
-    display: block;
-    opacity: 1;
-    transform: translateY(0%);
-  }
-  .nav-list {
-    flex-direction: column;
-  }
-  .nav-item {
-    margin-bottom: 10px;
-  }
-  header .inner {
-    padding: 0 20px;
-  }
-  header .mobile-menu-toggle {
-    display: unset;
-    width: 40px;
-    height: 40px;
-  }
-  .search-bar button {
-    width: 40px;
-    height: 40px;
-  }
-  header .logo {
-    font-size: 18px;
+  .services-grid {
+    grid-template-columns: 1fr;
   }
+}
+
+@media (max-width: 576px) {
   .featured-grid {
     grid-template-columns: 1fr;
   }
@@ -554,4 +670,12 @@ footer {
   .services-grid {
     padding: 210px 30px 40px 30px;
   }
+  header { 
+    .inner {
+      padding: 0 20px;
+    }
+    .logo {
+      font-size: 18px;
+    }
+  }
 }

+ 87 - 0
danWeiGaiKuang.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>

+ 197 - 0
dangnJianGongZuo.php

@@ -0,0 +1,197 @@
+<?php
+// 轮播图数据 - 修改为单张图片
+$carouselItems = [
+  [
+    "image" => "/images/test-header-2.png",
+    "alt" => "党建工作"
+  ]
+];
+
+// 党建工作数据
+$partyBuilding = [
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ]
+];
+
+// 党建要闻数据
+$partyNews = [
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "date" => "2025-12-07"
+  ],
+];
+
+// 分页数据
+$totalPages = 5;
+$currentPage = 1;
+?>
+<!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="row">
+        <!-- 左侧导航 -->
+        <div class="col col-sm-12 col-md-3 col-lg-3">
+          <div class="sidebar">
+            <div class="title">
+              <h2>党建工作</h2>
+            </div>
+            <ul class="sidebar-menu">
+              <li><a href="#">党建工作<i class="fa fa-arrow-right"></i></a></li>
+              <li><a href="#">党建要闻<i class="fa fa-arrow-right"></i></a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <!-- 右侧内容 -->
+        <div class="col col-sm-12 col-md-9 col-lg-9">
+          <div class="content">
+            <div class="section-title">
+              <h2 class="icon">党建工作</h2>
+              
+              <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                  <li class="breadcrumb-item"><a href="/">首页</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">党建工作</li>
+                </ol>
+              </nav>
+            </div>
+            
+            <!-- 文章列表 -->
+            <div class="news-list">
+              <?php foreach ($partyBuilding as $item): ?>
+                <div class="news-item">
+                  <a href="./xinWenXiangQing.php?id=<?php echo $item['title']; ?>" class="title"><?php echo $item['title']; ?></a>
+                  <span class="date"><?php echo $item['date']; ?></span>
+                </div>
+              <?php endforeach; ?>
+            </div>
+            
+            <!-- 分页 -->
+            <nav aria-label="List Page navigation">
+              <ul class="pagination mt-4">
+                <?php for ($i = 1; $i <= $totalPages; $i++): ?>
+                  <li class="<?php echo $i == $currentPage ? 'active' : ''; ?>"><a href="?page=<?php echo $i?>"><?php echo $i; ?></a></li>
+                <?php endfor; ?>
+              </ul>
+            </nav>
+          </div>
+        </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>

+ 87 - 0
gongZuoDongTai.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>

BIN
images/test-header-2.png


+ 87 - 0
lianXiWoMeng.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>

+ 87 - 0
luDaoWenMai.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>

+ 87 - 0
wenBaoJiaYuan.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>

+ 125 - 0
xinWenXiangQing.php

@@ -0,0 +1,125 @@
+<?php
+// 轮播图数据 - 修改为单张图片
+$carouselItems = [
+  [
+    "image" => "/images/test-header-2.png",
+    "alt" => "党建工作"
+  ]
+];
+
+$newsData =
+  [
+    "title" => "厦门市文化和旅游局关于2025年厦门市乡村旅游高质量发展的通知",
+    "content" => "内容内容内容内容内容内容内容内容内容内容内容内容",
+    "date" => "2025-12-07",
+    "views" => "2025-12-07",
+  ];
+?>
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>厦门市文化遗产保护中心 - <?php echo $newsData['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="row">
+        <!-- 左侧导航 -->
+        <div class="col col-sm-12 col-md-3 col-lg-3">
+          <div class="sidebar">
+            <div class="title">
+              <h2>党建工作</h2>
+            </div>
+            <ul class="sidebar-menu">
+              <li><a href="#">党建工作<i class="fa fa-arrow-right"></i></a></li>
+              <li><a href="#">党建要闻<i class="fa fa-arrow-right"></i></a></li>
+            </ul>
+          </div>
+        </div>
+        
+        <!-- 右侧内容 -->
+        <div class="col col-sm-12 col-md-9 col-lg-9">
+          <div class="content">
+            <div class="section-title">
+              <h2 class="icon">党建工作</h2>
+              
+              <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                  <li class="breadcrumb-item"><a href="/">首页</a></li>
+                  <li class="breadcrumb-item active" aria-current="page">党建工作</li>
+                </ol>
+              </nav>
+            </div>
+            
+            <div class="news-detail">
+              <h1><?php echo $newsData['title']; ?></h1>
+              <div class="times">
+                <p class="date">时间:<?php echo $newsData['date']; ?></p>
+                <p class="views">浏览量: <?php echo $newsData['views']; ?> </p>
+              </div>
+              <p><?php echo $newsData['content']; ?></p>
+            </div>
+
+
+          </div>
+        </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>

+ 87 - 0
zhengCeFaGui.php

@@ -0,0 +1,87 @@
+<?php
+// 轮播图数据
+$carouselItems = [
+  [
+    "image" => "/images/test-header-1.png",
+    "alt" => "厦门市文化遗产宣传图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "alt" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "alt" => "厦门文化遗产保护"
+  ]
+];
+?>
+<!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>
+  </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>