add:内容增加

package.json

@@ -21,6 +21,7 @@
     "ant-design-vue": "^4.2.6",
     "axios": "^1.11.0",
     "pinia": "^3.0.3",
+    "swiper": "^12.0.1",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },

src/assets/images/en.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="22.648" height="22.648" viewBox="0 0 22.648 22.648">
+  <g id="组_38239" data-name="组 38239" transform="translate(-64 -80)">
+    <path id="路径_36184" data-name="路径 36184" d="M229.248,346.936V337.5h6.994v1.6h-5.09v2.092h4.736v1.59h-4.736v2.566h5.27v1.589h-7.173Zm14.168,0h-1.808v-3.487a5.431,5.431,0,0,0-.115-1.432,1,1,0,0,0-.377-.5,1.075,1.075,0,0,0-.628-.18,1.447,1.447,0,0,0-.843.258,1.291,1.291,0,0,0-.511.682,5.9,5.9,0,0,0-.138,1.57v3.1h-1.808V340.1h1.679v1a2.8,2.8,0,0,1,3.345-.943,1.831,1.831,0,0,1,.749.55,1.981,1.981,0,0,1,.354.759,5.689,5.689,0,0,1,.1,1.216Z" transform="translate(-160.995 -250.877)"/>
+    <path id="路径_36185" data-name="路径 36185" d="M66.471,81.647a.824.824,0,0,0-.824.824v17.707a.824.824,0,0,0,.824.824H84.178a.824.824,0,0,0,.824-.824V82.471a.824.824,0,0,0-.824-.824Zm0-1.647H84.178a2.471,2.471,0,0,1,2.471,2.471v17.707a2.471,2.471,0,0,1-2.471,2.471H66.471A2.471,2.471,0,0,1,64,100.178V82.471A2.471,2.471,0,0,1,66.471,80Z"/>
+  </g>
+</svg>

src/assets/styles/global.less

