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'
-        })
-      }
-    }
-  })
-}
-
-
 
 
 // 滚动到下一屏

src/views/pc/news/detail.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="detail">
+    <div class="banner"></div>
+    <div class="container">
+      <div class="breadcrumb">
+        <a href="#">首页</a>
+        <right-outlined class="iconarrow" />
+        <a href="#">新闻中心</a>
+        <right-outlined class="iconarrow" />
+        <span>新闻详情</span>
+      </div>
+      <div class="content">
+        <div class="title">{{ newsDetail.title }}</div>
+        <div class="time">
+          <p>来源：泰山先锋</p>
+          <p>2022年10月23日12:23</p>
+        </div>
+        <div class="newImg">
+          <img :src="newsDetail.image" alt="" />
+        </div>
+        <div class="nr">
+          {{ newsDetail.desc }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { RightOutlined } from '@ant-design/icons-vue'
+const route = useRoute()
+const newsDetail = ref(
+  {
+    id: 1,
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    time: '2021-11-15',
+    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
+    image: '../../../src/assets/images/new1.png'
+  }
+)
+// 需要添加根据路由参数获取数据的逻辑
+onMounted(() => {
+  const newsId = route.params.id
+  if (newsId) {
+    // 这里应该调用 API 获取对应的新闻详情
+    fetchNewsDetail(newsId)
+  }
+})
+
+const fetchNewsDetail = (id: any) => {
+  // 模拟 API 调用
+  // 实际应该调用后端接口获取数据
+  console.log('获取新闻详情，ID:', id)
+}
+</script>
+<style lang="less" scoped>
+.detail {
+
+  .banner {
+    width: 100%;
+    height: 450px;
+    background: url('./../../../assets/images/newbanner.png')center center no-repeat;
+    background-size: cover;
+  }
+
+  .container {
+    max-width: 1200px;
+    padding: 27px 0 60px;
+    margin: auto;
+
+    // 标题部分，面包屑
+    .breadcrumb {
+      border-bottom: 1px solid #e5e5e5;
+      padding-bottom: 14px;
+
+      a {
+        color: #666666;
+      }
+
+      .iconarrow {
+        padding: 0 3px;
+        color: #666666;
+      }
+
+    }
+
+    .content {
+      padding: 31px 0 67px;
+
+      .title {
+        font-size: 36px;
+        font-weight: 700;
+        color: rgba(26, 25, 25, 1);
+      }
+
+      .time {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .newImg {
+        width: 676px;
+        height: 330px;
+
+        img {}
+      }
+    }
+  }
+}
+</style>