From f0e3c3c02e397c170b7e3fb1ee3e30f275a317be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B2=81=E6=B4=AA=E9=9C=9E?= <luhongxia@zcloudchina.com>
Date: Thu, 29 Jan 2026 17:54:48 +0800
Subject: [PATCH] 221

---
 nuxt-demo/app/components/AppHead/index.vue |   2 +-
 nuxt-demo/app/pages/about/index.vue        |   7 +
 nuxt-demo/app/pages/new/index.vue          | 189 +++++++++++++++++++++
 3 files changed, 197 insertions(+), 1 deletion(-)
 create mode 100644 nuxt-demo/app/pages/new/index.vue

diff --git a/nuxt-demo/app/components/AppHead/index.vue b/nuxt-demo/app/components/AppHead/index.vue
index d21c141..8751e13 100644
--- a/nuxt-demo/app/components/AppHead/index.vue
+++ b/nuxt-demo/app/components/AppHead/index.vue
@@ -27,7 +27,7 @@
             </span>
           </li>
           <li><NuxtLink to="">解决方案</NuxtLink></li>
-          <li><NuxtLink to="">新闻资讯</NuxtLink></li>
+          <li><NuxtLink to="/new">新闻资讯</NuxtLink></li>
           <li><NuxtLink to="">合作案例</NuxtLink></li>
           <li><NuxtLink to="">服务流程</NuxtLink></li>
           <li><NuxtLink to="/about">关于秦安</NuxtLink></li>
diff --git a/nuxt-demo/app/pages/about/index.vue b/nuxt-demo/app/pages/about/index.vue
index 18bdb16..fb3e7fb 100644
--- a/nuxt-demo/app/pages/about/index.vue
+++ b/nuxt-demo/app/pages/about/index.vue
@@ -568,6 +568,13 @@ const modules = [Autoplay, Pagination, Navigation];
       border-radius: 4px;
       align-items: center;
       justify-content: space-around;
+      transition: box-shadow 0.5s ease;
+      cursor: default;
+
+      &:hover{
+        box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15);
+      }
+
       .left{
         .list{
 
diff --git a/nuxt-demo/app/pages/new/index.vue b/nuxt-demo/app/pages/new/index.vue
new file mode 100644
index 0000000..31f6192
--- /dev/null
+++ b/nuxt-demo/app/pages/new/index.vue
@@ -0,0 +1,189 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>新闻中心</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="top">
+        <div class="wrap">
+          <div class="list active">全部</div>
+          <div class="list">安全要闻</div>
+          <div class="list">政府发文</div>
+        </div>
+      </div>
+      <div class="new_main">
+        <div class="wrap">
+          <div class="item">
+            <div class="img">
+              <img src="@/assets/images/img2.png" alt=""/>
+            </div>
+            <div class="info">
+              <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
+              <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
+            </div>
+          </div>
+        </div>
+        <div class="wrap">
+          <div class="item">
+            <div class="img">
+              <img src="@/assets/images/img2.png" alt=""/>
+            </div>
+            <div class="info">
+              <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
+              <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
+            </div>
+          </div>
+        </div>
+        <div class="wrap">
+          <div class="item">
+            <div class="img">
+              <img src="@/assets/images/img2.png" alt=""/>
+            </div>
+            <div class="info">
+              <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
+              <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
+            </div>
+          </div>
+        </div>
+        <div class="wrap">
+          <div class="item">
+            <div class="img">
+              <img src="@/assets/images/img2.png" alt=""/>
+            </div>
+            <div class="info">
+              <div class="title">喜报·我司荣获2025“数据要素X”大赛河北分赛三等奖</div>
+              <div class="text">4月10日，2025年“数据要素X”大赛启动仪式在雄安新区成功举办。 河北秦安安全科技股份有限公司申报的“危化智融-多模态智能风险管控决策平台”项目，针对危化行业长期存在的“数据割裂、响应延迟、决策偏差”三大核心痛点，构建了多模型融合的安全生产决策体系。</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2026-10-19</span> </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppFoot/>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 494px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 230px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 100%;
+
+    .top {
+      width: 100%;
+      height: 60px;
+      background: #ffffff;
+
+      .wrap {
+        width: 1400px;
+        margin: 0 auto;
+        display: flex;
+
+        .list {
+          font-size: 16px;
+          line-height: 60px;
+          cursor: pointer;
+          position: relative;
+          margin-right: 40px;
+
+          &.active {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+
+          &:before {
+            content: "";
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            border-bottom: 3px solid #006aff;
+            width: 100%;
+            opacity: 0;
+          }
+          &:hover {
+            color: #006aff;
+            &:before {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+    .new_main{
+      width: 1400px;
+      margin: 20px auto;
+      .wrap{
+        width: 100%;
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        .item{
+          display: flex;
+          .info{
+            padding-left: 20px;
+            .title{
+              font-size: 18px;
+              color: #222222;
+            }
+            .text{
+              font-size: 14px;
+              color: #696969;
+              margin-top: 20px;
+            }
+            .time{
+              color: #999999;
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              span{
+                padding-left: 5px;
+              }
+            }
+          }
+        }
+        &:hover{
+          box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
+        }
+      }
+    }
+  }
+}
+
+
+</style>