feat(首页): 添加新闻轮播组件并优化页面布局

移除左下角背景装饰图，新增新闻轮播功能及相关样式
设置页面标题为'西园戒幢律寺三坛大戒法会'

 <template>
 <template>
   <div class="home-container">
   <div class="home-container">
 
 
-    <!-- 左下角背景装饰图 - bg@2x.png -->
-    <div class="bottom-left-decoration"></div>
-
     <!-- 主要内容区域 -->
     <!-- 主要内容区域 -->
     <div class="main-content">
     <div class="main-content">
       <!-- 顶部Banner图片 -->
       <!-- 顶部Banner图片 -->
@@ -141,6 +138,47 @@
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
+
+      <!-- 相关新闻 -->
+      <div class="news-section">
+        <!-- 标题 -->
+        <div class="common-title">
+          <img src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/相关新聞@2x.png" alt="相关新闻" class="title-image">
+        </div>
+
+        <!-- 轮播容器 -->
+        <div class="news-carousel-container">
+          <div class="news-carousel" ref="newsCarousel">
+            <div class="news-item" v-for="(item, index) in newsItems" :key="index" @click="handleNewsClick(item)">
+              <div class="news-image">
+                <img :src="item.image" :alt="item.title">
+              </div>
+              <div class="news-content">
+                <div class="news-title">{{ item.title }}</div>
+                <div class="news-date">{{ item.date }}</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 导航按钮 -->
+          <div class="carousel-nav">
+            <img
+              class="nav-btn prev-btn"
+              src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/上@2x.png"
+              alt="上一张"
+              @click="prevSlide"
+              :class="{ disabled: currentSlide === 0 }"
+            >
+            <img
+              class="nav-btn next-btn"
+              src="/src/assets/images/02 西园戒幢律寺三坛大戒法会/下@2x.png"
+              alt="下一张"
+              @click="nextSlide"
+              :class="{ disabled: currentSlide >= maxSlide }"
+            >
+          </div>
+        </div>
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -148,6 +186,10 @@
 <script setup>
 <script setup>
 import { ref, computed, nextTick, onMounted, watch } from 'vue'
 import { ref, computed, nextTick, onMounted, watch } from 'vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
+import { useTitle } from '@vueuse/core';
+
+// 页面标题
+useTitle('西园戒幢律寺三坛大戒法会');
 
 
 // 视频配置
 // 视频配置
 const videoUrl = ref('/src/assets/images/02 西园戒幢律寺三坛大戒法会/sample-10s.mp4')
 const videoUrl = ref('/src/assets/images/02 西园戒幢律寺三坛大戒法会/sample-10s.mp4')
@@ -296,6 +338,91 @@ const viewMore = (type) => {
     // 这里可以添加跳转到详情页面的逻辑
     // 这里可以添加跳转到详情页面的逻辑
   }
   }
 }
 }
+
+// 新闻轮播相关逻辑
+const newsCarousel = ref(null)
+const currentSlide = ref(0)
+
+// 新闻数据
+const newsItems = ref([
+  {
+    image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
+    title: '三坛大戒 | 护戒胜福田 成就最上因',
+    date: '2025-10-01'
+  },
+  {
+    image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
+    title: '西园戒幢律寺三坛大戒法会圆满举行',
+    date: '2025-09-28'
+  },
+  {
+    image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
+    title: '戒子们庄严受戒 功德圆满',
+    date: '2025-09-25'
+  },
+  {
+    image: '/src/assets/images/02 西园戒幢律寺三坛大戒法会/截图/全家福3_副本.jpg',
+    title: '三师七证齐聚 传承佛法精神',
+    date: '2025-09-22'
+  }
+])
+
+// 计算最大滑动位置
+const maxSlide = computed(() => {
+  return Math.max(0, newsItems.value.length - 1)
+})
+
+// 上一张
+const prevSlide = () => {
+  if (currentSlide.value > 0) {
+    currentSlide.value--
+    updateCarouselPosition()
+  }
+}
+
+// 下一张
+const nextSlide = () => {
+  if (currentSlide.value < maxSlide.value) {
+    currentSlide.value++
+    updateCarouselPosition()
+  }
+}
+
+// 更新轮播位置：按卡片宽度+间距进行像素级位移
+const updateCarouselPosition = () => {
+  const carouselEl = newsCarousel.value
+  if (!carouselEl) return
+
+  const containerEl = carouselEl.parentElement
+  const containerWidth = containerEl ? containerEl.clientWidth : 0
+  const firstItem = carouselEl.querySelector('.news-item')
+  if (!firstItem) return
+
+  const itemWidth = firstItem.getBoundingClientRect().width
+  // 读取gap像素值，回退到0.5rem（8px）
+  let gapStr = getComputedStyle(carouselEl).gap
+  if (!gapStr || gapStr === 'normal') {
+    gapStr = '8px'
+  }
+  const gapPx = parseFloat(gapStr) || 8
+
+  let distance = currentSlide.value * (itemWidth + gapPx)
+
+  // 最后一张时，保证完整显示（居中显示，无下一张时不被裁切）
+  if (currentSlide.value === maxSlide.value) {
+    const lastOffset = (newsItems.value.length - 1) * (itemWidth + gapPx)
+    const centerOffset = Math.max(0, (containerWidth - itemWidth) / 2)
+    distance = lastOffset - centerOffset
+  }
+
+  carouselEl.style.transform = `translateX(-${distance}px)`
+}
+
+// 处理新闻点击事件
+const handleNewsClick = (item) => {
+  console.log('点击新闻:', item)
+  // 这里可以添加跳转到新闻详情页面的逻辑
+}
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
@@ -306,21 +433,6 @@ const viewMore = (type) => {
   overflow-x: hidden;
   overflow-x: hidden;
 }
 }
 
 
