<template>
	<div class="main">
		<div class="panel content_box">
			<el-card class="panel_left">
				<div slot="header" class="clearfix">
					<span>工作箱</span>
				</div>
				<div class="enter_box">
					<div
						class="box"
						v-for="(item, index) in workList"
						:key="index"
						@click="handleSelect"
					>
						<img :src="item.img" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>
			</el-card>
			<el-card class="panel_right">
				<div slot="header" class="clearfix">
					<span>快捷入口</span>
				</div>
				<div class="enter_box">
					<div
						class="box"
						v-for="(item, index) in list"
						:key="index"
						@click="handleSelect"
					>
						<img :src="item.img" alt="" />
						<span>{{ item.name }}</span>
					</div>
				</div>
			</el-card>
		</div>
		<div class="notice" ref="notice">
			<el-card>
				<div slot="header" class="clearfix">
					<span>通知公告</span>
				</div>
				<el-table
					:data="tableData"
					:height="tableHeight"
					:row-class-name="tableRowClassName"
				>
					<el-table-column
						type="index"
						width="300"
						align="center"
						label="顺序号"
					>
					</el-table-column>
					<el-table-column prop="title" align="left" label="标题">
					</el-table-column>
					<el-table-column
						prop="date"
						width="500"
						align="center"
						label="发布时间"
					>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		<div class="pagination">
			<el-pagination background layout="prev, pager, next,total" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			workList: [
				{ name: "待办箱", img: require("../../assets/images/dbx.png") },
				{ name: "退件箱", img: require("../../assets/images/tjx.png") },
			],
			list: [
				{ name: "宗地分割", img: require("../../assets/images/zdfg.png") },
				{
					name: "导入楼盘表模板",
					img: require("../../assets/images/drlpbmb.png"),
				},
				{ name: "新办房屋", img: require("../../assets/images/xbfw.png") },
				{ name: "重新落宗", img: require("../../assets/images/cxlz.png") },
			],
			tableData: [
			
			],
			tableHeight: "",
			total:0
		};
	},
	mounted() {
		this.$nextTick(()=>{
			this.tableHeight = this.$refs.notice.offsetHeight - 53;
		})
	},
	methods: {
		handleSelect() {},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 !== 0) {
				return "even-row";
			} else {
				return "";
			}
		},
	},
};
</script>
<style rel="stylesheet/less" lang="less">
.main {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	.panel {
		@flex();
		width: 100%;
		.panel_left {
			width: 45%;
			margin-right: @30px;
			flex: 1;
		}
		.panel_right {
			flex: 1;
		}
		.enter_box {
			@flex();
			div {
				cursor: pointer;
				flex: 1;
				img {
					width: 68px;
					height: 68px;
					display: block;
					margin: 0 auto;
				}
				span {
					display: block;
					text-align: center;
					margin-top: 10px;
				}
			}
		}
		.el-card__body {
			padding: 40px;
		}
	}
	.notice {
		flex: auto;
		padding: 0;
		box-sizing: border-box;
		
		.el-card__body {
			padding: 0;
		}
		th.is-left {
			text-align: center;
		}
	}
	.pagination {
		padding: 18px;
	}
}
</style>