master
鲁洪霞 2026-01-29 16:55:24 +08:00
parent 2c6ba46a0c
commit cb484a691f
8 changed files with 763 additions and 23 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

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>

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>

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>

View File

@ -360,8 +360,13 @@
</swiper>
</div>
</div>
<div class="case_img">
<img src="@/assets/images/img18.png" alt=""/>
</div>
</div>
<AppFoot/>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
@ -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>

View File

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