fix:首页轮播、图片等增加

src/views/pc/index.vue

@@ -110,18 +110,23 @@
         </div>
         <!-- 横向循环焦点图展示 轮播图 -->
         <div class="carousel-section">
-          <div class="carousel-container">
-            <div class="carousel-wrapper" ref="carouselWrapper">
-              <div v-for="(item, index) in carouselItems" :key="index" class="carousel-item"
-                :class="{ active: index === currentIndex }" @click="selectItem(index)">
+          <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-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="item-info" v-if="index === currentIndex">
+                <div class="slide-info">
                   <h3>{{ item.title }}</h3>
                   <p>{{ item.description }}</p>
                 </div>
               </div>
-            </div>
-          </div>
+            </swiper-slide>
+
+          </swiper>
         </div>
       </div>
     </div>
@@ -133,21 +138,37 @@
             <img src="./../../assets/images/point.png" />
             <span>应用场景</span>
           </h2>
-          <p>融合智能感知与认知计算，全面提升运营效率与决策智能化水平</p>
+          <p class="desc">融合智能感知与认知计算，全面提升运营效率与决策智能化水平</p>
         </div>
         <!-- 横向滚动屏 -->
         <div class="carousel-section">
-          <a-carousel arrows dots-class="slick-dots slick-thumb" class="tech-carousel">
-            <div v-for="(item, index) in carouselItems" :key="index" class="carousel-slide">
-              <div class="slide-content">
+          <swiper :modules="[Autoplay, Pagination]" :slides-per-view="4.5" :space-between="0" :loop="true" :autoplay="{
+            delay: 3000,
+            disableOnInteraction: false,
+            pauseOnMouseEnter: true
+          }" @slideChange="onSlideChange" @autoplayTimeLeft="onAutoplayTimeLeft" class="tech-carousel">
+            <swiper-slide v-for="(item, index) in carouselSeneceList" :key="index">
+              <div class="slide-content" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
                 <img :src="item.image" :alt="item.title" />
-                <div class="item-info">
-                  <h3>{{ item.title }}</h3>
-                  <p>{{ item.description }}</p>
+                <div class="image-overlay default-info" v-show="!item.hovered">
+                  <p>{{ item.companyName }}</p>
+                </div>
+                <div class="hover-overlay" v-show="item.hovered">
+                  <div class="overlay-content">
+                    <h3>{{ item.title }}</h3>
+                    <p>{{ item.description }}</p>
+                  </div>
                 </div>
               </div>
+            </swiper-slide>
+
+            <!-- 进度条导航 -->
+            <div class="swiper-pagination-custom">
+              <div class="progress-bar">
+                <div class="progress-fill" :style="{ width: progress + '%' }"></div>
+              </div>
             </div>
-          </a-carousel>
+          </swiper>
         </div>
       </div>
     </div>
@@ -217,14 +238,26 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { DownOutlined } from '@ant-design/icons-vue'
-// 静态导入所有图片
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/pagination';
+// 静态导入所有图片(AI智能节能技术)
 import carouse1 from './../../assets/images/carouse1.png'
 import carouse2 from './../../assets/images/carouse2.png'
 import carouse3 from './../../assets/images/carouse3.png'
 import carouse4 from './../../assets/images/carouse4.png'
 import carouse5 from './../../assets/images/carouse5.png'
+//应用场景图片
+import appScene1 from './../../assets/images/scene1.png'
+import appScene2 from './../../assets/images/scene2.png'
+import appScene3 from './../../assets/images/scene3.png'
+import appScene4 from './../../assets/images/scene4.png'
+import appScene5 from './../../assets/images/scene5.png'
+// 添加进度状态
+const progress = ref(0);
+const swiperRef = ref(null);
 
