修改信号源的样式

src/renderer/assets/less/mainpage.less

@@ -5,52 +5,52 @@
   background-color: #333;
   overflow: hidden;
   font-weight: 500;
-  font-family: "微软雅黑";
+  font-family: "Microsoft YaHei", serif;
 
-  // 列表项样式
-  .signal_item {
-    /*width: 100%;
-    height: 132px;*/
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
-    /*背景*/
-    .signal_item_bg {
-      width: 90%;
-      height: 130px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  // 信号源主体样式
+  .signal_body {
+    position:absolute;
+    display:flex;
 
-      &:hover {
-        background-color: rgba(113, 113, 113, 0.3);
-      }
-
-      /*主体*/
-      .signal_item_bg_body {
-        width: 96%;
-        height: 96%;
-        background-color: rgba(127, 127, 127, 0.5);
-        border-radius: 2px;
+      // 列表项样式
+    .signal_item {
 
-        /*空间*/
-        .signal_item_bg_body_space {
-          width: 94%;
-          height: 80%;
-          background-color: green;
-          margin: 6px auto 2px;
+      /*背景*/
+      .signal_item_bg {
+        height: 130px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+          background-color: rgba(113, 113, 113, 0.3);
         }
 
-        /*文字*/
-        .signal_item_bg_body_font {
-          width: 100%;
-          height: 15%;
-          text-align: center;
-          margin: 0 auto;
-          font-size: 16px;
-          color: #fff;
-          font-family: "Gill Sans", sans-serif;
+        /*主体*/
+        .signal_item_bg_body {
+          width: 96%;
+          height: 96%;
+          background-color: rgba(127, 127, 127, 0.5);
+          border-radius: 2px;
+
+          /*空间*/
+          .signal_item_bg_body_space {
+            width: 94%;
+            height: 80%;
+            background-color: green;
+            margin: 6px auto 2px;
+          }
+
+          /*文字*/
+          .signal_item_bg_body_font {
+            width: 100%;
+            height: 15%;
+            text-align: center;
+            margin: 0 auto;
+            font-size: 16px;
+            color: #fff;
+            font-family: "Gill Sans", sans-serif;
+          }
         }
       }
     }

src/renderer/components/Label.vue

@@ -5,7 +5,7 @@
         <label v-for="item in labelJson"
                :style="{
                  fontSize:item.FontSize*bigScale + 'px',
-                 position:'fixed',
+                 position:'absolute',
                  left:item.Left*bigScale+'px',
                  top:item.Top*bigScale+'px',
                  width:item.Width*bigScale + 'px',

src/renderer/components/SignalList.vue

@@ -1,27 +1,35 @@
 <!--信号源列表组件-->
 
 <template>
+    <!--信号源容器-->
     <draggable
             :style="{
-                position:'fixed',
                 left:signalBorder[0] ? signalBorder[0].Left*bigScale+'px' : '',
                 top:signalBorder[0] ? signalBorder[0].Top*bigScale+'px' : '',
                 width:signalBorder[0] ? signalBorder[0].Width*bigScale + 'px' : '',
                 height:signalBorder[0] ? signalBorder[0].Height*bigScale + 'px' : '',
                 zIndex:signalBorder[0] ? signalBorder[0].ZIndex : '',
-                display:signalBorder[0] ? (signalBorder[0].IsVisibility ? 'block' : 'none') : '',
                 fontSize:signalBorder[0] ? signalBorder[0].FontSize*bigScale + 'px' : '',
                 color:`#${signalBorder[0] ? signalBorder[0].ForegroundStr.slice(3) : ''}`,
-                backgroundColor:'orange'
+                flexDirection: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? 'column' : 'row') : '',
             }"
             class="signal_body"
             element="div"
             v-model="signalListJson"
             :options="dragOptions1"
             :move="onMove"
+            id="signalContainer"
     >
-        <!--列表项-->
-        <div class="signal_item" v-for="item in signalListJson" :key="item.ID">
+        <!--信号源列表项-->
+        <div
+                class="signal_item"
+                v-for="item in signalListJson"
+                :key="item.ID"
+                :style="{
+                    width: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? (signalBorder[0].Width*bigScale*0.9 + 'px') : '200px') : '',
+                    height: signalBorder[0] ? (signalBorder[0].Orientation === 0 ? '132px' : signalBorder[0].Height*bigScale*0.8 + 'px') : '',
+                }"
+        >
             <div class="signal_item_bg">
                 <div class="signal_item_bg_body">
                     <div class="signal_item_bg_body_space"></div>
@@ -52,6 +60,13 @@
             this.signalBorder = await getStaticFile('EnitySignalPreviewList.Data')
         },
 
+        updated() {
+            const flag = this.signalBorder[0] ? (this.signalBorder[0].Orientation === 0 ? 'column' : 'row') : ''
+            if(flag === 'column'){
+                document.getElementById('signalContainer').style.alignItems = 'center'
+            }
+        },
+
         methods: {
             // 移动信号源
             onMove({relatedContext, draggedContext}) {