增加 flex 样式

app/data/view/shop/goods/form.html

@@ -72,13 +72,18 @@
                     <th class="text-left" style="width:100%">轮播图片</th>
                 </tr>
                 <tr>
-                    <td class="text-center help-images text-top">
+                    <td class="text-center text-top padding-0">
+                        <div class="help-images">
                             <input name="cover" type="hidden" value="{$vo.cover|default=''}">
                             <script>$('[name="cover"]').uploadOneImage();</script>
+                        </div>
                     </td>
-                    <td class="text-left help-images">
+                    <td class="text-left padding-0">
+                        <div class="help-images">
+
                             <input name="slider" type="hidden" value="{$vo.slider|default=''}">
                             <script>$('[name="slider"]').uploadMultipleImage();</script>
+                        </div>
                     </td>
                 </tr>
                 </thead>

public/static/theme/css/_config.less

@@ -86,13 +86,14 @@
 }
 
 // 通用延时动态
-#defaTransition() {
-  transition: all .2s linear;
-  -o-transition: all .2s linear;
-  -moz-transition: all .2s linear;
-  -webkit-transition: all .2s linear;
+#defaTransition(@time:0.2s) {
+  transition: all @time linear;
+  -o-transition: all @time linear;
+  -moz-transition: all @time linear;
+  -webkit-transition: all @time linear;
 }
 
+// 内容主体布局
 #bodyLayout() {
   > form.layui-form.layui-card {
     margin: 0;
@@ -103,3 +104,53 @@
     }
   }
 }
+
+// Layui 字体图标
+#iconLayout(@size:15px) {
+  font-family: layui-icon !important;
+  font-size: @size;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Flex 基础定位
+#flex() {
+  display: -ms-flex;
+  display: -moz-box;
+  display: -moz-flex;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+}
+
+// Flex 换行方式
+#flexWrap(@type:wrap) {
+  -ms-flex-wrap: @type;
+  -webkit-flex-wrap: @type;
+  flex-wrap: @type;
+}
+
+// Flex 垂直方向
+#flexAlign(@type) {
+  -ms-flex-align: @type;
+  -webkit-box-align: @type;
+  -webkit-align-items: @type;
+  align-items: @type;
+}
+
+//  Flex 横向布局
+#flexJustify(@type) {
+  -ms-flex-pack: @type;
+  -webkit-box-pack: @type;
+  -webkit-justify-content: @type;
+  justify-content: @type;
+}
+
+// 主轴方向
+#flexDirection(@type:row) {
+  -webkit-box-orient: vertical;
+  -ms-flex-direction: @type;
+  -webkit-flex-direction: @type;
+  flex-direction: @type;
+}

public/static/theme/css/_custom.less

@@ -14,6 +14,109 @@
 // | github 代码仓库：https://github.com/zoujingli/ThinkAdmin
 // +----------------------------------------------------------------------
 
+.flex {
+  #flex();
+
+  &-inline {
+    display: inline-flex;
+  }
+
+  &-wrap {
+    #flexWrap(wrap);
+
+    &-no {
+      #flexWrap(nowrap);
+    }
+
+    &-rev {
+      #flexWrap(wrap-reverse);
+    }
+  }
+
+  // 主轴方向
+  &-direction- {
+    &row {
+      #flexDirection(row);
+
+      &reverse {
+        #flexDirection(row-reverse);
+      }
+    }
+
+    &column {
+      #flexDirection(column);
+
+      &-reverse {
+        #flexDirection(column-reverse);
+      }
+    }
+  }
+
+  // 垂直方向
+  &-align- {
+    &start {
+      #flexAlign(flex-start);
+    }
+
+    &end {
+      #flexAlign(flex-end);
+    }
+
+    &center {
+      #flexAlign(center)
+    }
+  }
+
+  // 横向布局
+  &-justify- {
+    &start {
+      #flexJustify(flex-start);
+    }
+
+    &center {
+      #flexJustify(center);
+    }
+
+    &end {
+      #flexJustify(flex-end);
+    }
+
+    &space- {
+      &between {
+        #flexJustify(space-between);
+      }
+
+      &around {
+        #flexJustify(space-around);
+      }
+
+      &evenly {
+        #flexJustify(space-evenly);
+      }
+    }
+  }
+
+  &-1 {
+    flex: 1;
+  }
+
+  &-2 {
+    flex: 2;
+  }
+
+  &-3 {
+    flex: 3;
+  }
+
+  &-4 {
+    flex: 4;
+  }
+
+  &-5 {
+    flex: 5;
+  }
+}
+
 .fixed {
   position: fixed !important;
 }
