45 lines
853 B
Vue
45 lines
853 B
Vue
<template>
|
|
<div class="im-container">
|
|
<!-- 左侧树形面板 -->
|
|
<div class="left-panel">
|
|
<TreePanel @node-click="handleNodeClick" />
|
|
</div>
|
|
|
|
<!-- 右侧功能表格 -->
|
|
<div class="right-panel">
|
|
<Table :selectNode="selectNode" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import TreePanel from './TreePanel/TreePanel.vue'
|
|
import Table from './Table/Table.vue';
|
|
|
|
const selectNode = ref(null)
|
|
const handleNodeClick = (data) => {
|
|
selectNode.value = data
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.im-container {
|
|
display: flex;
|
|
background-color: #f5f7fa;
|
|
width: 100%;
|
|
gap: 10px;
|
|
}
|
|
|
|
.left-panel {
|
|
width: 300px;
|
|
background: white;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.right-panel {
|
|
flex: 1;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style> |