-/* 左下角背景装饰图 - bg@2x.png */
-.bottom-left-decoration {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 50%;
-  height: 50%;
-  background-image: url('@/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
-  background-size: contain;
-  background-position: bottom left;
-  background-repeat: no-repeat;
-  z-index: -1;
-  pointer-events: none;
-}
-
 /* 主要内容区域 */
 /* 主要内容区域 */
 .main-content {
 .main-content {
   position: relative;
   position: relative;
@@ -413,6 +525,8 @@ const viewMore = (type) => {
 .common-title {
 .common-title {
   text-align: center;
   text-align: center;
   margin-bottom: 2rem;
   margin-bottom: 2rem;
+  position: relative;
+  z-index: 3;
 }
 }
 
 
 .common-title img {
 .common-title img {
@@ -653,19 +767,6 @@ const viewMore = (type) => {
     padding: 0.75rem;
     padding: 0.75rem;
   }
   }
 }
 }
-@media (max-width: 48rem) {
-  .bottom-left-decoration {
-    width: 60%;
-    height: 40%;
-  }
-}
-
-@media (max-width: 30rem) {
-  .bottom-left-decoration {
-    width: 70%;
-    height: 35%;
-  }
-}
 
 
 /* 法会流程容器 */
 /* 法会流程容器 */
 .ceremony-wrapper {
 .ceremony-wrapper {
@@ -1043,4 +1144,156 @@ const viewMore = (type) => {
     font-size: 0.7rem;
     font-size: 0.7rem;
   }
   }
 }
 }
+
+/* 相关新闻样式 */
+.news-section {
+  padding: 3rem 1.5rem;
+  position: relative;
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/背景@2x.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* 左下角装饰图片 */
+.news-section::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%; /* 可根据实际图片大小调整 */
+  height: 200px; /* 可根据实际图片大小调整 */
+  background-image: url('/src/assets/images/02 西园戒幢律寺三坛大戒法会/bg@2x.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  z-index: 1;
+  pointer-events: none; /* 确保不影响交互 */
+}
+
+.news-carousel-container {
+  position: relative;
+  overflow: hidden;
+  margin-top: 2rem;
+  z-index: 2; /* 确保轮播容器在背景图片之上 */
+}
+
+.news-carousel {
+  display: flex;
+  transition: transform 0.3s ease;
+  gap: 0.5rem; /* 减小间距 */
+}
+
+.news-item {
+  flex: 0 0 75%; /* 调整宽度为75% */
+  background: white;
+  border-radius: 0.75rem;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.news-image {
+  width: 100%;
+  height: 12rem;
+  overflow: hidden;
+}
+
+.news-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.news-content {
+  padding: 1rem;
+  background: white;
+}
+
+.news-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #333;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+}
+
+.news-date {
+  font-size: 0.875rem;
+  color: #999;
+}
+
+.carousel-nav {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+  position: relative;
+  z-index: 3; /* 确保导航按钮在最上层 */
+}
+
+.nav-btn {
+  width: 3rem;
+  height: 3rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  object-fit: contain;
+}
+
+.nav-btn:hover:not(.disabled) {
+  transform: scale(1.1);
+}
+
+.nav-btn.disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* 响应式设计 */
+@media (max-width: 48rem) {
+  .news-section {
+    padding: 3rem 1rem;
+  }
+
+  .news-item {
+    flex: 0 0 78%; /* 调整中等屏幕宽度 */
+  }
+
+  .news-image {
+    height: 10rem;
+  }
+
+  .news-title {
+    font-size: 0.9rem;
+  }
+
+  .nav-btn {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+}
+
+@media (max-width: 30rem) {
+  .news-section {
+    padding: 3rem 0.75rem;
+  }
+
+  .news-item {
+    flex: 0 0 82%; /* 调整小屏幕宽度 */
+  }
+
+  .news-image {
+    height: 8rem;
+  }
+
+  .news-content {
+    padding: 0.75rem;
+  }
+
+  .news-title {
+    font-size: 0.85rem;
+  }
+
+  .news-date {
+    font-size: 0.75rem;
+  }
+}
 </style>
 </style>