From 3952cc2a3eef73453630d946af8ce04fa20cbb3d Mon Sep 17 00:00:00 2001
From: duyufeng <dyf911216@126.com>
Date: Thu, 18 Sep 2025 16:13:42 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E9=97=BB=E7=AD=89?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=A2=9E=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pc/index.vue | 272 ++++++++++++++++++++++++++++++++++++++---
 1 file changed, 252 insertions(+), 20 deletions(-)

diff --git a/src/views/pc/index.vue b/src/views/pc/index.vue
index 5777051..7494203 100644
--- a/src/views/pc/index.vue
+++ b/src/views/pc/index.vue
@@ -101,25 +101,143 @@
     <!-- 第三屏：AI+智能节能技术 -->
     <div class="three-screen" ref="threeScreenRef">
       <div class="container">
-
+        <div class="content-section animate-fade-in-up">
+          <h2>
+            <img src="./../../assets/images/point.png" />
+            <span>AI+智能节能技术</span>
+          </h2>
+          <p>为客户提供多场景中长期智慧能源战略规划，包括AIoT能源管理系统与低碳技术集成</p>
+        </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)">
+                <img :src="item.image" :alt="item.title" />
+                <div class="item-info" v-if="index === currentIndex">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    <!-- 更多内容屏 -->
+    <!-- 第四屏 -应用场景 -->
+    <div class="screens-four">
+      <div class="container">
+        <div class="content-section animate-fade-in-up">
+          <h2>
+            <img src="./../../assets/images/point.png" />
+            <span>应用场景</span>
+          </h2>
+          <p>融合智能感知与认知计算，全面提升运营效率与决策智能化水平</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">
+                <img :src="item.image" :alt="item.title" />
+                <div class="item-info">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.description }}</p>
+                </div>
+              </div>
+            </div>
+          </a-carousel>
+        </div>
+      </div>
+    </div>
+    <!--第五屏 合作伙伴 -->
+    <div class="partner-screens">
+      <div class="container">
+        <div class="content-section animate-fade-in-up">
+          <h2>
+            <img src="./../../assets/images/point.png" />
+            <span>合作伙伴</span>
+          </h2>
+          <p>与您携手共赢,共同创造美好未来</p>
+          <h4>
+            <line></line>荣誉资质<line></line>
+          </h4>
+          <div class="partner-img">
+            <p><span>ISO9001认证</span></p>
+            <p><span>ISO45001认证</span></p>
+            <p><span>ISO14001认证</span></p>
+          </div>
+          <h4 class="partner-title">
+            <line></line>客户及战略伙伴<line></line>
+          </h4>
+
+        </div>
+      </div>
+      <div class="partnerImgAll animate-fade-in-up">
+        <img src="../../assets/images/partercomp.png" alt="">
+      </div>
+    </div>
+    <!--第六屏 新闻资讯 -->
     <div class="other-screens">
       <div class="container">
-        <div class="news-section animate-fade-in-up">
-          <h2>最新动态</h2>
-          <a-list class="news-list" :data-source="newsList" :split="false">
-            <template #renderItem="{ item }">
-              <a-list-item>
-                <a-list-item-meta :description="item.date">
-                  <template #title>
-                    <a href="javascript:;">{{ item.title }}</a>
-                  </template>
-                </a-list-item-meta>
-              </a-list-item>
-            </template>
-          </a-list>
+        <div class="content-section animate-fade-in-up">
+          <h2>
+            <img src="./../../assets/images/point.png" />
+            <span>新闻资讯</span>
+          </h2>
+          <p class="desc">了解最新行业资讯 把握市场最新动向</p>
+          <div class="content">
+            <div class="lt">
+              <div class="img"><img src="./../../assets/images/news.png" /></div>
+              <p class="title">降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</p>
+              <p class="nr">在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
+            </div>
+            <div class="rt">
+              <ul>
+                <!-- <li>
+                  <div class="newslt">
+                    <h4>12</h4>
+                    <p>2025.09</p>
+                  </div>
+                  <div class="newsrt">
+                    <h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
+                    <p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
+                  </div>
+                </li> -->
+                <!-- <li>
+                  <div class="newslt">
+                    <h4>10</h4>
+                    <p>2025.09</p>
+                  </div>
+                  <div class="newsrt">
+                    <h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
+                    <p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
+                  </div>
+                </li>
+                <li>
+                  <div class="newslt">
+                    <h4>15</h4>
+                    <p>2025.09</p>
+                  </div>
+                  <div class="newsrt">
+                    <h4>降本增效新引擎：AI如何实现能源的精细化管理与数智变革？</h4>
+                    <p>在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...</p>
+                  </div>
+                </li> -->
+                <li v-for="item in newsList" :key="item.id">
+                  <div class="newslt">
+                    <h4>{{ item.date.substring(8, 10) }}</h4>
+                    <p>{{ item.date.substring(0, 8) }}</p>
+                  </div>
+                  <div class="newsrt">
+                    <h4>{{ item.title }}</h4>
+                    <p>{{ item.description }}</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -127,19 +245,99 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { DownOutlined } from '@ant-design/icons-vue'
+// 静态导入所有图片
+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'
 
+// 新闻数据
 // 新闻数据
 const newsList = ref([
-  { title: '公司荣获绿色企业称号', date: '2023-10-15' },
-  { title: '新项目启动，推动城市低碳发展', date: '2023-09-28' },
-  { title: '参与国际环保技术交流会', date: '2023-09-12' },
-  { title: '发布最新碳中和解决方案', date: '2023-08-30' }
+  {
+    id: 1,
+    date: '2025-09-01',
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
+  },
+  {
+    id: 2,
+    date: '2025-09-04',
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
+  },
+  {
+    id: 3,
+    date: '2025-09-15',
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    description: '在能源革命和数字化转型的双重驱动下，能源精细化管理已成为企业节能降碳、实现可持续发展的必然选择...'
+  }
 ])
 
 const secondScreenRef = ref<HTMLElement | null>(null)
 const observer = ref<IntersectionObserver | null>(null)
+/************************第三屏轮播图片*************************** */
+// 轮播图数据
+const carouselItems = ref([
+  {
+    image: carouse1,
+    title: '智能能源管理',
+    description: '通过AI技术实现能源使用优化'
+  },
+  {
+    image: carouse2,
+    title: '碳足迹追踪',
+    description: '全生命周期碳排放监控与分析'
+  },
+  {
+    image: carouse3,
+    title: '绿色工厂解决方案',
+    description: '工业4.0背景下的低碳生产模式'
+  },
+  {
+    image: carouse4,
+    title: '城市能源互联网',
+    description: '构建智慧城市的能源生态系统'
+  },
+  {
+    image: carouse5,
+    title: '可再生能源集成',
+    description: '风光储一体化解决方案'
+  }
+])
+
+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'
+        })
+      }
+    }
+  })
+}
+
+
+
 
 // 滚动到下一屏
 const scrollToNext = () => {
@@ -184,4 +382,38 @@ 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>
\ No newline at end of file