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

xiugai

Browse Source
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">
<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>

4
src/router/index.js
View File

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

2
src/views/index.vue
View File

@ -171,7 +171,7 @@ export default {
display: inline-block;
font-size: .225rem;
width: 2.5rem;
color: #189eef;
color: #1D2088;
margin-left: .375rem;
cursor: pointer;
}

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

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

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

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

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

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

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

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

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

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