libao
/
zy-gw-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

xiugai

This commit is contained in:
wangting 2024-05-31 17:46:20 +08:00
parent 4bd697b68d
commit 2862ef4f1b
8 changed files with 277 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/bottom.vue
View File

@ -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>

4
src/router/index.js
View File

@ -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

2
src/views/index.vue
View File

@ -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;
} }

9
src/views/pages/cases.vue
View File

@ -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%;

13
src/views/pages/home.vue
View File

@ -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%;

116
src/views/pages/honor.vue
View File

@ -1,21 +1,11 @@
<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="right">
<div class="preview" v-if="bigImgShow"> <div class="title">{{currentImg.tittle}}</div>
<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 <el-watermark
class="watermark" class="watermark"
content="中业消防" content="中业消防"
@ -23,12 +13,10 @@
:z-index="1" :z-index="1"
> >
<div class="demo"> <div class="demo">
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)"> <img :id="currentImg.id" :src="getUrl(currentImg.id,$baseUrl+currentImg.img)" style="margin: 0 auto; width: calc(100vw - 8.5rem)">
</div> </div>
</el-watermark> </el-watermark>
</div> </div>
</el-tab-pane>
</el-tabs>
</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;

169
src/views/pages/information.vue
View File

@ -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,7 +30,18 @@
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </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"> <div class="page-toggle" v-if="show">
<el-pagination <el-pagination
background background
@ -40,7 +51,7 @@
:total="total"> :total="total">
</el-pagination> </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;
padding: 1rem 3rem;
background-color: #f8f7f7;
.item-1{
padding: .125rem .5rem;
.item{
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: stretch;
align-items: center; padding: 0 2rem;
border-bottom: 1px solid #ccc; 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; 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;
}
}
.title{
font-size: .3rem;
color: #333333; color: #333333;
padding-left: .375rem;
} }
.time{ .time{
font-size: 14px; font-size: .25rem;
color: #666666; color: #666666;
margin-right: .5rem;
} }
} }
} }
}
} }
</style> </style>

47
src/views/pages/introduce.vue
View File

@ -13,12 +13,22 @@
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="资质证书" name="3"> <el-tab-pane label="资质证书" name="3">
<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-3">
<div class="item" v-for="(item,i) in certificate"> <div class="item" v-for="(item,i) in certificate">
<img :src="$baseUrl+item.img" alt=""> <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)" alt="">
<div class="title">{{item.tittle}}</div> <div class="title">{{item.tittle}}</div>
</div> </div>
</div> </div>
</el-watermark>
</div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="联系我们" name="4"> <el-tab-pane label="联系我们" name="4">
<div class="item-4"> <div class="item-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{