You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

214 lines
4.4 KiB

5 years ago
<!--
Copyright (c) 2020.
author: bin
email: binbin0314@126.com
-->
<template>
5 years ago
<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>
5 years ago
</div>
</div>
<a-pagination
5 years ago
:current="current"
:page-size="pageSize"
:total="total"
@change="onShowSizeChange"
5 years ago
class="pagination"
show-less-items
show-quick-jumper
v-show="total > 5"
/>
5 years ago
</div>
</template>
<script>
5 years ago
import { mapState, mapMutations } from 'vuex';
5 years ago
import { industryInfo } from 'config/api';
export default {
name: 'ItInformation',
data() {
return {
str: '这是行业资讯界面',
lists: [],
total: 0,
pageSize: 5,
5 years ago
current: 1,
monthEnglish: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov', 'Dec'],
};
},
created() {
this.getData();
},
methods: {
5 years ago
...mapMutations('home', ['setActDetail']),
5 years ago
async getData() {
try {
const params = {
param: {
5 years ago
pageNum: this.current,
pageSize: this.pageSize,
5 years ago
},
};
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);
}
},
5 years ago
5 years ago
onShowSizeChange(current) {
5 years ago
this.current = current;
this.getData();
},
// 跳转到详情界面
jumpDetails(item) {
this.setActDetail(item);
5 years ago
this.$router.push('/ItDetails');
5 years ago
},
},
};
</script>
<style scoped lang="stylus">
5 years ago
.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;
5 years ago
overflow: hidden;
5 years ago
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;
5 years ago
}
5 years ago
.item-content {
margin-left: 200px;
text-indent: 2em;
font-size: 16px;
color: rgba(0, 0, 0, 0.35);
5 years ago
line-height: 36px;
5 years ago
font-family: Microsoft YaHei;
5 years ago
overflow: hidden;
5 years ago
display: -webkit-box;
5 years ago
-webkit-line-clamp: 2;
5 years ago
-webkit-box-orient: vertical;
5 years ago
}
5 years ago
.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;
}
5 years ago
}
.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;
5 years ago
padding: 25px;
margin-top: 24px;
5 years ago
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;
}
5 years ago
.source-time {
margin-left: 200px;
position: absolute;
bottom: 26px;
margin-bottom: 0;
}
.pagination {
margin-top: 68px;
text-align: right;
}
5 years ago
</style>