221213

nuxt-demo/app/components/AppHead/index.vue

@@ -32,10 +32,50 @@
             <NuxtLink to="/solution">解决方案</NuxtLink>
           </li>
           <li :class="{ active: isActive('/new') }"><NuxtLink to="/new">新闻资讯</NuxtLink></li>
+          <li
+            :class="{ active: isActive('/rule/legal') }"
+            @mouseenter="isRuleHovered = true"
+            @mouseleave="isRuleHovered = false"
+          >
+            <NuxtLink to="">政策法规</NuxtLink>
+            <span v-if="isRuleHovered">
+              <NuxtLink
+                v-for="(item, index) in RuleList"
+                :key="index"
+                v-motion
+                :to="item.path"
+                :initial="{ opacity: 0, y: -10 }"
+                :enter="{ opacity: 1, y: 0, transition: { delay: index * 50, duration: 300 } }"
+                :leave="{ opacity: 0, y: -10, transition: { duration: 200 } }"
+              >
+                {{item.name}}
+              </NuxtLink>
+            </span>
+          </li>
           <li :class="{ active: isActive('/evaluation') }"><NuxtLink to="/evaluation">安全评价</NuxtLink></li>
           <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
           <!--          <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">服务流程</NuxtLink></li>-->
-          <li :class="{ active: isActive('/about') }"><NuxtLink to="/about">关于秦安</NuxtLink></li>
+          <!--          <li :class="{ active: isActive('/about') }"><NuxtLink to="/about">关于秦安</NuxtLink></li>-->
+          <li
+            :class="{ active: isActive('/product') }"
+            @mouseenter="isAboutHovered = true"
+            @mouseleave="isAboutHovered = false"
+          >
+            <NuxtLink to="">关于秦安</NuxtLink>
+            <span v-if="isAboutHovered">
+              <NuxtLink
+                v-for="(item, index) in AboutList"
+                :key="index"
+                v-motion
+                :to="item.path"
+                :initial="{ opacity: 0, y: -10 }"
+                :enter="{ opacity: 1, y: 0, transition: { delay: index * 50, duration: 300 } }"
+                :leave="{ opacity: 0, y: -10, transition: { duration: 200 } }"
+              >
+                {{item.name}}
+              </NuxtLink>
+            </span>
+          </li>
           <li :class="{ active: isActive('https://safetyds.qhdsafety.com/#/safety_chat') }"><NuxtLink to="https://safetyds.qhdsafety.com/#/safety_chat"  target="_blank">秦安安全大模型</NuxtLink></li>
         </ul>
         <div class="num">股票代码：871771</div>
@@ -47,6 +87,8 @@
 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();
 
@@ -77,6 +119,20 @@ const proList = [
   { name: "服务机构自我赋能平台", path: "" },
   { name: "应急管理大数据中心", path: "" },
 ];
+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" },
+];
 </script>
 <style scoped lang="scss">
 .head_container{

nuxt-demo/app/pages/about/developmentHistory.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>发展历程</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/about/developmentStrategy.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>发展战略</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/about/honor.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>资质荣誉</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/about/leaderSpeech.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>领导致词</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/about/organizationalStructure.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>组织架构</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/rule/details.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+</script>
+<template>
+  <div class="">
+    详情
+  </div>
+</template>
+<style scoped lang="scss">
+</style>

nuxt-demo/app/pages/rule/government.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>政府规章</div>
+</template>
+
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/rule/legal.vue

@@ -0,0 +1,174 @@
+
+<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 class="list">技术标准</div>
+        </div>
+      </div>
+      <div class="new_main">
+        <NuxtLink to="/rule/details">
+          <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>
+          </div>
+        </NuxtLink>
+        <NuxtLink to="/rule/details">
+          <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>
+          </div>
+        </NuxtLink>
+        <NuxtLink to="/rule/details">
+          <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>
+          </div>
+        </NuxtLink>
+      </div>
+    </div>
+
+    <AppFoot/>
+    <right/>
+  </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;
+      a{
+        text-decoration: none;
+      }
+      .wrap{
+        width: 100%;
+        background: #ffffff;
+        padding: 20px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        .item{
+          display: flex;
+          .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;
+              }
+            }
+          }
+        }
+        &:hover{
+          box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
+        }
+      }
+    }
+  }
+}
+
+
+</style>

nuxt-demo/app/pages/rule/specification.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>规范文件</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

nuxt-demo/app/pages/rule/technicalStandards.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>技术标准</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>