|
@@ -175,28 +175,30 @@
|
|
:wrapperCol="wrapperCol">
|
|
:wrapperCol="wrapperCol">
|
|
<div>
|
|
<div>
|
|
<a type="primary" @click="showModal">点击选中已上传封面</a>
|
|
<a type="primary" @click="showModal">点击选中已上传封面</a>
|
|
- <a-modal
|
|
|
|
|
|
+ <a-modal class="select_cover_modal"
|
|
title="选择封面"
|
|
title="选择封面"
|
|
v-model="visible"
|
|
v-model="visible"
|
|
@ok="handleOk"
|
|
@ok="handleOk"
|
|
:width="860"
|
|
:width="860"
|
|
- style="height:650px;overflow-y:auto"
|
|
|
|
>
|
|
>
|
|
<template>
|
|
<template>
|
|
- <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
|
|
|
|
|
|
+ <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
|
|
<br/>
|
|
<br/>
|
|
<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">
|
|
|
|
- <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>
|
|
</div>
|
|
|
|
+
|
|
</template>
|
|
</template>
|
|
</a-modal>
|
|
</a-modal>
|
|
</div>
|
|
</div>
|
|
@@ -698,3 +700,34 @@
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</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>
|