|
|
|
<!--
|
|
|
|
Copyright (c) 2020.
|
|
|
|
author: bin
|
|
|
|
email: binbin0314@126.com
|
|
|
|
-->
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="inner">
|
|
|
|
<div class="policy-box">
|
|
|
|
<div :key="index" class="policy-list" v-for="(item, index) in lists">
|
|
|
|
<div @click="jumpDetails(item)" class="date-box pointer" v-if="item.time">
|
|
|
|
<p class="date-mon">{{ monthEnglish[item.time.split('-')[1] - 1] }}.</p>
|
|
|
|
<p class="date-day">{{ item.time.split(' ')[0].split('-')[2] }}</p>
|
|
|
|
</div>
|
|
|
|
<p @click="jumpDetails(item)" class="item-title pointer">{{ item.title }}</p>
|
|
|
|
<p @click="jumpDetails(item)" class="item-content pointer">{{ item.content }}</p>
|
|
|
|
<p class="source-time">
|
|
|
|
<span class="source">时间:{{ item.time }}</span>
|
|
|
|
<span class="source">地点:{{ item.site }}</span>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<a-pagination
|
|
|
|
:current="current"
|
|
|
|
:page-size="pageSize"
|
|
|
|
:total="total"
|
|
|
|
@change="onShowSizeChange"
|
|
|
|
class="pagination"
|
|
|
|
show-less-items
|
|
|
|
show-quick-jumper
|
|
|
|
v-show="total > 5"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { mapState, mapMutations } from 'vuex';
|
|
|
|
import { industryInfo } from 'config/api';
|
|
|
|
export default {
|
|
|
|
name: 'ItInformation',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
str: '这是行业资讯界面',
|
|
|
|
lists: [],
|
|
|
|
total: 0,
|
|
|
|
pageSize: 5,
|
|
|
|
current: 1,
|
|
|
|
monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.getData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapMutations('home', ['setActDetail']),
|
|
|
|
async getData() {
|
|
|
|
try {
|
|
|
|
const params = {
|
|
|
|
param: {
|
|
|
|
pageNum: this.current,
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
const res = await industryInfo(params);
|
|
|
|
const { code, data, msg } = res.data;
|
|
|
|
if (code === 200) {
|
|
|
|
this.lists = data.list;
|
|
|
|
this.total = parseInt(data.total);
|
|
|
|
for (var i = 0; i < this.lists.length; i++) {
|
|
|
|
// this.lists[i].time = moment(this.lists[i].time).format('YYYY-MM-DD');
|
|
|
|
this.lists[i].time = this.$moment(parseInt(this.lists[i].time) * 1000).format('YYYY-MM-DD');
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
console.log(msg);
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
|
|
this.$message.error(error);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
onShowSizeChange(current) {
|
|
|
|
this.current = current;
|
|
|
|
this.getData();
|
|
|
|
},
|
|
|
|
|
|
|
|
// 跳转到详情界面
|
|
|
|
jumpDetails(item) {
|
|
|
|
this.setActDetail(item);
|
|
|
|
this.$router.push('/ItDetails');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="stylus">
|
|
|
|
.inner {
|
|
|
|
margin: 40px auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.policy-box {
|
|
|
|
.policy-list {
|
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
height: 238px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
|
margin-top: 24px;
|
|
|
|
padding: 25px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-title {
|
|
|
|
margin-left: 200px;
|
|
|
|
overflow: hidden;
|
|
|
|
display: -webkit-box;
|
|
|
|
font-size: 24px;
|
|
|
|
color: rgba(0, 0, 0, 0.65);
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: bold;
|
|
|
|
-webkit-line-clamp: 1;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
}
|
|
|
|
|
|
|
|
.item-content {
|
|
|
|
margin-left: 200px;
|
|
|
|
text-indent: 2em;
|
|
|
|
font-size: 16px;
|
|
|
|
color: rgba(0, 0, 0, 0.35);
|
|
|
|
line-height: 36px;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
overflow: hidden;
|
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-line-clamp: 2;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
}
|
|
|
|
|
|
|
|
.source {
|
|
|
|
cursor: pointer;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
opacity: 1;
|
|
|
|
margin-right: 24px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.time {
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
color: rgba(0, 0, 0, 0.25);
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.original {
|
|
|
|
position: absolute;
|
|
|
|
right: 25px;
|
|
|
|
bottom: 25px;
|
|
|
|
font-size: 14px;
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 22px;
|
|
|
|
opacity: 1;
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
|
|
|
span {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-box {
|
|
|
|
height: 188px !important;
|
|
|
|
width: 188px !important;
|
|
|
|
position: absolute !important;
|
|
|
|
top: 0 !important;
|
|
|
|
// box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
|
|
|
|
text-align: center;
|
|
|
|
box-shadow: none !important;
|
|
|
|
padding: 25px;
|
|
|
|
margin-top: 24px;
|
|
|
|
|
|
|
|
p {
|
|
|
|
margin-bottom: 0 !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-mon {
|
|
|
|
font-size: 40px;
|
|
|
|
height: 40px;
|
|
|
|
line-height: 40px;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #13ACC4;
|
|
|
|
}
|
|
|
|
|
|
|
|
.date-day {
|
|
|
|
font-size: 70px;
|
|
|
|
height: 80px;
|
|
|
|
line-height: 80px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #13ACC4;
|
|
|
|
}
|
|
|
|
|
|
|
|
.source-time {
|
|
|
|
margin-left: 200px;
|
|
|
|
position: absolute;
|
|
|
|
bottom: 26px;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.pagination {
|
|
|
|
margin-top: 68px;
|
|
|
|
text-align: right;
|
|
|
|
}
|
|
|
|
</style>
|