Cms.vue

<template>
  <div class="cms-container">
		<div class="cms-left">
			<div class="screenage-list-registered">
				<c-table>
					<el-table-column type="selection" width="55"></el-table-column>
					<el-table-column label="影像名称" prop="imgName" width="auto"></el-table-column>
					<el-table-column label="类型名称" prop="type" width="auto"></el-table-column>
					<el-table-column label="操作" width="auto">
						<template slot-scope="scope">
							<div>
								<c-button type="primary">删除</c-button>
								<c-button type="primary">修改</c-button>
							</div>
						</template>
					</el-table-column>
				</c-table>
			</div>
			<div class="screenage-list-deleted">
				<c-table>
					<el-table-column label="删除影像" prop="deleteImg" width="auto"></el-table-column>
					<el-table-column label="类型名称" prop="type" width="auto"></el-table-column>
					<el-table-column label="操作" width="auto">
						<template slot-scope="scope">
							<div>
								<c-button type="primary">恢复</c-button>
								<c-button type="primary">清除</c-button>
							</div>
						</template>
					</el-table-column>
				</c-table>
			</div>
		</div>
		<div class="cms-center">
			<div class="cms-operate-options">
				<el-select v-model="selectedType">
					<el-option v-for="(item, idx) in typeOptions" :key="idx" :label="item.value + item.label" :value="item.value"></el-option>
				</el-select>
				<c-button style="margin-left: 15px;" type="primary">扫描/上传</c-button>
				<c-button type="primary">取消</c-button>
				<c-button type="primary">提交</c-button>
				<c-button type="primary">删除</c-button>
				<c-button type="primary">重命名</c-button>
			</div>
			<div class="screenage-content">
				<div></div>
			</div>
		</div>
	</div>
</template>

<script>
export default { 
	name: "Cms",
	props: [],
	data() {
		return {
			selectedType: '',
			typeOptions: [
				{ label: '单据', value: '00' },
				{ label: '发票', value: '01' },
				{ label: '贸易合同', value: '02' },
				{ label: '审查审批', value: '03' },
				{ label: '其他', value: '04' },
			]
		}
	},
	methods: {

	}
};
</script>

<style scoped>
.cms-container {
	width: 100%;
	height: 100%;
	display: flex;
	background-color: #f7fbfd;
}
.cms-left {
	width: 25%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
}
.cms-left .screenage-list-registered, .cms-left .screenage-list-deleted {
	height: 50%;
}
.cms-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 10px;
}
.cms-center .screenage-content {
	flex: 1;
}
</style>