This commit is contained in:
wangting 2024-05-30 17:49:35 +08:00
parent 5107d08322
commit 4bd697b68d
5 changed files with 107 additions and 36 deletions

View File

@ -5,7 +5,7 @@
<div class="left"> <div class="left">
<img src="@/assets/images/组 12.png" alt=""> <img src="@/assets/images/组 12.png" alt="">
</div> </div>
<div class="right"> <div class="right" style="display: flex;">
<!-- <img src="@/assets/images/组 12.png" alt=""> --> <!-- <img src="@/assets/images/组 12.png" alt=""> -->
<el-input <el-input
v-model="searchValue" v-model="searchValue"
@ -15,6 +15,7 @@
<el-button @click="toSearch()">搜索</el-button> <el-button @click="toSearch()">搜索</el-button>
</template> </template>
</el-input> </el-input>
<span class="houtai" @click="openUrl">后台管理系统</span>
</div> </div>
</div> </div>
<div class="menu" > <div class="menu" >
@ -116,6 +117,9 @@ export default {
}, },
methods:{ methods:{
openUrl(){
window.open('http://admin.jszyxiaofang.com/')
},
getImgs(){ getImgs(){
this.$http.get(`zy/website/resources/selectByCategory?category=轮播图`).then(res=>{ this.$http.get(`zy/website/resources/selectByCategory?category=轮播图`).then(res=>{
this.imgList = res.data.data this.imgList = res.data.data
@ -153,13 +157,25 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 4.5rem; padding: 0 2rem 0 4.5rem;
.left{ .left{
img{ img{
width: 3.125rem; width: 3.125rem;
height: auto; height: auto;
} }
} }
.right{
display: flex;
align-items: center;
.houtai{
display: inline-block;
font-size: .225rem;
width: 2.5rem;
color: #189eef;
margin-left: .375rem;
cursor: pointer;
}
}
} }
.menu{ .menu{
position: fixed; position: fixed;

View File

@ -49,6 +49,9 @@
<div class="title">{{item.tittle}}</div> <div class="title">{{item.tittle}}</div>
</div> </div>
</div> </div>
<div class="more" @click="$router.push('/cases')">
查看更多
</div>
</div> </div>
<div class="information"> <div class="information">
<div class="title"> <div class="title">
@ -67,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>
@ -244,7 +247,7 @@
} }
} }
.case{ .case{
margin-top: 3.55rem; margin-top: 2.55rem;
.list{ .list{
display: flex; display: flex;
margin-top: .85rem; margin-top: .85rem;
@ -276,6 +279,23 @@
} }
} }
.more{
width: 1.7rem;
height: .55rem;
line-height: .55rem;
background-color: #E60012;
font-size: .23rem;
color: #fff;
text-align: center;
margin: 0 auto;
border-radius: .05rem;
cursor: pointer;
&:hover{
background-color: #fff;
border: 1px solid #E60012;
color: #E60012;
}
}
} }
.information{ .information{
margin-top: 1.6rem; margin-top: 1.6rem;

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="page"> <div class="page">
<div class="list"> <!-- <div class="list">
<div class="item" v-for="(item,i) in certificate" @click="showImg(item)"> <div class="item" v-for="(item,i) in certificate" @click="showImg(item)">
<img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)"> <img :id="item.id" :src="getUrl(item.id,$baseUrl+item.img)">
<div class="title">{{item.tittle}}</div> <div class="title">{{item.tittle}}</div>
@ -11,7 +11,24 @@
<el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false"> <el-icon class="icon" :size="48" color="#fff" @click="bigImgShow=false">
<CircleClose /> <CircleClose />
</el-icon> </el-icon>
</div> </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>
</el-tab-pane>
</el-tabs>
</div> </div>
</template> </template>
@ -24,9 +41,14 @@
}, },
data(){ data(){
return{ return{
activeName:0,
certificate:[], certificate:[],
bigImgShow: false, bigImgShow: false,
bigImg:'' bigImg:'',
font: {
fontSize: 26,
color: 'rgba(0, 0, 0, 0.15)',
},
} }
}, },
created(){ created(){
@ -80,31 +102,45 @@
} }
</script> </script>
<style lang="scss" scoped> <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: .3rem;
}
::v-deep .el-tabs__item:hover{
color: #1D2088;
}
::v-deep .el-tabs__item.is-active{
color: #1D2088;
}
::v-deep .el-tabs__active-bar{
background-color: #1D2088;
}
.page{ .page{
.list{ padding: 1rem 1rem;
display: flex;
flex-wrap: wrap;
padding: 1rem 2.475rem;
background-color: #fff;
/* justify-content: space-between; */
.item{ .item{
width: 33.3%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: .375rem;
img{ img{
width: auto; width: calc(100vw - 8rem);
height: 3.75rem; height: auto;
} }
.title{ .title{
margin-top: .125rem; margin-top: .125rem;
font-size: .25rem; font-size: .5rem;
text-align: center;
color: #333333; color: #333333;
font-weight: bold;
margin-bottom: .375rem;
} }
} }
}
.preview{ .preview{
position: fixed; position: fixed;
z-index: 999; z-index: 999;

View File

@ -4,8 +4,8 @@
<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)">
<div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div> <div class="title" v-if="item.tittle.length>18">测试{{item.tittle.slice(0,18)}}...</div>
<div class="title" v-else>{{item.tittle}}.</div> <div class="title" v-else>测试{{item.tittle}}.</div>
<div class="time">{{item.submitTime}}</div> <div class="time">{{item.submitTime}}</div>
</div> </div>
</div> </div>
@ -14,8 +14,8 @@
<el-tab-pane label="行业动态" name="2"> <el-tab-pane label="行业动态" name="2">
<div class="item-1"> <div class="item-1">
<div class="item" v-for="(item,i) in dynamic" @click="jumpToArticle(item.id)"> <div class="item" v-for="(item,i) in dynamic" @click="jumpToArticle(item.id)">
<div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div> <div class="title" v-if="item.tittle.length>18">测试{{item.tittle.slice(0,18)}}...</div>
<div class="title" v-else>{{item.tittle}}.</div> <div class="title" v-else>测试{{item.tittle}}.</div>
<div class="time">{{item.submitTime}}</div> <div class="time">{{item.submitTime}}</div>
</div> </div>
</div> </div>
@ -24,12 +24,11 @@
<el-tab-pane label="法规标准" name="3"> <el-tab-pane label="法规标准" name="3">
<div class="item-1"> <div class="item-1">
<div class="item" v-for="(item,i) in statute" @click="jumpToArticle(item.id)"> <div class="item" v-for="(item,i) in statute" @click="jumpToArticle(item.id)">
<div class="title" v-if="item.tittle.length>18">{{item.tittle.slice(0,18)}}...</div> <div class="title" v-if="item.tittle.length>18">测试{{item.tittle.slice(0,18)}}...</div>
<div class="title" v-else>{{item.tittle}}.</div> <div class="title" v-else>测试{{item.tittle}}.</div>
<div class="time">{{item.submitTime}}</div> <div class="time">{{item.submitTime}}</div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<div class="page-toggle" v-if="show"> <div class="page-toggle" v-if="show">
@ -123,7 +122,7 @@
justify-content: center; justify-content: center;
} }
::v-deep .el-tabs__item{ ::v-deep .el-tabs__item{
font-size: .25rem; font-size: .3rem;
} }
::v-deep .el-tabs__item:hover{ ::v-deep .el-tabs__item:hover{
color: #1D2088; color: #1D2088;

View File

@ -27,13 +27,13 @@
<span class="icon"> <span class="icon">
<img src="@/assets/images/电话.png" alt=""> <img src="@/assets/images/电话.png" alt="">
</span> </span>
<span class="value">电话0518-90876754</span> <span class="value">电话18912177843</span>
</div> </div>
<div class="address"> <div class="address">
<span class="icon"> <span class="icon">
<img src="@/assets/images/地址.png" alt=""> <img src="@/assets/images/地址.png" alt="">
</span> </span>
<span class="value">地址连云港海宁中路西大街</span> <span class="value">地址连云港市海州区海连东路42号杰瑞科技创意产业园A1房屋的西三层</span>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
@ -219,14 +219,14 @@
} }
.value{ .value{
display: inline-block; display: inline-block;
width: 4.875rem; /* width: 4.875rem; */
height: .575rem; height: .575rem;
background: #A11715; background: #A11715;
border-radius: .05rem; border-radius: .05rem;
margin-left: .0375rem; margin-left: .0375rem;
line-height: .575rem; line-height: .575rem;
color: #fff; color: #fff;
padding-left: .375rem; padding:0 .375rem;
font-size: .25rem; font-size: .25rem;
} }