<template>
	<div class="new-list">
		<div class="mpBoxTitle">
			<div class="mpBoxTitleBox">
			<div class="titleText">
				新闻动态
			</div>
			</div>
			<div class="border"></div>
		</div>
		<div class="boxs" v-for="item in newList" @click="navTo('/news/datatile?id='+ item.id)">
			<div class="box">
				<div class="box-left">
					<img :src="item.coverimage" >
				</div>
				<div class="box-right">
					<div class="box-title clamp">
						{{ item.title }}
					</div>
					<div class="box-time">
						{{ item.time }}
					</div>
					<div class="box-main">
						{{ item.synopsis }}
					</div>
				</div>
			</div>
			<div class="box-bottom">
				<div class="bottom-font">
					作者：{{ item.author }}
				</div>
				<div class="bottom-font">
					{{ item.time }}
				</div>
				<div class="bottom-font">
					阅读量：{{ item.visit }}
				</div>
			</div>
		</div>
		<div class="page">
			<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="3" hide-on-single-page></el-pagination>
		</div>
	</div>
</template>

<script>
import { storylist } from '@/api/index.js';
import { getTime } from '../assets/js/time.js'
export default {
	data() {
		return {
			newList: [],
			total: 0,
			page: 1,
			limit: 3
		};
	},
	filters: {
		
	},
	created() {
		this.getList()
	},
	methods:{
		navTo(url) {
			this.$router.push(url);
		},
		currentChange(e) {
			this.page = e
			this.getList()
		},
		getList() {
			let obj = this
			
			storylist({
				page: obj.page,
				limit: obj.limit
			}).then(res => {
				res.data.list.forEach(data => {
					data.time = getTime(data.createtime)
				})
				obj.newList = res.data.list
				obj.total = res.data.count
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.new-list {
	max-width: 1200px;
	min-width: 1080px;
	margin: 0 auto;
	padding-bottom: 20px;
	min-height: 500px;
}
.boxs {
	width: 80%;
	margin: 30px auto 0;
	.box-bottom {
		padding: 10px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		.bottom-font {
			font-size: 16px;
			color: #E0E2E4;
		}
	}
}

.box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.box-left {
		flex-shrink: 0;
		width: 250px;
		height: 150px;
		// background-color: #000066;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.box-right {
		max-width: 70%;
		min-width: 70%;
		padding: 10px;
		.box-title {
			font-size: 20px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #535962;
		}
		.box-time {
			font-size: 16px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #A1A1A1;
			margin-top: 10px;
		}
		.box-main {
			max-width: 100%;
			min-width: 100%;
			font-size: 18px;
			margin-top: 10px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			height: 70px;
			word-wrap: break-word;
			word-break: break-all;
			overflow: hidden;
		}
	}
}
.mpBoxTitle{
	display: flex;
	align-items: center;
	height: 50px;
	position: relative;
	margin-top: 30px;
	.border{
		height: 1px;
		width: 100%;
		background-color: #E0E2E4;
	}
	.mpBoxTitleBox{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.titleText{
			background-color: #FFFFFF;
			font-size: 26px;
			padding:  30px;
			font-weight: bold;
		}
	}
}
.page {
	width: 80%;
	margin: 20px auto 0;
}
</style>