-// 新闻数据
 // 新闻数据
 const newsList = ref([
   {
@@ -249,8 +282,8 @@ const newsList = ref([
 
 const secondScreenRef = ref<HTMLElement | null>(null)
 const observer = ref<IntersectionObserver | null>(null)
-/************************第三屏轮播图片*************************** */
-// 轮播图数据
+/************************AI+智能节能技术——第三屏轮播图片*************************** */
+// AI智能节能技术-轮播图数据
 const carouselItems = ref([
   {
     image: carouse1,
@@ -278,6 +311,57 @@ const carouselItems = ref([
     description: '风光储一体化解决方案'
   }
 ])
+const thirdScreenProgress = ref(0);
+const thirdScreenSwiperRef = ref(null);
+
+const onThirdScreenSlideChange = (swiper: any) => {
+  thirdScreenProgress.value = 0;
+}
+
+const onThirdScreenAutoplayTimeLeft = (s: any, time: any, progressValue: any) => {
+  thirdScreenProgress.value = (1 - progressValue) * 100;
+  thirdScreenSwiperRef.value = s;
+}
+/************************AI+智能节能技术——第三屏轮播图片 end*************************** */
+//应用场景轮播图
+const carouselSeneceList = ref([
+  {
+    image: appScene1,
+    companyName: '绿色酒店',
+    title: '绿色酒店123',
+    hovered: false,
+    description: '创建绿色酒店是社会进步的需要。在建设绿色酒店的过程中，采用科学的方法对酒店进行绿色管理。'
+  },
+  {
+    image: appScene2,
+    companyName: '零碳园区',
+    title: '零碳园区2',
+    hovered: false,
+    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
+  },
+  {
+    image: appScene3,
+    companyName: '商业综合体2',
+    title: '商业综合体',
+    hovered: false,
+    description: '介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。介绍介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。'
+  },
+  {
+    image: appScene4,
+    companyName: '绿色工厂2',
+    title: '绿色工厂',
+    hovered: false,
+    description: '绿色工厂是绿色制造的实施主体，属于绿色制造体系的核心支撑单元，侧重于生产过程的绿色化。'
+  },
+  {
+    image: appScene5,
+    companyName: '智慧医院',
+    title: '智慧医院',
+    hovered: false,
+    description: '智慧医院是通过数字化技术与医疗场景深度融合，构建的全流程智能化服务体系。它以数据互联互通为基础，结合人工智能、物联网、5G等技术，实现患者服务便捷化、诊疗流程精准化、医院管理精细化，是医疗行业未来发展的核心方向。'
+  }
+])
+
 
 const currentIndex = ref(0)
 const carouselWrapper = ref(null)
@@ -338,7 +422,24 @@ const initIntersectionObserver = () => {
     observer.value?.observe(el)
   })
 }
+/******************应用场景-逻辑start******************* */
+// 修改鼠标事件处理方法
+const handleMouseEnter = (index: number) => {
+  carouselSeneceList.value[index].hovered = true
+}
 
+const handleMouseLeave = (index: number) => {
+  carouselSeneceList.value[index].hovered = false
+}
+const onSlideChange = (swiper: any) => {
+  progress.value = 0;
+}
+// 处理自动播放时间
+const onAutoplayTimeLeft = (s: any, time: any, progressValue: any) => {
+  progress.value = (1 - progressValue) * 10;
+  swiperRef.value = s;
+};
+/*****************应用场景-逻辑start******************** */
 onMounted(() => {
   initIntersectionObserver()
 })
@@ -352,38 +453,4 @@ onBeforeUnmount(() => {
 
 <style lang="less" scoped>
 @import 'style/index.less';
-
-.tech-carousel {
-  :deep(.slick-slide) {
-    padding: 0 10px;
-
-    .slide-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      text-align: center;
-
-      img {
-        width: 100%;
-        max-width: 300px;
-        height: auto;
-        border-radius: 8px;
-      }
-
-      .item-info {
-        margin-top: 20px;
-
-        h3 {
-          font-size: 18px;
-          margin-bottom: 10px;
-        }
-
-        p {
-          font-size: 14px;
-          color: #666;
-        }
-      }
-    }
-  }
-}
 </style>

src/views/pc/style/index.less

@@ -320,6 +320,51 @@ li {
       display: flex;
     }
   }
+  // swiper滑动
+  .ai-tech-carousel {
+    position: relative;
+    padding-bottom: 50px; // 为进度条留出空间
+
+    :deep(.swiper-slide) {
+      padding: 0 10px;
+      
+      .slide-content {
+        border-radius: 8px;
+        overflow: hidden;
+        transition: all 0.3s ease;
+        cursor: pointer;
+        
+        &.active {
+          transform: scale(1.05);
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+        }
+        
+        img {
+          width: 100%;
+          height: auto;
+          display: block;
+        }
+        
+        .slide-info {
+        padding: 15px;
+        background: #f8f9fa;
+        
+        h3 {
+          margin: 0 0 10px 0;
+          font-size: 18px;
+          color: #1f2937;
+        }
+        
+        p {
+          margin: 0;
+          font-size: 14px;
+          color: #6b7280;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
 }
 // 第四屏 应用场景
 .screens-four{
@@ -346,7 +391,9 @@ li {
         font-weight:700;
       }
     }
-
+    .desc{
+      padding-bottom:46px;
+    }
     p {
       font-size: 18px;
       color: rgba(153, 153, 153, 1);
@@ -354,6 +401,132 @@ li {
       margin: 0 auto;
     }
   }
+  
+.tech-carousel {
+  position: relative;
+  padding-bottom: 30px; // 为进度条留出空间
+
+  :deep(.swiper-slide) {
+    padding: 0 8px;
+    border-radius: none;
+
+    .slide-content {
+      position: relative;
+      border-radius: 0px;
+      overflow: hidden;
+      transition: transform 0.3s ease, box-shadow 0.3s ease;
+
+      &:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+      }
+
+      img {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+        display: block;
+        border-radius: none;
+      }
+    }
+  }
+
+  // 自定义进度条样式
+  :deep(.swiper-pagination-custom) {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px;
+    height: 4px;
+
+    .progress-bar {
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 2px;
+      overflow: hidden;
+
+      .progress-fill {
+        height: 100%;
+        background: rgba(31, 92, 172, 1);
+        border-radius: 2px;
+        transition: width 0.1s linear;
+      }
+    }
+  }
+}
+
+// 应用场景图片底部-标题遮罩
+.image-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  background: rgba(0, 10, 48, .5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    color: white;
+    font-size: 28px;
+    font-weight: 700;
+    margin: 0;
+  }
+}
+
+.hover-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 10, 48, .5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  z-index: 10;
+
+  .overlay-content {
+    text-align: center;
+    color: white;
+    padding: 0 15px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 100%;
+    align-items: center;
+
+    h3 {
+      font-size: 28px;
+      font-weight: 700;
+      padding: 55px 0 10px;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 400;
+      letter-spacing: 0.96px;
+      line-height: 21px;
+      margin: 0;
+      text-align: left;
+    }
+  }
+}
+
+  // 淡入淡出动画
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.3s ease;
+  }
+
+  .fade-enter-from,
+  .fade-leave-to {
+    opacity: 0;
+  }
 
 }
 // 第五屏 合作伙伴