1

components/navbar.php

@@ -1,37 +1,68 @@
 <?php
 $navItems = [
-    ["name" => "首页", "url" => "/"],
-    ["name" => "党建工作", "url" => "#"],
-    ["name" => "单位概况", "url" => "#"],
-    ["name" => "工作动态", "url" => "#"],
-    ["name" => "文化保护", "url" => "#"],
-    ["name" => "景区风采", "url" => "#"],
-    ["name" => "政策法规", "url" => "#"],
-    ["name" => "联系我们", "url" => "#"]
+  ["name" => "首页", "url" => "/"],
+  ["name" => "党建工作", "url" => "#"],
+  ["name" => "单位概况", "url" => "#"],
+  ["name" => "工作动态", "url" => "#"],
+  ["name" => "文化保护", "url" => "#"],
+  ["name" => "景区风采", "url" => "#"],
+  ["name" => "政策法规", "url" => "#"],
+  ["name" => "联系我们", "url" => "#"]
 ];
 ?>
 <!-- 头部 -->
 <header>
-    <div class="container">
-        <div class="header-top">
-            <div class="logo">厦门市文化遗产保护中心</div>
-            <div class="search-bar">
-                <input type="text" placeholder="搜索...">
-                <button><i class="fa fa-search"></i></button>
-            </div>
-        </div>
-    </div>
-    
+  <div class="inner">
+    <div class="logo">厦门市文化遗产保护中心</div>
     <!-- 导航 -->
     <nav>
-        <div class="container">
-            <ul class="nav-list">
-                <?php foreach ($navItems as $item): ?>
-                    <li class="nav-item">
-                        <a href="<?php echo $item['url']; ?>"><?php echo $item['name']; ?></a>
-                    </li>
-                <?php endforeach; ?>
-            </ul>
-        </div>
+      <div class="container">
+        <ul class="nav-list">
+          <?php foreach ($navItems as $item): ?>
+            <li class="nav-item <?php echo strpos($_SERVER['REQUEST_URI'], $item['url']) !== false ? 'active' : ''; ?>">
+              <a href="<?php echo $item['url']; ?>"><?php echo $item['name']; ?></a>
+            </li>
+          <?php endforeach; ?>
+        </ul>
+      </div>
     </nav>
-</header>
+    <div class="d-flex flex-row align-items-center">
+      <button class="mobile-menu-toggle"><i class="fa fa-bars"></i></button>
+      <div class="search-bar">
+        <button><i class="fa fa-search"></i></button>
+        <input type="text" placeholder="搜索...">
+      </div>
+    </div>
+  </div>
+</header>
+
+<script>
+  function goSearch() {
+    var keyword = $('.search-bar input').val();
+    if (keyword) {
+      window.location.href = '/search.php?keyword=' + keyword;
+    }
+  }
+  $(document).ready(function() {
+    $('.search-bar button').click(function() {
+      if ($('.search-bar input').hasClass('show')) {
+        goSearch();
+      } else {
+        $('.search-bar input').addClass('show').focus();
+      }
+    })
+    $('.search-bar input').blur(function() {
+      $(this).removeClass('show');
+    }).keydown(function(e) {
+      if (e.keyCode == 13) {
+        goSearch();
+      }
+    });
+    $('.mobile-menu-toggle').click(function() {
+      $('nav').toggleClass('show');
+    });
+    $('nav a').click(function() {
+      $('nav').removeClass('show');
+    });
+  });
+</script>

css/fonts.css

@@ -1,12 +1,10 @@
 @font-face {
   font-family: 'PingFang SC';
   src: url('/fonts/PingFang Regular.ttf') format('truetype');
-};
+}
 
 @font-face {
   font-synthesis: none;
   font-family: "STSongtiSC";
-  src: url('/fonts/STSongti-SC-Black.ttf') format('truetype')
-    url('/fonts/STSongti-SC-Black.woff') format('woff')
-    url('/fonts/STSongti-SC-Black.woff2') format('woff2');
+  src: url('/fonts/STSongti-SC-Black.woff2') format('woff2');
 }

