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

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/views/pc/index.vue

@@ -1,33 +1,456 @@
-<!-- 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 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 :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="slide-info">
+                  <h3>{{ item.title }}</h3>
+                  <p>{{ item.description }}</p>
+                </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, 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([
+  {
+    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: '智能能源管理',
+    description: '通过AI技术实现能源使用优化'
+  },
+  {
+    image: carouse2,
+    title: '碳足迹追踪',
+    description: '全生命周期碳排放监控与分析'
+  },
+  {
+    image: carouse3,
+    title: '绿色工厂解决方案',
+    description: '工业4.0背景下的低碳生产模式'
+  },
+  {
+    image: carouse4,
+    title: '城市能源互联网',
+    description: '构建智慧城市的能源生态系统'
+  },
+  {
+    image: carouse5,
+    title: '可再生能源集成',
+    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)
+
+// 选择图片
+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 = () => {
+  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/style/index.less

@@ -172,6 +172,7 @@ li {
         font-size: 40px;
         color: rgba(31, 92, 172, 1);
         padding-left:16px;
+        font-weight:700;
       }
     }
 
@@ -278,7 +279,6 @@ li {
 // 第三屏：AI+智能节能技术
 .three-screen{
   min-height: 100vh;
-  margin-bottom:109px;
   background:url("../../../assets/images/threeSceenbg.png") no-repeat center center;
   position: relative;
   background-size: cover;
@@ -287,32 +287,477 @@ li {
   .container {
     max-width: 1200px;
     margin: 0 auto;
+    padding-top:113px;
+    padding-bottom:117px;
   }
-}
-.other-screens {
-  min-height: 100vh;
-  padding: 80px 0;
-  background: white;
+  //标题 描述样式
+  .content-section {
+    text-align: center;
+    margin-bottom: 60px;
 
-  .container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-  }
-
-  .news-section {
     h2 {
-      font-size: 36px;
-      text-align: center;
-      margin-bottom: 40px;
-      color: #013249;
+      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;
     }
   }
+  .carousel-section{
+    .carousel-wrapper{
+      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{
+  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;// 不换行
+          }
+        }
+
+      }
+    }
+  }
+
+
 }
 
 // 动画相关样式