This commit is contained in:
wangting 2024-05-28 18:02:23 +08:00
parent 24bc2dd04f
commit b343b7fed0
26 changed files with 412 additions and 141 deletions

View File

@ -13,6 +13,7 @@
"lib-flexible": "^0.3.2", "lib-flexible": "^0.3.2",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue_pageination": "^1.1.2", "vue_pageination": "^1.1.2",
"vue-baidu-map-3x": "^1.0.38",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^4.0.3", "vue-router": "^4.0.3",
"vuex": "^4.0.0" "vuex": "^4.0.0"

View File

@ -1,19 +1 @@
.videoPlayer{
position: absolute;
top: 0;
width: 100%;
height: 100%;
object-fit: fill;
z-index: -999;
}
.haixing{
position: absolute;
width: 8.225rem;
height: 5.825rem;
bottom:0;
right:0;
z-index: -998;
}
.style-en{
letter-spacing: .0063rem;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 259 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 175 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 89 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="page"> <div class="page">
<p>版权所有 江苏中业消防技术服务有限公司</p> <p>版权所有 江苏中业消防技术服务有限公司</p>
<p>地址连云港花果山大道3号 </p> <p>地址连云港市海州区海连东路42号杰瑞科技创意产业园A1房屋的西三层 </p>
<p>电话0518-09876233 邮箱zy_999@163.com 网址www.jszyxiaofang.com</p> <p>电话18912177843 邮箱69421099@163.com 网址www.jszyxiaofang.com</p>
<p> 苏ICP备2024099083号-1</p> <p> 苏ICP备2024099083号-1</p>
</div> </div>
@ -38,7 +38,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
p{ p{
font-size: .2rem; font-size: .25rem;
color: #fff; color: #fff;
line-height: .46rem; line-height: .46rem;

View File

@ -13,17 +13,17 @@ import axios from 'axios'
import ElementPlus from 'element-plus' import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' import 'element-plus/dist/index.css'
import BaiduMap from 'vue-baidu-map-3x'
const app = createApp(App) const app = createApp(App)
// const baseUrl = 'https://admin.liandaojq.com/prod-api' const baseUrl = 'http://admin.jszyxiaofang.com/prod-api'
const baseUrl = 'http://192.168.3.114:80/dev-api' // const baseUrl = 'http://192.168.3.114:80/dev-api'
axios.defaults.baseURL = baseUrl axios.defaults.baseURL = baseUrl
app.config.globalProperties.$http=axios app.config.globalProperties.$http=axios
app.config.globalProperties.$baseUrl = baseUrl app.config.globalProperties.$baseUrl = baseUrl
app.use(router).use(ElementPlus).mount('#app') app.use(BaiduMap, {ak: 'GsmliYCDkPOEKXsh4NHkYVBfWdKP6YiQ'}).use(router).use(ElementPlus).mount('#app')

View File

@ -73,7 +73,17 @@ const routes = [
component: () => import( '@/views/pages/article.vue'), component: () => import( '@/views/pages/article.vue'),
meta: { meta: {
title: '内容', title: '内容',
keepAlive: true keepAlive: false
}
},
// 搜索
{
path: 'search',
name: 'search',
component: () => import( '@/views/pages/search.vue'),
meta: {
title: '搜索',
keepAlive: false
} }
} }
] ]

View File

@ -7,6 +7,14 @@
</div> </div>
<div class="right"> <div class="right">
<!-- <img src="@/assets/images/组 12.png" alt=""> --> <!-- <img src="@/assets/images/组 12.png" alt=""> -->
<el-input
v-model="searchValue"
placeholder="请输入检索内容"
>
<template #append>
<el-button @click="toSearch()">搜索</el-button>
</template>
</el-input>
</div> </div>
</div> </div>
<div class="menu" > <div class="menu" >
@ -42,6 +50,7 @@ export default {
}, },
data(){ data(){
return{ return{
searchValue:'', //
imgList:[], imgList:[],
menuList:[ menuList:[
{ {
@ -114,9 +123,20 @@ export default {
}) })
}, },
jumpTo(i){ jumpTo(i){
console.log(i)
if(i==6){
window.open('https://zyxiaofang.cyphytech.net/login',"_blank")
}else{
this.activeIndex = i this.activeIndex = i
this.$router.push({path: this.menuList[i].url}) this.$router.push({path: this.menuList[i].url})
} }
},
toSearch(){
this.$router.push({path: '/search',query:{
value: this.searchValue
}})
}
} }
} }
</script> </script>

