<template>
|
<div class="minWidth">
|
<el-carousel :height="screenheight + 'px'" v-loading="bannerLoading">
|
<template v-if="!bannerLoading">
|
<el-carousel-item v-for="item in bannerList" :key="item.id">
|
<div class="bannerBox imgBox" :style="item.caupress_link ? 'cursor: pointer' : ''">
|
<img class="bannerImg" :src="item.icon" @click="bannerLink(item)"/>
|
</div>
|
</el-carousel-item>
|
</template>
|
</el-carousel>
|
<div class="contentBox">
|
<div class="tabs">
|
<div
|
:class="tabsSelected == 0 ? 'tabSelect' : ''"
|
class="tab"
|
@click="
|
() => {
|
this.tabsSelected = 0;
|
this.getData();
|
}
|
"
|
>
|
<i class="el-icon-document"></i>
|
本社资讯
|
</div>
|
<div class="division"></div>
|
<div
|
:class="tabsSelected == 1 ? 'tabSelect' : ''"
|
class="tab"
|
@click="
|
() => {
|
this.tabsSelected = 1;
|
this.getData();
|
}
|
"
|
>
|
<i class="el-icon-bell"></i>
|
本社通知
|
</div>
|
</div>
|
<div class="list" v-loading="reLoading">
|
<el-empty
|
description="暂无数据"
|
class="empty"
|
:image-size="200"
|
v-if="list.length == 0"
|
></el-empty>
|
<div>
|
<div
|
class="listItem"
|
v-for="(item, index) in list"
|
:key="index"
|
@click="gotoDetails(item.linkInfo)"
|
>
|
<div class="wrapImg">
|
<div v-if="item.icon.includes('default')" class="date">
|
<div>
|
{{
|
item.caupress_publishDate
|
? moment(item.caupress_publishDate).format("DD")
|
: moment(item.createDate).format("DD")
|
}}
|
</div>
|
<div class="year">
|
{{
|
item.caupress_publishDate
|
? moment(item.caupress_publishDate).format("YYYY-MM")
|
: moment(item.createDate).format("YYYY-MM")
|
}}
|
</div>
|
</div>
|
<img v-else class="autoImg" :src="item.icon" alt="" />
|
</div>
|
<div>
|
<p class="title ellipsis" :title="item.name">
|
{{ item.name }}
|
</p>
|
<p class="introduce ellipsis" :title="item.description">
|
{{ item.description }}
|
</p>
|
<div class="author">
|
<span v-if="item.caupress_author">{{
|
item.caupress_author
|
}}</span>
|
<span>{{
|
item.caupress_publishDate
|
? moment(item.caupress_publishDate).format("YYYY-MM-DD")
|
: moment(item.createDate).format("YYYY-MM-DD")
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 分页 -->
|
<div class="pageinateBox" v-if="list.length > 0 && !reLoading">
|
<el-pagination
|
@size-change="
|
(val) => {
|
paginationData.limit = val;
|
getData();
|
}
|
"
|
@current-change="
|
(val) => {
|
paginationData.page = val;
|
getData();
|
}
|
"
|
background=""
|
:current-page="paginationData.page - 0"
|
:page-size="paginationData.limit"
|
prev-text="上一页"
|
next-text="下一页"
|
layout="total, prev, pager, next, slot, jumper"
|
:total="paginationData.totalCount"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "home",
|
data() {
|
return {
|
tabsSelected: this.$route.query.tabsSelected
|
? this.$route.query.tabsSelected
|
: 0,
|
list: [],
|
paginationData: {
|
page: 1,
|
totalCount: 0,
|
limit: 10,
|
totalPage: 0,
|
},
|
bannerLoading: false,
|
reLoading: true,
|
bannerList: [],
|
screenheight: document.documentElement.clientWidth / 2.628,
|
};
|
},
|
created() {
|
window.onresize = () => {
|
let c = 2.628;
|
if (document.documentElement.clientWidth >= 1220) {
|
this.screenheight = document.documentElement.clientWidth / c;
|
}
|
};
|
this.getBanner();
|
this.getData();
|
},
|
methods: {
|
bannerLink(val) {
|
if (val.caupress_link) {
|
window.open(val.caupress_link);
|
}
|
},
|
getBanner() {
|
this.bannerLoading = true;
|
this.MG.resource
|
.getItem({
|
path: "caupress_banner\\caupress_informationCenterBanner",
|
fields: {
|
caupress_link: [],
|
},
|
coverSize: {
|
height: 750,
|
},
|
paging: {
|
start: 0,
|
size: 999,
|
},
|
})
|
.then((res) => {
|
console.log(res);
|
this.bannerLoading = false;
|
this.bannerList = res.datas;
|
});
|
},
|
getData() {
|
this.reLoading = true;
|
let { limit, page } = this.paginationData;
|
let path =
|
this.tabsSelected == 0
|
? "caupress_informationCenter\\caupress_information"
|
: "caupress_informationCenter\\caupress_notice";
|
let query = {
|
path: path,
|
paging: {
|
start: limit * page - limit,
|
size: limit,
|
},
|
sort: {
|
CreateDate: "Desc",
|
},
|
coverSize: {
|
height: 126,
|
},
|
fields: {
|
caupress_publishDate: [],
|
caupress_author: [],
|
},
|
};
|
|
this.MG.resource.getItem(query).then((res) => {
|
this.list = res.datas;
|
console.log(this.list, "list");
|
this.paginationData.totalCount = res.total;
|
this.reLoading = false;
|
});
|
},
|
gotoDetails(linkInfo) {
|
this.$router.push({
|
name: "informationCenter-detail",
|
query: {
|
tabsSelected: this.tabsSelected,
|
path: linkInfo[0].LinkPath,
|
id: linkInfo[0].ChildrenId,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.minWidth {
|
min-width: 1220px;
|
}
|
.bannerBox {
|
background: #f3f3f3;
|
}
|
.imgBox {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
}
|
.contentBox {
|
background-color: #ffffff;
|
margin-top: 60px;
|
.tabs {
|
display: flex;
|
justify-content: space-evenly;
|
font-size: 20px;
|
line-height: 106px;
|
align-items: center;
|
font-weight: 700;
|
color: #999999;
|
border-bottom: 2px solid #e6e6e6;
|
text-align: center;
|
height: 104px;
|
.tab {
|
width: 300px;
|
cursor: pointer;
|
}
|
.imgCenter {
|
vertical-align: middle;
|
margin: 0 5px;
|
}
|
.division {
|
width: 1px;
|
height: 18px;
|
border-right: 1px solid #acabac;
|
}
|
.tabSelect {
|
color: #333333;
|
border-bottom: 2px solid #00873c;
|
}
|
}
|
.list {
|
padding: 20px;
|
min-height: 400px;
|
.listItem {
|
margin: 50px 0;
|
display: flex;
|
font-size: 14px;
|
color: #999999;
|
cursor: pointer;
|
position: relative;
|
&:hover {
|
.title {
|
color: #00873c;
|
}
|
}
|
.wrapImg {
|
width: 210px;
|
height: 126px;
|
margin-right: 30px;
|
position: relative;
|
background: #f2f2f2;
|
.date {
|
text-align: center;
|
font-size: 30px;
|
padding-top: 40px;
|
.year {
|
font-size: 17px;
|
margin-top: 5px;
|
}
|
}
|
}
|
.title {
|
font-size: 18px;
|
line-height: 30px;
|
letter-spacing: 0.45px;
|
font-weight: 400;
|
margin-bottom: 20px;
|
color: #555;
|
}
|
.introduce {
|
width: 974px;
|
}
|
.author {
|
position: absolute;
|
bottom: 0;
|
span {
|
margin-right: 30px;
|
}
|
}
|
}
|
}
|
.pageinateBox {
|
text-align: center;
|
background-color: rgb(241, 248, 244);
|
padding: 40px 0;
|
:deep(.el-pagination.is-background .btn-next) {
|
padding: 0 10px;
|
}
|
:deep(.el-pagination.is-background .btn-prev) {
|
padding: 0 10px;
|
}
|
}
|
}
|
</style>
|
