<template>
|
<div>
|
<div class="banner">
|
<img src="../../img/newsBanner.jpg" alt="" class="m_hide">
|
<img src="../../img/xin.jpg" alt="" class="p_hide">
|
</div>
|
<div class="wrapper">
|
<div class="contentTitle">
|
<i class="contentTitle_before"></i>
|
<span v-for="(tab, i) in tabs" :key="i" @click="changetab(i)" :class="{active: cur === i}">{{tab.SubjClasName}}</span>
|
<i class="contentTitle_after"></i>
|
</div>
|
|
<div class="tab-content">
|
<ul class="news_ul">
|
<li v-for="(item, index) in pages" :key="index" @click="jumpmenu(item)">
|
<div class="news_img" :style="{backgroundImage: `url(${item.Image1})`}"></div>
|
<div class="news_ul_card">
|
<h2>
|
<span style="display: block;" v-text="item.Title1"></span>
|
<span v-text="item.CompletedTime"></span>
|
</h2>
|
<p v-text="item.Remark"></p>
|
</div>
|
</li>
|
</ul>
|
<el-pagination
|
background
|
layout="prev, pager, next"
|
hide-on-single-page
|
@current-change="changePage"
|
:current-page="pageIndex"
|
:page-size="9"
|
:total="news ? news.length : 0">
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
cur: 0,
|
tabs: null,
|
news: null,
|
pageIndex: 1,
|
pages: null
|
}
|
},
|
methods: {
|
changePage (page) {
|
this.pages = []
|
if (this.news) {
|
this.pages = this.news.slice((page - 1) * 9, page * 9)
|
}
|
},
|
changetab (i) {
|
this.cur = i
|
this.pageIndex = 1
|
this.news = null
|
this.loaddata()
|
},
|
jumpmenu (item) {
|
let _menuId = item.ID
|
_menuId = _menuId + '.html'
|
|
this.$router.push({name: item.PageType.toLowerCase(), params: {menuId: _menuId}})
|
},
|
loadtabs () {
|
this.Service.getBaseData('Web_News_GetClassify').then(res => {
|
this.tabs = res.Classify
|
this.tabs.unshift({
|
SubjClasCode: '',
|
SubjClasName: '全部'
|
})
|
|
try {
|
let newstype = sessionStorage.getItem('newstype')
|
if (newstype) {
|
let index = this.tabs.findIndex((item) => item.SubjClasName === newstype)
|
if (index > -1) {
|
this.cur = index
|
}
|
}
|
sessionStorage.removeItem('newstype')
|
} catch (e) {}
|
|
this.loaddata()
|
})
|
},
|
loaddata () {
|
let param = {
|
func: 'Web_News_GetList',
|
SubjClasCode: this.tabs ? this.tabs[this.cur].SubjClasCode : ''
|
}
|
this.Service.getParamData(param).then(res => {
|
this.news = res.News
|
|
this.pages = []
|
if (this.news) {
|
this.pages = this.news.slice(0, 9)
|
}
|
})
|
}
|
},
|
mounted () {
|
this.loadtabs()
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
@media (max-width: 750px) and (min-width: 0) {
|
.banner {
|
margin-top: 1.13rem;
|
}
|
.wrapper {
|
width: 100%;
|
}
|
.contentTitle {
|
width: 100%;
|
margin-bottom: .2rem;
|
span {
|
display: block;
|
height: .9rem;
|
line-height: .9rem;
|
font-size: .34rem;
|
text-align: center;
|
background-color: #F4F4F4;
|
border-bottom: 0.01rem solid #D7D7D7;
|
transition: all 0.3s;
|
}
|
.active {
|
background: #20B7FE;
|
color: #fff;
|
border:none;
|
}
|
}
|
.news_ul {
|
width: 100%;
|
padding: 0.2rem 0.3rem 0;
|
li {
|
margin-bottom: .35rem;
|
.news_img {
|
width: 100%;
|
padding-top: 75%;
|
background-position: center center;
|
background-size: cover;
|
background-repeat: no-repeat;
|
}
|
p {
|
font-size: .24rem;
|
padding: .2rem .25rem .5rem;
|
color:#676767;
|
font-family:PingFang-SC-Regular;
|
font-weight:400;
|
color:rgba(103,103,103,1);
|
line-height:0.44rem;
|
}
|
.news_ul_card {
|
background-color: #F4F4F4;
|
}
|
}
|
h2 {
|
width: 100%;
|
span {
|
display: block;
|
color: #676767;
|
}
|
span:first-child {
|
font-size: .27rem;
|
font-family:PingFang-SC-Bold;
|
font-weight:bold;
|
padding: .2rem 0.2rem 0;
|
}
|
span:nth-child(2) {
|
text-align: right;
|
font-size: .22rem;
|
padding: .2rem 0.2rem 0;
|
}
|
}
|
}
|
.is-background {
|
margin: 30px 0;
|
text-align: center;
|
}
|
button {
|
width: 50%;
|
margin-left:25%;
|
border: 1px solid #52b6E7;
|
color: #52b6E7;
|
background: #fff;
|
padding: .3rem 0;
|
margin-bottom: .4rem;
|
}
|
}
|
@media (min-width: 751px) {
|
.contentTitle {
|
position: relative;
|
text-align: center;
|
margin: 0.99rem auto;
|
display: flex;
|
width: 30%;
|
span {
|
flex:1;
|
padding: 0.1rem 0.1rem;
|
display: inline-block;
|
font-size: 0.16rem;
|
cursor: pointer;
|
transition: all 0.3s;
|
}
|
.contentTitle_before,.contentTitle_after {
|
position: absolute;
|
height: 1px;
|
width: .7rem;
|
background: #999;
|
top: 50%;
|
}
|
.contentTitle_before {
|
left: -.8rem;
|
}
|
.contentTitle_after {
|
right: -.8rem;
|
}
|
}
|
.news_ul {
|
// width: 70%;
|
margin: 0 auto;
|
display: flex;
|
flex-wrap: wrap;
|
li {
|
width: 31.5%;
|
margin-right: .3rem;
|
margin-bottom: .4rem;
|
cursor: pointer;
|
h2 {
|
// padding: 0 .11rem;
|
span:first-child{
|
color: #20242A;
|
font-size: 0.16rem;
|
line-height: .25rem;
|
}
|
span:nth-child(2){
|
color:#676767;
|
font-size: 0.13rem;
|
float: right;
|
margin: 0.1rem 0;
|
}
|
}
|
p {
|
padding: 0.28rem 0rem;
|
color: #676767;
|
font-size: 0.14rem;
|
line-height: 0.25rem;
|
margin-top: 0.1rem;
|
}
|
}
|
li:nth-child(3n) {
|
margin-right: 0;
|
}
|
.news_img {
|
width: 100%;
|
padding-top: 75%;
|
background-position: center center;
|
background-size: cover;
|
background-repeat: no-repeat;
|
}
|
}
|
|
.news_ul_card {
|
// width: 3.6rem;
|
height: 2.2rem;
|
background:rgba(243,243,243,1);
|
padding: 0.1rem 0.1rem 0;
|
}
|
button {
|
display: none;
|
}
|
.is-background {
|
margin: 30px 0 60px;
|
text-align: center;
|
}
|
.active {
|
background: #20B7FE;
|
color: #fff;
|
border:none;
|
}
|
}
|
</style>
|
<style>
|
.el-pagination.is-background .el-pager li {
|
width: 0.3rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
}
|
.el-pagination button, .el-pagination span:not([class*="suffix"]) {
|
width: 0.45rem;
|
height: 0.3rem;
|
line-height: 0.3rem;
|
}
|
</style>
|
