diff --git a/app/assets/images/down.png b/app/assets/images/down.png
new file mode 100644
index 0000000..be139bb
Binary files /dev/null and b/app/assets/images/down.png differ
diff --git a/app/components/AppHead/index.vue b/app/components/AppHead/index.vue
index b42817a..e69142b 100644
--- a/app/components/AppHead/index.vue
+++ b/app/components/AppHead/index.vue
@@ -37,6 +37,8 @@
           <li :class="{ active: isActive('/public') }"><NuxtLink to="/public">网上公开</NuxtLink></li>
           <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
           <li :class="{ active: isActive('/job') }"><NuxtLink to="/job">人力资源</NuxtLink></li>
+          <li :class="{ active: isActive('/down') }"><NuxtLink to="/down">资料下载</NuxtLink></li>
+          <li :class="{ active: isActive('/education') }"><NuxtLink to="/education">教育培训</NuxtLink></li>
           <li
             :class="{ active: isActive('/product') }"
             @mouseenter="isAboutHovered = true"
@@ -69,7 +71,6 @@ import { ref, onMounted, onUnmounted } from "vue";
 
 const isProductHovered = ref(false);
 const isAboutHovered = ref(false);
-const isRuleHovered = ref(false);
 const isScrolled = ref(false);
 const route = useRoute();
 
@@ -102,17 +103,11 @@ const proList = [
 ];
 const AboutList=[
   { name: "公司简介", path: "/about" },
-  { name: "领导致词", path: "/about/leaderSpeech" },
-  { name: "发展战略", path: "/about/developmentStrategy" },
-  { name: "组织架构", path: "/about/organizationalStructure" },
-  { name: "资质荣誉", path: "/about/honor" },
-  { name: "发展历程", path: "/about/developmentHistory" },
-];
-const RuleList= [
-  { name: "法律法规", path: "/rule/legal" },
-  { name: "政府规章", path: "/rule/government" },
-  { name: "规范文件", path: "/rule/specification" },
-  { name: "技术标准", path: "/rule/technicalStandards" },
+  { name: "领导致词", path: "/about/about?tab=0" },
+  { name: "发展战略", path: "/about/about?tab=1" },
+  { name: "组织架构", path: "/about/about?tab=2" },
+  { name: "资质荣誉", path: "/about/about?tab=3" },
+  { name: "发展历程", path: "/about/about?tab=4" },
 ];
 </script>
 <style scoped lang="scss">
