yumeng 5 lat temu
rodzic
commit
56fcb00217
1 zmienionych plików z 305 dodań i 290 usunięć
  1. 305 290
      src/views/modules/kuaishouapp/creativeCreate.vue

+ 305 - 290
src/views/modules/kuaishouapp/creativeCreate.vue

@@ -126,7 +126,7 @@
         </div>
       </a-form-item>
 
-        <!-- 有单张图,视频上传 -->
+      <!-- 有单张图,视频上传 -->
       <a-form-item
         label="选择作品进行上传(有单张)"
         v-if="hasSinglePicVideoUpload"
@@ -143,29 +143,28 @@
           >
             <template>
               <div>
-                 <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
-                     <div class="item_ul">
-                         <div class="item_li" v-for="(video,index) of videoList" :key="index">
-                             <a-col class="item">
-                                <video class="video" :src="video.localUrl" controls="controls" id="video">
-                                    您的浏览器不支持 video 标签。
-                                </video>
-                                <a-checkbox :value="video.localUrl" class="checkbox_item">
-                                    <div class="item_txt">{{video.videoName}}</div>
-                                </a-checkbox>
-                            </a-col>
-                         </div>
-                     </div>
+                <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
+                  <div class="item_ul">
+                    <div class="item_li" v-for="(video,index) of videoList" :key="index">
+                      <a-col class="item">
+                        <video class="video" :src="video.localUrl" controls="controls" id="video">
+                          您的浏览器不支持 video 标签。
+                        </video>
+                        <a-checkbox :value="video.localUrl" class="checkbox_item">
+                          <div class="item_txt">{{video.videoName}}</div>
+                        </a-checkbox>
+                      </a-col>
+                    </div>
+                  </div>
                 </a-checkbox-group>
-                </div>
+              </div>
             </template>
           </a-modal>
         </div>
       </a-form-item>
 
-      
 
-        <!-- 有单张图,图片上传 -->
+      <!-- 有单张图,图片上传 -->
       <a-form-item
         v-if="hasSinglePicCoverUpload"
         label="选择封面(有单张)"
@@ -181,22 +180,22 @@
             :width="860"
           >
             <template>
-            <div>
+              <div>
                 <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
                 <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 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>
-            </div>
+              </div>
             </template>
           </a-modal>
         </div>
@@ -382,18 +381,18 @@
         creativeMaterialType: '1',
         singlePicture: false,// 展示单张图片
         videoUploadType: '1',
-        showSinglePicTiepianType:false, // 贴片类型
-        showSinglePicType:false, // 
-        singlePicTiepianType:'1', // 贴片方式
-        singlePicType:'1', // 
+        showSinglePicTiepianType: false, // 贴片类型
+        showSinglePicType: false, //
+        singlePicTiepianType: '1', // 贴片方式
+        singlePicType: '1', //
         localUpload: false,
         localUrl: '', // 本地上传地址
         selectVideoUpload: true,
-        hasSinglePicVideoUpload:false, // 有单张图片的作品上传
-        hasSinglePicCoverUpload:false, // 有单张图片的封面上传
+        hasSinglePicVideoUpload: false, // 有单张图片的作品上传
+        hasSinglePicCoverUpload: false, // 有单张图片的封面上传
         videoUrl: '',// 视频id
-        haveSinglePicVideoUrl:[], // 有单张图片的视频id集合
-        haveSinglePicimagesList:[], // // 有单张图片的图片集合
+        haveSinglePicVideoUrl: [], // 有单张图片的视频id集合
+        haveSinglePicimagesList: [], // // 有单张图片的图片集合
         videoList: [],
         radioStyle: { // 视频单选样式
           display: 'block',
@@ -415,8 +414,8 @@
         clickTrackUrl: '',// 第三方检测链接
         showLocalImageUpload: false,
         showUploadImageRadio: true,
-        showUploadSinglePicType:false, // 单张图片上传类型
-        changeSinglePicType:'1', // 单张图片上传方式
+        showUploadSinglePicType: false, // 单张图片上传类型
+        changeSinglePicType: '1', // 单张图片上传方式
         visible: false,
         visibleVideo: false,
         visibleSinglePicVideo: false,
@@ -425,6 +424,7 @@
         showClickTrackUrl: true,
         showImpressionUrl: false,
         impressionUrl: '',
+        positionType: '',
         checkeds: [],
         customDomain: '',
         acceptVideo: 'video/mpeg,video/mp4',
@@ -472,7 +472,7 @@
             selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group',
 
           },