@@ -0,0 +1,22 @@
+// 定义字体
+@font-face {
+  font-family: 'CustomFont';
+  src: url('./assets/fonts/YourFontName.woff2') format('woff2'),
+       url('./assets/fonts/YourFontName.woff') format('woff'),
+       url('./assets/fonts/YourFontName.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap; // 优化字体加载
+}
+
+// 设置全局字体
+body {
+  font-family: 'CustomFont', 'Microsoft YaHei', Arial, sans-serif;//, '思源黑体'
+}
+ul,
+li {
+  list-style: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  padding-inline-start: 0px;
+}

src/components/header.vue

@@ -1,6 +1,6 @@
 <!-- src/components/Header.vue -->
 <template>
-  <a-layout-header class="header">
+  <a-layout-header :class="['header', { 'headerpage': isHomePage }]">
     <div class="header-content">
       <div class="logo">
         <img src="../assets/images/logo.png" alt="logo" />
@@ -26,7 +26,8 @@
           </template>
         </a-menu>
         <div class="demo">体验demo</div>
-        <img src="../assets/images/enlog.png" alt="enlog" class="enlogImg" />
+        <img src="../assets/images/enlog.png" alt="enlog" class="enlogImg" v-if="isHomePage" />
+        <img src="../assets/images/enblack.png" alt="enlog" class="enlogImg" v-else />
       </div>
     </div>
   </a-layout-header>
@@ -53,10 +54,10 @@ const menuItems = ref([
     key: 'news',
     title: '新闻中心',
     path: '/news',
-    children: [
+    // children: [
-      { key: 'news-list', title: '新闻列表', path: '/news/list' },
+    //   { key: 'news-list', title: '新闻列表', path: '/news/list' },
-      { key: 'news-detail', title: '新闻详情', path: '/news/detail' }
+    //   { key: 'news-detail', title: '新闻详情', path: '/news/detail' }
-    ]
+    // ]
   },
   {
     key: 'about',
@@ -140,10 +141,19 @@ onMounted(() => {
   top: 0;
   left: 0;
   right: 0;
-  z-index: 1;
+  z-index: 100;
-  background: rgba(0, 0, 0, 0.2);
   height: 70px;
 
+  //首页头部背景色
+  &.headerpage {
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+  //非首页头部背景色
+  &:not(.headerpage) {
+    background: #ffffff;
+  }
+
   &.transparent {
     background: transparent;
   }

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import './assets/styles/global.less'
 import { createPinia } from 'pinia'
 import Antd from 'ant-design-vue'
 import 'ant-design-vue/dist/reset.css'

src/router/pcRoutes.ts

@@ -9,8 +9,13 @@ export const pcRoutes = [
   {
     path: '/news',
     name: 'News',
-    component: () => import('@/views/pc/news.vue'),
+    component: () => import('@/views/pc/news/index.vue'),
-    meta: { requiresAuth: false, layout: 'pc' }
+    meta: { requiresAuth: false, layout: 'pc' },
+  },
+  {
+    path: '/news/detail/:id',
+    name: 'NewsDetail',
+    component: () => import('@/views/pc/news/detail.vue')
   },
   {
     path: '/about',

src/views/pc/index.vue

@@ -1,33 +1,454 @@
-<!-- src/views/News.vue -->
+<!-- src/views/pc/index.vue -->
 <template>
-  <div class="index-home">
+  <div class="pc-home">
-    啊哈哈哈哈我来了
+    <!-- 第一屏：全屏轮播 -->
-    <div class="content">
+    <div class="first-screen">
-      我是首页内容
-      <!-- 将轮播图放在内容区域或页脚区域 -->
       <div class="carousel-wrapper">
-        <a-carousel autoplay :autoplay-speed="5000">
+        <a-carousel autoplay :autoplay-speed="5000" arrows dots-class="slick-dots slick-thumb">
-          <div>
+          <div class="carousel-item">
-            <video src="https://ec-resource20.oss-cn-shanghai.aliyuncs.com/ec_official_website/3_1.mp4" autoplay loop
+            <video src="./video/9c4a6c72df9f8a4f6b013003cb2f6bd5.mp4" autoplay loop muted playsinline></video>
-              muted playsinline style="width: 100%; height: auto;"></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 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">
+          <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 }">
+                <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>
+    </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 class="desc">融合智能感知与认知计算，全面提升运营效率与决策智能化水平</p>
+        </div>
+        <!-- 横向滚动屏 -->
+        <div class="carousel-section">
+          <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="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>
+          </swiper>
+        </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="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 v-for="item in newsList" :key="item.id">
+                  <div class="newslt">
+                    <h4>{{ item.date.substring(8, 10) }}</h4>
+                    <p>{{ item.date.substring(0, 7) }}</p>
+                  </div>
+                  <div class="newsrt">
+                    <h4>{{ item.title }}</h4>
+                    <p>{{ item.description }}</p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </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'
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import { Autoplay, 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([
+  {
+    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)
+/************************AI+智能节能技术——第三屏轮播图片*************************** */
+// AI智能节能技术-轮播图数据
+const carouselItems = ref([
+  {
+    image: carouse1,
+    title: 'AI+空气压缩',
+    description: '通过AI技术实现能源使用优化'
+  },
+  {
+    image: carouse2,
+    title: 'AI+监控',
+    description: '全生命周期碳排放监控与分析'
+  },
+  {
+    image: carouse3,
+    title: 'AI+区域能源站',
+    description: '工业4.0背景下的低碳生产模式'
+  },
+  {
+    image: carouse4,
+    title: 'AI+智慧照明',
+    description: '构建智慧城市的能源生态系统'
+  },
+  {
+    image: carouse5,
+    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: '绿色酒店',
+    hovered: false,
+    description: '创建绿色酒店是社会进步的需要。在建设绿色酒店的过程中，采用科学的方法对酒店进行绿色管理。'
+  },
+
+  {
+    image: appScene3,
+    companyName: '商业综合体',
+    title: '商业综合体',
+    hovered: false,
+    description: '介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。介绍介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。'
+  },
+  {
+    image: appScene2,
+    companyName: '零碳园区',
+    title: '零碳园区',
+    hovered: false,
+    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
+  },
+  {
+    image: appScene4,
+    companyName: '绿色工厂',
+    title: '绿色工厂',
+    hovered: false,
+    description: '绿色工厂是绿色制造的实施主体，属于绿色制造体系的核心支撑单元，侧重于生产过程的绿色化。'
+  },
+  {
+    image: appScene5,
+    companyName: '智慧医院',
+    title: '智慧医院',
+    hovered: false,
+    description: '智慧医院是通过数字化技术与医疗场景深度融合，构建的全流程智能化服务体系。它以数据互联互通为基础，结合人工智能、物联网、5G等技术，实现患者服务便捷化、诊疗流程精准化、医院管理精细化，是医疗行业未来发展的核心方向。'
+  }
+])
+
+
+
+
+// 滚动到下一屏
+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)
+  })
+}
+/******************应用场景-逻辑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()
+})
+
+onBeforeUnmount(() => {
+  if (observer.value) {
+    observer.value.disconnect()
+  }
+})
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+@import 'style/index.less';
+</style>

src/views/pc/news.vue

@@ -1,104 +0,0 @@
-<!-- src/views/News.vue -->
-<template>
-  <div class="news">
-    <a-layout>
-      <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible width="256">
-        <Navigation />
-      </a-layout-sider>
-
-      <a-layout>
-        <a-layout-content class="content">
-          <div class="content-inner">
-            <h1>新闻消息22222</h1>
-            <a-list class="news-list" item-layout="vertical" size="large" :pagination="pagination"
-              :data-source="newsList">
-              <template #renderItem="{ item }">
-                <a-list-item key="item.title">
-                  <a-list-item-meta :description="item.date">
-                    <template #title>
-                      <a :href="item.href">{{ item.title }}</a>
-                    </template>
-                  </a-list-item-meta>
-                  {{ item.content }}
-                </a-list-item>
-              </template>
-            </a-list>
-          </div>
-        </a-layout-content>
-      </a-layout>
-    </a-layout>
-    <!-- 将轮播图放在内容区域或页脚区域 -->
-    <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>
-        </div>
-        <div>
-          <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>
-        </div>
-        <div>
-          <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>
-        </div>
-      </a-carousel>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Navigation from '@/components/navigation.vue'
-
-const collapsed = ref(false)
-
-const newsList = ref([
-  {
-    title: '网站正式上线',
-    href: '#',
-    date: '2025-01-01',
-    content: '我们的网站今天正式上线了，欢迎大家访问！'
-  },
-  {
-    title: '新功能发布',
-    href: '#',
-    date: '2025-01-05',
-    content: '我们发布了全新的个人中心功能，提供更多个性化服务。'
-  },
-  {
-    title: '系统维护通知',
-    href: '#',
-    date: '2025-01-10',
-    content: '为了提供更好的服务，系统将于本周末进行维护升级。'
-  }
-])
-
-const pagination = {
-  onChange: (page: number) => {
-    console.log(page)
-  },
-  pageSize: 5,
-}
-</script>
-
-<style scoped>
-.news {
-  height: 100%;
-}
-
-.content {
-  margin: 24px 16px;
-  padding: 24px;
-  background: #fff;
-  min-height: 280px;
-}
-
-.content-inner {
-  padding: 24px;
-}
-
-.news-list {
-  margin-top: 24px;
-}
-</style>

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>

src/views/pc/news/index.vue

@@ -0,0 +1,228 @@
+<!-- src/views/News.vue -->
+<template>
+  <div class="news">
+    <div class="banner"></div>
+    <div class="container">
+      <div class="breadcrumb">
+        <a href="#">首页</a>
+        <right-outlined class="iconarrow" />
+        <a href="#">新闻中心</a>
+      </div>
+      <div class="content">
+        <ul>
+          <li v-for="item in paginatedNews" :key="item.id">
+            <div class="img">
+              <img :src="item.image" :alt="item.title">
+            </div>
+            <div class="info">
+              <div class="title" @click="viewNewsDetail(item.id)">{{ item.title }}</div>
+              <div class="time">{{ item.time }}</div>
+              <div class="desc">{{ item.desc }}</div>
+            </div>
+          </li>
+        </ul>
+
+        <!-- 分页组件 -->
+        <div class="pagination-wrapper" v-if="totalPages > 1">
+          <a-pagination v-model:current="currentPage" :total="newsList.length" :default-page-size="pageSize"
+            @change="handlePageChange" show-quick-jumper />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { RightOutlined } from '@ant-design/icons-vue'
+import { Pagination as APagination } from 'ant-design-vue'
+import { useRouter } from 'vue-router' // 引入 useRouter
+
+const router = useRouter() // 获取路由实例
+// 分页相关数据
+const currentPage = ref(1)
+const pageSize = ref(10)
+// 新闻数据
+const newsList = ref([
+  {
+    id: 1,
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    time: '2021-11-15',
+    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
+    image: '../../../src/assets/images/new1.png'
+  },
+  {
+    id: 2,
+    title: '降本增效新引擎：AI如何实现能源的精细化管理与数智变革？',
+    time: '2021-11-15',
+    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管......',
+    image: '../../../src/assets/images/new2.png'
+  },
+  // 可以继续添加更多新闻数据...
+  ...Array.from({ length: 15 }, (_, i) => ({
+    id: i + 3,
+    title: `新闻标题 ${i + 3}`,
+    time: `2021-11-${16 + i}`,
+    desc: '在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管在能源革命和数字化转型的双重驱动下，能源发展的必然选择。传统的能源管...',
+    image: `../../../src/assets/images/new3.png`
+  }))
+])
+// 计算总页数
+const totalPages = computed(() => Math.ceil(newsList.value.length / pageSize.value))
+
+// 计算当前页的新闻数据
+const paginatedNews = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  const end = start + pageSize.value
+  return newsList.value.slice(start, end)
+})
+
+// 分页切换处理
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  // 滚动到页面顶部
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+// 查看新闻详情
+const viewNewsDetail = (id: number) => {
+  console.log('查看新闻详情，ID:', id)
+  // 这里可以跳转到新闻详情页面
+  router.push(`/news/detail/${id}`)
+}
+
+</script>
+
+<style lang="less" scoped>
+.news {
+
+  .banner {
+    width: 100%;
+    height: 450px;
+    background: url('./../../../assets/images/newbanner.png')100% 100% no-repeat;
+  }
+
+  .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 {
+      ul {
+        padding-top: 60px;
+
+        li {
+          display: flex;
+          margin-bottom: 18px;
+          padding-bottom: 21px;
+          border-bottom: 1px dashed rgba(149, 158, 171, 1);
+          gap: 28px;
+
+          .img {
+            width: 320px;
+            height: 156px;
+            overflow: hidden;
+
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              transition: transform 0.3s ease;
+
+              &:hover {
+                transform: scale(1.3);
+              }
+            }
+          }
+
+          .info {
+            flex: 1;
+
+            .title {
+              font-size: 20px;
+              font-weight: 500;
+              cursor: pointer;
+
+              &:hover {
+                color: rgba(31, 92, 172, 1);
+              }
+            }
+
+            .time {
+              font-size: 12px;
+              font-weight: 400;
+              color: rgba(182, 182, 182, 1);
+              line-height: 18px;
+              padding-bottom: 17px;
+              padding-top: 8px;
+            }
+
+            .desc {
+              font-size: 16px;
+              font-weight: 400;
+              color: rgba(83, 83, 83, 1);
+              display: -webkit-box;
+              -webkit-line-clamp: 2;
+              -webkit-box-orient: vertical;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              line-height: 1.5;
+            }
+          }
+        }
+      }
+
+      // 分页样式
+      .pagination-wrapper {
+        display: flex;
+        justify-content: center;
+        margin-top: 40px;
+
+        :deep(.ant-pagination) {
+          .ant-pagination-item {
+            border-radius: 4px;
+
+            &.ant-pagination-item-active {
+              background-color: rgba(31, 92, 172, 1);
+              border-color: rgba(31, 92, 172, 1);
+
+              a {
+                color: #fff;
+              }
+            }
+          }
+
+          .ant-pagination-prev,
+          .ant-pagination-next {
+            border-radius: 4px;
+          }
+
+          .ant-pagination-options-quick-jumper {
+            margin-left: 20px;
+
+            input {
+              border-radius: 4px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/pc/style/index.less

@@ -172,6 +172,7 @@ li {
         font-size: 40px;
         color: rgba(31, 92, 172, 1);
         padding-left:16px;
+        font-weight:700;
       }
     }
 
@@ -277,42 +278,544 @@ li {
 }
 // 第三屏：AI+智能节能技术
 .three-screen{
-  min-height: 100vh;
+  // min-height: 100vh;
-  margin-bottom:109px;
   background:url("../../../assets/images/threeSceenbg.png") no-repeat center center;
   position: relative;
   background-size: cover;
   z-index: 1;
   background-attachment: fixed;//背景图片相对于浏览器窗口固定，不随页面滚动而移动
   .container {
-    max-width: 1200px;
+    max-width: 1660px;
     margin: 0 auto;
+    padding-top:113px;
+    padding-bottom:117px;
   }
-}
+  //标题 描述样式
-.other-screens {
+  .content-section {
-  min-height: 100vh;
-  padding: 80px 0;
-  background: white;
-
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-  }
-
-  .news-section {
-    h2 {
-      font-size: 36px;
     text-align: center;
-      margin-bottom: 40px;
+    margin-bottom: 60px;
-      color: #013249;
+
+    h2 {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        font-size: 40px;
+        color: #ffffff;
+        padding-left:16px;
+        font-weight:700;
+      }
     }
 
-    .news-list {
+    p {
+      font-size: 20px;
+      color: #ffffff;
       max-width: 800px;
       margin: 0 auto;
     }
   }
+  // swiper滑动样式
+  .carousel-section {
+    position: relative;
+    padding: 30px 0 50px;
+    
+    :deep(.ai-tech-carousel) {
+      padding: 20px 0 30px;
+      
+      .swiper-wrapper {
+        align-items: center;
+        display: flex;
+        height: 477px;
+      }
+      
+      .swiper-slide {
+        transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+        opacity: 0.6;
+        transform: scale(0.7);
+        &.swiper-slide-active {
+          opacity: 1;
+          transform: scale(1);
+          z-index: 3;
+          width: 477px !important;
+          
+          .slide-content {
+            .slide-inner {
+              padding: 38px !important;
+            }
+          }
+        }
+        
+        &.swiper-slide-next,
+        &.swiper-slide-prev {
+          opacity: 0.8;
+          transform: scale(0.845);
+          z-index: 2;
+          width: 377px !important;
+        }
+        
+        &.swiper-slide-next + .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev),
+        &:nth-child(n + 3 of .swiper-slide-prev) {
+          opacity: 0.7;
+          transform: scale(0.7);
+          z-index: 1;
+        }
+      }
+    }
+    
+    .slide-content {
+      cursor: pointer;
+      perspective: 1000px;
+      
+      .slide-inner {
+        border-radius: 16px;
+        overflow: hidden;
+        height: 100%;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+        transition: all 0.3s ease;
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        padding: 25px 25px;
+        
+        &:hover {
+          transform: translateY(-8px);
+          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
+        }
+      }
+      
+      img {
+        width: 100%;
+        height: 65%;
+        object-fit: cover;
+        display: block;
+      }
+      
+      .slide-info {
+        padding: 25px 0 47px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        
+        h3 {
+          font-size: 40px;
+          font-weight: 400;
+          color: rgba(25, 50, 81, 1);
+          text-align: center;
+          margin-bottom: 7px;
+        }
+        
+        p {
+          margin: 0;
+          font-size: 20px;
+          font-weight: 400;
+          text-align: center;
+          color: rgba(119, 146, 178, 1);
+        }
+      }
+      
+      &.active {
+        .slide-inner {
+          // box-shadow: 0 15px 40px rgba(31, 92, 172, 0.4);
+          // border: 2px solid #1f5cac;
+        }
+      }
+    }
+  }
+}
+// 第四屏 应用场景
+.screens-four{
+  background:#ffffff;
+  padding-top:109px;
+  padding-bottom:80px;
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ //标题 描述样式
+  .content-section {
+    text-align: center;
+
+    h2 {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        font-size: 40px;
+        color: rgba(31, 92, 172, 1);
+        padding-left:16px;
+        font-weight:700;
+      }
+    }
+    .desc{
+      padding-bottom:46px;
+    }
+    p {
+      font-size: 18px;
+      color: rgba(153, 153, 153, 1);
+      max-width: 800px;
+      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;
+  }
+
+}
+// 第五屏 合作伙伴
+.partner-screens{
+  min-height: 100vh;
+  background:url("../../../assets/images/partner.png") no-repeat center center;
+   position: relative;
+  background-size: cover;
+   padding-top:63px;
+  padding-bottom:80px;
+  z-index: 1;
+  background-attachment: fixed;//背景图片相对于浏览器窗口固定，不随页面滚动而移动
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+ //标题 描述样式
+  .content-section {
+    text-align: center;
+    h2 {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        font-size: 40px;
+        color: rgba(31, 92, 172, 1);
+        padding-left:16px;
+        font-weight:700;
+      }
+    }
+
+    p {
+      font-size: 18px;
+      color: rgba(153, 153, 153, 1);
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    // 荣誉资质
+    h4{
+      color: rgba(31, 92, 172, 1);
+      font-size: 24px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-top:31px;
+      line{
+        width:16px;
+        height:2px;
+        background: rgba(31, 92, 172, 1);
+        margin:0 13px;
+      }
+    }
+    .partner-title{
+      padding-top:0;
+    }
+    .partner-img{
+      display: flex;
+      justify-content: center;
+      margin-bottom:76px;
+      p{
+        width: 336px;
+        height: 164px;
+        opacity: 1;
+        background: url("../../../assets/images/certification.png");
+        position: relative;
+        span{
+          color: #ffffff;
+          font-size: 28px;
+          font-weight: 700;
+          display: block;
+          position: absolute;
+          bottom:31px;
+          left:0;
+          right:0;
+        }
+      }
+    }
+   
+  }
+  // 合作企业图
+  .partnerImgAll{
+    max-width:1553px;
+    margin:0 auto;
+    img{
+      width: 100%;
+    }
+  }
+}
+// 第六屏样式
+.other-screens {
+  padding: 74px 0 40px;
+  background: white;
+  .container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0;
+  }
+    //标题 描述样式
+  .content-section {
+    text-align: center;
+    margin-bottom: 60px;
+    h2 {
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      span{
+        font-size: 40px;
+        color: rgba(31, 92, 172, 1);
+        padding-left:16px;
+        font-weight:700;
+      }
+    }
+    .desc {
+      font-size: 20px;
+      color: rgba(153, 153, 153, 1);
+      margin: 0 auto 32px;
+    }
+    // 新闻内容
+    .content{
+      display: flex;
+      justify-content: space-between;
+      gap:60px;
+      .lt{
+        text-align: left;
+        .img{
+          width:520px;
+          height:282px;
+          overflow: hidden;
+          img {
+            transition: transform 0.3s ease;
+            cursor: pointer;
+            &:hover {
+              transform: scale(1.1); // 放大 10%
+            }
+          }
+        }
+        .title,.nr{
+          margin-block-start: 0em;
+          margin-block-end: 0em;
+        }
+        .title{
+          font-size: 18px;
+          font-weight: 400;
+          color:#000000;
+          padding-top:16px;
+          text-align: left;
+          cursor: pointer;
+          &:hover {
+            color: rgba(68, 119, 185, 1);
+          }
+        }
+        .nr{
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(102, 102, 102, 1);
+          line-height: 20.27px;
+          padding-top:12px;
+          cursor: pointer;
+          &:hover {
+            color: rgba(68, 119, 185, 1);
+          }
+        }
+      }
+      .rt{
+        ul li{
+          display: flex;
+          align-items: center;
+          padding:24px 29px 24px 16px;
+        }
+        li:first-child{
+          background: rgba(248, 248, 248, 1);
+          .newsrt{
+            h4{
+              color: rgba(49, 112, 197, 1);
+              font-size: 18px;
+              font-weight: 400;
+            }
+            p{
+              font-size: 14px;
+              font-weight: 400;
+              color: rgba(165, 165, 165, 1);
+            }
+          }
+        }
+        .newslt{
+          border-right: 1px solid rgba(234, 234, 234, 1);
+          padding-right:14px;
+          width:68px;
+          h4{
+            font-size: 24px;
+            font-weight: 400;
+            letter-spacing: 1.44px;
+            color: rgba(102, 102, 102, 1);
+            text-align: right;
+          }
+          p{
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(172, 172, 172, 1);
+          }
+        }
+        .newsrt{
+          padding:0 0 0 16px;
+          text-align: left;
+          h4{
+            font-size: 18px;
+            font-weight: 400;
+            color: rgba(51, 51, 51, 1);
+            &:hover{
+              color: rgba(49, 112, 197, 1);
+            }
+          }
+          p{
+            font-size: 14px;
+            font-weight: 400;
+            color: rgba(165, 165, 165, 1);
+            margin-bottom:0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;// 不换行
+          }
+        }
+
+      }
+    }
+  }
+
+
 }
 
 // 动画相关样式