221213

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

@@ -1,7 +1,8 @@
 <template>
-  <header class="head_container">
+  <header class="head_container" :class="{ scrolled: isScrolled }">
     <div class="logo">
-      <img src="../../assets/images/logo.png" alt="河北秦安安全科技股份有限公司"/>
+      <div class="logo_b"><img src="../../assets/images/logo.png" alt="河北秦安安全科技股份有限公司"/></div>
+      <div class="logo_w"> <img src="../../assets/images/logo1.png" alt="河北秦安安全科技股份有限公司"/></div>
     </div>
     <div style="display: flex">
       <nav class="nav_list">
@@ -12,7 +13,7 @@
             @mouseenter="isProductHovered = true"
             @mouseleave="isProductHovered = false"
           >
-            <NuxtLink to="/product">产品</NuxtLink>
+            <NuxtLink to="">产品</NuxtLink>
             <span v-if="isProductHovered">
               <NuxtLink
                 v-for="(item, index) in proList"
@@ -32,9 +33,9 @@
           </li>
           <li :class="{ active: isActive('/new') }"><NuxtLink to="/new">新闻资讯</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('/service') }"><NuxtLink to="/service">服务流程</NuxtLink></li>-->
           <li :class="{ active: isActive('/about') }"><NuxtLink to="/about">关于秦安</NuxtLink></li>
-          <li :class="{ active: isActive('/model') }"><NuxtLink to="/model">秦安安全大模型</NuxtLink></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>
       </nav>
@@ -42,9 +43,24 @@
   </header>
 </template>
 <script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
 const isProductHovered = ref(false);
