qa_portal
/
qa_portal_vue
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
qa_portal_vue/app/pages/about/index.vue

609 lines
17 KiB
Vue
Raw Normal View History

22
2026-01-29 16:55:24 +08:00
<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>
221
2026-02-02 16:50:43 +08:00
<AppFoot/>
221213
2026-02-03 14:09:03 +08:00
<right/>
22
2026-01-29 16:55:24 +08:00
</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%;
1232
2026-03-10 11:21:06 +08:00
height: 320px;
22
2026-01-29 16:55:24 +08:00
background: url("@/assets/images/about_banner.png") no-repeat top center;
.banner_main{
width: 1400px;
margin: 0 auto;
1232
2026-03-10 11:21:06 +08:00
padding-top: 135px;
22
2026-01-29 16:55:24 +08:00
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;
221
2026-01-29 17:54:48 +08:00
transition: box-shadow 0.5s ease;
cursor: default;
&:hover{
box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15);
}
22
2026-01-29 16:55:24 +08:00
.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>