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

22

master
鲁洪霞 2026-01-29 16:55:24 +08:00
parent 2c6ba46a0c
commit cb484a691f
8 changed files with 763 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
nuxt-demo/app/assets/images/foot.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB

BIN
nuxt-demo/app/assets/images/img19.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
nuxt-demo/app/assets/images/img20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

150
nuxt-demo/app/components/AppFoot/index.vue Normal file
View File

@ -0,0 +1,150 @@
<template>
<div class="foot_container">
<div class="top">
<div class="foot_main">
<div class="text">具有专业化背景的数字化服务公司</div>
<div class="btn">了解详情</div>
</div>
</div>
<div class="foot_bottem">
<div class="wrap">
<div class="item">
<div class="tit">微信开发</div>
<div class="main">
<p>微信小程序开发</p>
<p>微信定制开发</p>
<p>微网站</p>
<p>微商城</p>
<p>H5页面</p>
</div>
</div>
<div class="item">
<div class="tit">业务服务</div>
<div class="main">
<p>安全评价</p>
<p>安全标准化评审与咨询</p>
<p>职业卫生检测与评价</p>
<p>金属非金属矿山设备检测</p>
<p>环境卫生检测检验</p>
<p>应急救援指挥</p>
</div>
</div>
<div class="item">
<div class="tit">平台系统</div>
<div class="main">
<p>双重预防机制建设平台</p>
<p>安全生产线上培训平台</p>
<p>联安众课件商城</p>
<p>联安云-十小监管</p>
<p>数据化标准库平台</p>
<p>北戴河应急管理平台</p>
</div>
</div>
<div class="item">
<div class="tit">关注或联系我们</div>
<div class="main">
<div class="QRCode">
<img src="@/assets/images/img19.png" alt=""/>
<img src="@/assets/images/img20.png" alt=""/>
</div>
<div class="phone">咨询热线：13303358557 0335-8909696</div>
<div class="btn">联系我们</div>
</div>
</div>
</div>
<div class="Copyright">
© 2022 河北秦安安全科技股份有限公司.版权所有 冀ICP备08007564号 地址：秦皇岛市海港区西港北路85号港城创业基地2栋104室
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.foot_container{
width: 100%;
.top{
width: 100%;
height: 176px;
background: url("@/assets/images/foot.png") no-repeat top center;
.foot_main{
width: 1400px;
margin: 0 auto;
padding: 40px 0;
.text{
font-size: 28px;
color: #222222;
}
.btn{
display: inline-block;
background: #3f79ff;
color: #ffffff;
padding: 6px 30px;
border-radius: 4px;
margin-top: 10px;
}
}
}
.foot_bottem{
width: 100%;
background: #0c1d35;
padding: 20px 0;
.wrap{
width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
.item{
.tit{
color: #ffffff;
font-size: 18px;
}
.main{
color: #cecece;
font-size: 14px;
p{
cursor: pointer;
}
.QRCode{
display: flex;
align-items: center;
margin-top: 20px;
img{
margin-right: 20px;
}
}
.phone{
margin-top: 20px;
color: #ffffff;
font-size: 14px;
}
.btn{
background: #1d78ff;
color: #ffffff;
display: inline-block;
padding: 6px 30px;
border-radius: 4px;
margin-top: 10px;
}
}
}
}
.Copyright{
width: 1400px;
margin: 0 auto;
border-top: 1px solid #20334e;
color: #2f425d;
text-align: center;
font-size: 14px;
padding-top: 20px;
}
}
}
</style>

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

@ -30,7 +30,7 @@
<li><NuxtLink to="">新闻资讯</NuxtLink></li>
<li><NuxtLink to="">合作案例</NuxtLink></li>
<li><NuxtLink to="">服务流程</NuxtLink></li>
<li><NuxtLink to="">关于秦安</NuxtLink></li>
<li><NuxtLink to="/about">关于秦安</NuxtLink></li>
<li><NuxtLink to="">秦安安全大模型</NuxtLink></li>
</ul>
<div class="num">股票代码：871771</div>