+const isScrolled = ref(false);
 const route = useRoute();
 
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 50;
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+
 const isActive = (path: string) => {
   if (path === "/") {
     return route.path === "/";
@@ -53,12 +69,12 @@ const isActive = (path: string) => {
 };
 
 const proList = [
-  { name: '基层监管平台', path: '/product/regulatory' },
+  { name: "基层监管平台", path: "/product/regulatory" },
-  { name: 'GBS数字底座', path: '/product/gbs' },
+  { name: "GBS数字底座", path: "" },
-  { name: '一体化智能云平台', path: '/product/cloud' },
+  { name: "一体化智能云平台", path: "" },
-  { name: '安全培训开发者平台', path: '/product/training' },
+  { name: "安全培训开发者平台", path: "" },
-  { name: '服务机构自我赋能平台', path: '/product/service' },
+  { name: "服务机构自我赋能平台", path: "" },
-  { name: '应急管理大数据中心', path: '/product/emergency' }
+  { name: "应急管理大数据中心", path: "" },
 ];
 </script>
 <style scoped lang="scss">
@@ -77,6 +93,92 @@ const proList = [
   top: 0;
   left: 0;
   z-index: 999;
+  transition: all 0.3s ease;
+
+  &.scrolled{
+    position: fixed;
+    background: #ffffff;
+    border-bottom: 1px solid #eeeeee;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+
+    .nav_list{
+      .num{
+        color: #222222;
+      }
+      ul li{
+        color: #222222;
+        a{
+          color: #222222;
+          text-decoration: none;
+          &:before{
+            background-color: #1d78ff;
+                   }
+        }
+
+        &.active a{
+          color: #222222;
+
+        }
+        &:hover{
+          color: #1d78ff;
+          background: #ddebff;
+        }
+        span{
+          a{
+            color: #222222;
+           &:before{
+           display: none;
+          }
+            &:hover{
+              color: #222222;
+              background: #ddebff;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .logo{
+    position: relative;
+    width: 150px;
+    height: 50px;
+
+    .logo_b, .logo_w{
+      position: absolute;
+      top: 10px;
+      left: 0;
+      width: 128px;
+      height: 32px;
+      transition: opacity 0.3s ease;
+
+      img{
+        width: 128px;
+        height: 32px;
+        object-fit: contain;
+      }
+    }
+
+    .logo_w{
+      opacity: 0;
+    }
+
+    .logo_b{
+      opacity: 1;
+    }
+  }
+
+  &.scrolled{
+    .logo{
+      .logo_b{
+        opacity: 0;
+      }
+      .logo_w{
+        opacity: 1;
+      }
+    }
+  }
+
   .nav_list{
     display: flex;
     justify-content: space-between;
@@ -119,6 +221,7 @@ const proList = [
             opacity: 0;
           }
         }
+
         &.active{
           a{
             &:before{
@@ -140,21 +243,25 @@ const proList = [
           position: absolute;
           top: 70px;
           background: #fff;
-          width: 150px;
+          width: 200px;
           text-align: center;
           left: 50%;
-          margin-left: -75px;
+          margin-left: -100px;
           box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
           padding: 10px 0;
           border-radius: 4px;
+          z-index: 999999;
+          border-bottom: 1px solid #eeeeee !important;
           a{
             color: #333333;
             display: block;
             width: 100%;
             height: 50px;
             line-height: 50px;
+            border-bottom: 1px solid #eeeeee !important;
+            text-decoration: none;
             &:hover{
-              color: #1d78ff;
+              color: #222222;
               background: #ddebff;
             }
           }

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="right_con">
+    <div class="kefu">
+      <ul>
+        <li>
+          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-a1.png" alt=""/></NuxtLink>
+          <span>定制方案</span>
+        </li>
+        <li>
+          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-b1.png" alt=""/></NuxtLink>
+          <span>13303358557 0335-8909696</span>
+        </li>
+        <li>
+          <NuxtLink class="kf-gy kf-a1"><img src="@/assets/images/kf-d1.png" alt=""/></NuxtLink>
+          <span>
+            <img src="@/assets/images/img19.png" alt=""/>
+            <img src="@/assets/images/img20.png" alt=""/>
+          </span>
+        </li>
+        <li v-show="showBackTop" class="back" @click="scrollToTop">
+          <div class="kf-gy kf-a1"><img src="@/assets/images/kf-e1.png" alt=""/></div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+
+const showBackTop = ref(false);
+
+const handleScroll = () => {
+  showBackTop.value = window.scrollY > 300;
+};
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+};
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", handleScroll);
+});
+</script>
+
+<style scoped lang="scss">
+.kefu{
+  position:fixed;
+  z-index:99999;
+  top:30%;
+  right:50px;
+  width:48px;
+  ul{
+    li{
+      position:relative;
+      margin-bottom:12px;
+      list-style: none;
+      cursor: pointer;
+      a, div{
+        width:48px;
+        height:48px;
+        background:#fff;
+        border:1px solid #eee;
+        display:block;
+        text-align:center;
+        line-height:48px;
+        color:#333;
+        border-radius:50px;
+        box-shadow: 0 4px 16px rgba(28,67,125,.08);
+        transition: all 0.5s ease-out 0s;
+        font-size: 18px;
+
+        img{
+          width:24px;
+          height: 24px;
+          margin: 12px auto;
+        }
+      }
+      span{
+        position: absolute;
+        box-shadow: rgba(28, 67, 125, 0.08) 0 4px 16px;
+        font-size: 16px;
+        line-height: 22px;
+        top: 0;
+        text-align: center;
+        right: 20px;
+        padding: 16px 10px;
+        white-space: nowrap;
+        background: rgb(255, 255, 255);
+        border-width: 1px;
+        border-style: solid;
+        border-color: rgba(180, 183, 192, 0.12);
+        border-image: initial;
+        border-radius: 4px;
+        transition: 0.3s;
+        font-weight: bold;
+        color: #1d78ff;
+        display: none;
+        img{
+          margin-right: 10px;
+        }
+
+       &::after {
+          position: absolute;
+          box-sizing: border-box;
+          background-color: inherit;
+          width: 12px;
+          height: 12px;
+          top: 20px;
+          right: -4.25px;
+          transform: rotate(315deg);
+          content: "";
+          transition: 250ms ease-in-out;
+          border-right: 1px solid rgba(180, 183, 192, 0.12);
+          border-bottom: 1px solid rgba(180, 183, 192, 0.12);
+        }
+      }
+      &:hover{
+        span{
+          display: block;
+      }
+        a,div{
+          background: #90ceff;
+          border:1px solid #90ceff;
+        }
+    }
+  }
+  }
+}
+
+
+
+
+</style>

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

@@ -242,6 +242,7 @@
       </div>
     </div>
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

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

@@ -44,6 +44,7 @@
       </div>
     </div>
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

nuxt-demo/app/pages/case/index.vue

@@ -90,6 +90,7 @@
       </div>
     </div>
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

nuxt-demo/app/pages/index.vue

@@ -366,6 +366,7 @@
     </div>
 
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

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

@@ -49,6 +49,7 @@
       </div>
     </div>
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

nuxt-demo/app/pages/new/index.vue

@@ -78,6 +78,7 @@
     </div>
 
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

nuxt-demo/app/pages/product/regulatory.vue

@@ -1,12 +1,156 @@
-
-
 <template>
-  <div>seft</div>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>政府监管平台</h2>
+        <p>提高行政效率、加强公共服务、实现透明化管理而建立的在线服务平台。</p>
+        <p style="font-size: 14px">聚焦多组织、多业态的大中型企业。以“履职尽责、科学管控、自动考评”三大特性为数字经济时代的<br/>工业企业提供智能的安全生产管理专业化服务。</p>
+      </div>
+    </div>
+    <div class="block1">
+      <div class="item">
+        <img src="@/assets/images/pro_img1.png" alt="河北秦安安全科技股份有限公司"/>
+        <div class="title">基层应急管理信息化平台</div>
+        <p>围绕双重预防机制建设、教育培训、应急管理等安全管理核心业务需求，为企业提供一体化服务平台。</p>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/pro_img2.png" alt="河北秦安安全科技股份有限公司"/>
+        <div class="title">乡街基层管理信息化平台</div>
+        <p>围绕双重预防机制建设、教育培训、应急管理等安全管理核心业务需求，为企业提供一体化服务平台。</p>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/pro_img3.png" alt="河北秦安安全科技股份有限公司"/>
+        <div class="title">智慧化工园区应急监管平台</div>
+        <p>围绕双重预防机制建设、教育培训、应急管理等安全管理核心业务需求，为企业提供一体化服务平台。</p>
+      </div>
+    </div>
+    <div class="block2">
+      <div class="main">
+        <div class="title">
+          <h2>平台背景</h2>
+          <p>提升企业安全风险智能化管控水平</p>
+        </div>
+        <div class="text">近年来全国安全生产形势总体稳定，但一些行业领域接连发生事故，安全防范工作面临很大压力。习主席在中国共产党第十九次全国代表大会报告中指出:树立安全发展理念，弘扬生命至上、安全第-的思想,健全公共安全体系,完善安全生产责任制,坚决遏制重特大安全生产事故,提升防灾、减灾、救灾能力。</div>
+        <div class="title">
+          <h2>平台概述</h2>
+          <p>以安全监管需求带动信息化发展，以信息化发展促进安全监管。</p>
+          <div class="text">以党中央、国务院、国家应急管理部有关法律规章为依据，依靠云计算、物联网、大数据、移动互联网、视频监控等现代信息技术手段，督促指导企业落实主体责任，认真开展安全风险分级管控和隐患排查治理双重预防工作，汇总企业信息化风险辨识和评估结果以及隐患排查治理数据，对企业实行差异化、精准化动态监管。</div>
+        </div>
+
+        <div class="title">
+          <h2>平台架构</h2>
+          <p>以安全监管需求带动信息化发展，以信息化发展促进安全监管。</p>
+        </div>
+        <div class="pro_wrap">
+          <img src="@/assets/images/pro_img4.png" alt=""/>
+        </div>
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
+  </div>
 </template>
 <script setup lang="ts">
 
 </script>
 
 <style scoped lang="scss">
+.container{
+  .banner {
+    width: 100%;
+    height: 494px;
+    background: url("@/assets/images/pro_banner.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;
+        line-height: 2;
+      }
+    }
+  }
+  .block1{
+    width: 1400px;
+    margin: 30px auto;
+    background: #ffffff;
+    display: flex;
+    justify-content: space-around;
+
+    .item{
+      width:430px;
+      margin: 10px;
+      background: #f7faff;
+      box-shadow: 0 0 5px 0 rgba(0,0,0,0.1);
+      text-align: center;
+      padding: 20px;
+      box-sizing: border-box;
+      border-radius: 6px;
+      .title{
+        font-size: 24px;
+        font-weight: bold;
+        color: #464d75;
+        margin: 20px auto;
+      }
+      p{
+        font-size: 16px;
+        color: #666666;
+      }
+    }
+  }
+
+.block2{
+  width: 100%;
+  background: #f6fbff;
+  padding: 50px;
+  box-sizing: border-box;
+  .main{
+    width: 1400px;
+    margin: 0 auto;
+    .title{
+      width: 100%;
+      text-align: left;
+      margin-bottom: 20px;
+      margin-top: 20px;
+      h2{
+        font-size: 20px;
+        margin: 0;
+        color: #3699ff;
+        font-weight: bold;
+      }
+      p{
+        font-size: 16px;
+        color: #999999;
+        margin-top: 10px;
+      }
+    }
+    .text{
+      font-size: 16px;
+      color: #666666;
+      text-indent: 2rem;
+      line-height: 2;
+    }
+    .pro_wrap{
+      width: 100%;
+      background: #ffffff;
+      padding: 20px;
+      text-align: center;
+      box-shadow:0 9px 24px rgba(29,120,255,0.09);
+      border-radius: 4px;
+    }
+  }
+
+}
+
+
+}
 
 </style>

nuxt-demo/app/pages/solution/index.vue

@@ -142,6 +142,7 @@
       </div>
     </div>
     <AppFoot/>
+    <right/>
   </div>
 </template>
 <script setup lang="ts">

nuxt-demo/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev --open",
+    "dev": "nuxt dev --open --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",