add:网站新闻业页面，首页增加

src/views/pc/index.vue

@@ -110,22 +110,33 @@
         </div>
         <!-- 横向循环焦点图展示 轮播图 -->
         <div class="carousel-section">
-          <swiper :modules="[Autoplay, Pagination]" :slides-per-view="3.5" :space-between="20" :loop="true" :autoplay="{
-            delay: 3000,
-            disableOnInteraction: false,
-            pauseOnMouseEnter: true
-          }" @slideChange="onThirdScreenSlideChange" @autoplayTimeLeft="onThirdScreenAutoplayTimeLeft"
-            class="ai-tech-carousel">
+          <swiper :centered-slides="true" :loop="true" :slides-per-view="5" :space-between="-90" :autoplay="false"
+            :breakpoints="{
+              '768': {
+                slidesPerView: 1.5,
+                spaceBetween: -15
+              },
+              '1024': {
+                slidesPerView: 2.2,
+                spaceBetween: -20
+              },
+              '1200': {
+                slidesPerView: 5,
+                spaceBetween: -90
+              }
+            }" @slideChange="onThirdScreenSlideChange" @autoplayTimeLeft="onThirdScreenAutoplayTimeLeft"
+            class="ai-tech-carousel" ref="thirdScreenSwiperRef" :initial-slide="3">
             <swiper-slide v-for="(item, index) in carouselItems" :key="index">
-              <div class="slide-content" @click="selectItem(index)" :class="{ active: index === currentIndex }">
-                <img :src="item.image" :alt="item.title" />
-                <div class="slide-info">
-                  <h3>{{ item.title }}</h3>
-                  <p>{{ item.description }}</p>
+              <div class="slide-content" @click="() => selectItem(index)" :class="{ active: index === currentIndex }">
+                <div class="slide-inner">
+                  <img :src="item.image" :alt="item.title" />
+                  <div class="slide-info">
+                    <h3>{{ item.title }}</h3>
+                    <p>{{ item.description }}</p>
+                  </div>
                 </div>
               </div>
             </swiper-slide>
-
           </swiper>
         </div>
       </div>
@@ -236,10 +247,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { DownOutlined } from '@ant-design/icons-vue'
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import { Autoplay, Pagination } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
 // 静态导入所有图片(AI智能节能技术)
@@ -287,68 +298,83 @@ const observer = ref<IntersectionObserver | null>(null)
 const carouselItems = ref([
   {
     image: carouse1,
-    title: '智能能源管理',
+    title: 'AI+空气压缩',
     description: '通过AI技术实现能源使用优化'
   },
   {
     image: carouse2,
-    title: '碳足迹追踪',
+    title: 'AI+监控',
     description: '全生命周期碳排放监控与分析'
   },
   {
     image: carouse3,
-    title: '绿色工厂解决方案',
+    title: 'AI+区域能源站',
     description: '工业4.0背景下的低碳生产模式'
   },
   {
     image: carouse4,
-    title: '城市能源互联网',
+    title: 'AI+智慧照明',
     description: '构建智慧城市的能源生态系统'
   },
   {
     image: carouse5,
-    title: '可再生能源集成',
+    title: 'AI+虚拟电厂',
     description: '风光储一体化解决方案'
   }
 ])
 const thirdScreenProgress = ref(0);
 const thirdScreenSwiperRef = ref(null);
-
+const currentIndex = ref(3);
+console.log(currentIndex.value, "hahahahyyyyyyyy")
 const onThirdScreenSlideChange = (swiper: any) => {
   thirdScreenProgress.value = 0;
+  // 更新当前索引以保持同步
+  if (swiper.realIndex !== undefined) {
+    currentIndex.value = swiper.realIndex;
+  }
 }
 
 const onThirdScreenAutoplayTimeLeft = (s: any, time: any, progressValue: any) => {
   thirdScreenProgress.value = (1 - progressValue) * 100;
   thirdScreenSwiperRef.value = s;
 }
+// 选择图片
+const selectItem = (index: any) => {
+  currentIndex.value = index;
+
+  // 如果有Swiper实例引用，则切换到对应slide
+  if (thirdScreenSwiperRef.value && thirdScreenSwiperRef.value.swiper) {
+    thirdScreenSwiperRef.value.swiper.slideToLoop(index, 500);
+  }
+}
 /************************AI+智能节能技术——第三屏轮播图片 end*************************** */
 //应用场景轮播图
 const carouselSeneceList = ref([
   {
     image: appScene1,
     companyName: '绿色酒店',
-    title: '绿色酒店123',
+    title: '绿色酒店',
     hovered: false,
     description: '创建绿色酒店是社会进步的需要。在建设绿色酒店的过程中，采用科学的方法对酒店进行绿色管理。'
   },
-  {
-    image: appScene2,
-    companyName: '零碳园区',
-    title: '零碳园区2',
-    hovered: false,
-    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
-  },
+
   {
     image: appScene3,
-    companyName: '商业综合体2',
+    companyName: '商业综合体',
     title: '商业综合体',
     hovered: false,
     description: '介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。介绍介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。'
   },
+  {
+    image: appScene2,
+    companyName: '零碳园区',
+    title: '零碳园区',
+    hovered: false,
+    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
+  },
   {
     image: appScene4,
-    companyName: '绿色工厂2',
+    companyName: '绿色工厂',
     title: '绿色工厂',
     hovered: false,
     description: '绿色工厂是绿色制造的实施主体，属于绿色制造体系的核心支撑单元，侧重于生产过程的绿色化。'
@@ -363,34 +389,6 @@ const carouselSeneceList = ref([
 ])
 
 
-const currentIndex = ref(0)
-const carouselWrapper = ref(null)
-
-// 选择图片
-const selectItem = (index) => {
-  currentIndex.value = index
-  centerActiveItem()
-}
-// 居中显示当前选中项
-const centerActiveItem = () => {
-  nextTick(() => {
-    if (carouselWrapper.value) {
-      const activeItem = carouselWrapper.value.querySelector('.carousel-item.active')
-      if (activeItem) {
-        const containerWidth = carouselWrapper.value.offsetWidth
-        const itemWidth = activeItem.offsetWidth
-        const itemLeft = activeItem.offsetLeft
-        const scrollLeft = itemLeft - (containerWidth - itemWidth) / 2
-        carouselWrapper.value.scrollTo({
-          left: scrollLeft,
-          behavior: 'smooth'
-        })
-      }
-    }
-  })
-}
-
-
 
 
 // 滚动到下一屏