master
鲁洪霞 2026-03-10 11:21:06 +08:00
parent 81407d1f7b
commit 52ab2e1e73
25 changed files with 605 additions and 204 deletions

BIN
app/assets/images/down.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -37,6 +37,8 @@
<li :class="{ active: isActive('/public') }"><NuxtLink to="/public">网上公开</NuxtLink></li>
<li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
<li :class="{ active: isActive('/job') }"><NuxtLink to="/job">人力资源</NuxtLink></li>
<li :class="{ active: isActive('/down') }"><NuxtLink to="/down">资料下载</NuxtLink></li>
<li :class="{ active: isActive('/education') }"><NuxtLink to="/education">教育培训</NuxtLink></li>
<li
:class="{ active: isActive('/product') }"
@mouseenter="isAboutHovered = true"
@ -69,7 +71,6 @@ import { ref, onMounted, onUnmounted } from "vue";
const isProductHovered = ref(false);
const isAboutHovered = ref(false);
const isRuleHovered = ref(false);
const isScrolled = ref(false);
const route = useRoute();
@ -102,17 +103,11 @@ const proList = [
];
const AboutList=[
{ name: "公司简介", path: "/about" },
{ name: "领导致词", path: "/about/leaderSpeech" },
{ name: "发展战略", path: "/about/developmentStrategy" },
{ name: "组织架构", path: "/about/organizationalStructure" },
{ name: "资质荣誉", path: "/about/honor" },
{ name: "发展历程", path: "/about/developmentHistory" },
];
const RuleList= [
{ name: "法律法规", path: "/rule/legal" },
{ name: "政府规章", path: "/rule/government" },
{ name: "规范文件", path: "/rule/specification" },
{ name: "技术标准", path: "/rule/technicalStandards" },
{ name: "领导致词", path: "/about/about?tab=0" },
{ name: "发展战略", path: "/about/about?tab=1" },
{ name: "组织架构", path: "/about/about?tab=2" },
{ name: "资质荣誉", path: "/about/about?tab=3" },
{ name: "发展历程", path: "/about/about?tab=4" },
];
</script>
<style scoped lang="scss">
@ -130,7 +125,7 @@ const RuleList= [
position: absolute;
top: 0;
left: 0;
z-index: 999;
z-index: 99999;
transition: all 0.3s ease;
&.scrolled{
@ -138,6 +133,7 @@ const RuleList= [
background: #ffffff;
border-bottom: 1px solid #eeeeee;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 99999;
.nav_list{
.num{

172
app/pages/about/about.vue Normal file
View File

@ -0,0 +1,172 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>关于秦安</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="new_container">
<div class="left">
<div class="top">关于秦安</div>
<div class="main">
<div
v-for="(item, index) in aboutItems"
:key="index"
class="list"
:class="{ active: activeIndex === index }"
@click="activeIndex = index">
{{item}}
</div>
</div>
</div>
<div class="right_main">
<div v-if="activeIndex === 0">
<div>
<p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>
<p>河北秦安安全科技股份有限公司成立于2003年经过十多年的发展形成了安全评价评估标准化评审咨询职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市成为河北省首家挂牌新三板的安全技术服务综合提供商</p>
<p>安全生产是社会发展和国家稳定的坚强基石事关人民生命财产安全和社会和谐稳定大局受到党中央国务院的高度重视党的十九大报告中对安全生产提出了明确要求把安全生产作为当前人民群众最关心最直接最现实的问题之一采取了一系列重大举措加强安全生产工作</p>
<p>作为一家专业从事安全生产服务的企业我们深知责任重大企业需要安全安全来自专业为了提升安全技术水平提升核心竞争力持续提升精益化服务能力公司加强开展技术研发管理创新产品创新模式创新不断提升自我健康发展能力全方位为企业提供卓越的安全生产风险整体解决方案</p>
<p>同时公司积极适应外部环境变化强化战略引领以创新机制激发公司内生动力探索多种资本相互促进共同发展先后与燕赵财产保险有限公司河北环境工程学院签署战略合作协议拓展新的合作模式投资设立大连秦宇科技有限公司开展了跨领域跨地域的合作方式</p>
<p>作为一家富有社会责任感的企业在自身不断发展壮大的同时时刻不忘企业所应承担的社会责任坚持实现对社会员工共同发展的理念促进公司与社会的协调和谐与可持续发展</p>
<p>百舸争流千帆竞乘风破浪待远航伴随着中国安全技术服务行业的飞速发展公司坚持"实现企业本质安全,与企业共享安全"的发展理念"科学、严谨、真实、公正"的质量方针将继续成为安全生产行业的一盏引航灯为安全生产和人民生命财产保驾护航</p>
<p>在此向多年来给予河北秦安大力关心支持和帮助的有关部门广大客户和社会各界朋友表示衷心的感谢我们愿与社会各界朋友精诚合作携手并进广泛合作互信互利在新的征程中共同创造更加美好的明天</p>
</div>
</div>
<div v-if="activeIndex === 1">
<div>
<p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>
<p>河北秦安安全科技股份有限公司成立于2003年经过十多年的发展形成了安全评价评估标准化评审咨询职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市成为河北省首家挂牌新三板的安全技术服务综合提供商</p>
<p>安全生产是社会发展和国家稳定的坚强基石事关人民生命财产安全和社会和谐稳定大局受到党中央国务院的高度重视党的十九大报告中对安全生产提出了明确要求把安全生产作为当前人民群众最关心最直接最现实的问题之一采取了一系列重大举措加强安全生产工作</p>
<p>
作为一家专业从事安全生产服务的企业我们深知责任重大企业需要安全安全来自专业为了提升安全技术水平提升核心竞争力持续提升精益化服务能力公司加强开展技术研发管理创新产品创新模式创新不断提升自我健康发展能力全方位为企业提供卓越的安全生产风险整体解决方案2017公司受邀参与编制了河北省工业企业可燃气体和有毒气体检测报警系统检查检测规范危险场所电气防爆安全检测技术规范金属非金属矿山在用危险性较大设备设施安全检测检验目录等行业标准安全技术影响力持续扩大成为河北省安全技术服务行业的重要引导力之一
</p><p>
同时公司积极适应外部环境变化强化战略引领以创新机制激发公司内生动力探索多种资本相互促进共同发展先后与燕赵财产保险有限公司河北环境工程学院签署战略合作协议拓展新的合作模式投资设立大连秦宇科技有限公司开展了跨领域跨地域的合作方式
</p><p>
作为一家富有社会责任感的企业在自身不断发展壮大的同时时刻不忘企业所应承担的社会责任坚持实现对社会员工共同发展的理念促进公司与社会的协调和谐与可持续发展
</p><p>
百舸争流千帆竞乘风破浪待远航伴随着中国安全技术服务行业的飞速发展公司坚持实现企业本质安全与企业共享安全的发展理念科学严谨真实公正的质量方针将继续成为安全生产行业的一盏引航灯为安全生产和人民生命财产保驾护航
</p><p>
在此向多年来给予河北秦安大力关心支持和帮助的有关部门广大客户和社会各界朋友表示衷心的感谢我们愿与社会各界朋友精诚合作携手并进广泛合作互信互利在新的征程中共同创造更加美好的明天
</p>
</div>
</div>
<div v-if="activeIndex === 1">
<p>发展战略</p>
</div>
<div v-if="activeIndex === 2">
<p>组织架构</p>
</div>
<div v-if="activeIndex === 3">
<p>资质荣誉</p>
</div>
<div v-if="activeIndex === 4">
<p>发展历程</p>
</div>
</div>
</div>
<AppFoot/>
<right/>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const route = useRoute();
const aboutItems=["领导致词","发展战略","组织架构","资质荣誉","发展历程"];
const activeIndex = ref(Number(route.query.tab) || 0);
//
watch(() => route.query.tab, newTab => {
activeIndex.value = Number(newTab) || 0;
});
</script>
<style scoped lang="scss">
.container {
background: #f6f8fa;
.banner {
width: 100%;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
margin: 0;
padding: 0;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.new_container {
width: 1400px;
margin: 20px auto;
display: flex;
.left{
width: 250px;
box-sizing: border-box;
background: #ffffff;
border-radius: 4px;
.top{
width: 100%;
background: #3f79ff;
text-align: center;
color: #ffffff;
line-height: 40px;
border-radius: 4px 4px 0 0;
font-weight: bold;
}
.main{
padding: 10px;
.list{
padding: 10px;
font-size: 14px;
cursor: pointer;
color: #222222;
margin-bottom: 5px;
border-radius: 4px;
border-left: 4px solid #ffffff;
&:hover{
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
}
.active{
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
&:last-child{
border-bottom: none;
}
}
}
.right_main{
flex: 1;
margin-left: 20px;
background: #ffffff;
padding: 10px;
color: #333333;
line-height: 2;
text-indent: 2rem;
min-height: 500px;
}
}
}
</style>

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>发展历程</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>发展战略</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>资质荣誉</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -260,12 +260,12 @@ const modules = [Autoplay, Pagination, Navigation];
.container{
.banner{
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/about_banner.png") no-repeat top center;
.banner_main{
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2{
font-size: 60px;
color: #014ea0;

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>领导致词</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -1,11 +0,0 @@
<script setup lang="ts">
</script>
<template>
<div>组织架构</div>
</template>
<style scoped lang="scss">
</style>

View File

@ -56,12 +56,12 @@ const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保",
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/case_banner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -102,12 +102,12 @@ const industries = ["全部", "冶金", "机械", "军工", "民爆", "环保",
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/case_banner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

168
app/pages/down/index.vue Normal file
View File

@ -0,0 +1,168 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>资料下载</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="new_container">
<div class="new_main">
<div class="wrap" >
<div class="item">
<div class="info">
<div class="title">应急管理部行政复议和行政应诉工作办法中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
<div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/> <span>2024-04-15</span> </div>
</div>
<div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
</div>
</div>
<div class="wrap" >
<div class="item">
<div class="info">
<div class="title">应急管理部行政复议和行政应诉工作办法中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
<div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/> <span>2024-04-15</span> </div>
</div>
<div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
</div>
</div>
<div class="wrap" >
<div class="item">
<div class="info">
<div class="title">应急管理部行政复议和行政应诉工作办法中华人民共和国应急管理部令第15号2024年6月1日起施行</div>
<div class="time"><img src="@/assets/images/time.png" alt="河北秦安安全科技股份有限公司"/> <span>2024-04-15</span> </div>
</div>
<div class="down"><img src="@/assets/images/down.png" alt="河北秦安安全科技股份有限公司"/></div>
</div>
</div>
</div>
</div>
<AppFoot/>
<right/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.container {
background: #f6f8fa;
.banner {
width: 100%;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
margin: 0;
padding: 0;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.new_container {
width: 100%;
.top {
width: 100%;
height: 60px;
background: #ffffff;
.wrap {
width: 1400px;
margin: 0 auto;
display: flex;
.list {
font-size: 16px;
line-height: 60px;
cursor: pointer;
position: relative;
margin-right: 40px;
&.active {
color: #006aff;
&:before {
opacity: 1;
}
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
border-bottom: 3px solid #006aff;
width: 100%;
opacity: 0;
}
&:hover {
color: #006aff;
&:before {
opacity: 1;
}
}
}
}
}
.new_main{
width: 1400px;
margin: 20px auto;
a{
text-decoration: none;
}
.wrap{
width: 100%;
background: #ffffff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.item{
display: flex;
justify-content: space-between;
align-items: center;
.info{
.title{
font-size: 18px;
color: #222222;
}
.time{
color: #999999;
margin-top: 10px;
display: flex;
align-items: center;
margin-left: 10px;
span{
padding-left: 5px;
}
}
}
.down{
cursor: pointer;
}
}
&:hover{
box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
}
}
}
}
}
</style>

View File

@ -0,0 +1,110 @@
<template>
<div class="container">
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>教育培训</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="new_container">
<div class="new_main">
<div>教育培训内容</div>
</div>
</div>
<AppFoot/>
<right/>
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.container {
background: #f6f8fa;
.banner {
width: 100%;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
margin: 0;
padding: 0;
}
p {
margin: 0;
color: #ffffff;
}
}
}
.new_container {
width: 100%;
.top {
width: 100%;
height: 60px;
background: #ffffff;
.wrap {
width: 1400px;
margin: 0 auto;
display: flex;
.list {
font-size: 16px;
line-height: 60px;
cursor: pointer;
position: relative;
margin-right: 40px;
&.active {
color: #006aff;
&:before {
opacity: 1;
}
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
border-bottom: 3px solid #006aff;
width: 100%;
opacity: 0;
}
&:hover {
color: #006aff;
&:before {
opacity: 1;
}
}
}
}
}
.new_main{
width: 1400px;
margin: 20px auto;
background: #ffffff;
padding: 20px;
box-sizing: border-box;
min-height: 500px;
a{
text-decoration: none;
}
}
}
}
</style>

View File

@ -469,7 +469,7 @@ body{
margin: 0;
.banner{
width: 100%;
height: 716px;
height: 600px;
text-align: center;
position: relative;
@ -662,7 +662,7 @@ body{
padding-left: 20px;
.title{
text-align: left;
font-size: 18px;
font-size: 16px;
}
.time{
color: #999999;
@ -670,7 +670,7 @@ body{
}
.text{
color: #434343;
font-size: 16px;
font-size: 14px;
}
}
}

View File

@ -4,7 +4,7 @@
<AppHead/>
<div class="banner">
<div class="banner_main">
<h2>网上公开</h2>
<h2>人力资源</h2>
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
@ -52,12 +52,12 @@ const activeIndex = ref(0);
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
@ -89,24 +89,29 @@ const activeIndex = ref(0);
font-weight: bold;
}
.main{
padding: 10px;
.list{
border-bottom: 1px solid #eeeeee;
padding: 10px 5px;
padding: 10px;
font-size: 14px;
cursor: pointer;
color: #222222;
margin-bottom: 5px;
border-radius: 4px;
border-left: 4px solid #ffffff;
&:hover{
background: #cddcff;
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
}
.active{
background: #cddcff;
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
&:last-child{
border-bottom: none;
}
}
}
.right_main{

View File

@ -54,12 +54,12 @@
background: #f6f8fa;
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -92,12 +92,12 @@
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -59,12 +59,12 @@
.container{
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/pro_banner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -49,12 +49,12 @@ const activeIndex = ref(0);
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -54,12 +54,12 @@ const activeIndex = ref(0);
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
@ -91,19 +91,29 @@ const activeIndex = ref(0);
font-weight: bold;
}
.main{
padding: 10px;
.list{
border-bottom: 1px solid #eeeeee;
padding: 10px 5px;
padding: 10px;
font-size: 14px;
cursor: pointer;
color: #222222;
margin-bottom: 5px;
border-radius: 4px;
border-left: 4px solid #ffffff;
&:hover{
background: #f1f1fa;
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
}
.active{
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
&:last-child{
border-bottom: none;
}
}
}
.right_main{

View File

@ -54,12 +54,12 @@
background: #f6f8fa;
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -75,12 +75,12 @@ const activeIndex = ref(0);
background: #f6f8fa;
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

View File

@ -8,9 +8,14 @@
<p>安全第一 预防为主 综合治理</p>
</div>
</div>
<div class="new_container">
<div class="top">
<div class="wrap">
<div class="left">
<div class="top">业务与服务</div>
<div class="main">
<div
v-for="(item, index) in serverItems"
:key="index"
@ -22,9 +27,19 @@
</div>
</div>
</div>
<div class="new_main">
<div>河北秦安安全科技股份有限公司原秦皇岛中宇安全评价有限公司2019年12月26日取得了河北省应急管理厅颁发的安全评价机构资质证书证书编号APJ-()-001现有安全评价师35人其中一级评价师9人二级评价师10人三级评价师16人具有高级专业技术职称的6人具有中级专业技术职称的5人注册安全工程师20人</div>
<div class="right_main">
<div v-if="activeIndex === 0">
河北秦安安全科技股份有限公司原秦皇岛中宇安全评价有限公司2019年12月26日取得了河北省应急管理厅颁发的安全评价机构资质证书证书编号APJ-()-001现有安全评价师35人其中一级评价师9人二级评价师10人三级评价师16人具有高级专业技术职称的6人具有中级专业技术职称的5人注册安全工程师20人
</div>
<div v-if="activeIndex === 1">
<p>安全标准化评南与咨询</p>
</div>
<div v-if="activeIndex === 2">
<p>职业卫生检测与评价</p>
</div>
<div v-if="activeIndex === 3">
<p>安全生产检测检验</p>
</div>
</div>
</div>
@ -34,11 +49,8 @@
</template>
<script setup lang="ts">
import { ref } from "vue";
const serverItems=["安全评价", "安全标准化评南与咨询", "职业卫生检测与评价", "安全生产检测检验","环境卫生检测检验","应急救援预案指导","安全培训","交通培训"];
const serverItems=["安全评价", "安全标准化评价与咨询", "职业卫生检测与评价", "安全生产检测检验","环境卫生检测检验","应急救援预案指导","安全培训","交通培训"];
const activeIndex = ref(0);
</script>
<style scoped lang="scss">
@ -47,12 +59,12 @@ const activeIndex = ref(0);
.banner {
width: 100%;
height: 400px;
height: 320px;
background: url("@/assets/images/newbanner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 180px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;
@ -66,98 +78,59 @@ const activeIndex = ref(0);
}
}
.new_container {
width: 100%;
.top {
width: 100%;
height: 60px;
width: 1400px;
margin: 20px auto;
display: flex;
.left{
width: 250px;
box-sizing: border-box;
background: #ffffff;
.wrap {
width: 1400px;
margin: 0 auto;
display: flex;
.list {
font-size: 16px;
line-height: 60px;
border-radius: 4px;
.top{
width: 100%;
background: #3f79ff;
text-align: center;
color: #ffffff;
line-height: 40px;
border-radius: 4px 4px 0 0;
font-weight: bold;
}
.main{
padding: 10px;
.list{
padding: 10px;
font-size: 14px;
cursor: pointer;
position: relative;
margin-right: 40px;
&.active {
color: #006aff;
&:before {
opacity: 1;
}
}
&:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
border-bottom: 3px solid #006aff;
width: 100%;
opacity: 0;
}
&:hover {
color: #006aff;
&:before {
opacity: 1;
}
color: #222222;
margin-bottom: 5px;
border-radius: 4px;
border-left: 4px solid #ffffff;
&:hover{
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
}
.active{
background: #e4ecff;
border-left: 4px solid #3f79ff;
color: #3f79ff;
}
&:last-child{
border-bottom: none;
}
}
}
.new_main{
width: 1400px;
margin: 20px auto;
.right_main{
flex: 1;
margin-left: 20px;
background: #ffffff;
padding: 20px;
box-sizing: border-box;
img{
max-width: 1200px;
margin: 0 auto;
padding: 10px;
color: #333333;
line-height: 2;
text-indent: 2rem;
min-height: 500px;
}
a{
text-decoration: none;
}
.wrap{
width: 100%;
background: #ffffff;
padding: 20px;
border-radius: 4px;
margin-bottom: 20px;
.item{
display: flex;
.info{
padding-left: 20px;
.title{
font-size: 18px;
color: #222222;
}
.text{
font-size: 14px;
color: #696969;
margin-top: 20px;
}
.time{
color: #999999;
margin-top: 10px;
display: flex;
align-items: center;
span{
padding-left: 5px;
}
}
}
}
&:hover{
box-shadow: 0 8px 30px rgba(45, 104, 255, 0.15)
}
}
}
}
}

View File

@ -4,8 +4,8 @@
<div class="banner">
<div class="banner_main">
<h2>企业安全生产</h2>
<div class="s_tit">综合解决方案</div>
<p>结合企业安全生产管理物联监测个性化业务场景等需求为企业量身定制的解决方案</p>
<p >结合企业安全生产管理物联监测个性化业务场景等需求为企业量身定制的解决方案</p>
</div>
</div>
<div class="block1">
@ -203,12 +203,12 @@ const block2Items = [
background: #f0f9ff;
.banner {
width: 100%;
height: 494px;
height: 320px;
background: url("@/assets/images/solution_banner.png") no-repeat top center;
.banner_main {
width: 1400px;
margin: 0 auto;
padding-top: 230px;
padding-top: 135px;
h2 {
font-size: 60px;
color: #ffffff;

24
package-lock.json generated
View File

@ -89,6 +89,7 @@
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.6.tgz",
"integrity": "sha512-H3mcG6ZDLTlYfaSNi0iOKkigqMFvkTKlGUYlD8GW7nNOYRrevuA46iTypPyv+06V3fEmvvazfntkBU34L0azAw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/code-frame": "^7.28.6",
"@babel/generator": "^7.28.6",
@ -4580,6 +4581,7 @@
"resolved": "https://registry.npmjs.org/@stylistic/eslint-plugin/-/eslint-plugin-5.7.1.tgz",
"integrity": "sha512-zjTUwIsEfT+k9BmXwq1QEFYsb4afBlsI1AXFyWQBgggMzwBFOuu92pGrE5OFx90IOjNl+lUbQoTG7f8S0PkOdg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.9.1",
"@typescript-eslint/types": "^8.53.1",
@ -4615,7 +4617,8 @@
"version": "7.0.15",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/@types/node": {
"version": "25.3.5",
@ -4623,6 +4626,7 @@
"integrity": "sha512-oX8xrhvpiyRCQkG1MFchB09f+cXftgIXb3a7UUa4Y3wpmZPw5tyZGTLWhlESOLq1Rq6oDlc8npVU2/9xiCuXMA==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~7.18.0"
}
@ -4682,6 +4686,7 @@
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.53.1.tgz",
"integrity": "sha512-nm3cvFN9SqZGXjmw5bZ6cGmvJSyJPn0wU9gHAZZHDnZl2wF9PhHv78Xf06E0MaNk4zLVHL8hb2/c32XvyJOLQg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "8.53.1",
"@typescript-eslint/types": "8.53.1",
@ -4879,6 +4884,7 @@
"resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.1.2.tgz",
"integrity": "sha512-w5yxH/fkkLWAFAOnMSIbvAikNHYn6pgC7zGF/BasXf+K3CO1cYIPFehYAk5jpcsbiNPMc3goyyw1prGLoyD14g==",
"license": "MIT",
"peer": true,
"dependencies": {
"hookable": "^6.0.1",
"unhead": "2.1.2"
@ -5355,6 +5361,7 @@
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.27.tgz",
"integrity": "sha512-sHZu9QyDPeDmN/MRoshhggVOWE5WlGFStKFwu8G52swATgSny27hJRWteKDSUUzUH+wp+bmeNbhJnEAel/auUQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"@babel/parser": "^7.28.5",
"@vue/compiler-core": "3.5.27",
@ -5662,6 +5669,7 @@
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@ -6091,6 +6099,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"baseline-browser-mapping": "^2.9.0",
"caniuse-lite": "^1.0.30001759",
@ -7125,6 +7134,7 @@
"integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"bin": {
"esbuild": "bin/esbuild"
},
@ -7192,6 +7202,7 @@
"resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
"integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.8.0",
"@eslint-community/regexpp": "^4.12.1",
@ -9720,6 +9731,7 @@
"resolved": "https://registry.npmjs.org/nuxt/-/nuxt-4.3.0.tgz",
"integrity": "sha512-99Iw3E3L5/2QtJyV4errZ0axkX/S9IAFK0AHm0pmRHkCu37OFn8mz2P4/CYTt6B/TG3mcKbXAVaeuF2FsAc1cA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@dxup/nuxt": "^0.3.2",
"@nuxt/cli": "^3.32.0",
@ -9980,6 +9992,7 @@
"resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.110.0.tgz",
"integrity": "sha512-GijUR3K1Ln/QwMyYXRsBtOyzqGaCs9ce5pOug1UtrMg8dSiE7VuuRuIcyYD4nyJbasat3K0YljiKt/PSFPdSBA==",
"license": "MIT",
"peer": true,
"dependencies": {
"@oxc-project/types": "^0.110.0"
},
@ -10294,6 +10307,7 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@ -11084,6 +11098,7 @@
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.56.0.tgz",
"integrity": "sha512-9FwVqlgUHzbXtDg9RCMgodF3Ua4Na6Gau+Sdt9vyCN4RhHfVKX2DCHy3BjMLTDd47ITDhYAnTwGulWTblJSDLg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/estree": "1.0.8"
},
@ -11241,6 +11256,7 @@
"integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
@ -12358,6 +12374,7 @@
"integrity": "sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==",
"hasInstallScript": true,
"license": "MIT",
"peer": true,
"dependencies": {
"napi-postinstall": "^0.3.0"
},
@ -12602,6 +12619,7 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.27.0",
"fdir": "^6.5.0",
@ -12900,6 +12918,7 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-3.5.27.tgz",
"integrity": "sha512-aJ/UtoEyFySPBGarREmN4z6qNKpbEguYHMmXSiOGk69czc+zhs0NF6tEFrY8TZKAl8N/LYAkd4JHVd5E/AsSmw==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/compiler-dom": "3.5.27",
"@vue/compiler-sfc": "3.5.27",
@ -12936,6 +12955,7 @@
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-10.2.0.tgz",
"integrity": "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw==",
"license": "MIT",
"peer": true,
"dependencies": {
"debug": "^4.4.0",
"eslint-scope": "^8.2.0",
@ -12959,6 +12979,7 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
"integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
"license": "MIT",
"peer": true,
"dependencies": {
"@vue/devtools-api": "^6.6.4"
},
@ -13139,6 +13160,7 @@
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
"license": "ISC",
"peer": true,
"bin": {
"yaml": "bin.mjs"
},