1

css/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* 基础样式 */
 :root {
   --color-primary: #db5f46;
@@ -7,7 +8,6 @@
   --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;
@@ -17,15 +17,20 @@ html, body {
   position: relative;
   color: var(--color-text);
   line-height: 1.6;
-  font-family: 'PingFang SC', 'STSongtiSC', "Microsoft YaHei", sans-serif;
+  font-family: "PingFang SC", "STSongtiSC", "Microsoft YaHei", sans-serif;
   margin: 0;
   padding: 0;
 }
 
 a {
+  transition: color 0.3s;
   text-decoration: none;
   color: var(--color-text);
 }
+a:hover {
+  color: var(--color-primary);
+}
+
 ul {
   list-style: none;
 }
@@ -45,7 +50,7 @@ header .inner {
   margin: 0 auto;
 }
 header .logo {
-  font-family: 'STSongtiSC', "Microsoft YaHei", sans-serif;
+  font-family: "STSongtiSC", "Microsoft YaHei", sans-serif;
   font-size: 24px;
   font-weight: bold;
   color: var(--color-primary);
@@ -75,27 +80,27 @@ button i {
 nav {
   position: relative;
 }
-.nav-list {
+nav .nav-list {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 0;
 }
-.nav-item {
+nav .nav-item {
   position: relative;
 }
-.nav-item a {
+nav .nav-item.active a {
+  font-weight: bold;
+  color: var(--color-primary);
+}
+nav a {
   display: block;
   color: var(--color-text);
   padding: 12px 20px;
   font-weight: 500;
   transition: background-color 0.3s;
 }
-.nav-item a:hover {
-  color: var(--color-primary);
-}
-.nav-item.active a {
-  font-weight: bold;
+nav a:hover, nav a:active {
   color: var(--color-primary);
 }
 
@@ -133,11 +138,13 @@ nav {
   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;
@@ -152,17 +159,48 @@ nav {
   border-bottom: 2px solid var(--color-primary);
 }
 .section-title h2 {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   font-family: "STSongtiSC";
   font-synthesis: none;
   font-size: 20px;
   color: var(--color-primary);
   margin-right: 15px;
 }
+.section-title h2 i {
+  margin-right: 10px;
+}
+.section-title h2.button {
+  cursor: pointer;
+  color: var(--color-text);
+}
+.section-title h2.button.icon::before, .section-title h2.button.icon::after {
+  display: none;
+}
+.section-title h2.button.active.icon::before, .section-title h2.button.active.icon::after {
+  display: inline-block;
+}
+.section-title h2.button.active {
+  color: var(--color-primary);
+}
+.section-title h2.icon::before, .section-title h2.icon::after {
+  display: inline-block;
+  content: "";
+  margin: 0 10px;
+  width: 20px;
+  height: 20px;
+  background-size: 20px 20px;
+  background-image: url(/images/badge.png);
+  background-position: center;
+}
 .section-title .sub-title {
   color: #666;
   padding-left: 15px;
   border-left: 1px solid #ddd;
 }
+
 .section-more {
   margin-left: auto;
   color: #666;
@@ -177,31 +215,54 @@ nav {
   gap: 30px;
   margin-bottom: 40px;
 }
+
 .notice-item {
+  position: relative;
   padding: 15px 0;
   border-bottom: 1px dashed #ddd;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
+.notice-item > div {
+  max-width: 86%;
+  flex: 1;
+  flex-direction: column;
+  margin-right: 15px;
+  overflow: hidden;
+}
+.notice-item p {
+  opacity: 0;
+  height: 0px;
+  margin-bottom: 0;
+  transition: all ease-in-out 0.25s;
+}
 .notice-item:last-child {
   border-bottom: none;
 }
+.notice-item:hover .notice-title {
+  font-size: 20px;
+  opacity: 1;
+}
+.notice-item:hover p {
+  opacity: 1;
+  height: 85px;
+}
+
 .notice-title {
-  flex: 1;
-  margin-right: 15px;
+  display: block;
+  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  transition: color 0.3s;
-}
-.notice-title:hover {
-  color: var(--color-primary);
+  transition: all 0.3s;
 }
+
 .notice-date {
   color: #999;
   font-size: 14px;
 }
+
 .featured-image {
   border-radius: 6px;
   overflow: hidden;
@@ -245,7 +306,7 @@ nav {
 .news-item:last-child {
   border-bottom: none;
 }
-.news-title {
+.news-item .title {
   flex: 1;
   margin-right: 15px;
   white-space: nowrap;
@@ -253,10 +314,10 @@ nav {
   text-overflow: ellipsis;
   transition: color 0.3s;
 }
-.news-title:hover {
+.news-item .title:hover {
   color: var(--color-primary);
 }
-.news-date {
+.news-item .date {
   color: #999;
   font-size: 14px;
 }
@@ -265,30 +326,21 @@ 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;
+  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;
@@ -300,6 +352,15 @@ nav {
   z-index: 1;
   margin-bottom: 0;
 }
+.featured-card img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+.featured-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
 
 /* 公共服务区域 */
 .services-section {
@@ -308,6 +369,12 @@ nav {
   flex-direction: row;
   align-items: center;
 }
+.services-section .title {
+  width: 220px;
+  height: 220px;
+  z-index: 10;
+}
+
 .services-grid {
   flex: 1;
   display: grid;
@@ -321,33 +388,26 @@ nav {
   z-index: 0;
   z-index: 0;
 }
-.service-card h3 {
-  font-size: 15px;
-}
+
 .service-card {
   background-color: #fff;
   border-radius: 8px;
   padding: 30px 20px;
   margin-top: -15px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-  transition:
-    transform 0.3s,
-    box-shadow 0.3s;
-
+  transition: transform 0.3s, box-shadow 0.3s;
 }
-.service-card:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+.service-card h3 {
+  font-size: 15px;
 }
-.service-icon {
+.service-card .icon {
   width: 40px;
   height: 40px;
   margin-bottom: 10px;
 }
-.services-section .title {
-  width: 220px;
-  height: 220px;
-  z-index: 10;
+.service-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 /* 底部区域 */
@@ -359,12 +419,14 @@ footer {
   background-size: cover;
   padding: 40px 0 20px;
 }
+
 .footer-links {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
   flex-wrap: wrap;
 }
+
 .footer-link {
   margin: 0 15px;
   color: #eee;
@@ -372,26 +434,29 @@ footer {
 .footer-link:hover {
   color: #fcacb9;
 }
+
 .footer-info {
   text-align: center;
   color: #eee;
   font-size: 14px;
   line-height: 1.8;
 }
+
 .footer-select {
   text-align: center;
   margin-bottom: 20px;
+  color: var(--color-text-light);
 }
 .footer-select select {
-  padding: 8px 15px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  background-color: #fff;
+  color: #666;
+  padding: 8px 45px 8px 15px;
+  border: 1px solid rgba(221, 221, 221, 0.6);
+  border-radius: 6px;
+  background-color: rgba(255, 255, 255, 0.25);
   cursor: pointer;
 }
 
 @media (max-width: 992px) {
-
   .featured-image {
     width: 100%;
     height: 300px;
@@ -400,7 +465,6 @@ footer {
     grid-template-columns: repeat(2, 1fr);
   }
 }
-
 @media (max-width: 768px) {
   .nav-list {
     flex-wrap: wrap;
@@ -412,7 +476,6 @@ footer {
     grid-template-columns: 1fr;
   }
 }
-
 @media (max-width: 576px) {
   header nav {
     position: absolute;
@@ -466,3 +529,5 @@ footer {
     padding: 210px 30px 40px 30px;
   }
 }
+
+/*# sourceMappingURL=style.css.map */

css/style.scss

@@ -0,0 +1,557 @@
+/* 基础样式 */
+: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;
+}
+
+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 {
+  transition: color 0.3s;
+  text-decoration: none;
+  color: var(--color-text);
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+ul {
+  list-style: none;
+}
+
+/* 头部样式 */
+header {
+  padding: 15px 0;
+  background-color: #fff;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+
+  .inner {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    max-width: var(--container-width);
+    margin: 0 auto;
+  }
+  .logo {
+    font-family: 'STSongtiSC', "Microsoft YaHei", sans-serif;
+    font-size: 24px;
+    font-weight: bold;
+    color: var(--color-primary);
+  }
+  .mobile-menu-toggle {
+    display: none;
+    width: 60px;
+    height: 60px;
+  }
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: var(--color-primary);
+  color: var(--color-text-light);
+  
+  &:hover {
+  background-color: var(--color-secondary);
+  }
+  & i {
+    color: var(--color-text-light);
+  }
+}
+
+
+/* 导航样式 */
+nav {
+  position: relative;
+
+  .nav-list {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 0;
+  }
+  .nav-item {
+    position: relative;
+
+    &.active a {
+      font-weight: bold;
+      color: var(--color-primary);
+    }
+  }
+  a {
+    display: block;
+    color: var(--color-text);
+    padding: 12px 20px;
+    font-weight: 500;
+    transition: background-color 0.3s;
+
+    &:hover, &:active {
+      color: var(--color-primary);
+    }
+  }
+}
+
+
+.search-bar {
+  position: relative;
+
+  button {
+    width: 60px;
+    height: 60px;
+    i {
+      color: var(--color-text-light);
+    }
+  }
+  input {
+    position: absolute;
+    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;
+
+    &.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 {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 10px;
+  border-bottom: 2px solid var(--color-primary);
+
+  h2 {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-family: "STSongtiSC";
+    font-synthesis: none;
+    font-size: 20px;
+    color: var(--color-primary);
+    margin-right: 15px;
+
+    i {
+      margin-right: 10px;
+    }
+
+    &.button {
+      cursor: pointer;
+      color: var(--color-text);
+      
+      &.icon {
+        &::before, &::after {
+          display: none;
+        }
+      }
+
+      &.active {
+        &.icon {
+          &::before, &::after {
+            display: inline-block;
+          }
+        }
+        color: var(--color-primary);
+      }
+    }
+    &.icon {
+      &::before, &::after {
+        display: inline-block;
+        content: '';
+        margin: 0 10px;
+        width: 20px;
+        height: 20px;
+        background-size: 20px 20px;
+        background-image: url(/images/badge.png);
+        background-position: center; 
+      }
+    } 
+  }
+  .sub-title {
+    color: #666;
+    padding-left: 15px;
+    border-left: 1px solid #ddd;
+  }
+}
+.section-more {
+  margin-left: auto;
+  color: #666;
+
+  &:hover {
+    color: var(--color-primary);
+  }
+}
+
+/* 通知公告区域 */
+.notices-section {
+  display: flex;
+  gap: 30px;
+  margin-bottom: 40px;
+}
+.notice-item {
+  position: relative;
+  padding: 15px 0;
+  border-bottom: 1px dashed #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  > div {
+    max-width: 86%;
+    flex: 1;
+    flex-direction: column;
+    margin-right: 15px;
+    overflow: hidden;
+  } 
+  p {
+    opacity: 0;
+    height: 0px;
+    margin-bottom: 0;
+    transition: all ease-in-out 0.25s;
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+  &:hover {
+    .notice-title {
+      font-size: 20px;
+      opacity: 1;
+    }
+    p {
+      opacity: 1;
+      height: 85px;
+    }
+  }
+}
+.notice-title {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.3s;
+}
+.notice-date {
+  color: #999;
+  font-size: 14px;
+}
+.featured-image {
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.5s;
+  }
+  .caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-mask);
+    color: var(--color-text-light);
+    padding: 8px 20px;
+    h3 {
+      font-size: 18px;
+      margin-bottom: 5px;
+    }
+    p {
+      font-size: 14px;
+      opacity: 0.9;
+    }
+  }
+
+  &:hover img {
+    transform: scale(1.05);
+  }
+}
+
+/* 工作动态和党建工作区域 */
+.news-item {
+  padding: 12px 0;
+  border-bottom: 1px dashed #ddd;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .title {
+    flex: 1;
+    margin-right: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 0.3s;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+  .date {
+    color: #999;
+    font-size: 14px;
+  }
+}
+
+
+/* 精彩推荐区域 */
+.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;
+
+  p {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--color-mask);
+    color: var(--color-text-light);
+    padding: 15px;
+    z-index: 1;
+    margin-bottom: 0;
+  }
+  img {
+    width: 100%;
+    height: 200px;
+    object-fit: cover;
+  }
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* 公共服务区域 */
+.services-section {
+  margin-bottom: 40px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .title {
+    width: 220px;
+    height: 220px;
+    z-index: 10;
+  }
+}
+.services-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+  margin-top: 60px;
+  background-color: #fff1ee;
+  padding: 0px 30px 40px 230px;
+  border-radius: 15px;
+  margin-left: -180px;
+  z-index: 0;
+  z-index: 0;
+}
+.service-card {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 30px 20px;
+  margin-top: -15px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+  transition:
+    transform 0.3s,
+    box-shadow 0.3s;
+  h3 {
+    font-size: 15px;
+  }
+  .icon {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 10px;
+  }
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* 底部区域 */
+footer {
+  color: #fff;
+  background-color: #f5f5f5;
+  background-image: url(/images/footer-bg.png);
+  background-position: center;
+  background-size: cover;
+  padding: 40px 0 20px;
+}
+.footer-links {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+.footer-link {
+  margin: 0 15px;
+  color: #eee;
+
+  &:hover {
+    color: #fcacb9;
+  }
+}
+.footer-info {
+  text-align: center;
+  color: #eee;
+  font-size: 14px;
+  line-height: 1.8;
+}
+.footer-select {
+  text-align: center;
+  margin-bottom: 20px;
+  color: var(--color-text-light);
+
+  select {
+    color: #666;
+    padding: 8px 45px 8px 15px;
+    border: 1px solid rgba(221, 221, 221, 0.6);
+    border-radius: 6px;
+    background-color: rgba(255, 255, 255, 0.25);
+    cursor: pointer;
+  }
+}
+
+@media (max-width: 992px) {
+
+  .featured-image {
+    width: 100%;
+    height: 300px;
+  }
+  .featured-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .nav-list {
+    flex-wrap: wrap;
+  }
+  .nav-item a {
+    padding: 10px 15px;
+  }
+  .services-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 576px) {
+  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;
+  }
+  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;
+  }
+  .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

@@ -133,6 +133,33 @@ $partyBuilding = [
     "date" => "2025-12-07"
   ]
 ];
+// 热点新闻数据
+$hot = [
+  [
+    "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"
+  ],
+];
 // 精彩推荐数据
 $featured = [
   [
@@ -209,22 +236,37 @@ $featured = [
 
         <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>
+            <div class="d-flex flex-row align-items-center">
+              <h2 id="notices-button" class="button active icon">通知公告</h2>
+              <h2 id="hot-news-button" class="button icon">热点新闻</h2>
+            </div>
             <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
           </div>
-          <div class="notices-content">
+
+          <div id="notices-list" class="notices-content">
             <?php foreach ($notices as $notice): ?>
               <div class="notice-item">
-                <a href="#" class="notice-title"><?php echo $notice['title']; ?></a>
+                <div>
+                  <a href="#" class="notice-title"><?php echo $notice['title']; ?></a>
+                  <p><?php echo $notice['summary']; ?></p>
+                </div>
                 <span class="notice-date"><?php echo $notice['date']; ?></span>
               </div>
             <?php endforeach; ?>
           </div>
+          <div id="hot-news-list" style="display:none;" class="news-content">
+            <?php foreach ($hot as $item): ?>
+              <div class="news-item">
+                <a href="#" class="title"><?php echo $item['title']; ?></a>
+                <span class="date"><?php echo $item['date']; ?></span>
+              </div>
+            <?php endforeach; ?>
+          </div>
+
         </div>
 
         <div class="col col-sm-12 col-md-6 col-lg-6">
-          <div class="swiper mySwiper2" style="width: 100%; height:300px;">
+          <div class="swiper mySwiper2" style="width: 100%; height:350px;">
             <div class="swiper-wrapper">
               <?php foreach ($carouselItems2 as $item): ?>
                 <div class="swiper-slide featured-image">
@@ -252,8 +294,8 @@ $featured = [
             <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>
+                  <a href="#" class="title"><?php echo $update['title']; ?></a>
+                  <span class="date"><?php echo $update['date']; ?></span>
                 </div>
               <?php endforeach; ?>
             </div>
@@ -269,8 +311,8 @@ $featured = [
             <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>
+                  <a href="#" class="title"><?php echo $item['title']; ?></a>
+                  <span class="date"><?php echo $item['date']; ?></span>
                 </div>
               <?php endforeach; ?>
             </div>
@@ -283,7 +325,7 @@ $featured = [
       <!-- 精彩推荐 -->
       <div class="featured-section main-box">
         <div class="section-title">
-          <h2><i class="fa fa-star"></i> 精彩推荐</h2>
+          <h2 class="icon">精彩推荐</h2>
           <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
         </div>
         <div class="featured-grid">
@@ -302,7 +344,7 @@ $featured = [
         <div class="services-grid">
 
           <div class="service-card">
-            <img class="service-icon" src="/images/icon-explore.png">
+            <img class="icon" src="/images/icon-explore.png">
             <h3>志愿者招募</h3>
             <a href="#" class="service-link">
               <i class="fa fa-solid fa-chevron-right"></i>
@@ -310,7 +352,7 @@ $featured = [
           </div>
 
           <div class="service-card">
-            <img class="service-icon" src="/images/icon-join.png">
+            <img class="icon" src="/images/icon-join.png">
             <h3>活动报名</h3>
             <a href="#" class="service-link">
               <i class="fa fa-solid fa-chevron-right"></i>
@@ -318,7 +360,7 @@ $featured = [
           </div>
 
           <div class="service-card">
-            <img class="service-icon" src="/images/icon-contract.png">
+            <img class="icon" src="/images/icon-contract.png">
             <h3>联系咨询通道</h3>
             <a href="#" class="service-link">
               <i class="fa fa-solid fa-chevron-right"></i>
@@ -365,6 +407,20 @@ $featured = [
           disableOnInteraction: false,
         },
       });
+   
+   
+      $('#notices-button').click(function() {
+        $('#notices-button').addClass('active');
+        $('#hot-news-button').removeClass('active');
+        $('#hot-news-list').hide();
+        $('#notices-list').show();
+      });
+      $('#hot-news-button').click(function() {
+        $('#hot-news-button').addClass('active');
+        $('#notices-button').removeClass('active');
+        $('#hot-news-list').show();
+        $('#notices-list').hide();
+      });
     });
   </script>
 </body>