css/style.css

@@ -1,185 +1,147 @@
 /* 基础样式 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: 'PingFang SC', "STSongtiSC", "Microsoft YaHei", sans-serif;
+:root {
+  --color-primary: #db5f46;
+  --color-secondary: #ac361e;
+  --color-text: #333;
+  --color-text-light: #fff;
+  --color-border: #999;
+  --color-box: #f9fafb;
+  --color-mask: rgba(0, 0, 0, 0.4);
+
+  --swiper-navigation-color: var(--color-primary);
+  --swiper-pagination-color: var(--color-primary);
+  --container-width: 1200px;
 }
 
-body {
-  color: #333;
+html, body {
+  position: relative;
+  color: var(--color-text);
   line-height: 1.6;
+  font-family: 'PingFang SC', 'STSongtiSC', "Microsoft YaHei", sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 a {
   text-decoration: none;
-  color: #333;
+  color: var(--color-text);
 }
-
 ul {
   list-style: none;
 }
 
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
 /* 头部样式 */
 header {
+  padding: 15px 0;
   background-color: #fff;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
 }
-
-.header-top {
+header .inner {
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 15px 0;
+  max-width: var(--container-width);
+  margin: 0 auto;
 }
-
-.logo {
+header .logo {
+  font-family: 'STSongtiSC', "Microsoft YaHei", sans-serif;
   font-size: 24px;
   font-weight: bold;
-  color: #c8102e;
+  color: var(--color-primary);
 }
-
-.search-bar {
-  position: relative;
+header .mobile-menu-toggle {
+  display: none;
+  width: 60px;
+  height: 60px;
 }
 
-.search-bar input {
-  padding: 8px 15px;
-  border: 1px solid #ddd;
-  border-radius: 20px;
-  outline: none;
-  width: 200px;
-  transition: width 0.3s;
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: var(--color-primary);
+  color: var(--color-text-light);
 }
-
-.search-bar input:focus {
-  width: 250px;
-  border-color: #c8102e;
+button:hover {
+  background-color: var(--color-secondary);
 }
-
-.search-bar button {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: #999;
-  cursor: pointer;
+button i {
+  color: var(--color-text-light);
 }
 
 /* 导航样式 */
 nav {
-  background-color: #c8102e;
+  position: relative;
 }
-
 .nav-list {
   display: flex;
   justify-content: center;
+  align-items: center;
+  margin-bottom: 0;
 }
-
 .nav-item {
   position: relative;
 }
-
 .nav-item a {
   display: block;
-  color: #fff;
+  color: var(--color-text);
   padding: 12px 20px;
   font-weight: 500;
   transition: background-color 0.3s;
 }
-
 .nav-item a:hover {
-  background-color: #a60d24;
-}
-
-/* 轮播图样式 */
-.carousel {
-  position: relative;
-  width: 100%;
-  height: 400px;
-  overflow: hidden;
-}
-
-.carousel-inner {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.5s ease;
+  color: var(--color-primary);
 }
-
-.carousel-item {
-  min-width: 100%;
-  height: 100%;
-}
-
-.carousel-item img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.carousel-control {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.3);
-  color: white;
-  border: none;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  font-size: 20px;
-  cursor: pointer;
-  transition: background-color 0.3s;
+.nav-item.active a {
+  font-weight: bold;
+  color: var(--color-primary);
 }
 
-.carousel-control:hover {
-  background-color: rgba(0, 0, 0, 0.5);
+.search-bar {
+  position: relative;
 }
-
-.carousel-control.prev {
-  left: 20px;
+.search-bar button {
+  width: 60px;
+  height: 60px;
 }
-
-.carousel-control.next {
-  right: 20px;
+.search-bar button i {
+  color: var(--color-text-light);
 }
-
-.carousel-indicators {
+.search-bar input {
   position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 10px;
-}
-
-.indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.5);
-  cursor: pointer;
-  transition: background-color 0.3s;
+  right: 0;
+  padding: 8px 15px;
+  border: 1px solid var(--color-border);
+  outline: none;
+  width: 200px;
+  height: 60px;
+  transition: all 0.3s;
+  opacity: 0;
+  z-index: 20;
 }
-
-.indicator.active {
-  background-color: white;
+.search-bar input.show {
+  width: 250px;
+  opacity: 1;
+  border-color: var(--color-primary);
 }
 
 /* 主要内容区域 */
 .main-content {
+  position: relative;
+  width: 100%;
   padding: 40px 0;
 }
+.main-box {
+  background-color: var(--color-box);
+  border-radius: 10px;
+  padding: 26px;
+}
+.main-hr {
+  border-color: var(--color-border);
+  margin: 50px 0;
+}
 
 /* 标题样式 */
 .section-title {
@@ -187,30 +149,26 @@ nav {
   align-items: center;
   margin-bottom: 20px;
   padding-bottom: 10px;
-  border-bottom: 2px solid #c8102e;
+  border-bottom: 2px solid var(--color-primary);
 }
-
 .section-title h2 {
   font-family: "STSongtiSC";
   font-synthesis: none;
   font-size: 20px;
-  color: #c8102e;
+  color: var(--color-primary);
   margin-right: 15px;
 }
-
 .section-title .sub-title {
   color: #666;
   padding-left: 15px;
   border-left: 1px solid #ddd;
 }
-
 .section-more {
   margin-left: auto;
   color: #666;
 }
-
 .section-more:hover {
-  color: #c8102e;
+  color: var(--color-primary);
 }
 
 /* 通知公告区域 */
@@ -219,11 +177,6 @@ nav {
   gap: 30px;
   margin-bottom: 40px;
 }
-
-.notices-list {
-  flex: 1;
-}
-
 .notice-item {
   padding: 15px 0;
   border-bottom: 1px dashed #ddd;
@@ -231,11 +184,9 @@ nav {
   justify-content: space-between;
   align-items: center;
 }
-
 .notice-item:last-child {
   border-bottom: none;
 }
-
 .notice-title {
   flex: 1;
   margin-right: 15px;
@@ -244,65 +195,46 @@ nav {
   text-overflow: ellipsis;
   transition: color 0.3s;
 }
-
 .notice-title:hover {
-  color: #c8102e;
+  color: var(--color-primary);
 }
-
 .notice-date {
   color: #999;
   font-size: 14px;
 }
-
 .featured-image {
-  width: 400px;
-  height: 250px;
+  border-radius: 6px;
   overflow: hidden;
   position: relative;
 }
-
 .featured-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s;
 }
-
-.featured-image:hover img {
-  transform: scale(1.05);
-}
-
-.featured-caption {
+.featured-image .caption {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: rgba(0, 0, 0, 0.6);
-  color: white;
-  padding: 10px 15px;
+  background-color: var(--color-mask);
+  color: var(--color-text-light);
+  padding: 8px 20px;
 }
-
-.featured-caption h3 {
+.featured-image .caption h3 {
   font-size: 18px;
   margin-bottom: 5px;
 }
-
-.featured-caption p {
+.featured-image .caption p {
   font-size: 14px;
   opacity: 0.9;
 }
-
-/* 工作动态和党建工作区域 */
-.two-columns {
-  display: flex;
-  gap: 30px;
-  margin-bottom: 40px;
-}
-
-.two-columns > div {
-  flex: 1;
+.featured-image:hover img {
+  transform: scale(1.05);
 }
 
+/* 工作动态和党建工作区域 */
 .news-item {
   padding: 12px 0;
   border-bottom: 1px dashed #ddd;
@@ -310,11 +242,9 @@ nav {
   justify-content: space-between;
   align-items: center;
 }
-
 .news-item:last-child {
   border-bottom: none;
 }
-
 .news-title {
   flex: 1;
   margin-right: 15px;
@@ -323,11 +253,9 @@ nav {
   text-overflow: ellipsis;
   transition: color 0.3s;
 }
-
 .news-title:hover {
-  color: #c8102e;
+  color: var(--color-primary);
 }
-
 .news-date {
   color: #999;
   font-size: 14px;
@@ -337,40 +265,40 @@ nav {
 .featured-section {
   margin-bottom: 40px;
 }
-
 .featured-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
 }
-
 .featured-card {
+  position: relative;
   border: 1px solid #eee;
   border-radius: 5px;
   overflow: hidden;
   transition:
     transform 0.3s,
     box-shadow 0.3s;
+  cursor: pointer;
 }
-
 .featured-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
-
 .featured-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
 }
-
 .featured-card p {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--color-mask);
+  color: var(--color-text-light);
   padding: 15px;
-  text-align: center;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  z-index: 1;
+  margin-bottom: 0;
 }
 
 /* 公共服务区域 */
@@ -462,63 +390,79 @@ footer {
   cursor: pointer;
 }
 
-/* 响应式设计 */
 @media (max-width: 992px) {
-  .notices-section {
-    flex-direction: column;
-  }
 
   .featured-image {
     width: 100%;
     height: 300px;
   }
-
   .featured-grid {
     grid-template-columns: repeat(2, 1fr);
   }
 }
 
 @media (max-width: 768px) {
-  .two-columns {
-    flex-direction: column;
-  }
-
   .nav-list {
     flex-wrap: wrap;
   }
-
   .nav-item a {
     padding: 10px 15px;
   }
-
   .services-grid {
     grid-template-columns: 1fr;
   }
 }
 
 @media (max-width: 576px) {
-  .carousel {
-    height: 250px;
+  header nav {
+    position: absolute;
+    top: 0;
+    opacity: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    background-color: var(--color-box);
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s;
+    transform: translateY(-100%);
+    z-index: 100;
   }
-
-  .featured-grid {
-    grid-template-columns: 1fr;
+  header nav.show {
+    display: block;
+    opacity: 1;
+    transform: translateY(0%);
   }
-
-  .header-top {
+  .nav-list {
     flex-direction: column;
-    gap: 15px;
   }
-
-  .search-bar {
-    width: 100%;
+  .nav-item {
+    margin-bottom: 10px;
   }
-
-  .search-bar input {
-    width: 100%;
+  header .inner {
+    padding: 0 20px;
   }
-
-  .search-bar input:focus {
-    width: 100%;
+  header .mobile-menu-toggle {
+    display: unset;
+    width: 40px;
+    height: 40px;
+  }
+  .search-bar button {
+    width: 40px;
+    height: 40px;
+  }
+  header .logo {
+    font-size: 18px;
+  }
+  .featured-grid {
+    grid-template-columns: 1fr;
+  }
+  .main-box {
+    padding: 15px;
+  }
+  .services-section {
+    align-items: flex-start;
+  }
+  .services-grid {
+    padding: 210px 30px 40px 30px;
   }
 }

index.php

@@ -1,11 +1,8 @@
 <?php
-// 顶层数据变量 - 可根据业务需求修改
-$siteName = "";
-
 // 轮播图数据
 $carouselItems = [
   [
-    "image" => "https://p26-flow-imagex-download-sign.byteimg.com/tos-cn-i-a9rns2rl98/1537c9f2b5f5401e9fab9867da514b70.png~tplv-a9rns2rl98-24:720:720.png?rcl=20250922162315211A1A8BF76E528077C5&rk3s=8e244e95&rrcfp=8a172a1a&x-expires=1759134196&x-signature=Op3JTRN%2Fq8bTJ4rMgdvXM51zSGo%3D",
+    "image" => "/images/test-header-1.png",
     "alt" => "厦门市文化遗产宣传图"
   ],
   [
@@ -17,6 +14,23 @@ $carouselItems = [
     "alt" => "厦门文化遗产保护"
   ]
 ];
+$carouselItems2 = [
+  [
+    "image" => "https://picsum.photos/id/1035/1200/400",
+    "title" => "文化保护 集美·南薰楼",
+    "desc" => "全国首创广播微戏《闽南传奇》成功复制推广让闽南文化绽放光彩"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1036/1200/400",
+    "title" => "厦门市文化遗产宣传图",
+    "desc" => "厦门风景图"
+  ],
+  [
+    "image" => "https://picsum.photos/id/1037/1200/400",
+    "title" => "厦门市文化遗产宣传图",
+    "desc" => "厦门文化遗产保护"
+  ]
+];
 // 通知公告数据
 $notices = [
   [
@@ -160,42 +174,40 @@ $featured = [
   <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/style.css">
-  <script src="./js/carousel.js"></script>
-  <script src="./js/jquery-3.7.1.js"></script>
-  <script src="./js/bootstrap.bundle.js"></script>
+  <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="carousel">
-    <div class="carousel-inner">
+  <div class="swiper mySwiper" style="width: 100%; height: 400px;">
+    <div class="swiper-wrapper">
       <?php foreach ($carouselItems as $item): ?>
-        <div class="carousel-item">
-          <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>">
+        <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>
-    <button class="carousel-control prev"><i class="fa fa-angle-left"></i></button>
-    <button class="carousel-control next"><i class="fa fa-angle-right"></i></button>
-    <div class="carousel-indicators">
-      <?php for ($i = 0; $i < count($carouselItems); $i++): ?>
-        <div class="indicator <?php echo $i == 0 ? 'active' : ''; ?>" data-index="<?php echo $i; ?>"></div>
-      <?php endfor; ?>
-    </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="notices-section">
-        <div class="notices-list">
+      <div class="row">
+
+        <div class="col col-sm-12 col-md-6 col-lg-6 notices-list">
           <div class="section-title">
             <h2><i class="fa fa-bullhorn"></i> 通知公告</h2>
             <span class="sub-title">热点新闻</span>
@@ -211,50 +223,65 @@ $featured = [
           </div>
         </div>
 
-        <div class="featured-image">
-          <img src="https://picsum.photos/id/1031/800/500" alt="集美·南薰楼">
-          <div class="featured-caption">
-            <h3>文化保护 集美·南薰楼</h3>
-            <p>全国首创广播微戏《闽南传奇》成功复制推广让闽南文化绽放光彩</p>
+        <div class="col col-sm-12 col-md-6 col-lg-6">
+          <div class="swiper mySwiper2" style="width: 100%; height:300px;">
+            <div class="swiper-wrapper">
+              <?php foreach ($carouselItems2 as $item): ?>
+                <div class="swiper-slide featured-image">
+                  <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['desc']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
+                  <div class="caption">
+                    <h3><?php echo $item['title']; ?></h3>
+                    <p><?php echo $item['desc']; ?></p>
+                  </div>
+                </div>
+              <?php endforeach; ?>
+            </div>
+            <div class="swiper-pagination"></div>
           </div>
         </div>
       </div>
 
       <!-- 工作动态和党建工作 -->
-      <div class="two-columns">
-        <div class="work-updates">
-          <div class="section-title">
-            <h2><i class="fa fa-refresh"></i> 工作动态</h2>
-            <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
-          </div>
-          <div class="news-content">
-            <?php foreach ($workUpdates as $update): ?>
-              <div class="news-item">
-                <a href="#" class="news-title"><?php echo $update['title']; ?></a>
-                <span class="news-date"><?php echo $update['date']; ?></span>
-              </div>
-            <?php endforeach; ?>
+      <div class="row mt-lg-3 mt-md-2 mt-sm-2">
+        <div class="col col-sm-12 col-md-6 col-lg-6">
+          <div class="main-box">
+            <div class="section-title">
+              <h2><i class="fa fa-refresh"></i> 工作动态</h2>
+              <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
+            </div>
+            <div class="news-content">
+              <?php foreach ($workUpdates as $update): ?>
+                <div class="news-item">
+                  <a href="#" class="news-title"><?php echo $update['title']; ?></a>
+                  <span class="news-date"><?php echo $update['date']; ?></span>
+                </div>
+              <?php endforeach; ?>
+            </div>
           </div>
         </div>
 
-        <div class="party-building">
-          <div class="section-title">
-            <h2><i class="fa fa-flag"></i> 党建工作</h2>
-            <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
-          </div>
-          <div class="news-content">
-            <?php foreach ($partyBuilding as $item): ?>
-              <div class="news-item">
-                <a href="#" class="news-title"><?php echo $item['title']; ?></a>
-                <span class="news-date"><?php echo $item['date']; ?></span>
-              </div>
-            <?php endforeach; ?>
+        <div class="col col-sm-12 col-md-6 col-lg-6">
+          <div class="main-box">
+            <div class="section-title">
+              <h2><i class="fa fa-flag"></i> 党建工作</h2>
+              <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
+            </div>
+            <div class="news-content">
+              <?php foreach ($partyBuilding as $item): ?>
+                <div class="news-item">
+                  <a href="#" class="news-title"><?php echo $item['title']; ?></a>
+                  <span class="news-date"><?php echo $item['date']; ?></span>
+                </div>
+              <?php endforeach; ?>
+            </div>
           </div>
         </div>
       </div>
 
+      <hr class="main-hr" />
+
       <!-- 精彩推荐 -->
-      <div class="featured-section">
+      <div class="featured-section main-box">
         <div class="section-title">
           <h2><i class="fa fa-star"></i> 精彩推荐</h2>
           <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
@@ -304,9 +331,41 @@ $featured = [
 
   <?php include __DIR__ . '/components/footer.php'; ?>
 
-  <!-- 轮播图脚本 -->
+  <!-- Swiper.js 初始化脚本 -->
   <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,
+        },
+      });
+      const swiper2 = new Swiper(".mySwiper2", {
+        slidesPerView: 1,
+        spaceBetween: 30,
+        loop: true,
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+        },
+        autoplay: {
+          delay: 5000,
+          disableOnInteraction: false,
+        },
+      });
+    });
   </script>
 </body>
 

js/carousel.js

@@ -1,65 +0,0 @@
-
-function initCarousel(rootEl) {
-  const carousel = rootEl.querySelector('.carousel');
-  const carouselInner = carousel.querySelector('.carousel-inner');
-  const carouselItems = carousel.querySelectorAll('.carousel-item');
-  const prevBtn = carousel.querySelector('.prev');
-  const nextBtn = carousel.querySelector('.next');
-  const indicators = carousel.querySelectorAll('.indicator');
-  let currentIndex = 0;
-  const itemWidth = 100; // 百分比
-  const totalItems = carouselItems.length;
-
-  // 更新轮播显示
-  function updateCarousel() {
-      carouselInner.style.transform = `translateX(-${currentIndex * itemWidth}%)`;
-      
-      // 更新指示器状态
-      indicators.forEach((indicator, index) => {
-          if (index === currentIndex) {
-              indicator.classList.add('active');
-          } else {
-              indicator.classList.remove('active');
-          }
-      });
-  }
-
-  // 上一张
-  prevBtn.addEventListener('click', function() {
-      currentIndex = (currentIndex - 1 + totalItems) % totalItems;
-      updateCarousel();
-  });
-
-  // 下一张
-  nextBtn.addEventListener('click', function() {
-      currentIndex = (currentIndex + 1) % totalItems;
-      updateCarousel();
-  });
-
-  // 点击指示器切换
-  indicators.forEach(indicator => {
-      indicator.addEventListener('click', function() {
-          currentIndex = parseInt(this.getAttribute('data-index'));
-          updateCarousel();
-      });
-  });
-
-  // 自动轮播
-  let autoplayInterval = setInterval(function() {
-      currentIndex = (currentIndex + 1) % totalItems;
-      updateCarousel();
-  }, 5000);
-
-  // 鼠标悬停暂停自动轮播
-  carousel.addEventListener('mouseenter', function() {
-      clearInterval(autoplayInterval);
-  });
-
-  // 鼠标离开恢复自动轮播
-  carousel.addEventListener('mouseleave', function() {
-      autoplayInterval = setInterval(function() {
-          currentIndex = (currentIndex + 1) % totalItems;
-          updateCarousel();
-      }, 5000);
-  });
-}