ezpc/src/views/open/laws/List.vue

<template>
	<div class="new-list">
		<div class="new-item  hand" v-for="item in newList" :key="item.id" @click="navTo('/open/laws/detail?id='+ item.id)">
			<div class="title clamp">
				<span class="title-icon"></span>
				{{ item.title }}
			</div>
			<div class="time">{{ item.release_time || item.add_time }}</div>
		</div>
		<el-pagination layout="prev, pager, next" :total="total" background prev-text="上一页" next-text="下一页" @current-change="currentChange" :page-size="limit" hide-on-single-page></el-pagination>
	</div>
</template>

<script>
import { loadIndexs, splist, loveList, friendList , newsList, openList, regulationList } from '../../../request/api.js';
export default {
	data() {
		return {
			newList: [],
			total: 0,
			page: 1,
			limit: 15
		};
	},
	// filters: {
	// 	time(val) {
	// 		let date = new Date(val * 1000);
	// 		let Y = date.getFullYear();
	// 		let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
	// 		let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
	// 		return Y + '-' + M + '-' + D;
	// 	}
	// },
	created() {
		this.getList()
	},
	methods:{
		navTo(url) {
			this.$router.push(url);
		},
		currentChange(e) {
			console.log(e);
			this.page = e
			this.getList()
		},
		getList() {
			let obj = this
			regulationList({
				page: obj.page,
				limit: obj.limit
			}).then(res => {
				obj.newList = res.data.list.map(item => {
					let arr = item.add_time.split(' ')
					item.add_time = arr[0]+''
					return item
				})
				obj.total = res.data.count
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.new-list {
	// padding: 0px 72px 0 40px;
	.new-item {
		display: flex;
		justify-content: space-between;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		height: 40px;
		border-bottom: 1px solid #E5E5E5;
		line-height: 40px;
		&:hover {
			color: red;
			.title {
				.title-icon {
					border-left-color: red;
				}
			}
		}
		.title {
			width: 500px;
			.title-icon {
				display: inline-block;
				width: 0;
				height: 0;
				width: 0;
				height: 0;
				border-top: 6px solid transparent;
				border-left: 8px solid #d2d2d2;
				border-bottom: 6px solid transparent;
			}
		}
	}
}
	/deep/ .el-pagination {
		margin-top: 50px;
		text-align: center;
	}
</style>