修改多图选择器

app/admin/view/api/upload/image.html

@@ -5,20 +5,18 @@
             <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
         </div>
         <div class="pull-right">
-            <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
+            <a class="layui-btn layui-btn-sm layui-btn-normal" @click="uploadImage">上传图片</a>
         </div>
     </div>
     <div class="image-dialog-body">
-        <div class="image-dialog-item transition" v-for="x in list" @click="setItem(x)" style="display:none" v-show="show" :class="{'image-dialog-checked':x.checked}">
+        <div class="image-dialog-item" v-for="x in list" @click="setItem(x)" style="display:none" v-show="show" :class="{'image-dialog-checked':x.checked}">
             <div class="uploadimage" :style="x.style"></div>
             <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
         </div>
     </div>
     <div class="image-dialog-foot">
         <div id="ImageDialogPage" class="image-dialog-page"></div>
-        <a id="ImageDialogButton" class="image-dialog-button notselect" @click="confirm">
+        <div id="ImageDialogButton" class="image-dialog-button" v-if="data.length>0" @click="confirm">{{data.length}}</div>
-            <span v-text="data.length"></span>
-        </a>
     </div>
 </div>
 

public/static/theme/css/_custom.less

@@ -961,35 +961,6 @@ input:not(.layui-hide,[type=hidden]) {
     padding-top: 12px;
     padding-left: 12px;
     align-content: flex-start;
-
-    .image-dialog-checked {
-      &:after, &:before {
-        z-index: 2;
-        cursor: pointer;
-        content: '';
-        display: block;
-        position: absolute;
-      }
-
-      &:after {
-        top: -25px;
-        right: -25px;
-        width: 50px;
-        height: 50px;
-        transform: rotate(135deg);
-        -moz-transform: rotate(135deg);
-        -webkit-transform: rotate(135deg);
-        background-color: rgba(56, 169, 225, 0.8);
-      }
-
-      &:before {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        border: 4px solid rgba(56, 169, 225, 0.8);
-      }
-    }
   }
 
   &-item {
@@ -1022,32 +993,65 @@ input:not(.layui-hide,[type=hidden]) {
 
   &-foot {
     padding: 0 12px;
+  }
 
-    .image-dialog-page {
+  &-page {
-      height: 50px;
+    height: 50px;
-      text-align: center;
+    text-align: center;
 
-      .layui-laypage {
+    .layui-laypage {
-        a, span {
+      a, span {
-          margin-bottom: 0;
+        margin-bottom: 0;
-        }
       }
     }
+  }
 
-    .image-dialog-button {
+  &-button {
-      color: #fff;
+    color: #fff;
-      width: 42px;
+    right: 10px;
-      height: 42px;
+    bottom: 4px;
-      display: inline-block;
+    width: 42px;
-      position: absolute;
+    height: 42px;
-      text-align: center;
+    z-index: 2;
-      background: #0e7fe1;
+    cursor: pointer;
-      line-height: 42px;
+    display: inline-block;
-      border-radius: 50%;
+    position: absolute;
-      right: 10px;
+    text-align: center;
-      bottom: 4px;
+    background: #1E9FFF;
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 42px;
+    border-radius: 50%;
+    #NotSelect();
+    #defaTransition();
+  }
+
+  &-checked {
+    &:after, &:before {
       z-index: 2;
-      font-size: 16px
+      cursor: pointer;
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &:after {
+      top: -25px;
+      right: -25px;
+      width: 50px;
+      height: 50px;
+      transform: rotate(135deg);
+      -moz-transform: rotate(135deg);
+      -webkit-transform: rotate(135deg);
+      background-color: rgba(56, 169, 225, 0.8);
+    }
+
+    &:before {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: 4px solid rgba(56, 169, 225, 0.8);
     }
   }
 }