599
nuxt-demo/app/pages/about/index.vue Normal file
View File

@ -0,0 +1,599 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>铸诚信 安天下</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<!-- 公司介绍-->
<div class="companyIntroduction">
<div class="left">
<div class="title">
<div class="tit">qin'an security</div>
<h2>河北秦安安全科技股份有限公司</h2>
</div>
<div class="main">
<p>河北秦安安全科技股份有限公司是以大数据为载体为企业提供精准安全风险管理的综合技术服务提供商。公司于2017年8月3日在全国中小企业股转中心新三板挂牌上市，股票代码:871771。</p>
<p>公司成立于 2003年，总部设立在海滨城市秦皇岛，多年来公司不断加强技术研发、管控创新、产品创新、模式创新，拥抱互联网技术，先后获得“高新技术企业、专精特新企业、科技创新型企业、省级企业研发中心”等荣誉称号。公司业务已覆盖省内外，并控股、参股其他省内外多家公司。公司依靠健全的技术服务体系、丰富的行业人才储备、先进的实验室检测设备和完善的服务流程，致力于成为国内应急风险管理的引领者。</p>
</div>
<div class="about_bottom">
<div class="item">
<img src="@/assets/images/about_img2.png" alt="河北秦安安全科技股份有限公司"/>
<p>科学</p>
</div>
<div class="item">
<img src="@/assets/images/about_img3.png" alt="河北秦安安全科技股份有限公司"/>
<p>严谨</p>
</div>
<div class="item">
<img src="@/assets/images/about_img4.png" alt="河北秦安安全科技股份有限公司"/>
<p>真实</p>
</div>
<div class="item">
<img src="@/assets/images/about_img5.png" alt="河北秦安安全科技股份有限公司"/>
<p>公正</p>
</div>
</div>
</div>
<div class="right">
<img src="@/assets/images/about_img1.png" alt="河北秦安安全科技股份有限公司"/>
</div>
</div>
<!-- 我们的实力-->
<div class="ourStrength">
<div class="ourStrength_main">
<div class="title">
<h2>我们的实力</h2>
<p>全流程用户调研解决方案</p>
</div>
<div class="ourStrength_main_item">
<div class="item">
<div class="top">
<div class="round round1"></div>
</div>
<div class="main">
<div class="line line1"></div>
<div class="title">技术能力</div>
<div class="mid">
以大数据、云计算、人工智能、
解决“想不到、管不到、治不到”的问题。
</div>
</div>
</div>
<div class="item">
<div class="top">
<div class="round round2"></div>
</div>
<div class="main">
<div class="line line2"></div>
<div class="title">技术能力</div>
<div class="mid">
以大数据、云计算、人工智能、
解决“想不到、管不到、治不到”的问题。
</div>
</div>
</div>
<div class="item">
<div class="top">
<div class="round round3"></div>
</div>
<div class="main">
<div class="line line3"></div>
<div class="title">技术能力</div>
<div class="mid">
以大数据、云计算、人工智能、
解决“想不到、管不到、治不到”的问题。
</div>
</div>
</div>
<div class="item">
<div class="top">
<div class="round round4"></div>
</div>
<div class="main">
<div class="line line4"></div>
<div class="title">技术能力</div>
<div class="mid">
以大数据、云计算、人工智能、
解决“想不到、管不到、治不到”的问题。
</div>
</div>
</div>
</div>
<div class="mt-4"><img src="@/assets/images/about_img6.png" alt=""/></div>
</div>
</div>
<!-- 企业荣誉-->
<div class="enterpriseHonor">
<div class="enterpriseHonor_container">
<div class="title">
<h2>企业荣誉</h2>
<p>秦安安全屡获殊荣，发展潜力和市场价值不断被认可。</p>
</div>
<div class="main">
<swiper
:modules="modules"
:slides-per-view="6"
:space-between="25"
:loop="true"
:pagination="{ clickable: true }"
class="case-swiper"
>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
<swiper-slide>
<div class="item">
<div class="img"><img src="@/assets/images/about_img7.png" alt="河北秦安安全科技股份有限公司"/></div>
<div class="info">
<div class="text">
我司荣获2025“数据要素X”大赛
河北分赛三等奖
</div>
<div class="more">了解详情 <img src="@/assets/images/about_img8.png" alt="河北秦安安全科技股份有限公司"/> </div>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
<!-- 联系我们-->
<div class="contactUs">
<div class="contactUs_container">
<div class="title">
<h2>联系我们</h2>
<p>秦安安全屡获殊荣，发展潜力和市场价值不断被认可。</p>
</div>
<div class="contactUs_main">
<div class="left">
<div class="list">
<div><img src="@/assets/images/about_img9.png" alt="河北秦安安全科技股份有限公司"/></div>
<div> 13303358557 15076020879</div>
</div>
<div class="list">
<div><img src="@/assets/images/about_img10.png" alt="河北秦安安全科技股份有限公司"/></div>
<div>
秦皇岛市海港区西港北路85号港城创业基地2栋 <br/>
秦皇岛市经济技术开发区数谷腾园5-5
</div>
</div>
</div>
<div class="right">
<img src="@/assets/images/about_img11.png" alt="河北秦安安全科技股份有限公司"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const modules = [Autoplay, Pagination, Navigation];
</script>
<style scoped lang="scss">
.container{
.banner{
width: 100%;
height: 494px;
background: url("@/assets/images/about_banner.png") no-repeat top center;
.banner_main{
width: 1400px;
margin: 0 auto;
padding-top: 230px;
h2{
font-size: 60px;
color: #014ea0;
margin: 0;
padding: 0;
}
p{
margin: 0;
color: #323232;
}
}
}
.companyIntroduction{
width: 1400px;
margin: 30px auto;
display: flex;
justify-content: space-between;
align-items: center;
.left{
flex: 1;
padding-top: 60px;
.title{
.tit{
color: #b6b6b6;
font-size: 32px;
}
h2{
font-size: 32px;
color: #4c4b4b;
margin: 0;
}
}
.main{
color: #666666;
font-size: 14px;
line-height: 2;
margin-top: 50px;
padding-right: 50px;
p{
text-indent: 2rem;
}
}
.about_bottom{
width: 100%;
height: 150px;
background-image: linear-gradient( -90deg, rgb(184,208,255) 0%, rgb(40,112,255) 100%);
padding: 30px;
box-sizing: border-box;
margin-top: 41px;
display: flex;
justify-content: space-around;
.item{
text-align: center;
color: #ffffff;
p{
margin: 0;
padding: 0;
}
}
}
}
.right{
width: 478px;
}
}
.ourStrength{
width: 100%;
.ourStrength_main{
width: 1400px;
margin: 0 auto;
.title{
text-align: center;
h2{
margin: 0;
font-size: 32px;
color: #4c4b4b;
}
p{
margin: 5px;
color: #596e91;
}
}
.ourStrength_main_item{
width: 100%;
display: flex;
margin-top: 50px;
.item{
width: 330px;
.top{
width:330px ;
height: 1px;
background: #eaeaea;
position: relative;
margin-bottom: 20px;
.round{
width: 15px;
height:15px;
background: #ffffff;
border-radius: 100%;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
.round1{
border: 3px solid #2d68ff;
}
.round2{
border: 3px solid #aa7bed;
}
.round3{
border: 3px solid #44d0b4;
}
.round4{
border: 3px solid #ffc86a;
}
}
.main{
background: #ffffff;
border-style: solid;
border-width: 1px;
border-color: rgb(238, 240, 246);
border-radius: 4px;
box-shadow: 0 2px 10px 0 rgba(221, 221, 221, 0.8);
width: 300px;
margin: 40px auto 0;
position: relative;
.line{
width: 80px;
height: 4px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
border-radius: 4px 4px 0 0;
}
.line1{
background: #1d78ff;
}
.line2{
background: #aa7bed;
}
.line3{
background: #44d0b4;
}
.line4{
background: #ffc86a;
}
.title{
font-size: 24px;
color: #262c39;
margin-top: 20px;
}
.mid{
background: #ffffff;
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
color: #596e91;
font-size: 14px;
}
}
}
}
.mt-4{
margin-top: 40px;
}
}
}
.enterpriseHonor{
width: 100%;
background: #f2f4f9;
padding: 50px;
box-sizing: border-box;
margin-top: 40px;
.enterpriseHonor_container{
width: 100%;
.title{
text-align: center;
h2{
margin: 0;
font-size: 32px;
color: #4c4b4b;
}
p{
margin: 5px;
color: #596e91;
}
}
.main{
width: 100%;
margin-top: 40px;
.case-swiper {
width: 100%;
padding-bottom: 60px;
:deep(.swiper-pagination) {
bottom: 15px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
.swiper-pagination-bullet {
width: 10px;
height: 10px;
background: #d0d0d0;
opacity: 1;
margin: 0 6px;
transition: all 0.3s ease;
border-radius: 50%;
}
.swiper-pagination-bullet-active {
background: #2d68ff;
width: 32px;
border-radius: 5px;
}
}
}
:deep(.swiper-slide) {
.item{
background: #ffffff;
width: 100%;
border-radius: 2px;
box-shadow: 0 2px 10px 0 rgba(200, 200, 200, 0.53);
.img{
width: 100%;
img{
width: 100%;
display: block;
}
}
.info{
width: 100%;
padding: 15px 20px 30px;
box-sizing: border-box;
line-height: 1.6;
.text{
font-size: 15px;
color: #222222;
}
.more{
margin-top: 15px;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
color: #666666;
img{
width: 14px;
}
}
}
}
}
}
}
}
.contactUs{
width: 100%;
background: #ffffff;
PADDING: 50px 0;
.contactUs_container{
width: 1400px;
margin: 0 auto;
.title{
text-align: center;
h2{
margin: 0;
font-size: 32px;
color: #4c4b4b;
}
p{
margin: 5px;
color: #596e91;
}
}
.contactUs_main{
width: 100%;
display: flex;
background: #eff7ff;
padding: 50px;
margin-top: 50px;
border-radius: 4px;
align-items: center;
justify-content: space-around;
.left{
.list{
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 30px;
color: #222222;
line-height: 2;
font-size: 18px;
}
}
.right{
img{
box-shadow: 0 2px 20px 0 rgba(200, 200, 200, 0.53);
}
}
}
}
}
}
</style>

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

@ -360,7 +360,12 @@
</swiper>
</div>
</div>
<div class="case_img">
<img src="@/assets/images/img18.png" alt=""/>
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">
@ -370,11 +375,8 @@ import { Autoplay, Pagination, Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
const modules = [Autoplay, Pagination, Navigation];
const activeIndex = ref(0);
const productItems = [
{
name: "基层监管平台",
@ -861,8 +863,8 @@ body{
}
.case{
width: 100%;
background: #ebf2ff;
padding: 50px;
background: #ecf5ff;
padding: 50px 0;
box-sizing: border-box;
.case_container{
width: 1400px;
@ -874,7 +876,6 @@ body{
padding: 0;
font-size: 36px;
color: #4c4b4b;
}
p{
margin: 0;
@ -911,7 +912,6 @@ body{
width: 440px;
background: #ffffff;
border-radius: 16px;
margin: 0 10px;
.img{
width: 100%;
height: 250px;
@ -939,15 +939,17 @@ body{
text-align: right;
font-size: 14px;
margin-top: 20px;
}
}
}
}
}
.case_img{
wiidth: 100%;
img{
width: 100%
}
}
}
}
</style>

11
nuxt-demo/app/pages/me/index.vue
View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>me</div>
</template>
<style scoped>
</style>