|
|
@@ -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>
|