View File

@ -1,11 +1,20 @@
<template> <template>
<div class="page"> <div class="page">
<div class="list"> <div class="list">
<div class="item" v-for="i in 8"> <div class="item" v-for="(item,i) in cases">
<img src="@/assets/images/15探海神龟.jpg" alt=""> <img :src="$baseUrl+item.img" alt="">
<div class="title">安全生产许可证</div> <div class="title">{{item.tittle}}</div>
</div> </div>
</div> </div>
<div class="page-toggle">
<el-pagination
background
@current-change="handleCurrentChange"
:page-size="queryParams.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div>
</div> </div>
</template> </template>
@ -16,19 +25,64 @@
}, },
data(){ data(){
return{ return{
cases:[],
total: 0,
queryParams:{
pageNum: 1,
pageSize: 8
},
} }
}, },
created(){ created(){
this.getData()
}, },
methods:{ methods:{
getData(){
this.$http.get(`zy/website/article/page?type=工程案例&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
this.cases = res.data.rows
this.total = res.data.total
})
},
jumpToArticle(id){
this.$router.push({path:'/article',query:{id: id}})
},
handleCurrentChange(page){
this.queryParams.pageNum = page
this.getData()
},
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-toggle{
width: calc(100vw - 3rem);
display: flex;
justify-content: right;
margin-bottom: 1.25rem;
::v-deep{
.el-pagination{
li,button{
height: .6rem;
min-width: .6rem;
width: .6rem;
padding: 0 .075rem;
}
.el-icon{
display: flex;
align-items: center;
}
button .el-icon svg{
width: .5rem;
height: .5rem;
}
.number{
font-size: .3rem;
}
}
}
}
.page{ .page{
.list{ .list{
display: flex; display: flex;
@ -45,6 +99,8 @@
margin-bottom: .375rem; margin-bottom: .375rem;
position: relative; position: relative;
height: 3.75rem; height: 3.75rem;
cursor: pointer;
img{ img{
width: 90%; width: 90%;
height: 100%; height: 100%;

View File

@ -44,9 +44,9 @@
</div> </div>
</div> </div>
<div class="list"> <div class="list">
<div class="item" v-for="i in 8"> <div class="item" v-for="(item,i) in cases">
<img src="@/assets/images/15探海神龟.jpg" alt=""> <img :src="$baseUrl+item.img" alt="">
<div class="title">探海神龟</div> <div class="title">{{item.tittle}}</div>
</div> </div>
</div> </div>
</div> </div>
@ -67,8 +67,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<=34">{{item.tittle}}</span> <span class="title" v-if="item.tittle.length<=25">{{item.tittle}}</span>
<span class="title" v-else>{{item.tittle.slice(0,34)}}...</span> <span class="title" v-else>{{item.tittle.slice(0,25)}}...</span>
<span class="time">{{item.submitTime}}</span> <span class="time">{{item.submitTime}}</span>
</div> </div>
</div> </div>
@ -99,6 +99,7 @@
dynamic:[], dynamic:[],
statute:[], statute:[],
information:[], information:[],
cases:[],
informationMenu:[ informationMenu:[
{name:'公司新闻'}, {name:'公司新闻'},
{name:'行业动态'}, {name:'行业动态'},
@ -137,6 +138,9 @@
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.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=>{
this.news = res.data.rows this.news = res.data.rows
this.information = this.news this.information = this.news
@ -147,6 +151,7 @@
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.statute = res.data.rows
}) })
} }
} }
} }
@ -202,7 +207,7 @@
.right{ .right{
.indroduce{ .indroduce{
width: 7.5rem; width: 7.5rem;
font-size: .225rem; font-size: .25rem;
color: #333333; color: #333333;
line-height: .6rem; line-height: .6rem;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
@ -225,9 +230,10 @@
height: .25rem; height: .25rem;
} }
span{ span{
font-size: .2rem; font-size: .23rem;
color: #FFFFFF; color: #FFFFFF;
margin-left: .1rem; margin-left: .1rem;
line-height: .5rem;
} }
} }
@ -249,6 +255,8 @@
padding: 0 .275rem; padding: 0 .275rem;
margin-bottom: .55rem; margin-bottom: .55rem;
position: relative; position: relative;
cursor: pointer;
img{ img{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -257,9 +265,9 @@
position: absolute; position: absolute;
height: .55rem; height: .55rem;
width: 4.35rem; width: 4.35rem;
background: RGBA(207, 70, 75, .6); background: rgba(230, 0, 18, .6);
bottom: 0; bottom: 0;
font-size: .225rem; font-size: .25rem;
color: #FFFFFF; color: #FFFFFF;
line-height: .55rem; line-height: .55rem;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
@ -280,7 +288,7 @@
height: .475rem; height: .475rem;
border-radius: .2375rem; border-radius: .2375rem;
border: .0125rem solid #CCCCCC; border: .0125rem solid #CCCCCC;
font-size: .225rem; font-size: .25rem;
color: #666666; color: #666666;
line-height: .475rem; line-height: .475rem;
text-align: center; text-align: center;
@ -307,7 +315,7 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-size: .2rem; font-size: .25rem;
color: #282828; color: #282828;
border-bottom: .0125rem solid #DADADA; border-bottom: .0125rem solid #DADADA;
cursor: pointer; cursor: pointer;
@ -319,7 +327,7 @@
} }
.time{ .time{
color: #666666; color: #666666;
font-size: .175rem; font-size: .23rem;
} }
} }

View File

@ -1,43 +1,46 @@
<template> <template>
<div class="page"> <div class="page">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <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)">
<img :src="$baseUrl+item.img" alt="">
<div class="info">
<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>
</div>
</el-tab-pane> </el-tab-pane>
<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)">
<img :src="$baseUrl+item.img" alt="">
<div class="info">
<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>
</div>
</el-tab-pane> </el-tab-pane>
<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)">
<img :src="$baseUrl+item.img" alt="">
<div class="info">
<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>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </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>
</div> </div>
@ -50,39 +53,60 @@
}, },
data(){ data(){
return{ return{
show: true,
activeName: '1', activeName: '1',
news:[], news:[],
dynamic:[], dynamic:[],
statute:[], statute:[],
total: 0,
queryParams:{
pageNum: 1,
pageSize: 6
},
} }
}, },
created(){ created(){
this.getData() this.getData()
localStorage.getItem('activeName')
}, },
methods:{ methods:{
jumpToArticle(id){ jumpToArticle(id){
localStorage.setItem('activeName',this.activeName)
this.$router.push({path:'/article',query:{id: id}}) this.$router.push({path:'/article',query:{id: id}})
}, },
getData(){ getData(){
this.$http.get(`zy/website/article/page?type=公司新闻`).then(res=>{ if(this.activeName==1){
this.$http.get(`zy/website/article/page?type=公司新闻&pageNum=${this.queryParams.pageNum}&pageSize=${this.queryParams.pageSize}`).then(res=>{
this.news = res.data.rows this.news = res.data.rows
this.total = res.data.total
}) })
this.$http.get(`zy/website/article/page?type=行业动态`).then(res=>{ }
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.dynamic = res.data.rows
this.total = res.data.total
}) })
this.$http.get(`zy/website/article/page?type=法规标准`).then(res=>{ }
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.statute = res.data.rows
this.total = res.data.total
}) })
}
}, },
handleClick(tabsPaneContext,e){ handleClick(tabsPaneContext,e){
console.log(tabsPaneContext) this.show = false
console.log(e) this.activeName = tabsPaneContext.props.name
} this.queryParams.pageNum = 1
this.getData()
this.$nextTick(()=>{
this.show = true
})
},
handleCurrentChange(page){
this.queryParams.pageNum = page
this.getData()
},
} }
} }
@ -108,42 +132,69 @@
color: #1D2088; color: #1D2088;
} }
::v-deep .el-tabs__active-bar{ ::v-deep .el-tabs__active-bar{
width: 1rem!important;
background-color: #1D2088; background-color: #1D2088;
} }
.page-toggle{
width: calc(100vw - 6.7rem);
display: flex;
justify-content: right;
margin-top: .5rem;
::v-deep{
.el-pagination{
li,button{
height: .6rem;
min-width: .6rem;
width: .6rem;
padding: 0 .075rem;
}
.el-icon{
display: flex;
align-items: center;
}
button .el-icon svg{
width: .5rem;
height: .5rem;
}
.number{
font-size: .3rem;
}
}
}
}
.page{ .page{
min-height: 10.75rem; min-height: 10.75rem;
padding: 1rem 3rem;
background-color: #f8f7f7;
.item-1{ .item-1{
display: flex; padding: .125rem .5rem;
flex-wrap: wrap;
padding: 1rem 2rem;
.item{ .item{
width: 4.875rem;
padding: 0 .125rem;
margin-bottom: .25rem;
img{
width: 100%; width: 100%;
height: 3.6rem;
}
.info{
border: 1px solid #ccc;
margin-top: -4px;
height: 1.0625rem;
display: flex; display: flex;
flex-direction: column; justify-content: space-between;
justify-content: space-around; align-items: center;
padding-left: .125rem; border-bottom: 1px solid #ccc;
position: relative;
&:last-child{
border-bottom: none;
}
.title{ .title{
width: 100%; font-size: .25rem;
font-size: .225rem; line-height: .8rem;
line-height: .4rem; margin-left: .375rem;
background-color: #fff;
} }
.time{ .time{
font-size: .2rem; font-size: .23rem;
}
&::before{
position: absolute;
content: '';
width: .125rem;
height: .125rem;
border-radius: 50%;
background-color: #e93535;
left: .0625rem;
} }
}
} }

View File

@ -38,7 +38,16 @@
</div> </div>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<baidu-map class="map" ak="GsmliYCDkPOEKXsh4NHkYVBfWdKP6YiQ" v="3.0" type="API" :center="{lng: 119.135022, lat: 34.621419}" :zoom="15" :scroll-wheel-zoom="true">
<!-- 红点定位 -->
<bm-marker
:position="{lng: 119.200252, lat: 34.603919}"
:dragging="false"
></bm-marker>
<!-- 缩放 -->
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
</div> </div>
</div> </div>
</div> </div>
@ -51,16 +60,19 @@
</template> </template>
<script> <script>
import { BaiduMap } from 'vue-baidu-map-3x'
export default { export default {
name: 'Bottom', name: 'Bottom',
components: { components: {
BaiduMap
}, },
data(){ data(){
return{ return{
introduce:{}, introduce:{},
structure:{}, structure:{},
certificate:[], certificate:[],
activeName: '1' activeName: '1',
center: { lng: 0, lat: 0 },
} }
}, },
@ -218,6 +230,15 @@
} }
.map{
display: flex;
justify-content: center;
align-items: center;
padding: 1rem;
width: 100%;
height: 10rem;
background-color: #fff;
}
} }
} }
</style> </style>

View File

@ -1,31 +1,19 @@
<template> <template>
<div class="page"> <div class="page">
<div class="list"> <div class="list">
<div class="item" v-for="i in 1"> <div class="item" v-for="item in data">
<div class="title"> <div class="title">
<span class="position">电气工程师 </span> <span class="position">电气工程师 </span>
<span class="apply">申请职位</span>
</div> </div>
<div class="content"> <div class="content">
<div class="left"> <div class="left">
<div class="num">招聘人数3</div> <div class="num">招聘人数{{item.excerpt.split('|')[0]}}</div>
<div class="area">工作地点连云港</div> <div class="area">工作地点连云港</div>
<div class="time">发布日期2024-2-13</div> <div class="time">发布日期{{item.submitTime}}</div>
</div> </div>
<div class="requirement center"> <div class="requirement center" v-html="item.excerpt.split('|')[1]">
<p>岗位职责 </p>
<p>1负责建筑项目电气方案与施工图优化</p>
<p>2负责强弱电工程施工管理质量进度等工作 </p>
<p> 3负责项目设备调试及配合</p>
</div> </div>
<div class="requirement right"> <div class="requirement right" v-html="item.content">
<p>岗位职责 </p>
<p>1负责建筑项目电气方案与施工图优化</p>
<p>2负责强弱电工程施工管理质量进度等工作 </p>
<p> 3负责项目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合</p>
<p> 3负责项目设备调试及配合目设备调试及配合目设备调试及配合目设备调试及配合目设备调试及配合</p>
</div> </div>
</div> </div>
</div> </div>
@ -40,15 +28,19 @@
}, },
data(){ data(){
return{ return{
data:[]
} }
}, },
created(){ created(){
this.getData()
}, },
methods:{ methods:{
getData(){
this.$http.get(`zy/website/article/page?type=人才招聘`).then(res=>{
this.data = res.data.rows
})
},
} }
} }
</script> </script>
@ -81,16 +73,6 @@
font-size: .375rem; font-size: .375rem;
color: #000000; color: #000000;
} }
.apply{
width: 1.575rem;
height: .525rem;
background: #E60012;
font-size: .225rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
} }
.content{ .content{
margin-top: .25rem; margin-top: .25rem;
@ -110,10 +92,9 @@
.requirement{ .requirement{
width: 7.5625rem; width: 7.5625rem;
margin-left: .6rem; margin-left: .6rem;
font-size: .2rem; font-size: .25rem;
color: #000000; color: #000000;
line-height: .45rem; line-height: .45rem;
background-color: #fff;
} }
.center{ .center{
} }

141
src/views/pages/search.vue Normal file
View File

@ -0,0 +1,141 @@
<template>
<div class="page">
<div class="page-title">
搜索结果
</div>
<div class="item-1">
<div class="item" v-for="(item,i) in dataList" @click="jumpToArticle(item.id)">
<img :src="$baseUrl+item.img" alt="">
<div class="info">
<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="time">{{item.submitTime}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Bottom',
components: {
},
data(){
return{
activeName: '1',
dataList:[],
}
},
created(){
let query = this.$route.query
console.log(query)
this.getData()
},
methods:{
jumpToArticle(id){
this.$router.push({path:'/article',query:{id: id}})
},
getData(){
this.$http.get(`/zy/website/article/page?type=公司新闻&searchKey=${this.$route.query.value}`).then(res=>{
this.dataList = res.data.rows
})
},
handleClick(tabsPaneContext,e){
console.log(tabsPaneContext)
console.log(e)
}
}
}
</script>
<style lang="scss" scoped>
.page{
min-height: 10.75rem;
.page-title{
font-size: .35rem;
line-height: 1.25rem;
background-color: #ededed;
padding-left: .5rem;
}
.item-1{
display: flex;
flex-wrap: wrap;
padding: 1rem 2rem;
.item{
width: 4.875rem;
padding: 0 .125rem;
margin-bottom: .25rem;
img{
width: 100%;
height: 3.6rem;
}
.info{
border: 1px solid #ccc;
margin-top: -4px;
height: 1.0625rem;
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: .125rem;
.title{
width: 100%;
font-size: .225rem;
line-height: .4rem;
background-color: #fff;
}
.time{
font-size: .2rem;
}
}
}
}
.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;
background-color: #fff;
/* justify-content: space-between; */
.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;
.title{
font-size: .25rem;
color: #333333;
}
.time{
font-size: 14px;
color: #666666;
}
}
}
}
}
</style>