@@ -152,20 +255,16 @@
   }
 }
 
-.help-images {
+.help-images:not(td) {
   color: #333;
   padding: 10px 0 0 10px !important;
   min-height: unset;
   background: linear-gradient(-113deg, #EEEEEE, #EEEEEE) !important;
 
-  &:after {
-    clear: left;
-    content: '';
-    display: block;
-  }
+  #flex();
+  #flexWrap(wrap);
 
-  > * {
-    float: left;
+  .uploadimage {
     margin: 0 10px 10px 0;
   }
 }
@@ -758,12 +857,8 @@
     position: absolute;
     margin-left: -8px;
 
+    #iconLayout(15px);
     content: "\e63d";
-    font-family: layui-icon !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 
     animation-name: layui-rotate;
     -webkit-animation-name: layui-rotate;
@@ -876,12 +971,8 @@ label.think-checkbox {
       cursor: pointer;
       padding: 2px;
       content: "\e605";
-      font-size: 12px;
-      font-style: normal;
+      #iconLayout(12px);
       font-weight: 700;
-      font-family: layui-icon !important;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale
     }
   }
 }

public/static/theme/css/_display.less

@@ -165,30 +165,8 @@ fieldset {
 .layui-nav {
   .layui-nav-item {
     .layui-nav-more {
-      top: 0;
       right: 15px;
-      width: auto;
-      height: auto;
-      border: none;
-      padding: 0 !important;
       font-size: 14px !important;
-      font-style: normal;
-      font-family: "layui-icon" !important;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-
-      &::before {
-        content: "\e619"
-      }
-    }
-
-    & .layui-nav-mored, &ed .layui-nav-more {
-      border: none;
-      transform: rotate(180deg);
-      -o-transform: rotate(180deg);
-      -ms-transform: rotate(180deg);
-      -moz-transform: rotate(180deg);
-      -webkit-transform: rotate(180deg)
     }
   }
 }
@@ -383,24 +361,41 @@ fieldset {
   }
 }
 
-.layui-form-radio {
-  margin-top: 0;
-}
 
-.layui-form-select dl {
+.layui-form-select {
+  .layui-edge {
+    top: 50%;
+    width: unset;
+    height: unset;
+    border: none;
+    margin-top: -7px;
+    line-height: 15px;
+    #iconLayout(15px);
+
+    &:before {
+      content: "\e61a"
+    }
+  }
+
+  dl {
     top: 37px;
     padding: 0;
     border-color: @InputBorderActiveColor;
-}
+  }
 
-.layui-form-selected dl {
+  &ed dl {
     min-height: fit-content;
+  }
 }
 
 .layui-form-onswitch em {
   white-space: nowrap;
 }
 
+.layui-form-radio {
+  margin-top: 0;
+}
+
 .layui-form-checkbox.layui-form-checked {
   i {
     border-color: #5FB878;

public/static/theme/css/_layout.less

@@ -185,12 +185,8 @@
         content: "\e65b";
         line-height: 50px;
         text-align: center;
-        font-size: 10px;
-        font-style: normal;
-        font-family: layui-icon !important;
         transform: rotate(180deg);
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
+        #iconLayout(10px);
       }
 
       top: 50%;
@@ -279,6 +275,10 @@
           padding-bottom: 0;
           color: @LeftMainNavNormalTextColor;
 
+          .layui-nav-more {
+            padding: 0;
+          }
+
           &:hover {
             color: @LeftMainNavActiveTextColor;
           }