add:网站新闻业页面，首页增加

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

@@ -110,22 +110,33 @@
         </div>
         <!-- 横向循环焦点图展示 轮播图 -->
         <div class="carousel-section">
-          <swiper :modules="[Autoplay, Pagination]" :slides-per-view="3.5" :space-between="20" :loop="true" :autoplay="{
+          <swiper :centered-slides="true" :loop="true" :slides-per-view="5" :space-between="-90" :autoplay="false"
-            delay: 3000,
+            :breakpoints="{
-            disableOnInteraction: false,
+              '768': {
-            pauseOnMouseEnter: true
+                slidesPerView: 1.5,
-          }" @slideChange="onThirdScreenSlideChange" @autoplayTimeLeft="onThirdScreenAutoplayTimeLeft"
+                spaceBetween: -15
-            class="ai-tech-carousel">
+              },
+              '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-content" @click="() => selectItem(index)" :class="{ active: index === currentIndex }">
-                <img :src="item.image" :alt="item.title" />
+                <div class="slide-inner">
-                <div class="slide-info">
+                  <img :src="item.image" :alt="item.title" />
-                  <h3>{{ item.title }}</h3>
+                  <div class="slide-info">
-                  <p>{{ item.description }}</p>
+                    <h3>{{ item.title }}</h3>
+                    <p>{{ item.description }}</p>
+                  </div>
                 </div>
               </div>
             </swiper-slide>
-
           </swiper>
         </div>
       </div>
@@ -236,10 +247,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { DownOutlined } from '@ant-design/icons-vue'
 import { Swiper, SwiperSlide } from 'swiper/vue';
-import { Autoplay, Navigation, Pagination } from 'swiper/modules';
+import { Autoplay, Pagination } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/pagination';
 // 静态导入所有图片(AI智能节能技术)
@@ -287,68 +298,83 @@ const observer = ref<IntersectionObserver | null>(null)
 const carouselItems = ref([
   {
     image: carouse1,
-    title: '智能能源管理',
+    title: 'AI+空气压缩',
     description: '通过AI技术实现能源使用优化'
   },
   {
     image: carouse2,
-    title: '碳足迹追踪',
+    title: 'AI+监控',
     description: '全生命周期碳排放监控与分析'
   },
   {
     image: carouse3,
-    title: '绿色工厂解决方案',
+    title: 'AI+区域能源站',
     description: '工业4.0背景下的低碳生产模式'
   },
   {
     image: carouse4,
-    title: '城市能源互联网',
+    title: 'AI+智慧照明',
     description: '构建智慧城市的能源生态系统'
   },
   {
     image: carouse5,
-    title: '可再生能源集成',
+    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: '绿色酒店123',
+    title: '绿色酒店',
     hovered: false,
     description: '创建绿色酒店是社会进步的需要。在建设绿色酒店的过程中，采用科学的方法对酒店进行绿色管理。'
   },
-  {
+
-    image: appScene2,
-    companyName: '零碳园区',
-    title: '零碳园区2',
-    hovered: false,
-    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
-  },
   {
     image: appScene3,
-    companyName: '商业综合体2',
+    companyName: '商业综合体',
     title: '商业综合体',
     hovered: false,
     description: '介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。介绍介绍商业综合体场景的内容介绍商业综合介绍商业综合体介绍，商业综合体介绍商业综合体体。'
   },
+  {
+    image: appScene2,
+    companyName: '零碳园区',
+    title: '零碳园区',
+    hovered: false,
+    description: '通过应用清洁能源、提升能源利用效率、优化碳排放管理等技术手段，实现园区内碳排放总量抵消的现代化产业园区'
+  },
   {
     image: appScene4,
-    companyName: '绿色工厂2',
+    companyName: '绿色工厂',
     title: '绿色工厂',
     hovered: false,
     description: '绿色工厂是绿色制造的实施主体，属于绿色制造体系的核心支撑单元，侧重于生产过程的绿色化。'
@@ -363,34 +389,6 @@ const carouselSeneceList = ref([
 ])
 
 
-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'
-        })
-      }
-    }
-  })
-}
-
-
 
 
 // 滚动到下一屏

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>