From 493cfd6ce5e2115495ed7f821fd93287afb7d9c8 Mon Sep 17 00:00:00 2001
From: liangbin <15536829364@163.com>
Date: Wed, 27 Aug 2025 14:24:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=A4=A7=E5=B1=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/view/LargeScreen/cockpit.vue |  5 ++
 src/view/LargeScreen/index.vue   | 87 +++++++++++++++++++++++++-------
 2 files changed, 73 insertions(+), 19 deletions(-)
 create mode 100644 src/view/LargeScreen/cockpit.vue

diff --git a/src/view/LargeScreen/cockpit.vue b/src/view/LargeScreen/cockpit.vue
new file mode 100644
index 0000000..6af1605
--- /dev/null
+++ b/src/view/LargeScreen/cockpit.vue
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        驾驶舱
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/view/LargeScreen/index.vue b/src/view/LargeScreen/index.vue
index bb28e07..680c7dd 100644
--- a/src/view/LargeScreen/index.vue
+++ b/src/view/LargeScreen/index.vue
@@ -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>