xiugai
This commit is contained in:
parent
4bd697b68d
commit
2862ef4f1b
|
@ -2,7 +2,7 @@
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<p>版权所有: 江苏中业消防技术服务有限公司</p>
|
<p>版权所有: 江苏中业消防技术服务有限公司</p>
|
||||||
<p>地址:连云港市海州区海连东路42号(杰瑞科技创意产业园A1房屋的西三层) </p>
|
<p>地址:连云港市海州区海连东路42号(杰瑞科技创意产业园A1房屋的西三层) </p>
|
||||||
<p>电话:18912177843 邮箱:69421099@163.com 网址:www.jszyxiaofang.com</p>
|
<p>电话:18936679119 邮箱:350862995@qq.com 网址:www.jszyxiaofang.com</p>
|
||||||
<p> 苏ICP备2024099083号-1</p>
|
<p> 苏ICP备2024099083号-1</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -94,5 +94,7 @@ const router = createRouter({
|
||||||
history: createWebHistory(process.env.BASE_URL),
|
history: createWebHistory(process.env.BASE_URL),
|
||||||
routes
|
routes
|
||||||
})
|
})
|
||||||
|
router.afterEach((to,from,next) => {
|
||||||
|
window.scrollTo(0,0);
|
||||||
|
})
|
||||||
export default router
|
export default router
|
||||||
|
|
|
@ -171,7 +171,7 @@ export default {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: .225rem;
|
font-size: .225rem;
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
color: #189eef;
|
color: #1D2088;
|
||||||
margin-left: .375rem;
|
margin-left: .375rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="item" v-for="(item,i) in cases">
|
<div class="item" v-for="(item,i) in cases" @click="jumpToArticle(item.id)">
|
||||||
<img :src="$baseUrl+item.img" alt="">
|
<img :src="$baseUrl+item.img" alt="">
|
||||||
<div class="title">{{item.tittle}}</div>
|
<div class="title">{{item.tittle}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
|
|
||||||
methods:{
|
methods:{
|
||||||
getData(){
|
getData(){
|
||||||
this.$http.get(`zy/website/article/page?type=工程案例&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=工程案例&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}&isAsc=asc&orderByColumn=submit_time`).then(res=>{
|
||||||
this.cases = res.data.rows
|
this.cases = res.data.rows
|
||||||
this.total = res.data.total
|
this.total = res.data.total
|
||||||
})
|
})
|
||||||
|
@ -100,6 +100,11 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 3.75rem;
|
height: 3.75rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&:hover{
|
||||||
|
.title{
|
||||||
|
color: #189eef;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
img{
|
img{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
|
@ -44,7 +44,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="item" v-for="(item,i) in cases">
|
<div class="item" v-for="(item,i) in cases" @click="jumpToArticle(item.id)">
|
||||||
<img :src="$baseUrl+item.img" alt="">
|
<img :src="$baseUrl+item.img" alt="">
|
||||||
<div class="title">{{item.tittle}}</div>
|
<div class="title">{{item.tittle}}</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -70,8 +70,8 @@
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
|
<div class="item" v-for="(item,i) in information" @click="jumpToArticle(item.id)">
|
||||||
<span class="title" v-if="item.tittle.length<=35">(测试){{item.tittle}}</span>
|
<span class="title" v-if="item.tittle.length<=35">{{item.tittle}}</span>
|
||||||
<span class="title" v-else>(测试){{item.tittle.slice(0,35)}}...</span>
|
<span class="title" v-else>{{item.tittle.slice(0,35)}}...</span>
|
||||||
<span class="time">{{item.submitTime}}</span>
|
<span class="time">{{item.submitTime}}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -141,7 +141,7 @@
|
||||||
this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
|
||||||
this.introduce = res.data.rows[0]
|
this.introduce = res.data.rows[0]
|
||||||
})
|
})
|
||||||
this.$http.get(`zy/website/article/page?type=工程案例&pageNum=1&pageSize=8`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=工程案例&pageNum=1&pageSize=8&isAsc=asc&orderByColumn=submit_time`).then(res=>{
|
||||||
this.cases = res.data.rows
|
this.cases = res.data.rows
|
||||||
})
|
})
|
||||||
this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
||||||
|
@ -260,6 +260,11 @@
|
||||||
margin-bottom: .55rem;
|
margin-bottom: .55rem;
|
||||||
position: relative;
|
position: relative;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&:hover{
|
||||||
|
.title{
|
||||||
|
color: #189eef;
|
||||||
|
}
|
||||||
|
}
|
||||||
img{
|
img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -1,34 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<!-- <div class="list">
|
<div class="left">
|
||||||
<div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
|
<div class="nav-title">资质证书</div>
|
||||||
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
|
<div :class="{'item': true, active: activeIndex == i}" v-for="(item,i) in certificate" @click="showImg(i)">{{item.tittle}}</div>
|
||||||
<div class="title">{{item.tittle}}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="preview" v-if="bigImgShow">
|
<div class="right">
|
||||||
<img id="bigImg" :src="bigImg" alt="">
|
<div class="title">{{currentImg.tittle}}</div>
|
||||||
<el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
|
<el-watermark
|
||||||
<CircleClose />
|
class="watermark"
|
||||||
</el-icon>
|
content="中业消防"
|
||||||
</div> -->
|
:font="font"
|
||||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
|
:z-index="1"
|
||||||
<el-tab-pane :label="item.tittle" :name="i" v-for="(item,i) in certificate">
|
>
|
||||||
<div class="item">
|
<div class="demo">
|
||||||
<div class="title">{{item.tittle}}</div>
|
<img :id="currentImg.id" :src="getUrl(currentImg.id,$baseUrl+currentImg.img)" style="margin: 0 auto; width: calc(100vw - 8.5rem)">
|
||||||
<el-watermark
|
|
||||||
class="watermark"
|
|
||||||
content="中业消防"
|
|
||||||
:font="font"
|
|
||||||
:z-index="1"
|
|
||||||
>
|
|
||||||
<div class="demo">
|
|
||||||
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
|
|
||||||
</div>
|
|
||||||
</el-watermark>
|
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-watermark>
|
||||||
</el-tabs>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -42,6 +30,7 @@
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
activeName:0,
|
activeName:0,
|
||||||
|
activeIndex:0,
|
||||||
certificate:[],
|
certificate:[],
|
||||||
bigImgShow: false,
|
bigImgShow: false,
|
||||||
bigImg:'',
|
bigImg:'',
|
||||||
|
@ -49,6 +38,7 @@
|
||||||
fontSize: 26,
|
fontSize: 26,
|
||||||
color: 'rgba(0, 0, 0, 0.15)',
|
color: 'rgba(0, 0, 0, 0.15)',
|
||||||
},
|
},
|
||||||
|
currentImg:{}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
|
@ -59,16 +49,13 @@
|
||||||
getData(){
|
getData(){
|
||||||
this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
|
||||||
this.certificate = res.data.rows
|
this.certificate = res.data.rows
|
||||||
|
this.currentImg = this.certificate[0]
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
showImg(item){
|
showImg(i){
|
||||||
this.bigImgShow = true
|
this.currentImg = this.certificate[i]
|
||||||
this.$nextTick(()=>{
|
this.activeIndex = i
|
||||||
const element = document.getElementById('bigImg');
|
|
||||||
this.hidePic(element,this.$baseUrl+item.img)
|
|
||||||
|
|
||||||
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
// 防止盗图
|
// 防止盗图
|
||||||
getUrl(id,url){
|
getUrl(id,url){
|
||||||
|
@ -124,10 +111,83 @@
|
||||||
::v-deep .el-tabs__active-bar{
|
::v-deep .el-tabs__active-bar{
|
||||||
background-color: #1D2088;
|
background-color: #1D2088;
|
||||||
}
|
}
|
||||||
|
::v-deep .watermark{
|
||||||
|
.demo{
|
||||||
|
img{
|
||||||
|
margin: o auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
.page{
|
.page{
|
||||||
padding: 1rem 1rem;
|
display: flex;
|
||||||
|
justify-content: stretch;
|
||||||
|
padding: 0 2rem;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
height: auto;
|
||||||
|
.left{
|
||||||
|
width: 3.75rem;
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
height: 12rem;
|
||||||
.item{
|
.item{
|
||||||
|
height: 1rem;
|
||||||
|
border-bottom: 1px dashed #b6b4b4;
|
||||||
|
line-height: 1rem;
|
||||||
|
padding-left: .6rem;
|
||||||
|
padding-right: .375rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
position: relative;
|
||||||
|
font-size: .32rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&::before{
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
width: .075rem;
|
||||||
|
height: .075rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #a8a6a6;
|
||||||
|
left: .375rem;
|
||||||
|
top: .4625rem;
|
||||||
|
}
|
||||||
|
&:hover{
|
||||||
|
color: #171A89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: #171A89;
|
||||||
|
}
|
||||||
|
.nav-title{
|
||||||
|
height: 1.4rem;
|
||||||
|
line-height: 1.4rem;
|
||||||
|
font-size: .45rem;
|
||||||
|
background-color: RGBA(100, 134, 207, .7);
|
||||||
|
color: #fff;
|
||||||
|
padding-left: .6rem;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.right{
|
||||||
|
background-color: #fff;
|
||||||
|
width: calc(100vw - 7.75rem);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
.title{
|
||||||
|
font-size: .5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: #333333;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: .5rem 0 .375rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .item{
|
||||||
img{
|
img{
|
||||||
width: calc(100vw - 8rem);
|
width: calc(100vw - 8rem);
|
||||||
height: auto;
|
height: auto;
|
||||||
|
@ -140,7 +200,7 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: .375rem;
|
margin-bottom: .375rem;
|
||||||
}
|
}
|
||||||
}
|
} */
|
||||||
.preview{
|
.preview{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 999;
|
z-index: 999;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
|
<!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
|
||||||
<el-tab-pane label="公司新闻" name="1">
|
<el-tab-pane label="公司新闻" name="1">
|
||||||
<div class="item-1">
|
<div class="item-1">
|
||||||
<div class="item" v-for="(item,i) in news" @click="jumpToArticle(item.id)">
|
<div class="item" v-for="(item,i) in news" @click="jumpToArticle(item.id)">
|
||||||
|
@ -30,17 +30,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs> -->
|
||||||
<div class="page-toggle" v-if="show">
|
|
||||||
<el-pagination
|
<div class="left">
|
||||||
background
|
<div class="nav-title">资讯中心</div>
|
||||||
@current-change="handleCurrentChange"
|
<div :class="{'item': true, active: activeName == i}" v-for="(item,i) in menu" @click="handleClick(i)">{{item.name}}</div>
|
||||||
:page-size="queryParams.pageSize"
|
</div>
|
||||||
layout="prev, pager, next"
|
<div class="right">
|
||||||
:total="total">
|
<div class="item" v-for="(item,i) in dataList" @click="jumpToArticle(item.id)">
|
||||||
</el-pagination>
|
<div class="title" v-if="item.tittle.length>38">{{item.tittle.slice(0,38)}}...</div>
|
||||||
|
<div class="title" v-else>{{item.tittle}}.</div>
|
||||||
|
<div class="time">{{item.submitTime}}</div>
|
||||||
|
</div>
|
||||||
|
<div class="page-toggle" v-if="show">
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:page-size="queryParams.pageSize"
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="total">
|
||||||
|
</el-pagination>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
@ -53,10 +64,16 @@
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
show: true,
|
show: true,
|
||||||
activeName: '1',
|
activeName: 0,
|
||||||
|
dataList:[],
|
||||||
news:[],
|
news:[],
|
||||||
dynamic:[],
|
dynamic:[],
|
||||||
statute:[],
|
statute:[],
|
||||||
|
menu: [
|
||||||
|
{name: '公司新闻'},
|
||||||
|
{name: '行业动态'},
|
||||||
|
{name: '法规标准'},
|
||||||
|
],
|
||||||
total: 0,
|
total: 0,
|
||||||
queryParams:{
|
queryParams:{
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
|
@ -69,33 +86,36 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
methods:{
|
methods:{
|
||||||
|
showData(i){
|
||||||
|
|
||||||
|
},
|
||||||
jumpToArticle(id){
|
jumpToArticle(id){
|
||||||
this.$router.push({path:'/article',query:{id: id}})
|
this.$router.push({path:'/article',query:{id: id}})
|
||||||
},
|
},
|
||||||
getData(){
|
getData(){
|
||||||
if(this.activeName==1){
|
if(this.activeName==0){
|
||||||
this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
||||||
this.news = res.data.rows
|
this.dataList = res.data.rows
|
||||||
|
this.total = res.data.total
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if(this.activeName==1){
|
||||||
|
this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
||||||
|
this.dataList = res.data.rows
|
||||||
this.total = res.data.total
|
this.total = res.data.total
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if(this.activeName==2){
|
if(this.activeName==2){
|
||||||
this.$http.get(`zy/website/article/page?type=行业动态&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
|
||||||
this.dynamic = res.data.rows
|
|
||||||
this.total = res.data.total
|
|
||||||
})
|
|
||||||
}
|
|
||||||
if(this.activeName==3){
|
|
||||||
this.$http.get(`zy/website/article/page?type=法规标准&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
this.$http.get(`zy/website/article/page?type=法规标准&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
||||||
this.statute = res.data.rows
|
this.dataList = res.data.rows
|
||||||
this.total = res.data.total
|
this.total = res.data.total
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
handleClick(tabsPaneContext,e){
|
handleClick(i){
|
||||||
this.show = false
|
this.show = false
|
||||||
this.activeName = tabsPaneContext.props.name
|
this.activeName = i
|
||||||
this.queryParams.pageNum = 1
|
this.queryParams.pageNum = 1
|
||||||
this.getData()
|
this.getData()
|
||||||
this.$nextTick(()=>{
|
this.$nextTick(()=>{
|
||||||
|
@ -134,10 +154,10 @@
|
||||||
background-color: #1D2088;
|
background-color: #1D2088;
|
||||||
}
|
}
|
||||||
.page-toggle{
|
.page-toggle{
|
||||||
width: calc(100vw - 6.7rem);
|
width: calc(100vw - 8.6rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
margin-top: .5rem;
|
margin-top: .7rem;
|
||||||
::v-deep{
|
::v-deep{
|
||||||
.el-pagination{
|
.el-pagination{
|
||||||
li,button{
|
li,button{
|
||||||
|
@ -161,83 +181,88 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.page{
|
.page{
|
||||||
min-height: 10.75rem;
|
display: flex;
|
||||||
padding: 1rem 3rem;
|
justify-content: stretch;
|
||||||
background-color: #f8f7f7;
|
padding: 0 2rem;
|
||||||
.item-1{
|
background-color: #f5f5f5;
|
||||||
padding: .125rem .5rem;
|
height: auto;
|
||||||
|
.left{
|
||||||
|
width: 3.75rem;
|
||||||
|
background-color: #e7e7e7;
|
||||||
|
height: 12rem;
|
||||||
.item{
|
.item{
|
||||||
width: 100%;
|
height: 1rem;
|
||||||
display: flex;
|
border-bottom: 1px dashed #b6b4b4;
|
||||||
justify-content: space-between;
|
line-height: 1rem;
|
||||||
align-items: center;
|
padding-left: .6rem;
|
||||||
border-bottom: 1px solid #ccc;
|
padding-right: .375rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
position: relative;
|
position: relative;
|
||||||
&:last-child{
|
font-size: .32rem;
|
||||||
border-bottom: none;
|
cursor: pointer;
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-size: .25rem;
|
|
||||||
line-height: .8rem;
|
|
||||||
margin-left: .375rem;
|
|
||||||
}
|
|
||||||
.time{
|
|
||||||
font-size: .23rem;
|
|
||||||
}
|
|
||||||
&::before{
|
&::before{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: '';
|
content: '';
|
||||||
width: .125rem;
|
width: .075rem;
|
||||||
height: .125rem;
|
height: .075rem;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background-color: #e93535;
|
background-color: #a8a6a6;
|
||||||
left: .0625rem;
|
left: .375rem;
|
||||||
|
top: .4625rem;
|
||||||
}
|
}
|
||||||
|
&:hover{
|
||||||
|
color: #171A89;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
color: #171A89;
|
||||||
|
}
|
||||||
|
.nav-title{
|
||||||
|
height: 1.4rem;
|
||||||
|
line-height: 1.4rem;
|
||||||
|
font-size: .45rem;
|
||||||
|
background-color: RGBA(100, 134, 207, .7);
|
||||||
|
color: #fff;
|
||||||
|
padding-left: .6rem;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
.item-2{
|
.right{
|
||||||
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;
|
background-color: #fff;
|
||||||
/* justify-content: space-between; */
|
width: calc(100vw - 7.75rem);
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
padding-top: .37rem;
|
||||||
|
margin-left: .4rem;
|
||||||
.item{
|
.item{
|
||||||
width: 33.3%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: space-between;
|
||||||
justify-content: center;
|
line-height: 1rem;
|
||||||
align-items: center;
|
border-bottom: 1px solid #ccc;
|
||||||
margin-bottom: .375rem;
|
cursor: pointer;
|
||||||
img{
|
&:hover{
|
||||||
width: 90%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.info{
|
|
||||||
margin-top: .125rem;
|
|
||||||
|
|
||||||
.title{
|
.title{
|
||||||
font-size: .25rem;
|
color: #189eef;
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
.time{
|
|
||||||
font-size: 14px;
|
|
||||||
color: #666666;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.title{
|
||||||
|
font-size: .3rem;
|
||||||
|
color: #333333;
|
||||||
|
padding-left: .375rem;
|
||||||
|
}
|
||||||
|
.time{
|
||||||
|
font-size: .25rem;
|
||||||
|
color: #666666;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -13,11 +13,21 @@
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="资质证书" name="3">
|
<el-tab-pane label="资质证书" name="3">
|
||||||
<div class="item-3">
|
<div class="area" style="padding: 0 2.475rem;background-color: #f1f1f1;">
|
||||||
<div class="item" v-for="(item,i) in certificate">
|
<el-watermark
|
||||||
<img :src="$baseUrl+item.img" alt="">
|
class="watermark"
|
||||||
<div class="title">{{item.tittle}}</div>
|
content="中业消防"
|
||||||
</div>
|
:font="font"
|
||||||
|
:gap="[50,50]"
|
||||||
|
:z-index="1"
|
||||||
|
>
|
||||||
|
<div class="item-3">
|
||||||
|
<div class="item" v-for="(item,i) in certificate">
|
||||||
|
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)" alt="">
|
||||||
|
<div class="title">{{item.tittle}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-watermark>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="联系我们" name="4">
|
<el-tab-pane label="联系我们" name="4">
|
||||||
|
@ -27,7 +37,7 @@
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<img src="@/assets/images/电话.png" alt="">
|
<img src="@/assets/images/电话.png" alt="">
|
||||||
</span>
|
</span>
|
||||||
<span class="value">电话:18912177843</span>
|
<span class="value">电话:18936679119</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="address">
|
<div class="address">
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
|
@ -69,6 +79,10 @@
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
introduce:{},
|
introduce:{},
|
||||||
|
font: {
|
||||||
|
fontSize: 16,
|
||||||
|
color: 'rgba(0, 0, 0, 0.15)',
|
||||||
|
},
|
||||||
structure:{},
|
structure:{},
|
||||||
certificate:[],
|
certificate:[],
|
||||||
activeName: '1',
|
activeName: '1',
|
||||||
|
@ -103,7 +117,34 @@
|
||||||
handleClick(tabsPaneContext,e){
|
handleClick(tabsPaneContext,e){
|
||||||
console.log(tabsPaneContext)
|
console.log(tabsPaneContext)
|
||||||
console.log(e)
|
console.log(e)
|
||||||
}
|
},
|
||||||
|
// 防止盗图
|
||||||
|
getUrl(id,url){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
const eleAppend = document.getElementById(id);
|
||||||
|
this.hidePic(eleAppend,url)
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
hidePic(element,url){
|
||||||
|
window.URL = window.URL || window.webkitURL
|
||||||
|
console.log(element)
|
||||||
|
if(typeof history.pushState === 'function'){
|
||||||
|
var xhr = new XMLHttpRequest()
|
||||||
|
xhr.open('get', url, true)
|
||||||
|
xhr.responseType = 'blob'
|
||||||
|
xhr.onload = function () {
|
||||||
|
if (this.status === 200) {
|
||||||
|
var blob = this.response
|
||||||
|
element.onload = function (e) {
|
||||||
|
window.URL.revokeObjectURL(element.src)
|
||||||
|
}
|
||||||
|
element.src = window.URL.createObjectURL(blob)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -168,7 +209,7 @@
|
||||||
.item-3{
|
.item-3{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 1rem 2.475rem;
|
padding: 1rem 0;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
/* justify-content: space-between; */
|
/* justify-content: space-between; */
|
||||||
.item{
|
.item{
|
||||||
|
|
Loading…
Reference in New Issue