jiwanjun
/
ai-speech-build
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善大屏配置页面

This commit is contained in:
liangbin 2025-08-27 14:24:04 +08:00
parent 9c1d270e94
commit 493cfd6ce5
2 changed files with 73 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/view/LargeScreen/cockpit.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<div>
驾驶舱
</div>
</template>

87
src/view/LargeScreen/index.vue
View File

@ -7,19 +7,55 @@
highlight-current />
</div>
<div class="CenterBox">
<h2>画布区域</h2>
<div class="canvas-area">这里是大屏设计画布</div>
<Cockpit/>
</div>
<div class="RightBox">
<h2>属性面板</h2>
<div class="property-item">尺寸</div>
<div class="property-item">位置</div>
<div class="property-item">样式</div>
<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',
@ -72,10 +108,20 @@ const tooles = ref([
background-color: #8497a5;
color: #fff;
}
.MainPage :deep(.el-tabs__item) {
color: #fff;
}
.MainPage :deep(.el-tabs__nav-wrap:after) {
background: none;
}
.MainPage :deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0px 4px;
}
.LeftBox,
.RightBox {
width: 250px;
width: 300px;
background-color: #252525;
padding: 15px;
border-right: 1px solid #333;
@ -103,20 +149,22 @@ h2 {
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;
.SetBox {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
margin-top: 4px;
}
.SetName {
font-size: 14px;
white-space: nowrap;
}
.SetValue{
display: flex;
gap: 6px;
}
.tool-item:hover,
.property-item:hover {
background-color: #444;
}
.canvas-area {
width: 80%;
@ -128,4 +176,5 @@ h2 {
border: 1px dashed #555;
border-radius: 4px;
}
</style>