247 lines
7.9 KiB
Vue
247 lines
7.9 KiB
Vue
<template>
|
||
<div class="page">
|
||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||
<el-tab-pane label="公司介绍" name="1">
|
||
<div class="item-1">
|
||
<div class="title">{{introduce.tittle}}</div>
|
||
<div class="ql-editor content" v-html="introduce.content" ref="content"></div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="组织机构" name="2">
|
||
<div class="item-2">
|
||
<img :src="$baseUrl+structure.img" alt="">
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="资质证书" name="3">
|
||
<div class="item-3">
|
||
<div class="item" v-for="(item,i) in certificate">
|
||
<img :src="$baseUrl+item.img" alt="">
|
||
<div class="title">{{item.tittle}}</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="联系我们" name="4">
|
||
<div class="item-4">
|
||
<div class="lianxi">
|
||
<div class="phone">
|
||
<span class="icon">
|
||
<img src="@/assets/images/电话.png" alt="">
|
||
</span>
|
||
<span class="value">电话：18912177843</span>
|
||
</div>
|
||
<div class="address">
|
||
<span class="icon">
|
||
<img src="@/assets/images/地址.png" alt="">
|
||
</span>
|
||
<span class="value">地址：连云港市海州区海连东路42号（杰瑞科技创意产业园A1房屋的西三层）</span>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="left">
|
||
<baidu-map class="map" ak="GsmliYCDkPOEKXsh4NHkYVBfWdKP6YiQ" v="3.0" type="API" :center="{lng: 119.135022, lat: 34.621419}" :zoom="15" :scroll-wheel-zoom="true">
|
||
<!-- 红点定位 -->
|
||
<bm-marker
|
||
:position="{lng: 119.200252, lat: 34.603919}"
|
||
:dragging="false"
|
||
></bm-marker>
|
||
<!-- 缩放 -->
|
||
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
|
||
|
||
</baidu-map>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { BaiduMap } from 'vue-baidu-map-3x'
|
||
export default {
|
||
name: 'Bottom',
|
||
components: {
|
||
BaiduMap
|
||
},
|
||
data(){
|
||
return{
|
||
introduce:{},
|
||
structure:{},
|
||
certificate:[],
|
||
activeName: '1',
|
||
center: { lng: 0, lat: 0 },
|
||
|
||
}
|
||
},
|
||
created(){
|
||
|
||
if(this.$route.query&&this.$route.query.name){
|
||
this.activeName = this.$route.query.name
|
||
}
|
||
this.getData()
|
||
},
|
||
activated(){
|
||
if(this.$route.query&&this.$route.query.name){
|
||
this.activeName = this.$route.query.name
|
||
}
|
||
},
|
||
methods:{
|
||
getData(){
|
||
this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
|
||
this.introduce = res.data.rows[0]
|
||
})
|
||
this.$http.get(`zy/website/article/page?type=组织机构`).then(res=>{
|
||
this.structure = res.data.rows[0]
|
||
})
|
||
this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
|
||
this.certificate = res.data.rows
|
||
})
|
||
},
|
||
handleClick(tabsPaneContext,e){
|
||
console.log(tabsPaneContext)
|
||
console.log(e)
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-tabs{
|
||
--el-tabs-header-height: 1.1rem
|
||
}
|
||
::v-deep .el-tabs__header{
|
||
margin-bottom: 0;
|
||
}
|
||
::v-deep .el-tabs__nav-scroll{
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
::v-deep .el-tabs__item{
|
||
font-size: .25rem;
|
||
}
|
||
::v-deep .el-tabs__item:hover{
|
||
color: #1D2088;
|
||
}
|
||
::v-deep .el-tabs__item.is-active{
|
||
color: #1D2088;
|
||
}
|
||
::v-deep .el-tabs__active-bar{
|
||
width: 1rem!important;
|
||
background-color: #1D2088;
|
||
}
|
||
.page{
|
||
min-height: 10.75rem;
|
||
background: url('@/assets/images/1.png') no-repeat;
|
||
background-size: auto 8.25rem;
|
||
background-position: 0 1.5rem;
|
||
|
||
.item-1{
|
||
font-size: .225rem;
|
||
color: #333333;
|
||
line-height: .6rem;
|
||
font-family: Source Han Sans CN;
|
||
padding: 1rem 2.375rem;
|
||
.title{
|
||
font-size: .35rem;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
}
|
||
.content{
|
||
margin-top: .25rem;
|
||
font-size: .275rem;
|
||
line-height: .6rem;
|
||
}
|
||
|
||
}
|
||
.item-2{
|
||
margin-top: 1rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
img{
|
||
width: 13.7125rem;
|
||
height: auto;
|
||
}
|
||
}
|
||
.item-3{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 1rem 2.475rem;
|
||
background-color: #fff;
|
||
/* justify-content: space-between; */
|
||
.item{
|
||
width: 33.3%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-bottom: .375rem;
|
||
img{
|
||
/* width: 90%; */
|
||
width: auto;
|
||
height: 3.75rem;
|
||
}
|
||
.title{
|
||
margin-top: .125rem;
|
||
font-size: .25rem;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.item-4{
|
||
.lianxi{
|
||
width: 100%;
|
||
height: 2.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 1.625rem;
|
||
background: url('@/assets/images/lx-bg.jpg') no-repeat;
|
||
background-size: 100% 100%;
|
||
.phone,.address{
|
||
display: flex;
|
||
margin-left: .75rem;
|
||
}
|
||
.icon{
|
||
display: inline-block;
|
||
width: .575rem;
|
||
height: .575rem;
|
||
background: #A11715;
|
||
border-radius: .05rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
img{
|
||
width: .375rem;
|
||
height: .375rem;
|
||
}
|
||
}
|
||
.value{
|
||
display: inline-block;
|
||
/* width: 4.875rem; */
|
||
height: .575rem;
|
||
background: #A11715;
|
||
border-radius: .05rem;
|
||
margin-left: .0375rem;
|
||
line-height: .575rem;
|
||
color: #fff;
|
||
padding:0 .375rem;
|
||
font-size: .25rem;
|
||
}
|
||
|
||
|
||
}
|
||
.map{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 1rem;
|
||
width: 100%;
|
||
height: 10rem;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|