@@ -130,7 +125,7 @@ const RuleList= [
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 999;
+  z-index: 99999;
   transition: all 0.3s ease;
 
   &.scrolled{
@@ -138,6 +133,7 @@ const RuleList= [
     background: #ffffff;
     border-bottom: 1px solid #eeeeee;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    z-index: 99999;
 
     .nav_list{
       .num{
diff --git a/app/pages/about/about.vue b/app/pages/about/about.vue
new file mode 100644
index 0000000..8dd7976
--- /dev/null
+++ b/app/pages/about/about.vue
@@ -0,0 +1,172 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>关于秦安</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="left">
+        <div class="top">关于秦安</div>
+        <div class="main">
+          <div
+            v-for="(item, index) in aboutItems"
+            :key="index"
+            class="list"
+            :class="{ active: activeIndex === index }"
+            @click="activeIndex = index">
+            {{item}}
+          </div>
+        </div>
+      </div>
+      <div class="right_main">
+        <div v-if="activeIndex === 0">
+          <div>
+            <p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>
+            <p>河北秦安安全科技股份有限公司成立于2003年，经过十多年的发展，形成了安全评价评估、标准化评审、咨询、职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局。公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市，成为河北省首家挂牌新三板的安全技术服务综合提供商。</p>
+            <p>安全生产是社会发展和国家稳定的坚强基石，事关人民生命财产安全和社会和谐稳定大局，受到党中央、国务院的高度重视。党的十九大报告中对安全生产提出了明确要求，把安全生产作为当前人民群众最关心、最直接、最现实的问题之一，采取了一系列重大举措加强安全生产工作。</p>
+            <p>作为一家专业从事安全生产服务的企业，我们深知责任重大。企业需要安全，安全来自专业。为了提升安全技术水平，提升核心竞争力，持续提升精益化服务能力，公司加强开展技术研发、管理创新、产品创新、模式创新，不断提升自我健康发展能力，全方位为企业提供卓越的安全生产风险整体解决方案。</p>
+            <p>同时公司积极适应外部环境变化，强化战略引领，以创新机制激发公司内生动力，探索多种资本相互促进、共同发展，先后与燕赵财产保险有限公司、河北环境工程学院签署战略合作协议，拓展新的合作模式。投资设立大连秦宇科技有限公司，开展了跨领域、跨地域的合作方式。</p>
+            <p>作为一家富有社会责任感的企业，在自身不断发展壮大的同时，时刻不忘企业所应承担的社会责任，坚持实现对社会、员工共同发展的理念，促进公司与社会的协调、和谐与可持续发展。</p>
+            <p>百舸争流千帆竞，乘风破浪待远航。伴随着中国安全技术服务行业的飞速发展，公司坚持"实现企业本质安全，与企业共享安全"的发展理念，"科学、严谨、真实、公正"的质量方针，将继续成为安全生产行业的一盏引航灯，为安全生产和人民生命财产保驾护航！</p>
+            <p>在此，向多年来给予河北秦安大力关心、支持和帮助的有关部门、广大客户和社会各界朋友表示衷心的感谢！我们愿与社会各界朋友精诚合作，携手并进，广泛合作，互信互利，在新的征程中共同创造更加美好的明天！</p>
+          </div>
+        </div>
+        <div v-if="activeIndex === 1">
+          <div>
+            <p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>
+
+
+            <p>河北秦安安全科技股份有限公司成立于2003年，经过十多年的发展，形成了安全评价评估、标准化评审、咨询、职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局。公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市，成为河北省首家挂牌新三板的安全技术服务综合提供商。</p>
+
+            <p>安全生产是社会发展和国家稳定的坚强基石，事关人民生命财产安全和社会和谐稳定大局，受到党中央、国务院的高度重视。党的十九大报告中对安全生产提出了明确要求，把安全生产作为当前人民群众最关心、最直接、最现实的问题之一，采取了一系列重大举措加强安全生产工作。</p>
+            <p>
+              作为一家专业从事安全生产服务的企业，我们深知责任重大。企业需要安全，安全来自专业。为了提升安全技术水平，提升核心竞争力，持续提升精益化服务能力，公司加强开展技术研发、管理创新、产品创新、模式创新，不断提升自我健康发展能力，全方位为企业提供卓越的安全生产风险整体解决方案。2017年，公司受邀参与编制了河北省《工业企业可燃气体和有毒气体检测报警系统检查检测规范》、《危险场所电气防爆安全检测技术规范》、《金属非金属矿山在用危险性较大设备设施安全检测检验目录》等行业标准，安全技术影响力持续扩大，成为河北省安全技术服务行业的重要引导力之一。
+            </p><p>
+              同时公司积极适应外部环境变化，强化战略引领，以创新机制激发公司内生动力，探索多种资本相互促进、共同发展，先后与燕赵财产保险有限公司、河北环境工程学院签署战略合作协议，拓展新的合作模式。投资设立大连秦宇科技有限公司，开展了跨领域、跨地域的合作方式。
+            </p><p>
+              作为一家富有社会责任感的企业，在自身不断发展壮大的同时，时刻不忘企业所应承担的社会责任，坚持实现对社会、员工共同发展的理念，促进公司与社会的协调、和谐与可持续发展。
+            </p><p>
+              百舸争流千帆竞，乘风破浪待远航。伴随着中国安全技术服务行业的飞速发展，公司坚持“实现企业本质安全，与企业共享安全”的发展理念，“科学、严谨、真实、公正”的质量方针，将继续成为安全生产行业的一盏引航灯，为安全生产和人民生命财产保驾护航！
+            </p><p>
+              在此，向多年来给予河北秦安大力关心、支持和帮助的有关部门、广大客户和社会各界朋友表示衷心的感谢！我们愿与社会各界朋友精诚合作，携手并进，广泛合作，互信互利，在新的征程中共同创造更加美好的明天！
+            </p>
+          </div>
+        </div>
+        <div v-if="activeIndex === 1">
+          <p>发展战略</p>
+        </div>
+        <div v-if="activeIndex === 2">
+          <p>组织架构</p>
+        </div>
+        <div v-if="activeIndex === 3">
+          <p>资质荣誉</p>
+        </div>
+        <div v-if="activeIndex === 4">
+          <p>发展历程</p>
+        </div>
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const route = useRoute();
+const aboutItems=["领导致词","发展战略","组织架构","资质荣誉","发展历程"];
+const activeIndex = ref(Number(route.query.tab) || 0);
+
+// 监听路由变化，确保返回时正确高亮
+watch(() => route.query.tab, newTab => {
+  activeIndex.value = Number(newTab) || 0;
+});
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 320px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 135px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 1400px;
+    margin: 20px auto;
+    display: flex;
+    .left{
+      width: 250px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 4px;
+      .top{
+        width: 100%;
+        background: #3f79ff;
+        text-align: center;
+        color: #ffffff;
+        line-height: 40px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+      }
+      .main{
+        padding: 10px;
+        .list{
+          padding: 10px;
+          font-size: 14px;
+          cursor: pointer;
+          color: #222222;
+          margin-bottom: 5px;
+          border-radius: 4px;
+          border-left: 4px solid #ffffff;
+          &:hover{
+            background: #e4ecff;
+            border-left: 4px solid #3f79ff;
+            color: #3f79ff;
+          }
+        }
+        .active{
+          background: #e4ecff;
+          border-left: 4px solid #3f79ff;
+          color: #3f79ff;
+        }
+        &:last-child{
+          border-bottom: none;
+        }
+      }
+    }
+    .right_main{
+      flex: 1;
+      margin-left: 20px;
+      background: #ffffff;
+      padding: 10px;
+      color: #333333;
+      line-height: 2;
+      text-indent: 2rem;
+      min-height: 500px;
+
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/about/developmentHistory.vue b/app/pages/about/developmentHistory.vue
deleted file mode 100644
index 98cbb30..0000000
--- a/app/pages/about/developmentHistory.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>发展历程</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/about/developmentStrategy.vue b/app/pages/about/developmentStrategy.vue
deleted file mode 100644
index 5fd534c..0000000
--- a/app/pages/about/developmentStrategy.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>发展战略</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/about/honor.vue b/app/pages/about/honor.vue
deleted file mode 100644
index ee0138a..0000000
--- a/app/pages/about/honor.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>资质荣誉</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/about/index.vue b/app/pages/about/index.vue
index bfbc3ed..50ac02e 100644
--- a/app/pages/about/index.vue
+++ b/app/pages/about/index.vue
@@ -260,12 +260,12 @@ const modules = [Autoplay, Pagination, Navigation];
 .container{
   .banner{
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/about_banner.png") no-repeat top center;
     .banner_main{
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2{
         font-size: 60px;
         color: #014ea0;
diff --git a/app/pages/about/leaderSpeech.vue b/app/pages/about/leaderSpeech.vue
deleted file mode 100644
index 773346b..0000000
--- a/app/pages/about/leaderSpeech.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>领导致词</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/about/organizationalStructure.vue b/app/pages/about/organizationalStructure.vue
deleted file mode 100644
index 4f3e0ef..0000000
--- a/app/pages/about/organizationalStructure.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>组织架构</div>
-</template>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/app/pages/case/details.vue b/app/pages/case/details.vue
index e49fcce..5c51ce8 100644
--- a/app/pages/case/details.vue
+++ b/app/pages/case/details.vue
@@ -56,12 +56,12 @@ const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保",
   background: #f6f8fa;
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/case_banner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/case/index.vue b/app/pages/case/index.vue
index 91247c4..d868ead 100644
--- a/app/pages/case/index.vue
+++ b/app/pages/case/index.vue
@@ -102,12 +102,12 @@ const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保",
   background: #f6f8fa;
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/case_banner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/down/index.vue b/app/pages/down/index.vue
new file mode 100644
index 0000000..f55c41c
--- /dev/null
+++ b/app/pages/down/index.vue
@@ -0,0 +1,168 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>资料下载</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="new_main">
+        <div class="wrap" >
+          <div class="item">
+            <div class="info">
+              <div class="title">《应急管理部行政复议和行政应诉工作办法》中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2024-04-15</span> </div>
+            </div>
+            <div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
+          </div>
+        </div>
+
+        <div class="wrap" >
+          <div class="item">
+            <div class="info">
+              <div class="title">《应急管理部行政复议和行政应诉工作办法》中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2024-04-15</span> </div>
+            </div>
+            <div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
+          </div>
+        </div>
+
+        <div class="wrap" >
+          <div class="item">
+            <div class="info">
+              <div class="title">《应急管理部行政复议和行政应诉工作办法》中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
+              <div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/>   <span>2024-04-15</span> </div>
+            </div>
+            <div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+  .banner {
+    width: 100%;
+    height: 320px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 135px;
+      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;
+      a{
+        text-decoration: none;
+      }
+      .wrap{
+        width: 100%;
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        .item{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .info{
+
+            .title{
+              font-size: 18px;
+              color: #222222;
+            }
+
+            .time{
+              color: #999999;
+              margin-top: 10px;
+              display: flex;
+              align-items: center;
+              margin-left: 10px;
+              span{
+                padding-left: 5px;
+              }
+            }
+          }
+          .down{
+            cursor: pointer;
+          }
+        }
+        &:hover{
+          box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
+        }
+      }
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/education/index.vue b/app/pages/education/index.vue
new file mode 100644
index 0000000..826d146
--- /dev/null
+++ b/app/pages/education/index.vue
@@ -0,0 +1,110 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>教育培训</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="new_main">
+        <div>教育培训内容</div>
+
+      </div>
+    </div>
+
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+  .banner {
+    width: 100%;
+    height: 320px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 135px;
+      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;
+      background: #ffffff;
+      padding: 20px;
+      box-sizing: border-box;
+      min-height: 500px;
+      a{
+        text-decoration: none;
+      }
+
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 17bfc9e..373c5f9 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -469,7 +469,7 @@ body{
   margin: 0;
   .banner{
     width: 100%;
-    height: 716px;
+    height: 600px;
     text-align: center;
     position: relative;
 
@@ -662,7 +662,7 @@ body{
           padding-left: 20px;
           .title{
             text-align: left;
-            font-size: 18px;
+            font-size: 16px;
           }
           .time{
             color: #999999;
@@ -670,7 +670,7 @@ body{
           }
           .text{
             color: #434343;
-            font-size: 16px;
+            font-size: 14px;
           }
         }
       }
diff --git a/app/pages/job/index.vue b/app/pages/job/index.vue
index f701e0f..1eb698a 100644
--- a/app/pages/job/index.vue
+++ b/app/pages/job/index.vue
@@ -4,7 +4,7 @@
     <AppHead/>
     <div class="banner">
       <div class="banner_main">
-        <h2>网上公开</h2>
+        <h2>人力资源</h2>
         <p>安全第一 预防为主 综合治理</p>
       </div>
     </div>
@@ -52,12 +52,12 @@ const activeIndex = ref(0);
 
   .banner {
     width: 100%;
-    height: 400px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 180px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
@@ -89,24 +89,29 @@ const activeIndex = ref(0);
         font-weight: bold;
       }
       .main{
+        padding: 10px;
         .list{
-          border-bottom: 1px solid #eeeeee;
-          padding: 10px 5px;
+          padding: 10px;
           font-size: 14px;
           cursor: pointer;
           color: #222222;
+          margin-bottom: 5px;
+          border-radius: 4px;
+          border-left: 4px solid #ffffff;
           &:hover{
-            background: #cddcff;
+            background: #e4ecff;
+            border-left: 4px solid #3f79ff;
+            color: #3f79ff;
           }
-
         }
         .active{
-          background: #cddcff;
+          background: #e4ecff;
+          border-left: 4px solid #3f79ff;
+          color: #3f79ff;
         }
         &:last-child{
           border-bottom: none;
         }
-
       }
     }
     .right_main{
diff --git a/app/pages/new/details.vue b/app/pages/new/details.vue
index 11fe29e..fd51a03 100644
--- a/app/pages/new/details.vue
+++ b/app/pages/new/details.vue
@@ -54,12 +54,12 @@
   background: #f6f8fa;
 .banner {
   width: 100%;
-  height: 400px;
+  height: 320px;
   background: url("@/assets/images/newbanner.png") no-repeat top center;
   .banner_main {
     width: 1400px;
     margin: 0 auto;
-    padding-top: 180px;
+    padding-top: 135px;
     h2 {
       font-size: 60px;
       color: #ffffff;
diff --git a/app/pages/new/index.vue b/app/pages/new/index.vue
index 405ace1..a50c998 100644
--- a/app/pages/new/index.vue
+++ b/app/pages/new/index.vue
@@ -92,12 +92,12 @@
 
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/product/regulatory.vue b/app/pages/product/regulatory.vue
index 2450338..8a72453 100644
--- a/app/pages/product/regulatory.vue
+++ b/app/pages/product/regulatory.vue
@@ -59,12 +59,12 @@
 .container{
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/pro_banner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/public/details.vue b/app/pages/public/details.vue
index 175346e..e517031 100644
--- a/app/pages/public/details.vue
+++ b/app/pages/public/details.vue
@@ -49,12 +49,12 @@ const activeIndex = ref(0);
 
   .banner {
     width: 100%;
-    height: 400px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 180px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/public/index.vue b/app/pages/public/index.vue
index 2aefcf5..e4657ee 100644
--- a/app/pages/public/index.vue
+++ b/app/pages/public/index.vue
@@ -54,12 +54,12 @@ const activeIndex = ref(0);
 
   .banner {
     width: 100%;
-    height: 400px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 180px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
@@ -91,19 +91,29 @@ const activeIndex = ref(0);
         font-weight: bold;
       }
       .main{
+        padding: 10px;
         .list{
-          border-bottom: 1px solid #eeeeee;
-          padding: 10px 5px;
+          padding: 10px;
           font-size: 14px;
           cursor: pointer;
+          color: #222222;
+          margin-bottom: 5px;
+          border-radius: 4px;
+          border-left: 4px solid #ffffff;
           &:hover{
-           background: #f1f1fa;
+            background: #e4ecff;
+            border-left: 4px solid #3f79ff;
+            color: #3f79ff;
           }
         }
+        .active{
+          background: #e4ecff;
+          border-left: 4px solid #3f79ff;
+          color: #3f79ff;
+        }
         &:last-child{
           border-bottom: none;
         }
-
       }
     }
     .right_main{
diff --git a/app/pages/rule/details.vue b/app/pages/rule/details.vue
index 786d28d..b3894c7 100644
--- a/app/pages/rule/details.vue
+++ b/app/pages/rule/details.vue
@@ -54,12 +54,12 @@
   background: #f6f8fa;
   .banner {
     width: 100%;
-    height: 400px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 180px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/rule/index.vue b/app/pages/rule/index.vue
index 918f247..f0d6c42 100644
--- a/app/pages/rule/index.vue
+++ b/app/pages/rule/index.vue
@@ -75,12 +75,12 @@ const activeIndex = ref(0);
   background: #f6f8fa;
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/app/pages/service/index.vue b/app/pages/service/index.vue
index 68fc0b4..04f8a1d 100644
--- a/app/pages/service/index.vue
+++ b/app/pages/service/index.vue
@@ -8,9 +8,14 @@
         <p>安全第一 预防为主 综合治理</p>
       </div>
     </div>
+
+
+
+
     <div class="new_container">
-      <div class="top">
-        <div class="wrap">
+      <div class="left">
+        <div class="top">业务与服务</div>
+        <div class="main">
           <div
             v-for="(item, index) in serverItems"
             :key="index"
@@ -22,9 +27,19 @@
           </div>
         </div>
       </div>
-      <div class="new_main">
-        <div>河北秦安安全科技股份有限公司（原秦皇岛中宇安全评价有限公司）2019年12月26日取得了河北省应急管理厅颁发的《安全评价机构资质证书》，证书编号：APJ-(冀)-001。现有安全评价师35人，其中一级评价师9人，二级评价师10人，三级评价师16人。具有高级专业技术职称的6人，具有中级专业技术职称的5人，注册安全工程师20人。</div>
-
+      <div class="right_main">
+        <div v-if="activeIndex === 0">
+          河北秦安安全科技股份有限公司（原秦皇岛中宇安全评价有限公司）2019年12月26日取得了河北省应急管理厅颁发的《安全评价机构资质证书》，证书编号：APJ-(冀)-001。现有安全评价师35人，其中一级评价师9人，二级评价师10人，三级评价师16人。具有高级专业技术职称的6人，具有中级专业技术职称的5人，注册安全工程师20人。
+        </div>
+        <div v-if="activeIndex === 1">
+          <p>安全标准化评南与咨询</p>
+        </div>
+        <div v-if="activeIndex === 2">
+          <p>职业卫生检测与评价</p>
+        </div>
+        <div v-if="activeIndex === 3">
+          <p>安全生产检测检验</p>
+        </div>
       </div>
     </div>
 
@@ -34,11 +49,8 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
-
-const serverItems=["安全评价", "安全标准化评南与咨询", "职业卫生检测与评价", "安全生产检测检验","环境卫生检测检验","应急救援预案指导","安全培训","交通培训"];
+const serverItems=["安全评价", "安全标准化评价与咨询", "职业卫生检测与评价", "安全生产检测检验","环境卫生检测检验","应急救援预案指导","安全培训","交通培训"];
 const activeIndex = ref(0);
-
-
 </script>
 
 <style scoped lang="scss">
@@ -47,12 +59,12 @@ const activeIndex = ref(0);
 
   .banner {
     width: 100%;
-    height: 400px;
+    height: 320px;
     background: url("@/assets/images/newbanner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 180px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
@@ -66,98 +78,59 @@ const activeIndex = ref(0);
     }
   }
   .new_container {
-    width: 100%;
-
-    .top {
-      width: 100%;
-      height: 60px;
+    width: 1400px;
+    margin: 20px auto;
+    display: flex;
+    .left{
+      width: 250px;
+      box-sizing: border-box;
       background: #ffffff;
-
-      .wrap {
-        width: 1400px;
-        margin: 0 auto;
-        display: flex;
-
-        .list {
-          font-size: 16px;
-          line-height: 60px;
+      border-radius: 4px;
+      .top{
+        width: 100%;
+        background: #3f79ff;
+        text-align: center;
+        color: #ffffff;
+        line-height: 40px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+      }
+      .main{
+        padding: 10px;
+        .list{
+          padding: 10px;
+          font-size: 14px;
           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;
-            }
+          color: #222222;
+          margin-bottom: 5px;
+          border-radius: 4px;
+          border-left: 4px solid #ffffff;
+          &:hover{
+            background: #e4ecff;
+            border-left: 4px solid #3f79ff;
+            color: #3f79ff;
           }
         }
+        .active{
+          background: #e4ecff;
+          border-left: 4px solid #3f79ff;
+          color: #3f79ff;
+        }
+        &:last-child{
+          border-bottom: none;
+        }
       }
     }
-    .new_main{
-      width: 1400px;
-      margin: 20px auto;
+    .right_main{
+      flex: 1;
+      margin-left: 20px;
       background: #ffffff;
-      padding: 20px;
-      box-sizing: border-box;
-      img{
-        max-width: 1200px;
-        margin: 0 auto;
+      padding: 10px;
+      color: #333333;
+      line-height: 2;
+      text-indent: 2rem;
+      min-height: 500px;
 
-      }
-      a{
-        text-decoration: none;
-      }
-      .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)
-        }
-      }
     }
   }
 }
diff --git a/app/pages/solution/index.vue b/app/pages/solution/index.vue
index a1b4d70..d99036a 100644
--- a/app/pages/solution/index.vue
+++ b/app/pages/solution/index.vue
@@ -4,8 +4,8 @@
     <div class="banner">
       <div class="banner_main">
         <h2>企业安全生产</h2>
-        <div class="s_tit">综合解决方案</div>
-        <p>结合企业安全生产管理物联监测、个性化业务场景等需求为企业量身定制的解决方案</p>
+        <p >结合企业安全生产管理物联监测、个性化业务场景等需求为企业量身定制的解决方案</p>
+
       </div>
     </div>
     <div class="block1">
@@ -203,12 +203,12 @@ const block2Items = [
   background: #f0f9ff;
   .banner {
     width: 100%;
-    height: 494px;
+    height: 320px;
     background: url("@/assets/images/solution_banner.png") no-repeat top center;
     .banner_main {
       width: 1400px;
       margin: 0 auto;
-      padding-top: 230px;
+      padding-top: 135px;
       h2 {
         font-size: 60px;
         color: #ffffff;
diff --git a/package-lock.json b/package-lock.json
index 8655fdc..59d00bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -89,6 +89,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
       "integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.28.6",
         "@babel/generator": "^7.28.6",
@@ -4580,6 +4581,7 @@
       "resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.7.1.tgz",
       "integrity": "sha512-zjTUwIsEfT+k9BmXwq1QEFYsb4afBlsI1AXFyWQBgggMzwBFOuu92pGrE5OFx90IOjNl+lUbQoTG7f8S0PkOdg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.9.1",
         "@typescript-eslint/types": "^8.53.1",
@@ -4615,7 +4617,8 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/node": {
       "version": "25.3.5",
@@ -4623,6 +4626,7 @@
       "integrity": "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~7.18.0"
       }
@@ -4682,6 +4686,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
       "integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.53.1",
         "@typescript-eslint/types": "8.53.1",
@@ -4879,6 +4884,7 @@
       "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.2.tgz",
       "integrity": "sha512-w5yxH/fkkLWAFAOnMSIbvAikNHYn6pgC7zGF/BasXf+K3CO1cYIPFehYAk5jpcsbiNPMc3goyyw1prGLoyD14g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "hookable": "^6.0.1",
         "unhead": "2.1.2"
@@ -5355,6 +5361,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
       "integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.5",
         "@vue/compiler-core": "3.5.27",
@@ -5662,6 +5669,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6091,6 +6099,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7125,6 +7134,7 @@
       "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -7192,6 +7202,7 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -9720,6 +9731,7 @@
       "resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.3.0.tgz",
       "integrity": "sha512-99Iw3E3L5/2QtJyV4errZ0axkX/S9IAFK0AHm0pmRHkCu37OFn8mz2P4/CYTt6B/TG3mcKbXAVaeuF2FsAc1cA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@dxup/nuxt": "^0.3.2",
         "@nuxt/cli": "^3.32.0",
@@ -9980,6 +9992,7 @@
       "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.110.0.tgz",
       "integrity": "sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.110.0"
       },
@@ -10294,6 +10307,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11084,6 +11098,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
       "integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -11241,6 +11256,7 @@
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -12358,6 +12374,7 @@
       "integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "napi-postinstall": "^0.3.0"
       },
@@ -12602,6 +12619,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -12900,6 +12918,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
       "integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.27",
         "@vue/compiler-sfc": "3.5.27",
@@ -12936,6 +12955,7 @@
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",
       "integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "debug": "^4.4.0",
         "eslint-scope": "^8.2.0",
@@ -12959,6 +12979,7 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
       "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
       },
@@ -13139,6 +13160,7 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
       "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "license": "ISC",
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },