qa_portal
/
qa_portal_vue
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

221213

master
鲁洪霞 2026-02-03 14:09:03 +08:00
parent 5b70074d4d
commit 85b7ba5e2d
11 changed files with 416 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
nuxt-demo/app/components/AppHead/index.vue
View File

@ -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: 'GBS数字底座', path: '/product/gbs' },
{ name: '一体化智能云平台', path: '/product/cloud' },
{ name: '安全培训开发者平台', path: '/product/training' },
{ name: '服务机构自我赋能平台', path: '/product/service' },
{ name: '应急管理大数据中心', path: '/product/emergency' }
{ name: "基层监管平台", path: "/product/regulatory" },
{ name: "GBS数字底座", path: "" },
{ name: "一体化智能云平台", path: "" },
{ name: "安全培训开发者平台", path: "" },
{ name: "服务机构自我赋能平台", path: "" },
{ 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;
}
}

140
nuxt-demo/app/components/right/index.vue Normal file
View File

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

1
nuxt-demo/app/pages/about/index.vue
View File

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

1
nuxt-demo/app/pages/case/details.vue
View File

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

1
nuxt-demo/app/pages/case/index.vue
View File

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

1
nuxt-demo/app/pages/index.vue
View File

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

1
nuxt-demo/app/pages/new/details.vue
View File

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

1
nuxt-demo/app/pages/new/index.vue
View File

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

150
nuxt-demo/app/pages/product/regulatory.vue
View File

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

1
nuxt-demo/app/pages/solution/index.vue
View File

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

2
nuxt-demo/package.json
View File

@ -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",