浏览代码

提交代码,点击选择

zhuxinbo 5 年之前
父节点
当前提交
34aa8ff1e0
共有 1 个文件被更改,包括 46 次插入152 次删除
  1. 46 152
      src/views/modules/kuaishouapp/account/stepForm/Step3.vue

+ 46 - 152
src/views/modules/kuaishouapp/account/stepForm/Step3.vue

@@ -1,4 +1,4 @@
-<style>
+<style lang="scss">
   .chouzhen span {
     display: inline-block;
   }
@@ -7,6 +7,28 @@
     text-align: center;
     font-size: 20px;
   }
+
+  .step3-image {
+    span {
+      padding: 0
+    }
+
+    .ant-checkbox {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 100;
+    }
+  }
+
+  .step3-modal {
+    .ant-checkbox {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 100;
+    }
+  }
 </style>
 <style scoped lang="scss">
   .actor-photo-list {
@@ -20,7 +42,6 @@
       height: 380px;
       border: 1px solid #f2f2f2;
       list-style: none;
-      padding: 10px;
 
       img,
       video {
@@ -58,6 +79,7 @@
     text-align: center;
     background: rgba(0, 0, 0, 0.5);
     border-radius: 2px;
+    z-index: 1000;
   }
 
   .actor-photo-list {
@@ -119,14 +141,15 @@
                             v-if="item.videoList"></video>
                         </a-form-item>
                         <div class="downLoad" style="overflow:auto">
-                          <ul class="actor-photo-list"
+                          <ul class="actor-photo-list step3-image"
                             :style="{ width: item.imageUrlList.length>4?25 * item.imageUrlList.length + '%':'100%' }"
                             v-if="item.imageUrlList.length > 0">
                             <a-checkbox-group v-model="item.checkArrImage"
                               style="width:100%;  display: flex;padding-left: 0;" @change="onChangeCheckImage">
                               <li v-for="(item, index) of item.imageUrlList" :key="index">
-                                <a-checkbox :value="item.code" style="position:absolute;z-index: 100"></a-checkbox><img
-                                  class="video" :src="item.url" />
+                                <a-checkbox :value="item.code" style="height:100%;width:100%">
+                                  <img class="video" :src="item.url" />
+                                </a-checkbox>
                               </li>
                             </a-checkbox-group>
                           </ul>
@@ -281,13 +304,18 @@
         全选
       </a-button>
       <!-- </a-checkbox> -->
-      <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto;padding-left:0">
+      <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto;padding-left:0" class="step3-modal">
 
-        <a-checkbox-group v-model="checkList" @change="onChange">
-          <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" :class="{'first':index == 0}">
+        <a-checkbox-group v-model="checkList" @change="onChange" style="width:100%;">
+          <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" style="height:355px"
+            :class="{'first':index == 0}">
 
-            <img :src="item.url" alt="" style="width:100%">
-            <a-checkbox :value="item.signature" style="position:absolute;z-index: 100;right:0;top:0;"></a-checkbox>
+
+            <a-checkbox :value="item.signature"
+              style="position:absolute;z-index: 100;width:100%;height:100%;right:0;top:0;float:right">
+              <img :src="item.url" alt="" style="width:100%">
+
+            </a-checkbox>
 
           </li>
         </a-checkbox-group>
@@ -301,14 +329,17 @@
         <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
           <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
           <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
-            <a-checkbox-group v-model="checkVideo" @change="onChangeVideo">
-              <li v-for="(item,index) of dataSource" :key="index" class="chouzhen">
-                <img :src="item.coverUrl" alt="" style="width:100%" @click="matemalVideo(item,index)">
+            <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
+              <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
+
                 <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
                   您的浏览器不支持 video 标签。
                 </video> -->
-                <a-checkbox :value="item" style="position:absolute;z-index: 100;right:0;top:0;"></a-checkbox>
-
+                <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
+                  <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
+                </a-checkbox>
+                <a @click="matemalVideo(item,index)"
+                  style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
               </li>
             </a-checkbox-group>
           </ul>
@@ -1475,142 +1506,5 @@
   }
 </script>
 <style lang="scss">
-  .select_all {
-    margin-bottom: 10px;
-  }
-
-  .ant_modal_body_container {
-    .ant-modal-body {
-      max-height: 650px;
-      overflow-y: scroll;
-
-      .image_item_container {
-        margin: 0 -10px;
-        width: 100%;
-
-        .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;
-          }
-
-          .video {
-            width: 100%;
-          }
-        }
-      }
-    }
-
-    .video_item_container {
-      .video {
-        width: 100%;
-      }
-    }
-  }
-
-  //   多选框
-  .checkbox_item_container {
-    .item_ul {
-      margin: 0 -10px;
-
-      .item_li {
-        width: 20%;
-        float: left;
-        padding: 0 10px;
-        box-sizing: border-box;
-
-        .item:hover i {
-          display: block;
-          cursor: pointer;
-        }
-
-        .item {
-          position: relative;
-
-          i {
-            display: none;
-          }
-
-          video {
-            width: 100%;
-            min-height: 255px;
-          }
-
-          .checkbox_item {
-            display: block;
-
-            .ant-checkbox {
-              display: inline-block;
-            }
-
-            span {
-              display: block;
-              padding: 0;
-
-              .item_txt {
-                text-align: left;
-                height: 42px;
-                overflow: hidden;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // @media (min-width: 1024px){
-  //     .checkbox_item_container {
-  //         width:70%
-  //     }
-  // } /*>=1024的设备*/
-
-  // @media (min-width: 1100px) {
-  //     .checkbox_item_container {
-  //         width:70%
-  //     }
-  // } /*>=1100的设备*/
-  @media (min-width: 1280px) {
-    .checkbox_item_container_size {
-      width: 70%;
-    }
-  }
-
-  /*>=1280的设备*/
-
-  // @media (min-width: 1366px) {
-  // }
-
-  // @media (min-width: 1440px) {
-  // }
-
-  // @media (min-width: 1680px) {
-
-  // }
-  @media (min-width: 1920px) {
-    .checkbox_item_container_size {
-      width: 50%;
-    }
-  }
 </style>