<!-- 大屏画布 -->
<template>
    <div class="MainPage">
        <div class="LeftBox">
            <h2>左侧工具栏</h2>
            <el-tree style="max-width: 600px" :data="tooles" :props="defaultProps" @node-click="handleNodeClick"
                highlight-current />
        </div>
        <div class="CenterBox">
            <h2>画布区域</h2>
            <div class="canvas-area">这里是大屏设计画布</div>
        </div>
        <div class="RightBox">
            <h2>属性面板</h2>
            <div class="property-item">尺寸</div>
            <div class="property-item">位置</div>
            <div class="property-item">样式</div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const tooles = ref([
    {
        label: '大屏1',
        children: [
            {
                label: '标题',
            },
            {
                label: '货物数量',
            },
            {
                label: '设备情况',
            },
            {
                label: '吞吐统计',
            },
            {
                label: '主元素',
            },
            {
                label: '实时仓储剩余情况',
            },
            {
                label: '综合评分',
            },
            {
                label: '能好统计',
            },
        ],
    },

])
</script>

<style scoped>
.MainPage {
    width: 100vw;
    height: 100vh;
    background-color: #1a1a1a;
    display: flex;
    color: white;
}

.MainPage :deep(.el-tree) {
    background-color: #333 !important;
    color: #fff;
}

.MainPage :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
    background-color: #8497a5;
    color: #fff;
}

.LeftBox,
.RightBox {
    width: 250px;
    background-color: #252525;
    padding: 15px;
    border-right: 1px solid #333;
}

.RightBox {
    border-right: none;
    border-left: 1px solid #333;
}

.CenterBox {
    flex: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #0078d4;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.tool-item,
.property-item {
    padding: 10px;
    margin-bottom: 8px;
    background-color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.tool-item:hover,
.property-item:hover {
    background-color: #444;
}

.canvas-area {
    width: 80%;
    height: 70%;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #555;
    border-radius: 4px;
}
</style>
