فهرست منبع

快手创建创意选择封面样式调整

刘政和 5 سال پیش
والد
کامیت
44aa1dd064
2فایلهای تغییر یافته به همراه47 افزوده شده و 13 حذف شده
  1. 1 0
      package.json
  2. 46 13
      src/views/modules/kuaishouapp/creativeCreate.vue

+ 1 - 0
package.json

@@ -41,6 +41,7 @@
     "vue-ls": "^3.2.0",
     "vue-oss-uploader": "^0.1.10",
     "vue-photo-preview": "^1.1.3",
+    "vue-preview": "^1.1.3",
     "vue-print-nb-jeecg": "^1.0.8",
     "vue-property-decorator": "^7.3.0",
     "vue-router": "^3.0.1",

+ 46 - 13
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -175,28 +175,30 @@
         :wrapperCol="wrapperCol">
         <div>
           <a type="primary" @click="showModal">点击选中已上传封面</a>
-          <a-modal
+          <a-modal class="select_cover_modal"
             title="选择封面"
             v-model="visible"
             @ok="handleOk"
             :width="860"
-            style="height:650px;overflow-y:auto"
           >
             <template>
-              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
+              <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
               <br/>
               <br/>
-              <div v-for="(item ,index) in imageList" style="display:inline-block;width:20%">
-                <a href="javascript:">
-                  <img :src="item.src" alt="" height="100">&nbsp;&nbsp;&nbsp;
-                  <p>{{item.name}}</p>
-                  <p>
-                    <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
-                           @onClick="checkeda(item.id)"
-                           @change="changChecked">
-                  </p>
-                </a>
+              <div class="image_item_container">
+                  <div v-for="(item ,index) in imageList" class="image_item" :key="index">
+                    <label :for="item.id" class="label_item">
+                    <img :src="item.src" alt="" class="item_img">
+                    <p class="item_text">{{item.name}}</p>
+                    <p class="item_checkbox">
+                        <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
+                            @onClick="checkeda(item.id)"
+                            @change="changChecked" :id="item.id">
+                    </p>
+                    </label>
+                </div>
               </div>
+              
             </template>
           </a-modal>
         </div>
@@ -698,3 +700,34 @@
   }
 
 </script>
+
+
+<style lang="scss">
+.select_cover_modal {
+        .ant-modal-body {
+            height: 650px;
+            overflow-y: scroll;
+            .image_item_container{
+                margin: 0 -10px;
+                .image_item {
+                    display: inline-block;
+                    width: 20%;
+                    padding: 0 10px;
+                    box-sizing: border-box;
+                    margin-bottom: 20px;
+                    .label_item {
+                        display: block;
+                        cursor: pointer;
+                    }
+            
+                    .item_img {
+                        width: 100%;
+                        margin-bottom: 10px;
+                    }
+                    .item_text{height: 42px;overflow: hidden;margin-bottom: 0;}
+                    .item_checkbox{margin-bottom: 0;}
+                }
+            }
+        } 
+}
+</style>