-          
+
       }
     },
     methods: {
@@ -525,21 +525,21 @@
         console.log("***有单张图片的视频上传***");
         console.log(this.videoList);
         this.stopOtherVideo();
-        
+
       },
       handleCancelSinglePicVideo() {
         this.closeAllVideoFun();
         this.videoUrl = "";
       },
       //   视频多选
-      VideoOnChange (checkedValues) {
+      VideoOnChange(checkedValues) {
         this.haveSinglePicVideoUrl = checkedValues;
         console.log(this.haveSinglePicVideoUrl);
       },
-    
+
       // 停止播放除当前外的视频
-      stopOtherVideo(){
-          jq(document).ready(function () {
+      stopOtherVideo() {
+        jq(document).ready(function () {
           // 播放当前视频停止其他视频
           let videos = jq("video");
 
@@ -573,32 +573,32 @@
         }
       },
 
-        //   有单张图片的上传封面
-        showSinglePicCoverModal(){
-            this.visibleSinglePicCover = true;
-            console.log("***有单张图片的封面上传***");
-            console.log(this.imageList);
-        },
-        handleOkSinglePicCover(){
-            this.haveSinglePicimagesList = [];
-            if (this.checkeds.length > 0) {
-                for (let i = 0; i < this.checkeds.length; i++) {
-                let imageId = this.checkeds[i];
-                for (let j = 0; j < this.imageList.length; j++) {
-                    let imageVo = this.imageList[j];
-                    if (imageId == imageVo.id) {
-                    this.haveSinglePicimagesList.push(imageVo.src)
-                    }
-                }
-                }
+      //   有单张图片的上传封面
+      showSinglePicCoverModal() {
+        this.visibleSinglePicCover = true;
+        console.log("***有单张图片的封面上传***");
+        console.log(this.imageList);
+      },
+      handleOkSinglePicCover() {
+        this.haveSinglePicimagesList = [];
+        if (this.checkeds.length > 0) {
+          for (let i = 0; i < this.checkeds.length; i++) {
+            let imageId = this.checkeds[i];
+            for (let j = 0; j < this.imageList.length; j++) {
+              let imageVo = this.imageList[j];
+              if (imageId == imageVo.id) {
+                this.haveSinglePicimagesList.push(imageVo.src)
+              }
             }
-            console.log(this.haveSinglePicimagesList);
-            this.visibleSinglePicCover = false;
-        },
-        handleCancelSinglePicCover(){
-            this.visibleSinglePicCover = false;
-            this.haveSinglePicimagesList = [];
-        },
+          }
+        }
+        console.log(this.haveSinglePicimagesList);
+        this.visibleSinglePicCover = false;
+      },
+      handleCancelSinglePicCover() {
+        this.visibleSinglePicCover = false;
+        this.haveSinglePicimagesList = [];
+      },
 
       checkeda: function (id) {
         let indexOf = this.checkeds.indexOf(id)
@@ -670,13 +670,14 @@
           params.pageSize = '1000';
           params.loginId = this.userInfo().id;
           params.positionType = '1';
+
           if (this.creativeMaterialType == '1') { // 竖版视频
             params.materialType = '1';
-          }if (this.creativeMaterialType == '2') {
-            params.materialType = '2';
           }
-          if (this.creativeMaterialType == '3') {
+          if (this.creativeMaterialType == '2') {
+            params.materialType = '2';
           }
+
           getAction(this.url.videoListUrl, params).then((res) => {
             if (res.success) {
               this.videoList = res.result.records
@@ -719,6 +720,8 @@
             });
           } else if (this.creativeMaterialType == '3') { // 切换单张图片
 
+            this.positionType = '1';
+            this.singlePicTiepianType = '1';
             this.showImageUpload = true;
             this.showUploadType = false;
             this.localUpload = false;
@@ -728,54 +731,54 @@
             this.hasSinglePicVideoUpload = false;
           }
         }
-        if(this.creativeMaterialType == '1' || this.creativeMaterialType == '2'){
-            this.hasSinglePicCoverUpload = false;
-            this.showSinglePicTiepianType = false;
+        if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
+          this.hasSinglePicCoverUpload = false;
+          this.showSinglePicTiepianType = false;
         }
-        if(this.creativeMaterialType == '3'){  // 单张图片时
-            this.hasSinglePicVideoUpload = false;
-            this.hasSinglePicCoverUpload = true;
-            this.localUpload = false;
-            this.showSinglePicType = true;
-            this.showUploadSinglePicType = true;
-            this.showImageUpload = false;
-            this.showSinglePicTiepianType = true;
+        if (this.creativeMaterialType == '3') {  // 单张图片时
+          this.hasSinglePicVideoUpload = false;
+          this.hasSinglePicCoverUpload = true;
+          this.localUpload = false;
+          this.showSinglePicType = true;
+          this.showUploadSinglePicType = true;
+          this.showImageUpload = false;
+          this.showSinglePicTiepianType = true;
         }
       },
 
       // 视频上传方式
       changeUploadVideo() {
-        if ( this.sceneId == '2' && this.videoUploadType == '2'){ // 无单张图片时
-            this.hasSinglePicVideoUpload = false;
-            this.hasSinglePicCoverUpload = false;
-            this.localUpload = true;
+        if (this.sceneId == '2' && this.videoUploadType == '2') { // 无单张图片时
+          this.hasSinglePicVideoUpload = false;
+          this.hasSinglePicCoverUpload = false;
+          this.localUpload = true;
         }
-        if(this.sceneId == "3"){ // 有单张图片时
-            
+        if (this.sceneId == "3") { // 有单张图片时
+
+          this.showUploadImageRadio = false;
+          // 如果有单张图片,上传作品方式为多选
+          if (this.videoUploadType == 2) {
+            this.localUpload = true;
             this.showUploadImageRadio = false;
-            // 如果有单张图片,上传作品方式为多选
-            if (this.videoUploadType == 2) {
-                this.localUpload = true;
-                this.showUploadImageRadio = false;
-                this.hasSinglePicVideoUpload = false;
-                this.hasSinglePicCoverUpload = false;
-            }else{
-                this.localUpload = false;
-                this.hasSinglePicVideoUpload = true;
-                this.hasSinglePicCoverUpload = false;
-            }
-        }else{
             this.hasSinglePicVideoUpload = false;
             this.hasSinglePicCoverUpload = false;
-            if (this.videoUploadType == 2) {
-                this.hasSinglePicCoverUpload = false;
-                this.selectVideoUpload = false;
-            } else {
-                this.localUpload = false;
-                this.selectVideoUpload = true;
-            }
+          } else {
+            this.localUpload = false;
+            this.hasSinglePicVideoUpload = true;
+            this.hasSinglePicCoverUpload = false;
+          }
+        } else {
+          this.hasSinglePicVideoUpload = false;
+          this.hasSinglePicCoverUpload = false;
+          if (this.videoUploadType == 2) {
+            this.hasSinglePicCoverUpload = false;
+            this.selectVideoUpload = false;
+          } else {
+            this.localUpload = false;
+            this.selectVideoUpload = true;
+          }
         }
-        
+
       },
       getDescription() {
         let params = {};
@@ -790,87 +793,47 @@
         });
       },
 
-      
 
       // 有单张图片的贴片方式
-      changeSinglePicTiepianTypeFun(){
-            let params = {};
-            params.pageSize = '1000';
-            params.loginId = this.userInfo().id;
-            if(this.singlePicTiepianType == '1'){
-                params.materialType = '2';
-                params.positionType = '1';
-            }
-            if(this.singlePicTiepianType == '2'){
-                params.materialType = '2';
-                params.positionType = '2';
-            }
-            getAction(this.url.imageListUrl, params).then((res) => {
-                this.imageList = res;
-                console.log(res);
-            });
+      changeSinglePicTiepianTypeFun() {
+        if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '1') {
+          this.positionType = '1';
 
-      },
+        } else if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '2') {
+          this.positionType = '2';
+        }
+        let params = {};
+        params.pageSize = '1000';
+        params.loginId = this.userInfo().id;
+        if (this.singlePicTiepianType == '1') {
+          params.materialType = '2';
+          params.positionType = '1';
+        }
+        if (this.singlePicTiepianType == '2') {
+          params.materialType = '2';
+          params.positionType = '2';
+        }
+        getAction(this.url.imageListUrl, params).then((res) => {
+          this.imageList = res;
+          console.log(res);
+        });
 
-        // 有单张图片的图片上传方式
-      changeSinglePicTypeFun(){
-          if(this.changeSinglePicType == '1'){
-              this.hasSinglePicCoverUpload = true;
-              this.localUpload = false;
-          }
-          if(this.changeSinglePicType == '2'){
-              this.hasSinglePicCoverUpload = false;
-              this.localUpload = true;
-          }
       },
-    
-    
-
 
-      handleSubmit(e) {
-        console.log(this.imageUrl)
-        e.preventDefault()
-        this.form.validateFields((err, values) => {
-          if (!err) {
-            let params = {};
-            params.accountId = this.accountId;
-            if (this.ids.length == 2) {
-              params.unitId = this.ids[1];
-            }
-            params.videoUploadType = this.videoUploadType;
-            if (this.videoUploadType == '1') {
-              params.videoUrl = this.videoUrl;
-            } else if (this.videoUploadType == '2') {
-              params.videoUrl = this.localUrl;
-            }
-            console.log(params.videoUrl);
-            params.imageUrl = this.imageUrl;
-            console.log(this.imageUrl)
-            params.actionBarText = this.actionBarTextDesc;
-            params.description = this.description;
-            params.clickTrackUrl = this.clickTrackUrl;
-            params.creativeName = this.creativeName;
-            params.imageType = this.imageType;
-            params.creativeMaterialType = this.creativeMaterialType;
-            params.localImageUrl = this.localImageUrl;
-            params.impressionUrl = this.impressionUrl;
-            params.sceneId = this.sceneId;
-            params.loginId = this.userInfo().id;
-            params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl;
-            params.haveSinglePicimagesList = this.haveSinglePicimagesList;
-            console.log(params.haveSinglePicimagesList)
-            postAction(this.url.creativeUrl, params).then((res) => {
-              console.log(res)
-              if (res.success) {
-                alert("广告创意创建成功");
-              }
-            });
-          }
-        })
+      // 有单张图片的图片上传方式
+      changeSinglePicTypeFun() {
+        if (this.changeSinglePicType == '1') {
+          this.hasSinglePicCoverUpload = true;
+          this.localUpload = false;
+        }
+        if (this.changeSinglePicType == '2') {
+          this.hasSinglePicCoverUpload = false;
+          this.localUpload = true;
+        }
       },
-      
 
       onChangeActionBarText() {
+        this.creativeMaterialType = '1';
         if (this.ids.length == 2) {
           let id = this.ids[0];
           let params = {};
@@ -897,30 +860,32 @@
               this.selectVideoUpload = true;
               this.hasSinglePicVideoUpload = false;
               this.hasSinglePicCoverUpload = false;
+              this.showSinglePicTiepianType = false;
+              this.showUploadSinglePicType = false;
+              this.positionType = '1';
+              let params2 = {};
+              params2.pageSize = '1000';
+              params2.materialType = '1';
+              params2.positionType = '1';
+              params2.loginId = this.userInfo().id;
+              getAction(this.url.videoListUrl, params2).then((res) => {
+                if (res.success) {
+                  this.videoList = res.result.records
+                  // 设置默认选中的视频
+                  if (this.videoList.length > 0) {
+                    this.videoUrl = this.videoList[0].localUrl;
+                  }
+
+                  console.log("......")
+                  console.log(this.videoList)
+                }
+              });
 
-                let params2 = {};
-                    params2.pageSize = '1000';
-                    params2.materialType = '1';
-                        params2.positionType = '1';
-                    params2.loginId = this.userInfo().id;
-                    getAction(this.url.videoListUrl, params2).then((res) => {
-                        if (res.success) {
-                        this.videoList = res.result.records
-                        // 设置默认选中的视频
-                        if (this.videoList.length > 0) {
-                            this.videoUrl = this.videoList[0].localUrl;
-                        }
-
-                        console.log("......")
-                        console.log(this.videoList)
-                        }
-                    });
-
-                    // 图片列表
-                    getAction(this.url.imageListUrl, params2).then((res) => {
-                        this.imageList = res
-                        console.log(res)
-                    });
+              // 图片列表
+              getAction(this.url.imageListUrl, params2).then((res) => {
+                this.imageList = res
+                console.log(res)
+              });
 
             } else if (res.sceneId == '3') { // 有单张图片的时候
               this.singlePicture = true;
@@ -930,40 +895,38 @@
               this.showCover = false;
               this.selectVideoUpload = false;
               this.showLocalImageUpload = false;
+              this.positionType = '2';
 
-            // 如果有单张图片,上传作品方式为多选
+              // 如果有单张图片,上传作品方式为多选
               this.hasSinglePicVideoUpload = true;
-              
-                let params2 = {};
-                    params2.pageSize = '1000';
-                    params2.materialType = '1';
-                    params2.positionType = '2';
-                    params2.loginId = this.userInfo().id;
-                    getAction(this.url.videoListUrl, params2).then((res) => {
-                        if (res.success) {
-                        this.videoList = res.result.records
-                        // 设置默认选中的视频
-                        if (this.videoList.length > 0) {
-                            this.videoUrl = this.videoList[0].localUrl;
-                        }
-
-                        console.log("......")
-                        console.log(this.videoList)
-                        }
-                    });
-
-                    // 图片列表
-                    getAction(this.url.imageListUrl, params2).then((res) => {
-
-                        this.imageList = res
-                        console.log(res)
-
-                    });
 
-            }
+              let params2 = {};
+              params2.pageSize = '1000';
+              params2.materialType = '1';
+              params2.positionType = '2';
+              params2.loginId = this.userInfo().id;
+              getAction(this.url.videoListUrl, params2).then((res) => {
+                if (res.success) {
+                  this.videoList = res.result.records
+                  // 设置默认选中的视频
+                  if (this.videoList.length > 0) {
+                    this.videoUrl = this.videoList[0].localUrl;
+                  }
+
+                  console.log("......")
+                  console.log(this.videoList)
+                }
+              });
 
-          });
+              // 图片列表
+              getAction(this.url.imageListUrl, params2).then((res) => {
+
+                this.imageList = res
+                console.log(res)
 
+              });
+            }
+          });
         }
 
       },
@@ -971,7 +934,6 @@
       filterOption(input, option) {
         return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
       },
-
       loadData(selectedOptions) {
         const targetOption = selectedOptions[selectedOptions.length - 1];
         targetOption.loading = true;
@@ -997,6 +959,49 @@
         });
       },
 
