commit
This commit is contained in:
WangXiaoDong
@@ -1,25 +1,26 @@
|
||||
<template>
|
||||
<div class="printboard_upload_modal">
|
||||
|
||||
<div class="printboard_left_upload">
|
||||
<div class="left_upload_header">
|
||||
<div class="upload_header_item">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click="open(1)"
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(2)"
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click="open(3)"
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
@@ -27,10 +28,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_header_item">
|
||||
<div><span class="select_img_num">{{getPinLength}}</span><span class="select_tip">selected</span></div>
|
||||
<div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 1" class="printboard_body">
|
||||
<div class="upload_img_body">
|
||||
@@ -42,7 +39,7 @@
|
||||
</div>
|
||||
<div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
|
||||
<div class="delete_file_block" @click.stop="deleteFile(index,file)">Delete</div>
|
||||
<div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
@@ -67,44 +64,49 @@
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="fileUploadChange"
|
||||
>
|
||||
<div class="upload_tip_block" >
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
<div
|
||||
class="upload_tip_block"
|
||||
>
|
||||
<i class="fi fi-br-upload"></i>
|
||||
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<span class="icon iconfont icon-zhuyi"></span>
|
||||
<span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
|
||||
<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
|
||||
</div>
|
||||
<div class="generate_print">
|
||||
<div class="generate_print_header">
|
||||
<div class="generate_title">Generate New Print</div>
|
||||
<div class="generate_save_button" @click="savePrint()">Save</div>
|
||||
</div>
|
||||
<div class="generate_print_content_block">
|
||||
<div class="generate_print_content scroll_style">
|
||||
<div class="image_block" v-for="(img, index) in printImgList" :key="index">
|
||||
<div class="image_block_content">
|
||||
<img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
|
||||
<div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="generate_loading_mark" v-show="generateloading">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
|
||||
<div class="modal_right">
|
||||
<div class="modal_layout">
|
||||
<div class="modal_text">
|
||||
<div>Thumbnail preview of selected moodboard</div>
|
||||
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
|
||||
<img v-lazy="item.imgUrl">
|
||||
<div class="checked" >
|
||||
<i class="fi fi-rr-trash"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="openClick == 3" class="modal_accomplish">
|
||||
<div class="input_box">
|
||||
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
|
||||
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
|
||||
</div>
|
||||
<div class="modal_img">
|
||||
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
|
||||
<img :src="item.imgUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
@@ -130,11 +132,32 @@ export default defineComponent({
|
||||
printImgList:any = ref([]), //print的印花图片
|
||||
moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
|
||||
let openClick: any = ref(1);
|
||||
let generateCheckbox:any = ref()
|
||||
let generateList:any = ref([
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
|
||||
id_: 1,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
|
||||
id_: 2,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
|
||||
id_: 3,
|
||||
},
|
||||
{
|
||||
imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
|
||||
id_: 4,
|
||||
},
|
||||
])
|
||||
return {
|
||||
fileList,
|
||||
printImgList,
|
||||
moodBoards,
|
||||
openClick
|
||||
openClick,
|
||||
generateCheckbox,
|
||||
generateList,
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
@@ -170,9 +193,10 @@ export default defineComponent({
|
||||
currentFileNum:0, //当前上传的文件数
|
||||
isUpload:false,
|
||||
generateloading:false,
|
||||
sonData: {
|
||||
cli: "Printboard",
|
||||
},
|
||||
captionGeneration:'',
|
||||
printboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.printboard
|
||||
}),
|
||||
|
||||
}
|
||||
},
|
||||
@@ -232,16 +256,24 @@ export default defineComponent({
|
||||
|
||||
},
|
||||
|
||||
deleteFile(index:any,file:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
deleteFile(item:any){
|
||||
// this.fileList.splice(item, 1)
|
||||
// this.store.commit('setPrintboardFile',this.fileList)
|
||||
if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}else{
|
||||
this.fileList = this.store.state.UploadFilesModule.moodboardFiles
|
||||
let moodboard
|
||||
this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
|
||||
if(items.id_ == item.id_){
|
||||
moodboard = index
|
||||
|
||||
}
|
||||
})
|
||||
this.fileList.splice(moodboard,1)
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
}
|
||||
},
|
||||
|
||||
deleteGenerateFile(index:any){
|
||||
this.printImgList.splice(index, 1)
|
||||
this.store.commit('setGeneratePrintFile',this.printImgList)
|
||||
},
|
||||
|
||||
randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
|
||||
let index = Math.floor(Math.random() * (max - min)) + min;
|
||||
while(index === num){
|
||||
@@ -478,111 +510,163 @@ export default defineComponent({
|
||||
}
|
||||
this.store.commit('setPrintboardFile',this.fileList)
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
},
|
||||
getgenerate(){
|
||||
|
||||
let generage:any = this.$refs.Generate
|
||||
let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
|
||||
let data = {
|
||||
generateType:generateType,
|
||||
designType:'',
|
||||
collectionElementId:generage.collectionElementid,
|
||||
level1Type:generage.upload.level1Type,
|
||||
level2Type:generage.level2Type,
|
||||
// text:this.captionGeneration,
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
version:1,//为1就是Print
|
||||
}
|
||||
if(generateType == 'image'||generateType == 'text-image'){
|
||||
if(generage.collectionElementid){
|
||||
}else{
|
||||
message.error(
|
||||
"Please select a picture"
|
||||
);
|
||||
return
|
||||
}
|
||||
}else if(generateType == 'text'){
|
||||
// this.beforeUpload(false)
|
||||
// if(this.captionGeneration){
|
||||
// }else{
|
||||
// message.error(
|
||||
// "Please enter content"
|
||||
// );
|
||||
// return
|
||||
// }
|
||||
}
|
||||
if(generateType == 'text'){
|
||||
data.collectionElementId = ''
|
||||
data.level2Type = ''
|
||||
}
|
||||
Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
|
||||
(rv) => {
|
||||
// if(rv){
|
||||
|
||||
// }
|
||||
console.log(rv);
|
||||
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
generageAdd(item:any){
|
||||
item.type_ = {
|
||||
type1: "generate",
|
||||
type2: 'Printboard',
|
||||
},
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.printboard_upload_modal{
|
||||
padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
background: #F2F3FB;
|
||||
// padding: 1rem 1rem 1.8rem 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.printboard_left_upload{
|
||||
width: calc(100% - 39.8rem);
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left_upload_header{
|
||||
// width: calc(100% - 39.8rem);
|
||||
// height: 100%;
|
||||
// background: #fff;
|
||||
// padding: 0.5rem 2.2rem 2rem 2.6rem;
|
||||
// box-sizing: border-box;
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
.upload_header_item{
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
// padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
// margin-right: 2.2rem;
|
||||
margin-right: 8rem;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
transform-origin: left;
|
||||
transform: scale(1);
|
||||
transition: 0.3s all;
|
||||
&.switch_type_item::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
background: #000;
|
||||
height: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: 6px;
|
||||
width: 0px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
&.select_swtich {
|
||||
color: #000;
|
||||
// font-weight: 900;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
&.select_swtich::before {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.select_img_num{
|
||||
font-size: 2rem;
|
||||
color: #030303;
|
||||
font-weight: bold;
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
|
||||
.select_tip{
|
||||
font-size: 1.6rem;
|
||||
margin-left: 0.9rem;
|
||||
color: #B7B7B7;
|
||||
}
|
||||
|
||||
.recollection_button{
|
||||
padding: 0 1rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
background: #E6E6F6;
|
||||
font-size: 1.2rem;
|
||||
color: #343579;
|
||||
margin-left: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.printboard_body{
|
||||
margin-top: 1rem;
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.printboard_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.upload_img_body{
|
||||
height: calc(100% - 3rem);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 1rem;
|
||||
&.upload_img_body::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
||||
.upload_file_img_block{
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
}
|
||||
margin: 0 2rem 4rem 0;
|
||||
// margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
@@ -591,168 +675,241 @@ export default defineComponent({
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
:deep(.ant-upload-picture-card-wrapper) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
:deep(.ant-upload-select-picture-card) {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: 0.3rem solid #ededed;
|
||||
border-radius: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
background: rgba(0,0,0,0.6);
|
||||
border-radius: 0.4rem;
|
||||
position: absolute;
|
||||
top: 0.9rem;
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
position: relative;
|
||||
|
||||
.select_category{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon-xiala{
|
||||
margin-left: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon_rotate{
|
||||
-moz-transform:rotate(180deg);
|
||||
-webkit-transform:rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
animation-direction: 0.5s;
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
// top: 3.1rem;
|
||||
margin-top: .2rem;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
border: 1px solid #343579;
|
||||
border-radius: 0.8rem;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem 1.9rem;
|
||||
line-height: 1.6rem;
|
||||
|
||||
&.select_category_item{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(160deg, #AC2A3B, #292161);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.upload_img_icon{
|
||||
width: 4.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
|
||||
.icon-zhuyi{
|
||||
font-size: 1.6rem;
|
||||
margin-right: 0.7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print{
|
||||
width: 38.4rem;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
.generate_print_header{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 1rem 2.5rem 2.5rem;
|
||||
|
||||
.generate_title{
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
.generate_save_button{
|
||||
background: #E6E6F6;
|
||||
padding: 0.1rem;
|
||||
padding: 0 2.7rem;
|
||||
font-size: 1.4rem;
|
||||
height: 3.2rem;
|
||||
line-height: 3.2rem;
|
||||
cursor: pointer;
|
||||
color: #343579;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.generate_print_content_block{
|
||||
height: calc(100% - 6.7rem);
|
||||
position: relative;
|
||||
|
||||
.generate_loading_mark{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0,0,0,0.4);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.generate_print_content{
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
padding:0 0.8rem;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
.image_block{
|
||||
display: inline-block;
|
||||
margin-right: 1.6rem;
|
||||
margin-bottom: 1.6rem;
|
||||
width: 16.5rem;
|
||||
height: 16.5rem;
|
||||
border: 0.1rem solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&:nth-child(2n){
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.image_block_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
background: rgba(0,0,0,0.2);
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
line-height: 4rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.image_body{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.modal_right{
|
||||
flex: 1;
|
||||
margin-left: 3rem;
|
||||
.modal_layout,.modal_accomplish{
|
||||
.modal_text{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.modal_layout{
|
||||
.modal_img{
|
||||
width: 40rem;
|
||||
height: 5rem;
|
||||
overflow-x: hidden;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
&.modal_img::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.modal_img_item{
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
margin: 0 1rem 1rem 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.checked{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
&.modal_img_item:hover .checked{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.modal_accomplish{
|
||||
// margin-top: 2rem;
|
||||
height: 30rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.modal_text{
|
||||
padding-top: 2rem;
|
||||
padding-block: 2rem;
|
||||
}
|
||||
.input_box{
|
||||
input{
|
||||
&.forbidden{
|
||||
cursor:not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal_img{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
.modal_imgItem{
|
||||
margin: 0 2rem 2rem 0;
|
||||
display: inline-block;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border: 1px solid #f5f5f5;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
img{
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.active{
|
||||
opacity: 0.5;
|
||||
// border: 2px solid;
|
||||
border-radius: 1rem;
|
||||
img {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user