<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"
					style="width: 100%"
					: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="1000">
			</el-pagination>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			workList: [
				{ name: "待办箱", img: require("../../assets/images/temp1.png") },
				{ name: "退件箱", img: require("../../assets/images/temp2.png") },
			],
			list: [
				{ name: "宗地分割", img: require("../../assets/images/temp1.png") },
				{
					name: "导入楼盘表模板",
					img: require("../../assets/images/temp2.png"),
				},
				{ name: "新办房屋", img: require("../../assets/images/temp1.png") },
				{ name: "重新落宗", img: require("../../assets/images/temp2.png") },
			],
			tableData: [
				{
					date: "2016-05-02 08:23",
					title: "国家能源局关于2019年风电、光伏发电项目建设有关事项的通知",
				},
				{
					date: "2016-05-04 08:23",
					title: "珠江委部署珠江水利改革发展“十四五”规划思路报告编制工作",
				},
				{
					date: "2016-05-01 08:23",
					title:
						"全国海洋生态环境保护工作会议召开生态环境部公布国家地表水考核断面水质排名",
				},
				{
					date: "2016-05-03 08:23",
					title: "自然资源部四单位党组织开展联学联建活动",
				},
				{
					date: "2016-05-04 08:23",
					title: "珠江委部署珠江水利改革发展“十四五”规划思路报告编制工作",
				},
				{
					date: "2016-05-03 08:23",
					title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动",
				},
				{
					date: "2016-05-03 08:23",
					title: "生态环境部召开各流域海域生态环境监督管理局座谈会",
				},
				{
					date: "2016-05-03 08:23",
					title:
						"生态环境部审议并原则通过《地级及以上城市国家地表水考核断面水环境质量排名方案》",
				},
				{
					date: "2016-05-03 08:23",
					title: "自然资源部四单位党组织开展联学联建活动",
				},
				{
					date: "2016-05-03 08:23",
					title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动",
				},
			],
			tableHeight:''
		};
	},
	mounted(){
		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 18px;
		box-sizing: border-box;
		.el-table .even-row {
			background: #f7f9fb;
		}
		.el-table th {
			background-color: #f3f5fa;
		}
		.el-card__body {
			padding: 0;
		}
		th.is-left {
			text-align: center;
		}
	}
	.pagination {
		padding: 18px;
	}
}
</style>