ai-speech-build/src/view/LargeScreen/index.vue

<!-- 大屏画布 -->
<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">
            <Cockpit/>
        </div>
        <div class="RightBox">
            <h2>大屏1</h2>
            <el-tabs>
                <el-tab-pane label="样式"></el-tab-pane>
                <el-tab-pane label="交互"></el-tab-pane>
                <el-tab-pane label="数据"></el-tab-pane>
                <el-tab-pane label="代码"></el-tab-pane>
            </el-tabs>
            <el-collapse>
                <el-collapse-item title="基本设置" name="jbsz">
                    <div class="SetBox">
                        <div class="SetName">子看板尺寸:</div>
                        <div class="SetValue">
                            <el-input size="small"  ><template #append>px</template></el-input>
                            <el-input size="small" ><template #append>px</template></el-input>
                        </div>
                    </div>
                    <div class="SetBox">
                        <div class="SetName">全屏显示模式:</div>
                            <el-select style="width: 100%;">
                                <el-option label="等比缩放" value="1">等比缩放</el-option>
                                <el-option label="适应屏幕" value="2">适应屏幕</el-option>
                                <el-option label="拉伸填充" value="3">拉伸填充</el-option>
                            </el-select>
                    </div>
                    <div class="SetBox" style="justify-content: left;">
                        <div class="SetName">填充颜色:</div>
                        <div class="SetValue">
                            <el-color-picker v-model="color" show-alpha />
                        </div>
                    </div>
                </el-collapse-item>
                <el-collapse-item title="背景设置" name="bjsz">
                    <div>这里是标题</div>
                </el-collapse-item>
                <el-collapse-item title="封面设置" name="fmsz">
                    <div>这里是标题</div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import Cockpit from './cockpit.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;
}
.MainPage :deep(.el-text.is-truncated) {
    color: #fff;
}

.MainPage :deep(.el-tree-node__content:hover){
    background-color: #6793d6;
    color: #fff;
}


.MainPage :deep(.el-tabs__item) {
    color: #bbb;
}
.MainPage :deep(.el-tabs__item.is-active) {
    color: #0078d4;
}
.MainPage :deep(.el-tabs__nav-wrap:after) {
    background: none;
}
.MainPage :deep(.el-tabs__active-bar) {
    background-color: #0078d4;
}

/* 输入框样式 */
.MainPage :deep(.el-input__wrapper) {
    background-color: #333;
    border: 1px solid #444;
    box-shadow: none;
}
.MainPage :deep(.el-input__wrapper:hover) {
    border-color: #555;
}
.MainPage :deep(.el-input__wrapper.is-focus) {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.2);
}
.MainPage :deep(.el-input__inner) {
    color: #fff;
    background-color: transparent;
}
.MainPage :deep(.el-input-group__append, .el-input-group__prepend) {
    padding: 0px 8px;
    background-color: #444;
    border-color: #444;
    color: #bbb;
}

/* 选择器样式 */
.MainPage :deep(.el-select .el-input__wrapper) {
    background-color: #333;
    border-color: #444;
}
.MainPage :deep(.el-select .el-input__inner) {
    color: #fff;
}
.MainPage :deep(.el-select__caret) {
    color: #bbb;
}
.MainPage :deep(.el-select__wrapper) {
    background: none;
}


/* 折叠面板样式 */
.MainPage :deep(.el-collapse) {
    border: none;
    background-color: transparent;
}
.MainPage :deep(.el-collapse-item__header) {
    background-color: #2a2a2a;
    color: #fff;
    border: none;
    border-bottom: 1px solid #444;
    padding: 12px 16px;
    font-weight: 500;
}
.MainPage :deep(.el-collapse-item__header:hover) {
    background-color: #333;
}
.MainPage :deep(.el-collapse-item__arrow) {
    color: #bbb;
}
.MainPage :deep(.el-collapse-item__wrap) {
    border: none;
    background-color: #222;
}
.MainPage :deep(.el-collapse-item__content) {
    padding: 16px;
    background-color: #222;
    border-bottom: 1px solid #333;
}

/* 颜色选择器样式 */
.MainPage :deep(.el-color-picker__trigger) {
    border: 1px solid #444;
    background-color: #333;
}
.MainPage :deep(.el-color-picker__trigger:hover) {
    border-color: #555;
}


.LeftBox,
.RightBox {
    width: 300px;
    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;
}

.SetBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
}
.SetName {
    font-size: 14px;
    white-space: nowrap;
    color: #ccc;
    min-width: 80px;
}
.SetValue {
    display: flex;
    gap: 8px;
    flex: 1;
}


.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>