支持组件尺寸快速对齐

smsb-plus-ui/src/views/smsb/itemProgram/EditProgram.vue

@@ -132,24 +132,31 @@
 
           <!-- 对齐尺寸操作区 -->
           <div style="margin: 12px 0">
-            <div style="font-weight: bold; margin-bottom: 4px">对齐尺寸</div>
-            <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px">
-              <el-button size="small" @click="alignComponent('left')">水平靠左</el-button>
-              <el-button size="small" @click="alignComponent('right')">水平靠右</el-button>
-              <el-button size="small" @click="alignComponent('top')">垂直靠上</el-button>
-              <el-button size="small" @click="alignComponent('bottom')">垂直靠下</el-button>
+            <div style="font-weight: bold; margin-bottom: 10px">对齐尺寸</div>
+            <!-- 第一组 2x2 -->
+            <div
+              style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('left')">水平靠左</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('right')">水平靠右</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('top')">垂直靠上</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('bottom')">垂直靠下</el-button>
             </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px">
-              <el-button size="small" @click="alignComponent('width-full')">宽铺满</el-button>
-              <el-button size="small" @click="alignComponent('width-half')">宽半屏</el-button>
-              <el-button size="small" @click="alignComponent('width-third')">宽1/3屏</el-button>
-              <el-button size="small" @click="alignComponent('width-quarter')">宽1/4屏</el-button>
+            <hr style="border: none; border-top: 1px solid #eee; margin: 8px 0" />
+            <!-- 第二组 2x2 -->
+            <div
+              style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-full')">宽铺满</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-half')">宽半屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-third')">宽1/3屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('width-quarter')">宽1/4屏</el-button>
             </div>
-            <div style="display: flex; flex-wrap: wrap; gap: 4px">
-              <el-button size="small" @click="alignComponent('height-full')">高铺满</el-button>
-              <el-button size="small" @click="alignComponent('height-half')">高半屏</el-button>
-              <el-button size="small" @click="alignComponent('height-third')">高1/3屏</el-button>
-              <el-button size="small" @click="alignComponent('height-quarter')">高1/4屏</el-button>
+            <hr style="border: none; border-top: 1px solid #eee; margin: 8px 0" />
+            <!-- 第三组 2x2 -->
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; padding-left: 2px">
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-full')">高铺满</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-half')">高半屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-third')">高1/3屏</el-button>
+              <el-button size="small" style="width: 100%" @click="alignComponent('height-quarter')">高1/4屏</el-button>
             </div>
           </div>
         </template>
@@ -821,6 +828,10 @@ const goBack = () => {
   border: none;
 }
 
+.el-button+.el-button {
+  margin-left: 0px;
+}
+
 .json-debug-title {
   margin-top: 30px;
   font-size: 14px;