jzpc/src/views/knowledge/rescue/List.vue

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

<script>
	import {
		getList
	} from '../../../request/api.js';
	export default {
		data() {
			return {
				newList: [],
				total: 0,
				page: 1,
				limit: 15
			};
		},
		filters: {
			time(val) {
				let arr = val.split(' ')
				let str = arr[0]
				str = str.replace(/-/g, '.')
				return str
			}
		},
		created() {
			this.getList()
		},
		methods: {
			navTo(url) {
				this.$router.push(url);
			},
			currentChange(e) {
				this.page = e
				this.getList()
			},
			getList() {
				let obj = this
				getList({
					page: obj.page,
					limit: obj.limit
				},48).then(res => {
					obj.newList = res.data.list.sort(this.compare('id'))
					obj.total = res.data.count
				})
			},
			compare(attribute) {
				return function(obj1, obj2) {
					var val1 = obj1[attribute];
					var val2 = obj2[attribute];
					if (val1 < val2) {
						return 1;
					} else if (val1 > val2) {
						return -1;
					} else {
						return 0;
					}
				}
			}
		}
	};
</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>