From 58a3a27a73d36fd1bb11826ceb9ebbc49738f329 Mon Sep 17 00:00:00 2001
From: duyufeng <dyf911216@126.com>
Date: Thu, 18 Sep 2025 11:19:24 +0800
Subject: [PATCH] =?UTF-8?q?add:=E9=A6=96=E9=A1=B5=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=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 | 186 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 170 insertions(+), 16 deletions(-)

diff --git a/src/views/pc/index.vue b/src/views/pc/index.vue
index 290ac55..5777051 100644
--- a/src/views/pc/index.vue
+++ b/src/views/pc/index.vue
@@ -1,33 +1,187 @@
-<!-- src/views/News.vue -->
+<!-- src/views/pc/index.vue -->
 <template>
-  <div class="index-home">
-    啊哈哈哈哈我来了
-    <div class="content">
-      我是首页内容
-      <!-- 将轮播图放在内容区域或页脚区域 -->
+  <div class="pc-home">
+    <!-- 第一屏：全屏轮播 -->
+    <div class="first-screen">
       <div class="carousel-wrapper">
-        <a-carousel autoplay :autoplay-speed="5000">
-          <div>
-            <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_1.mp4" autoplay loop
-              muted playsinline style="width: 100%; height: auto;"></video>
+        <a-carousel autoplay :autoplay-speed="5000" arrows dots-class="slick-dots slick-thumb">
+          <div class="carousel-item">
+            <video src="./video/9c4a6c72df9f8a4f6b013003cb2f6bd5.mp4" autoplay loop muted playsinline></video>
+            <div class="carousel-content">
+              <h1 class="animate-slide-in slideTitle">我们的愿景</h1>
+              <p class="animate-slide-in delay-1 slideintro">成为全球企业信赖的能碳管理伙伴定义智慧零碳时代新标准</p>
+              <p class="animate-slide-in delay-2 englishFont">BECOME A TRUSTED PARTNER IN ENERGY AND CARBON MANAGEMENT
+                FOR GLOBAL ENTERPRISES; DEFINE THE NEW STANDARDS FOR THE ERA OF SMART ZERO CARBON.</p>
+            </div>
           </div>
-          <div>
+          <div class="carousel-item">
             <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_2.mp4" autoplay loop
-              muted playsinline style="width: 100%; height: auto;"></video>
+              muted playsinline></video>
+            <!-- <div class="carousel-content">
+              <h1 class="animate-slide-in">可持续发展</h1>
+              <p class="animate-slide-in delay-1">推动绿色能源转型</p>
+              <a-button class="animate-slide-in delay-2" type="primary" size="large">
+                探索方案
+              </a-button>
+            </div> -->
           </div>
-          <div>
+          <div class="carousel-item">
             <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_3.mp4" autoplay loop
-              muted playsinline style="width: 100%; height: auto;"></video>
+              muted playsinline></video>
+            <!-- <div class="carousel-content">
+              <h1 class="animate-slide-in">创新科技</h1>
+              <p class="animate-slide-in delay-1">打造环保解决方案</p>
+              <a-button class="animate-slide-in delay-2" type="primary" size="large">
+                查看案例
+              </a-button>
+            </div> -->
           </div>
         </a-carousel>
       </div>
+
+      <!-- 向下滚动指示器 -->
+      <div class="scroll-indicator" @click="scrollToNext">
+        <DownOutlined />
+      </div>
+    </div>
+
+    <!-- 第二屏：核心产品 -->
+    <div class="second-screen" ref="secondScreenRef">
+      <div class="container">
+        <div class="content-section animate-fade-in-up">
+          <h2>
+            <img src="./../../assets/images/point.png" />
+            <span>核心产品</span>
+          </h2>
+          <ul class="core-products animate-fade-in-up">
+            <li>AI智控</li>
+            <li>高效节能</li>
+            <li>能碳双控</li>
+            <li>绿色低碳</li>
+          </ul>
+        </div>
+        <div class="services-section">
+          <a-row :gutter="[16, 16]" class="serviceList">
+            <a-col :span="12">
+              <div class="service-card animate-fade-in-up delay-1">
+                <h3>全生命周期产品碳足迹平台</h3>
+              </div>
+            </a-col>
+            <a-col :span="12">
+              <div class="service-card animate-fade-in-up delay-2">
+                <h3>城市级能碳平台</h3>
+              </div>
+            </a-col>
+          </a-row>
+          <a-row :gutter="[16, 16]" class="serviceList2">
+            <a-col :span="6">
+              <div class="service-card animate-fade-in-up delay-3">
+                <h3>城市级能碳平台</h3>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="service-card animate-fade-in-up delay-4">
+                <h3>工业锅炉节能器</h3>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="service-card animate-fade-in-up delay-5">
+                <h3>FMCS智能工业平台</h3>
+              </div>
+            </a-col>
+            <a-col :span="6">
+              <div class="service-card animate-fade-in-up delay-6">
+                <h3>ESG绿色认证咨询</h3>
+              </div>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+    </div>
+    <!-- 第三屏：AI+智能节能技术 -->
+    <div class="three-screen" ref="threeScreenRef">
+      <div class="container">
+
+      </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>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { DownOutlined } from '@ant-design/icons-vue'
 
+// 新闻数据
+const newsList = ref([
+  { title: '公司荣获绿色企业称号', date: '2023-10-15' },
+  { title: '新项目启动，推动城市低碳发展', date: '2023-09-28' },
+  { title: '参与国际环保技术交流会', date: '2023-09-12' },
+  { title: '发布最新碳中和解决方案', date: '2023-08-30' }
+])
+
+const secondScreenRef = ref<HTMLElement | null>(null)
+const observer = ref<IntersectionObserver | null>(null)
+
+// 滚动到下一屏
+const scrollToNext = () => {
+  const nextScreen = document.querySelector('.second-screen')
+  if (nextScreen) {
+    window.scrollTo({
+      top: nextScreen.offsetTop,
+      behavior: 'smooth'
+    })
+  }
+}
+
+// 初始化 Intersection Observer
+const initIntersectionObserver = () => {
+  observer.value = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('visible')
+      }
+    })
+  }, {
+    threshold: 0.1
+  })
+
+  // 观察所有需要动画的元素
+  const animateElements = document.querySelectorAll('.animate-fade-in-up, .animate-slide-in')
+  animateElements.forEach(el => {
+    observer.value?.observe(el)
+  })
+}
+
+onMounted(() => {
+  initIntersectionObserver()
+})
+
+onBeforeUnmount(() => {
+  if (observer.value) {
+    observer.value.disconnect()
+  }
+})
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style lang="less" scoped>
+@import 'style/index.less';
+</style>
\ No newline at end of file