修改看板

src/views/boardGenerate/index1.vue

@@ -4,8 +4,7 @@
       <div class="componentMenu">
         <el-popover
           trigger="click"
-          placement="bottom-start"
-        >
+          placement="bottom-start">
           <template #reference>
             <div style="margin-left: 20px;display: inline-block">
               <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
@@ -70,13 +69,35 @@
       </div>
       <div class="optionsMenu"></div>
     </div>
-    <div class="left"></div>
+    <div class="left">
+      <div class="title">
+        图层
+      </div>
+      <div class="level" v-for="i in 10">
+        <div class="isShow">
+          <el-icon style="cursor: pointer" color="#fff" :size="16">
+            <View />
+          </el-icon>
+        </div>
+        <div class="icon">
+          <svg viewBox="0 0 1024 1024" width="16" height="16"
+               style="margin-left: 10px;">
+            <path
+              d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
+              fill="#ddd" p-id="10516"></path>
+          </svg>
+        </div>
+        <div class="boardName">
+          <span style="  display: inline-block;">图表名称</span>
+        </div>
+      </div>
+    </div>
     <div class="center"></div>
     <div class="right"></div>
   </div>
 </template>
 <script setup>
-import { ArrowDown } from '@element-plus/icons-vue';
+import { ArrowDown, View } from '@element-plus/icons-vue';
 </script>
 <style scoped lang="less">
 .boardGenerate {
@@ -99,6 +120,43 @@ import { ArrowDown } from '@element-plus/icons-vue';
     overflow: auto;
     background-color: #1F2224;
     border-right: 1px solid #000;
+
+    .title {
+      width: 100%;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      color: #FFF;
+      border-bottom: 1px solid #000;
+    }
+
+    .level {
+      display: flex;
+      align-items: center; /* 核心对齐逻辑 */
+      height: 50px;
+      padding-left: 20px;
+      border-bottom: 1px solid #000;
+
+      .isShow, .icon, .boardName {
+        display: flex;
+        align-items: center;
+      }
+
+      .isShow {
+        width: 30px;
+        height: 50px;
+        border-right: 1px solid #000;
+      }
+
+      .icon {
+        width: 40px;
+      }
+
+      .boardName {
+        font-size: 14px;
+        color: #fff;
+      }
+    }
   }
 
   .center {