+      handleSubmit(e) {
+        console.log(this.imageUrl)
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            let params = {};
+            params.accountId = this.accountId;
+            if (this.ids.length == 2) {
+              params.unitId = this.ids[1];
+            }
+            params.videoUploadType = this.videoUploadType;
+            if (this.videoUploadType == '1') {
+              params.videoUrl = this.videoUrl;
+            } else if (this.videoUploadType == '2') {
+              params.videoUrl = this.localUrl;
+            }
+            console.log(params.videoUrl);
+            params.imageUrl = this.imageUrl;
+            console.log(this.imageUrl)
+            params.actionBarText = this.actionBarTextDesc;
+            params.description = this.description;
+            params.clickTrackUrl = this.clickTrackUrl;
+            params.creativeName = this.creativeName;
+            params.imageType = this.imageType;
+            params.creativeMaterialType = this.creativeMaterialType;
+            params.localImageUrl = this.localImageUrl;
+            params.impressionUrl = this.impressionUrl;
+            params.sceneId = this.sceneId;
+            params.loginId = this.userInfo().id;
+            params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl;
+            params.haveSinglePicimagesList = this.haveSinglePicimagesList;
+            params.positionType = this.positionType;
+            console.log(params.haveSinglePicimagesList)
+            postAction(this.url.creativeUrl, params).then((res) => {
+              console.log(res)
+              if (res.success) {
+                alert("广告创意创建成功");
+              }
+            });
+          }
+        })
+      }
+
     },
 
     created: function () {
@@ -1012,30 +1017,30 @@
 
 
       // 页面初始化 查询竖版视频
-    //   params = {};
-    //   params.pageSize = '1000';
-    //   params.materialType = '1';
-    //   params.loginId = this.userInfo().id;
-    //   getAction(this.url.videoListUrl, params).then((res) => {
-    //     if (res.success) {
-    //       this.videoList = res.result.records
-    //       // 设置默认选中的视频
-    //       if (this.videoList.length > 0) {
-    //         this.videoUrl = this.videoList[0].localUrl;
-    //       }
+      //   params = {};
+      //   params.pageSize = '1000';
+      //   params.materialType = '1';
+      //   params.loginId = this.userInfo().id;
+      //   getAction(this.url.videoListUrl, params).then((res) => {
+      //     if (res.success) {
+      //       this.videoList = res.result.records
+      //       // 设置默认选中的视频
+      //       if (this.videoList.length > 0) {
+      //         this.videoUrl = this.videoList[0].localUrl;
+      //       }
 
-    //       console.log("......")
-    //       console.log(this.videoList)
-    //     }
-    //   });
+      //       console.log("......")
+      //       console.log(this.videoList)
+      //     }
+      //   });
 
-    //   // 图片列表
-    //   getAction(this.url.imageListUrl, params).then((res) => {
+      //   // 图片列表
+      //   getAction(this.url.imageListUrl, params).then((res) => {
 
-    //     this.imageList = res
-    //     console.log(res)
+      //     this.imageList = res
+      //     console.log(res)
 
-    //   });
+      //   });
 
 
     }
@@ -1045,15 +1050,18 @@
 
 
 <style lang="scss">
-.select_all{
+  .select_all {
     margin-bottom: 10px;
-}
+  }
+
   .ant-modal-body {
     height: 650px;
     overflow-y: scroll;
+
     .image_item_container {
       margin: 0 -10px;
       width: 100%;
+
       .image_item {
         display: inline-block;
         width: 20%;
@@ -1094,39 +1102,46 @@
     }
   }
 
-//   多选框
-.checkbox_item_container{
-    .item_ul{
-        margin: 0 -10px;
-        .item_li{
-            width: 20%;
-            float:left;
-            padding: 0 10px;
-            box-sizing: border-box;
-            .item{
-                position: relative;
-               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;
-                        }
-                    }
-               }
-               
+  //   多选框
+  .checkbox_item_container {
+    .item_ul {
+      margin: 0 -10px;
+
+      .item_li {
+        width: 20%;
+        float: left;
+        padding: 0 10px;
+        box-sizing: border-box;
+
+        .item {
+          position: relative;
+
+          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;
+              }
             }
+          }
+
         }
+      }
     }
-}
+  }
 </style>