commit
This commit is contained in:
WangXiaoDong
@@ -1,306 +1,600 @@
|
||||
<template>
|
||||
<div class="sketchboard_upload_modal">
|
||||
<div class="switch_type_list">
|
||||
<div class="switch_type_item select_swtich">
|
||||
<span>Upload</span>
|
||||
<div class="modal_left">
|
||||
<div class="switch_type_list">
|
||||
<div
|
||||
@click.stop="open(1)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 1 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(2)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 2 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Library</span>
|
||||
</div>
|
||||
<div
|
||||
@click.stop="open(3)"
|
||||
class="switch_type_item"
|
||||
:class="[openClick == 3 ? 'select_swtich' : '']"
|
||||
>
|
||||
<span>Generate</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="openLibrary()" class="switch_type_item">
|
||||
<span>My Library</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div class="upload_file_item" v-for="(file,index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img :src="file?.imgUrl" class="upload_img">
|
||||
<div class="operate_file_block" >
|
||||
<!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
|
||||
<div class="select_img_type">
|
||||
<div class="select_category" @click.stop="showFileCategory(file)">
|
||||
{{getSketchLabel(file.category)}}
|
||||
<div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
|
||||
</div>
|
||||
<div class="category_list" v-show="file.categoryShow">
|
||||
<div :class="['category_item', file.category == cate.value?'select_category_item':'']" v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectFileCategory(file,cate)">{{cate.label}}</div>
|
||||
<div v-show="openClick == 1" class="sketchboard_body">
|
||||
<div class="upload_img_body scroll_style">
|
||||
<div class="upload_item">
|
||||
<div
|
||||
class="upload_file_item"
|
||||
v-for="(file, index) in fileList"
|
||||
:key="file"
|
||||
>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'uploading'"
|
||||
>
|
||||
<a-spin
|
||||
:indicator="indicator"
|
||||
tip="Uploading..."
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item_content"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<img :src="file?.imgUrl" class="upload_img" />
|
||||
<div class="operate_file_block">
|
||||
<div class="select_img_type">
|
||||
<div
|
||||
class="select_category"
|
||||
@click.stop="showFileCategory(file)"
|
||||
>
|
||||
{{ getSketchLabel(file.category) }}
|
||||
<div
|
||||
:class="[
|
||||
'icon',
|
||||
'iconfont',
|
||||
'icon-xiala',
|
||||
file.categoryShow
|
||||
? 'icon_rotate'
|
||||
: '',
|
||||
]"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="category_list"
|
||||
v-show="file.categoryShow"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'category_item',
|
||||
file.category == cate.value
|
||||
? 'select_category_item'
|
||||
: '',
|
||||
]"
|
||||
v-for="(
|
||||
cate, index
|
||||
) in sketchCatecoryList"
|
||||
:key="index"
|
||||
@click="
|
||||
selectFileCategory(
|
||||
file,
|
||||
cate
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ cate.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="delete_file_block"
|
||||
@click="deleteFile(file)"
|
||||
>
|
||||
<span
|
||||
class="icon iconfont icon-shanchu"
|
||||
></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="delete_file_block" @click="deleteFile(index)">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pin_block" v-show="file?.status === 'done'">
|
||||
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 15">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
<div
|
||||
class="pin_block"
|
||||
v-show="file?.status === 'done'"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 15">
|
||||
<img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
|
||||
<a-checkbox v-model:checked="file.pin"
|
||||
>PIN</a-checkbox
|
||||
>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
<div
|
||||
class="upload_file_item upload_component"
|
||||
v-show="fileList.length < 15"
|
||||
>
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/element/upload'"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload,
|
||||
}"
|
||||
:before-upload="beforeUpload"
|
||||
:headers="{ Authorization: token }"
|
||||
v-model:file-list="fileList"
|
||||
multiple
|
||||
:maxCount="15"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file) => fileUploadChange(file)"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<Material
|
||||
v-show="openClick == 2"
|
||||
ref="Material"
|
||||
msg="Sketchboard"
|
||||
@confirmSelect="confirmSelect"
|
||||
></Material>
|
||||
<Generate
|
||||
v-show="openClick == 3"
|
||||
ref="Generate"
|
||||
msg="Sketchboard"
|
||||
@generateCheckbox="getgenerateCheckbox"
|
||||
></Generate>
|
||||
</div>
|
||||
|
||||
<Material ref="Material" @confirmSelect="confirmSelect"></Material>
|
||||
|
||||
|
||||
<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 sketchboardList" :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>
|
||||
<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, h,ref } from 'vue'
|
||||
import { LoadingOutlined } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import {useStore} from 'vuex'
|
||||
import { message,Upload} from 'ant-design-vue';
|
||||
import Material from '@/component/HomePage/Material.vue'
|
||||
import { defineComponent, h, ref ,computed } from "vue";
|
||||
import { LoadingOutlined } from "@ant-design/icons-vue";
|
||||
import { getCookie } from "@/tool/cookie";
|
||||
import { getUploadUrl } from "@/tool/util";
|
||||
import GO from "@/tool/GO";
|
||||
import { useStore } from "vuex";
|
||||
import { message, Upload } from "ant-design-vue";
|
||||
import Material from "@/component/HomePage/Material.vue";
|
||||
import Generate from "@/component/HomePage/Generate.vue";
|
||||
import { Https } from "@/tool/https";
|
||||
export default defineComponent({
|
||||
components:{Material},
|
||||
setup(){
|
||||
let fileList:any = ref([])
|
||||
components: { Material, Generate },
|
||||
setup() {
|
||||
let fileList: any = ref([]);
|
||||
let openClick: any = ref(1);
|
||||
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,
|
||||
},
|
||||
])
|
||||
let generateCheckbox:any = ref()
|
||||
return {
|
||||
fileList
|
||||
}
|
||||
fileList,
|
||||
openClick,
|
||||
generateList,
|
||||
generateCheckbox
|
||||
};
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
swtich_type:'upload',
|
||||
indicator : h(LoadingOutlined, {
|
||||
data() {
|
||||
return {
|
||||
swtich_type: "upload",
|
||||
indicator: h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '2.4rem',
|
||||
fontSize: "2.4rem",
|
||||
},
|
||||
spin: true,
|
||||
}),
|
||||
upload:{
|
||||
isPin:0,
|
||||
level1Type:'Sketchboard',
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
upload: {
|
||||
isPin: 0,
|
||||
level1Type: "Sketchboard",
|
||||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
},
|
||||
token:'',
|
||||
uploadUrl:'',
|
||||
store:useStore(),
|
||||
sketchCatecoryList:[
|
||||
token: "",
|
||||
uploadUrl: "",
|
||||
store: useStore(),
|
||||
sketchCatecoryList: [
|
||||
{
|
||||
value: 'Outwear',
|
||||
value: "Outwear",
|
||||
label: "Outwear",
|
||||
},
|
||||
{
|
||||
value: 'Blouse',
|
||||
value: "Blouse",
|
||||
label: "Blouse",
|
||||
},
|
||||
{
|
||||
value: 'Dress',
|
||||
value: "Dress",
|
||||
label: "Dress",
|
||||
},
|
||||
{
|
||||
value: 'Trousers',
|
||||
value: "Trousers",
|
||||
label: "Trousers",
|
||||
},
|
||||
{
|
||||
value: 'Skirt',
|
||||
value: "Skirt",
|
||||
label: "Skirt",
|
||||
},
|
||||
],
|
||||
}
|
||||
captionGeneration:'',
|
||||
sketchboardList:computed(()=>{
|
||||
return useStore().state.UploadFilesModule.sketchboard
|
||||
}),
|
||||
};
|
||||
},
|
||||
computed:{
|
||||
getSketchLabel(value){
|
||||
return (value:any)=>{
|
||||
let lable = '';
|
||||
for(let item of this.sketchCatecoryList){
|
||||
if(item.value === value){
|
||||
lable = item.label
|
||||
break
|
||||
computed: {
|
||||
getSketchLabel(value) {
|
||||
return (value: any) => {
|
||||
let lable = "";
|
||||
for (let item of this.sketchCatecoryList) {
|
||||
if (item.value === value) {
|
||||
lable = item.label;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return lable
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.token = getCookie('token') || ''
|
||||
this.uploadUrl = getUploadUrl()
|
||||
},
|
||||
methods:{
|
||||
openLibrary(){
|
||||
let material:any = this.$refs.Material
|
||||
material.init('Sketchboard')
|
||||
return lable;
|
||||
};
|
||||
},
|
||||
fileUploadChange(data:any){
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = JSON.parse(file.xhr.response)
|
||||
file.imgUrl = res.data.url
|
||||
file.resData = res.data
|
||||
file.pin = false
|
||||
file.category = 'Outwear'
|
||||
file.categoryShow = false
|
||||
let fileList = this.fileList.filter((v:any)=> v.status === 'done')
|
||||
this.store.commit('setSketchboardFile',fileList)
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
this.fileList.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.token = getCookie("token") || "";
|
||||
this.uploadUrl = getUploadUrl();
|
||||
},
|
||||
methods: {
|
||||
open(num: Number) {
|
||||
this.openClick = num;
|
||||
if (num == 2) {
|
||||
let material: any = this.$refs.Material;
|
||||
material.init("Moodboard");
|
||||
} else if (num == 3) {
|
||||
// let Generate:any = this.$refs.Generate
|
||||
// Generate.init('generate')
|
||||
}
|
||||
},
|
||||
getgenerateCheckbox(value:any){
|
||||
this.generateCheckbox = value
|
||||
},
|
||||
fileUploadChange(data: any) {
|
||||
let file = data.file;
|
||||
if (file.status === "done") {
|
||||
let res = JSON.parse(file.xhr.response);
|
||||
file.imgUrl = res.data.url;
|
||||
file.resData = res.data;
|
||||
file.pin = false;
|
||||
file.category = "Outwear";
|
||||
file.categoryShow = false;
|
||||
file.id_ = GO.id++
|
||||
file.type_ = 'upload';
|
||||
let fileList = this.fileList.filter(
|
||||
(v: any) => v.status === "done"
|
||||
);
|
||||
this.store.commit("setSketchboardFile", fileList);
|
||||
} else if (file.status === "error") {
|
||||
let index = -1;
|
||||
this.fileList.forEach((ele: any, index1: any) => {
|
||||
if (file.uid === ele.uid) {
|
||||
index = index1;
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
this.fileList.splice(index, 1)
|
||||
if (index > -1) {
|
||||
this.fileList.splice(index, 1);
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
message.error(file.name + "upload failed");
|
||||
}
|
||||
},
|
||||
|
||||
beforeUpload(file:any){
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
beforeUpload(file: any) {
|
||||
const isJpgOrPng =
|
||||
file.type === "image/jpeg" ||
|
||||
file.type === "image/png" ||
|
||||
file.type === "image/jpg" ||
|
||||
file.type === "image/bmp";
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
message.error("You can only upload Image file!");
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
message.error("Image must smaller than 5MB!");
|
||||
}
|
||||
return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
|
||||
},
|
||||
|
||||
showFileCategory(file:any){
|
||||
file.categoryShow = true
|
||||
document.addEventListener('click', this.hiddenFileCategory)
|
||||
showFileCategory(file: any) {
|
||||
file.categoryShow = true;
|
||||
document.addEventListener("click", this.hiddenFileCategory);
|
||||
},
|
||||
|
||||
selectFileCategory(file:any,cate:any){
|
||||
file.category = cate.value
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
selectFileCategory(file: any, cate: any) {
|
||||
file.category = cate.value;
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
|
||||
hiddenFileCategory(){
|
||||
for(let item of this.fileList){
|
||||
item.categoryShow = false
|
||||
hiddenFileCategory() {
|
||||
for (let item of this.fileList) {
|
||||
item.categoryShow = false;
|
||||
}
|
||||
document.removeEventListener('click', this.hiddenFileCategory)
|
||||
document.removeEventListener("click", this.hiddenFileCategory);
|
||||
},
|
||||
|
||||
deleteFile(index:any){
|
||||
this.fileList.splice(index, 1)
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
deleteFile(item: any) {
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
recollection(){
|
||||
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
recollection() {
|
||||
this.fileList = JSON.parse(
|
||||
JSON.stringify(
|
||||
this.store.state.UploadFilesModule.allBoardData
|
||||
.skecthboardFiles
|
||||
)
|
||||
);
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
|
||||
confirmSelect(event:any){
|
||||
for(let item of event){
|
||||
confirmSelect(event: any) {
|
||||
for (let item of event) {
|
||||
let data = {
|
||||
imgUrl:item.url,
|
||||
resData:item,
|
||||
pin:false,
|
||||
status:'done',
|
||||
category:item.level2Type || 'Outwear',
|
||||
categoryShow:false,
|
||||
imgUrl: item.url,
|
||||
resData: item,
|
||||
pin: false,
|
||||
status: "done",
|
||||
category: item.level2Type || "Outwear",
|
||||
categoryShow: false,
|
||||
};
|
||||
if (this.fileList.length == 15) {
|
||||
message.error(
|
||||
"Maximum number of allowable file uploads has been exceeded"
|
||||
);
|
||||
break;
|
||||
}
|
||||
if(this.fileList.length == 15){
|
||||
message.error('Maximum number of allowable file uploads has been exceeded')
|
||||
break
|
||||
}
|
||||
this.fileList.push(data)
|
||||
this.fileList.push(data);
|
||||
}
|
||||
this.store.commit('setSketchboardFile',this.fileList)
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
this.store.commit("setSketchboardFile", this.fileList);
|
||||
},
|
||||
//发送请求生成图片
|
||||
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:0,//为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: 'Sketchboard',
|
||||
},
|
||||
this.store.commit("addGenerateMaterialFils", item);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.sketchboard_upload_modal{
|
||||
padding: 1.5rem 2.6rem 4rem;
|
||||
height: 100%;
|
||||
|
||||
.switch_type_list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.switch_type_item{
|
||||
.sketchboard_upload_modal {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.modal_left {
|
||||
padding-top: 4rem;
|
||||
width: 47%;
|
||||
.switch_type_list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2rem;
|
||||
height: 4rem;
|
||||
background: #fff;
|
||||
border-radius: 0.8rem;
|
||||
line-height: 4rem;
|
||||
font-size: 1.6rem;
|
||||
margin-right: 2.2rem;
|
||||
color: #5B5E69;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&.select_swtich{
|
||||
color: #343579;
|
||||
}
|
||||
.switch_type_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// 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%;
|
||||
}
|
||||
|
||||
.switch_icon{
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
.switch_icon {
|
||||
font-size: 1.8rem;
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sketchboard_body{
|
||||
margin-top: 1rem;
|
||||
.sketchboard_body {
|
||||
height: calc(100% - 5rem);
|
||||
|
||||
.upload_img_body{
|
||||
padding-top: 2.5rem;
|
||||
height: 30rem;
|
||||
overflow-x: hidden;
|
||||
border-right: 1px solid #e5e5e5;
|
||||
&.moodboard_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;
|
||||
width: 16.5rem;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload_file_item_content{
|
||||
|
||||
.upload_file_item{
|
||||
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%;
|
||||
}
|
||||
&.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%;
|
||||
height: 16.5rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
@@ -318,7 +612,7 @@ export default defineComponent({
|
||||
right: 0.9rem;
|
||||
text-align: center;
|
||||
line-height: 3.2rem;
|
||||
|
||||
left: auto;
|
||||
.icon-shanchu{
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
@@ -331,7 +625,7 @@ export default defineComponent({
|
||||
|
||||
.operate_file_block{
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
height: 3rem;
|
||||
font-size: 1.6rem;
|
||||
color: #FFFFFF;
|
||||
position: absolute;
|
||||
@@ -340,7 +634,7 @@ export default defineComponent({
|
||||
|
||||
.select_img_type{
|
||||
height: 100%;
|
||||
line-height: 4rem;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
background: rgba(0,0,0,0.6);
|
||||
position: relative;
|
||||
@@ -363,17 +657,21 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
.category_list{
|
||||
position: absolute;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 4.1rem;
|
||||
// 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;
|
||||
// overflow: hidden;
|
||||
z-index: 2;
|
||||
height: 9rem;
|
||||
overflow-x: hidden;
|
||||
&.category_list::-webkit-scrollbar{display: none;}
|
||||
|
||||
.category_item{
|
||||
text-align: left;
|
||||
@@ -393,28 +691,110 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
text-align: center;
|
||||
margin-top:1.6rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.pin_block{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user