add:内容增加

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/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

@@ -278,14 +278,14 @@ li {
 }
 // 第三屏：AI+智能节能技术
 .three-screen{
-  min-height: 100vh;
+  // min-height: 100vh;
   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;
@@ -315,57 +315,115 @@ li {
       margin: 0 auto;
     }
   }
-  .carousel-section{
+  // swiper滑动样式
-    .carousel-wrapper{
+  .carousel-section {
-      display: flex;
-    }
-  }
-  // swiper滑动
-  .ai-tech-carousel {
     position: relative;
-    padding-bottom: 50px; // 为进度条留出空间
+    padding: 30px 0 50px;
     
-    :deep(.swiper-slide) {
+    :deep(.ai-tech-carousel) {
-      padding: 0 10px;
+      padding: 20px 0 30px;
       
-      .slide-content {
+      .swiper-wrapper {
-        border-radius: 8px;
+        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;
-        cursor: pointer;
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        padding: 25px 25px;
         
-        &.active {
+        &:hover {
-          transform: scale(1.05);
+          transform: translateY(-8px);
-          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
         }
+      }
       
-        img {
+      img {
-          width: 100%;
+        width: 100%;
-          height: auto;
+        height: 65%;
-          display: block;
+        object-fit: cover;
-        }
+        display: block;
+      }
       
-        .slide-info {
+      .slide-info {
-        padding: 15px;
+        padding: 25px 0 47px;
-        background: #f8f9fa;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         
         h3 {
-          margin: 0 0 10px 0;
+          font-size: 40px;
-          font-size: 18px;
+          font-weight: 400;
-          color: #1f2937;
+          color: rgba(25, 50, 81, 1);
+          text-align: center;
+          margin-bottom: 7px;
         }
         
         p {
           margin: 0;
-          font-size: 14px;
+          font-size: 20px;
-          color: #6b7280;
+          font-weight: 400;
-          line-height: 1.5;
+          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;