xiugai
This commit is contained in:
parent
4bd697b68d
commit
2862ef4f1b
|
@ -2,7 +2,7 @@
|
|||
<div class="page">
|
||||
<p>版权所有: 江苏中业消防技术服务有限公司</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>
|
||||
|
||||
</div>
|
||||
|
|
|
@ -94,5 +94,7 @@ const router = createRouter({
|
|||
history: createWebHistory(process.env.BASE_URL),
|
||||
routes
|
||||
})
|
||||
|
||||
router.afterEach((to,from,next) => {
|
||||
window.scrollTo(0,0);
|
||||
})
|
||||
export default router
|
||||
|
|
|
@ -171,7 +171,7 @@ export default {
|
|||
display: inline-block;
|
||||
font-size: .225rem;
|
||||
width: 2.5rem;
|
||||
color: #189eef;
|
||||
color: #1D2088;
|
||||
margin-left: .375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<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="">
|
||||
<div class="title">{{item.tittle}}</div>
|
||||
</div>
|
||||
|
@ -39,7 +39,7 @@
|
|||
|
||||
methods:{
|
||||
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.total = res.data.total
|
||||
})
|
||||
|
@ -100,6 +100,11 @@
|
|||
position: relative;
|
||||
height: 3.75rem;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
.title{
|
||||
color: #189eef;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
width: 90%;
|
||||
|
|
|
@ -44,7 +44,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<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="">
|
||||
<div class="title">{{item.tittle}}</div>
|
||||
</div>
|
||||
|
@ -70,8 +70,8 @@
|
|||
<div class="list">
|
||||
<div class="left">
|
||||
<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-else>(测试){{item.tittle.slice(0,35)}}...</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="time">{{item.submitTime}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -141,7 +141,7 @@
|
|||
this.$http.get(`zy/website/article/page?type=公司介绍`).then(res=>{
|
||||
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.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
|
||||
|
@ -260,6 +260,11 @@
|
|||
margin-bottom: .55rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
.title{
|
||||
color: #189eef;
|
||||
}
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
@ -1,34 +1,22 @@
|
|||
<template>
|
||||
<div class="page">
|
||||
<!-- <div class="list">
|
||||
<div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
|
||||
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
|
||||
<div class="title">{{item.tittle}}</div>
|
||||
</div>
|
||||
<div class="left">
|
||||
<div class="nav-title">资质证书</div>
|
||||
<div :class="{'item': true, active: activeIndex == i}" v-for="(item,i) in certificate" @click="showImg(i)">{{item.tittle}}</div>
|
||||
</div>
|
||||
<div class="preview" v-if="bigImgShow">
|
||||
<img id="bigImg" :src="bigImg" alt="">
|
||||
<el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
|
||||
<CircleClose />
|
||||
</el-icon>
|
||||
</div> -->
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="left" >
|
||||
<el-tab-pane :label="item.tittle" :name="i" v-for="(item,i) in certificate">
|
||||
<div class="item">
|
||||
<div class="title">{{item.tittle}}</div>
|
||||
<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 class="right">
|
||||
<div class="title">{{currentImg.tittle}}</div>
|
||||
<el-watermark
|
||||
class="watermark"
|
||||
content="中业消防"
|
||||
:font="font"
|
||||
:z-index="1"
|
||||
>
|
||||
<div class="demo">
|
||||
<img :id="currentImg.id" :src="getUrl(currentImg.id,$baseUrl+currentImg.img)" style="margin: 0 auto; width: calc(100vw - 8.5rem)">
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-watermark>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -42,6 +30,7 @@
|
|||
data(){
|
||||
return{
|
||||
activeName:0,
|
||||
activeIndex:0,
|
||||
certificate:[],
|
||||
bigImgShow: false,
|
||||
bigImg:'',
|
||||
|
@ -49,6 +38,7 @@
|
|||
fontSize: 26,
|
||||
color: 'rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
currentImg:{}
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
@ -59,16 +49,13 @@
|
|||
getData(){
|
||||
this.$http.get(`zy/website/article/page?type=资质证书`).then(res=>{
|
||||
this.certificate = res.data.rows
|
||||
this.currentImg = this.certificate[0]
|
||||
})
|
||||
},
|
||||
showImg(item){
|
||||
this.bigImgShow = true
|
||||
this.$nextTick(()=>{
|
||||
const element = document.getElementById('bigImg');
|
||||
this.hidePic(element,this.$baseUrl+item.img)
|
||||
showImg(i){
|
||||
this.currentImg = this.certificate[i]
|
||||
this.activeIndex = i
|
||||
|
||||
|
||||
})
|
||||
},
|
||||
// 防止盗图
|
||||
getUrl(id,url){
|
||||
|
@ -124,10 +111,83 @@
|
|||
::v-deep .el-tabs__active-bar{
|
||||
background-color: #1D2088;
|
||||
}
|
||||
::v-deep .watermark{
|
||||
.demo{
|
||||
img{
|
||||
margin: o auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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{
|
||||
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{
|
||||
width: calc(100vw - 8rem);
|
||||
height: auto;
|
||||
|
@ -140,7 +200,7 @@
|
|||
font-weight: bold;
|
||||
margin-bottom: .375rem;
|
||||
}
|
||||
}
|
||||
} */
|
||||
.preview{
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">
|
||||
<div class="item-1">
|
||||
<div class="item" v-for="(item,i) in news" @click="jumpToArticle(item.id)">
|
||||
|
@ -30,17 +30,28 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<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>
|
||||
</el-tabs> -->
|
||||
|
||||
<div class="left">
|
||||
<div class="nav-title">资讯中心</div>
|
||||
<div :class="{'item': true, active: activeName == i}" v-for="(item,i) in menu" @click="handleClick(i)">{{item.name}}</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item" v-for="(item,i) in dataList" @click="jumpToArticle(item.id)">
|
||||
<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>
|
||||
|
||||
</template>
|
||||
|
@ -53,10 +64,16 @@
|
|||
data(){
|
||||
return{
|
||||
show: true,
|
||||
activeName: '1',
|
||||
activeName: 0,
|
||||
dataList:[],
|
||||
news:[],
|
||||
dynamic:[],
|
||||
statute:[],
|
||||
menu: [
|
||||
{name: '公司新闻'},
|
||||
{name: '行业动态'},
|
||||
{name: '法规标准'},
|
||||
],
|
||||
total: 0,
|
||||
queryParams:{
|
||||
pageNum: 1,
|
||||
|
@ -69,33 +86,36 @@
|
|||
},
|
||||
|
||||
methods:{
|
||||
showData(i){
|
||||
|
||||
},
|
||||
jumpToArticle(id){
|
||||
this.$router.push({path:'/article',query:{id: id}})
|
||||
},
|
||||
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.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
|
||||
})
|
||||
}
|
||||
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.statute = res.data.rows
|
||||
this.dataList = res.data.rows
|
||||
this.total = res.data.total
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
handleClick(tabsPaneContext,e){
|
||||
handleClick(i){
|
||||
this.show = false
|
||||
this.activeName = tabsPaneContext.props.name
|
||||
this.activeName = i
|
||||
this.queryParams.pageNum = 1
|
||||
this.getData()
|
||||
this.$nextTick(()=>{
|
||||
|
@ -134,10 +154,10 @@
|
|||
background-color: #1D2088;
|
||||
}
|
||||
.page-toggle{
|
||||
width: calc(100vw - 6.7rem);
|
||||
width: calc(100vw - 8.6rem);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
margin-top: .5rem;
|
||||
margin-top: .7rem;
|
||||
::v-deep{
|
||||
.el-pagination{
|
||||
li,button{
|
||||
|
@ -161,83 +181,88 @@
|
|||
}
|
||||
}
|
||||
.page{
|
||||
min-height: 10.75rem;
|
||||
padding: 1rem 3rem;
|
||||
background-color: #f8f7f7;
|
||||
.item-1{
|
||||
padding: .125rem .5rem;
|
||||
display: flex;
|
||||
justify-content: stretch;
|
||||
padding: 0 2rem;
|
||||
background-color: #f5f5f5;
|
||||
height: auto;
|
||||
.left{
|
||||
width: 3.75rem;
|
||||
background-color: #e7e7e7;
|
||||
height: 12rem;
|
||||
.item{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #ccc;
|
||||
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;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.title{
|
||||
font-size: .25rem;
|
||||
line-height: .8rem;
|
||||
margin-left: .375rem;
|
||||
}
|
||||
.time{
|
||||
font-size: .23rem;
|
||||
}
|
||||
font-size: .32rem;
|
||||
cursor: pointer;
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: .125rem;
|
||||
height: .125rem;
|
||||
width: .075rem;
|
||||
height: .075rem;
|
||||
border-radius: 50%;
|
||||
background-color: #e93535;
|
||||
left: .0625rem;
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.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;
|
||||
.right{
|
||||
background-color: #fff;
|
||||
/* justify-content: space-between; */
|
||||
width: calc(100vw - 7.75rem);
|
||||
padding-bottom: 2rem;
|
||||
padding-top: .37rem;
|
||||
margin-left: .4rem;
|
||||
.item{
|
||||
width: 33.3%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: .375rem;
|
||||
img{
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
.info{
|
||||
margin-top: .125rem;
|
||||
|
||||
justify-content: space-between;
|
||||
line-height: 1rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
.title{
|
||||
font-size: .25rem;
|
||||
color: #333333;
|
||||
}
|
||||
.time{
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
color: #189eef;
|
||||
}
|
||||
}
|
||||
.title{
|
||||
font-size: .3rem;
|
||||
color: #333333;
|
||||
padding-left: .375rem;
|
||||
}
|
||||
.time{
|
||||
font-size: .25rem;
|
||||
color: #666666;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,11 +13,21 @@
|
|||
</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 class="area" style="padding: 0 2.475rem;background-color: #f1f1f1;">
|
||||
<el-watermark
|
||||
class="watermark"
|
||||
content="中业消防"
|
||||
: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>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="联系我们" name="4">
|
||||
|
@ -27,7 +37,7 @@
|
|||
<span class="icon">
|
||||
<img src="@/assets/images/电话.png" alt="">
|
||||
</span>
|
||||
<span class="value">电话:18912177843</span>
|
||||
<span class="value">电话:18936679119</span>
|
||||
</div>
|
||||
<div class="address">
|
||||
<span class="icon">
|
||||
|
@ -69,6 +79,10 @@
|
|||
data(){
|
||||
return{
|
||||
introduce:{},
|
||||
font: {
|
||||
fontSize: 16,
|
||||
color: 'rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
structure:{},
|
||||
certificate:[],
|
||||
activeName: '1',
|
||||
|
@ -103,7 +117,34 @@
|
|||
handleClick(tabsPaneContext,e){
|
||||
console.log(tabsPaneContext)
|
||||
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{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 2.475rem;
|
||||
padding: 1rem 0;
|
||||
background-color: #fff;
|
||||
/* justify-content: space-between; */
|
||||
.item{
|
||||
|
|
Loading…
Reference in New Issue