完善大屏配置页面

src/view/LargeScreen/cockpit.vue

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

src/view/LargeScreen/index.vue

@@ -7,19 +7,55 @@
                 highlight-current />
         </div>
         <div class="CenterBox">
-            <h2>画布区域</h2>
+            <Cockpit/>
-            <div class="canvas-area">这里是大屏设计画布</div>
         </div>
         <div class="RightBox">
-            <h2>属性面板</h2>
+            <h2>大屏1</h2>
-            <div class="property-item">尺寸</div>
+            <el-tabs>
-            <div class="property-item">位置</div>
+                <el-tab-pane label="样式"></el-tab-pane>
-            <div class="property-item">样式</div>
+                <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,
+.SetBox {
-.property-item {
+    display: flex;
-    padding: 10px;
+    align-items: center;
-    margin-bottom: 8px;
+    justify-content: space-between;
-    background-color: #333;
+    gap: 6px;
-    border-radius: 4px;
+    margin-top: 4px;
-    cursor: pointer;
+}
-    transition: background-color 0.3s;
+.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>