310 lines
11 KiB
Vue
310 lines
11 KiB
Vue
|
<template>
|
|||
|
|
<div class="page">
|
|||
|
|
<div class="about">
|
|||
|
|
<div class="title">
|
|||
|
|
<div class="zh-title">关于我们</div>
|
|||
|
|
<div class="en-title">
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="title">ABOUT US</span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="left">
|
|||
|
|
<img src="@/assets/images/15探海神龟.jpg" alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="indroduce">
|
|||
|
|
江苏中业消防技术服务有限公司位于江苏省连云港市，注册资本1000万元，具备消防设施工程专业承包贰级、建筑装修装饰工程专业承包贰级、施工劳务不分等级资质，同时具备建筑消防设施检测、维保、评估资质。是一家集设计咨询、消防技术咨询、消防工程技术服务、消防施工、火灾隐患排查整治指导及消防设施维护保养、检测、安全评估为一体的综合性消防技术服务机构，一直致力于消防领域的科学研究与社会消防技术服务，实现品牌创造与效益双赢。
|
|||
|
|
</div>
|
|||
|
|
<div class="menu">
|
|||
|
|
<div class="item">
|
|||
|
|
<img src="@/assets/images/企业介绍(1).png" alt="">
|
|||
|
|
<span>公司介绍</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<img src="@/assets/images/组织架构管理.png" alt="">
|
|||
|
|
<span>组织机构</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<img src="@/assets/images/资质.png" alt="">
|
|||
|
|
<span>资质证书</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="case">
|
|||
|
|
<div class="title">
|
|||
|
|
<div class="zh-title">工程案例</div>
|
|||
|
|
<div class="en-title">
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="title">CASES</span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list">
|
|||
|
|
<div class="item" v-for="i in 8">
|
|||
|
|
<img src="@/assets/images/15探海神龟.jpg" alt="">
|
|||
|
|
<div class="title">探海神龟</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="information">
|
|||
|
|
<div class="title">
|
|||
|
|
<div class="zh-title">资讯中心</div>
|
|||
|
|
<div class="en-title">
|
|||
|
|
<span class="line"></span>
|
|||
|
|
<span class="title">NEWS</span>
|
|||
|
|
<span class="line"></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content">
|
|||
|
|
<div class="menu">
|
|||
|
|
<div :class="{'item':true, 'active': activeIndexInfo==i}"
|
|||
|
|
v-for="(item,i) in informationMenu" @click="selectTab(i)">{{item.name}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="list">
|
|||
|
|
<div class="left">
|
|||
|
|
<div class="item" v-for="i in 5">
|
|||
|
|
<span class="title">中业消防获“第一批成都工业精品”认定</span>
|
|||
|
|
<span class="time">2019-2-13</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="right">
|
|||
|
|
<div class="item" v-for="i in 2">
|
|||
|
|
<img src="@/assets/images/15探海神龟.jpg" alt="">
|
|||
|
|
<div class="title">中业消防获“第一批成都工业精品”认定</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'Home',
|
|||
|
|
components: {
|
|||
|
|
},
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
activeIndexInfo: 0,
|
|||
|
|
informationMenu:[
|
|||
|
|
{name:'公司新闻'},
|
|||
|
|
{name:'行业动态'},
|
|||
|
|
{name:'消防规范'}
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created(){
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods:{
|
|||
|
|
selectTab(i){
|
|||
|
|
this.activeIndexInfo = i
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.title{
|
|||
|
|
text-align: center;
|
|||
|
|
.zh-title{
|
|||
|
|
color: #1D2088;
|
|||
|
|
font-size: .5rem;
|
|||
|
|
font-weight: bold;
|
|||
|
|
letter-spacing: .025rem;
|
|||
|
|
font-family: 'Source Han Sans CN';
|
|||
|
|
}
|
|||
|
|
.en-title{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
letter-spacing: .0125rem;
|
|||
|
|
margin-top: .28rem;
|
|||
|
|
.line{
|
|||
|
|
display: inline-block;
|
|||
|
|
width: .85rem;
|
|||
|
|
height: .0125rem;
|
|||
|
|
background-color: #B2B2B2;
|
|||
|
|
margin: .3rem;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
font-size: .225rem;
|
|||
|
|
color: #B2B2B2;
|
|||
|
|
line-height: .6rem;
|
|||
|
|
font-family: Arial;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.page{
|
|||
|
|
background: url('@/assets/images/组 11 (1).png') no-repeat;
|
|||
|
|
background-size: 100% auto;
|
|||
|
|
background-position: 0 5.4rem;
|
|||
|
|
.about{
|
|||
|
|
margin-top: 1.25rem;
|
|||
|
|
.content{
|
|||
|
|
margin: .75rem 4.3rem 1.25rem 4.3rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.left{
|
|||
|
|
img{
|
|||
|
|
width: 7.025rem;
|
|||
|
|
height: 4.925rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right{
|
|||
|
|
.indroduce{
|
|||
|
|
width: 7.5rem;
|
|||
|
|
font-size: .225rem;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: .6rem;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
}
|
|||
|
|
.menu{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: .14rem;
|
|||
|
|
.item{
|
|||
|
|
width: 1.625rem;
|
|||
|
|
height: .5rem;
|
|||
|
|
background: #1D2088;
|
|||
|
|
border-radius: .075rem;
|
|||
|
|
margin-right: .175rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
img{
|
|||
|
|
width: auto;
|
|||
|
|
height: .25rem;
|
|||
|
|
}
|
|||
|
|
span{
|
|||
|
|
font-size: .2rem;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
margin-left: .1rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.case{
|
|||
|
|
margin-top: 3.55rem;
|
|||
|
|
.list{
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: .85rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
.item{
|
|||
|
|
width: 4.9rem;
|
|||
|
|
height: 3.75rem;
|
|||
|
|
padding: 0 .275rem;
|
|||
|
|
margin-bottom: .55rem;
|
|||
|
|
position: relative;
|
|||
|
|
img{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
position: absolute;
|
|||
|
|
height: .55rem;
|
|||
|
|
width: 4.35rem;
|
|||
|
|
background: RGBA(207, 70, 75, .6);
|
|||
|
|
bottom: 0;
|
|||
|
|
font-size: .225rem;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: .55rem;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.information{
|
|||
|
|
margin-top: 1.6rem;
|
|||
|
|
.content{
|
|||
|
|
.menu{
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
.item{
|
|||
|
|
width: 1.65rem;
|
|||
|
|
height: .475rem;
|
|||
|
|
border-radius: .2375rem;
|
|||
|
|
border: .0125rem solid #CCCCCC;
|
|||
|
|
font-size: .225rem;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: .475rem;
|
|||
|
|
text-align: center;
|
|||
|
|
margin: .625rem .125rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.active{
|
|||
|
|
background: #E60012;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.list{
|
|||
|
|
margin: 0 2.375rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
.left{
|
|||
|
|
width: 8.25rem;
|
|||
|
|
.item{
|
|||
|
|
width: 100%;
|
|||
|
|
height: .75rem;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: .2rem;
|
|||
|
|
color: #282828;
|
|||
|
|
border-bottom: .0125rem solid #DADADA;
|
|||
|
|
&:last-child{
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
color: #666666;
|
|||
|
|
font-size: .175rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.right{
|
|||
|
|
display: flex;
|
|||
|
|
.item{
|
|||
|
|
width: 4.675rem;
|
|||
|
|
height: 3.2875rem;
|
|||
|
|
margin-left: .4rem;
|
|||
|
|
position: relative;
|
|||
|
|
img{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.title{
|
|||
|
|
position: absolute;
|
|||
|
|
width: 4.675rem;
|
|||
|
|
height: .475rem;
|
|||
|
|
background-color: RGBA(0, 0, 0, .5);
|
|||
|
|
font-size: .2rem;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
line-height: .475rem;
|
|||
|
|
bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
|