954 lines
27 KiB
Vue
954 lines
27 KiB
Vue
<template>
|
|
<div>
|
|
<a-modal
|
|
class="layout_modal"
|
|
v-model:visible="layout"
|
|
:footer="null"
|
|
width="78%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:keyboard="false"
|
|
:mask="false"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="layout_content">
|
|
<div class="collection_title">
|
|
<div class="collection_title_text">
|
|
<div class="layout_title">{{ $t('layout.MoodBoardDesign') }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="collection_closeIcon" @click.stop="cancelDsign()">
|
|
<i class="fi fi-rr-cross-small"></i>
|
|
</div>
|
|
<div class="layout_nav">
|
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)">
|
|
<img :src="item.imgUrl">
|
|
</div>
|
|
</div>
|
|
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
|
|
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @mousedown="setpitch(item,index)" ref="content" >
|
|
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" :class="moodbClassName[index]" v-modelImg>
|
|
<div>
|
|
|
|
</div>
|
|
<ul v-show="item.setPitch" class="layout_btn" >
|
|
<li class="layout_btn_top" v-compile.stop="'top'"></li>
|
|
<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
|
|
<li class="layout_btn_left" v-compile.stop="'left'"></li>
|
|
<li class="layout_btn_right" v-compile.stop="'right'"></li>
|
|
<li class="layout_rotote" v-rotote.stop></li>
|
|
<li class="layout_translate" v-translate.stop></li>
|
|
<!-- <li class="layout_translate" v-translate.stop></li> -->
|
|
<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
|
|
<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
|
|
<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
|
|
<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
|
|
</ul>
|
|
</div>
|
|
<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
|
|
<!-- <draggable
|
|
v-model="layoutList"
|
|
group="people"
|
|
@start="drag=true"
|
|
@end="drag=false"
|
|
animation= "150"
|
|
item-key="id">
|
|
<template #item="{element,index}">
|
|
<div :data-id="element.id_" :class="moodbClassName[index]" class="modal_imgItem">
|
|
<img :src="element.imgUrl">
|
|
</div>
|
|
</template>
|
|
</draggable> -->
|
|
</div>
|
|
|
|
<div class="layout_left">
|
|
<div class="layout_left_text">
|
|
{{ $t('layout.LayerOptions') }}
|
|
</div>
|
|
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
|
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="layout_right">
|
|
<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
|
|
<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div
|
|
class="button_second submit_button"
|
|
@click="submitTemplate()"
|
|
>
|
|
{{ $t('layout.Submit') }}
|
|
</div>
|
|
</div>
|
|
<div class="mark_loading" v-show="loadingShow">
|
|
<a-spin size="large" />
|
|
</div>
|
|
<a-upload
|
|
:capture="null"
|
|
:action="uploadUrl + '/api/element/upload'"
|
|
list-type="picture-card"
|
|
:data="{
|
|
...upload,
|
|
}"
|
|
:headers="{ Authorization: token }"
|
|
:before-upload="beforeUpload"
|
|
multiple
|
|
accept=".jpg,.png,.jpeg,.bmp"
|
|
>
|
|
</a-upload>
|
|
</a-modal>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, h, ref ,computed,reactive, nextTick} from "vue";
|
|
// import { LoadingOutlined } from "@ant-design/icons-vue";
|
|
import { useStore } from "vuex";
|
|
import GO from "@/tool/GO";
|
|
import moodb from "@/tool/moodb";
|
|
import draggable from 'vuedraggable'
|
|
import { Https } from "@/tool/https";
|
|
import { getCookie } from "@/tool/cookie";
|
|
import domTurnImg from '@/tool/domTurnImg'
|
|
import { getUploadUrl } from "@/tool/util";
|
|
|
|
export default defineComponent({
|
|
props:["moodb_className",'flex_direction'],
|
|
components: {
|
|
draggable
|
|
},
|
|
setup(prop) {
|
|
let layout: any = ref(false);
|
|
let templateFileList: any = ref([]);
|
|
let openClick: any = ref(1);
|
|
let drag = false;
|
|
let layoutList:any = ref([])
|
|
const content = ref<HTMLElement | null>(null);
|
|
let loadingShow = ref(false)
|
|
return {
|
|
layout,
|
|
templateFileList,
|
|
openClick,
|
|
drag,
|
|
layoutList,
|
|
content,
|
|
loadingShow
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
// moodTemplateId: "", //模板id
|
|
store: useStore(),
|
|
|
|
// layoutList:computed(()=>{
|
|
// return [...(useStore().state.UploadFilesModule.moodboardFiles),
|
|
// ...(useStore().state.UploadFilesModule.generateFiles),
|
|
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
|
// }),
|
|
moodb : moodb.moodb_,
|
|
moodbList:{},
|
|
moodbClassName:[],
|
|
setabsolute:false,
|
|
token: "",
|
|
uploadUrl: "",
|
|
upload: {
|
|
isPin: 0,
|
|
gender:'',
|
|
level1Type: "Moodboard",
|
|
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
},
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.token = getCookie("token") || "";
|
|
this.uploadUrl = getUploadUrl();
|
|
},
|
|
directives:{
|
|
//操作移动
|
|
layout:{
|
|
mounted (el,layout:any,binding) {
|
|
let mousedown = function(e: MouseEvent){
|
|
e.stopPropagation()
|
|
el.parentElement.children.forEach((v:any) => {
|
|
v.style.left = v.offsetLeft+'px'
|
|
v.style.top = v.offsetTop+'px'
|
|
|
|
});
|
|
el.parentElement.children.forEach((v:any) => {
|
|
v.classList.add('active')
|
|
});
|
|
el.style.zIndex = GO.zIndex++
|
|
let left = el.style.left? el.style.left.replace(/px/g,'') : 0
|
|
let top = el.style.top? el.style.top.replace(/px/g,'') : 0
|
|
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
|
let mouseY = e.offsetY
|
|
let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
|
let domY = e.clientY - e.offsetY - Number(top)
|
|
let mouse = true
|
|
document.onmousemove = function(e:MouseEvent){
|
|
if(mouse){
|
|
el.style.left = e.x-mouseX - domX+'px'
|
|
el.style.top = e.y-mouseY - domY+'px'
|
|
if(el.offsetLeft <=0){
|
|
el.style.left = 0+'px'
|
|
}
|
|
if(el.offsetTop <=0){
|
|
el.style.top = 0+'px'
|
|
}
|
|
if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
|
el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'px'
|
|
}
|
|
if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
|
el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'px'
|
|
}
|
|
}
|
|
}
|
|
document.onmouseup = function(){
|
|
mouse = false
|
|
document.onmousemove = ()=>{
|
|
|
|
}
|
|
// el.removeEventListener('mousedown',mousedown)
|
|
|
|
// el.removeEventListener('mousedown',mousedown)
|
|
// document.onmousemove = false;
|
|
}
|
|
}
|
|
el.addEventListener('mousedown',mousedown)
|
|
},
|
|
updated (el,layout) {
|
|
|
|
}
|
|
},
|
|
//操作大小
|
|
compile:{
|
|
mounted (el,compile) {
|
|
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
|
e.stopPropagation()
|
|
let elParent = el.parentNode.parentNode
|
|
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
|
v.style.left = v.offsetLeft+'px'
|
|
v.style.top = v.offsetTop+'px'
|
|
});
|
|
el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
|
|
v.classList.add('active')
|
|
});
|
|
if(compile.value == 'right'){
|
|
|
|
}else if(compile.value == 'left'){
|
|
elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
|
|
elParent.style.left = 'auto'
|
|
}else if(compile.value == 'top'){
|
|
elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
|
|
elParent.style.top = 'auto'
|
|
}else if(compile.value == 'bottom'){
|
|
|
|
}
|
|
|
|
let gpsXY:any
|
|
let parent:any
|
|
if(compile.value == 'left' || compile.value == 'right'){
|
|
gpsXY = e.x
|
|
parent = elParent.offsetWidth
|
|
}else{
|
|
parent = elParent.offsetHeight
|
|
gpsXY = e.y
|
|
}
|
|
let mouse = true
|
|
document.onmousemove = function(e:MouseEvent){
|
|
if(mouse){
|
|
if(compile.value == 'left'){
|
|
elParent.style.width = parent + gpsXY - e.x + 'px'
|
|
}else if(compile.value == 'right'){
|
|
elParent.style.width = parent + e.x - gpsXY + 'px'
|
|
}else if(compile.value == 'top'){
|
|
elParent.style.height = parent + gpsXY - e.y + 'px'
|
|
}else if(compile.value == 'bottom'){
|
|
elParent.style.height = parent + e.y - gpsXY + 'px'
|
|
|
|
}
|
|
|
|
|
|
if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
|
|
elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
|
|
}
|
|
if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
|
|
elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
|
|
}
|
|
|
|
if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
|
|
elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
|
|
}
|
|
if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
|
|
elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
|
|
}
|
|
}
|
|
}
|
|
document.onmouseup = function(){
|
|
mouse = false
|
|
document.onmousemove = ()=>{}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//操作旋转
|
|
rotote:{
|
|
mounted(el){
|
|
let mouse = true;
|
|
let angle :any = 0
|
|
let num:any
|
|
let x = 0
|
|
let y = 0
|
|
let elParent = el.parentNode.parentNode
|
|
if(document.defaultView){
|
|
let transform = document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split('(')[1].split(',')
|
|
num = Number(transform[3])
|
|
}
|
|
// 添加鼠标按下事件监听器
|
|
let mousedown = (e:MouseEvent) => {
|
|
e.stopPropagation()
|
|
mouse = true;
|
|
// let eX = (e.pageX - el.offsetLeft) + el.offsetLeft
|
|
// let eY = elParent.offsetTop + el.offsetTop
|
|
var info = el.getBoundingClientRect();
|
|
let eX = info.x + info.width / 2;
|
|
let eY = info.y + info.height / 2;
|
|
|
|
document.addEventListener('mousemove', (e:MouseEvent) => {
|
|
if (mouse) {
|
|
let X = eX
|
|
let Y = eY
|
|
let x:any = e.clientX - X
|
|
let y:any = Y - e.clientY
|
|
angle = Math.atan2(x,y)*(180 / Math.PI)
|
|
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
|
el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
|
|
}
|
|
});
|
|
|
|
// 添加鼠标松开事件监听器
|
|
document.addEventListener('mouseup',mouseup );
|
|
}
|
|
let mouseup = () => {
|
|
mouse = false;
|
|
// el.removeEventListener('mousedown',mousedown)
|
|
document.removeEventListener('mouseup',mouseup)
|
|
}
|
|
el.addEventListener('mousedown',mousedown);
|
|
//缩放
|
|
let timeSwitch = true
|
|
el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
|
|
el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
|
|
if(timeSwitch){
|
|
timeSwitch = false
|
|
if((e as WheelEvent).deltaY > 0){
|
|
if(num <= 1){
|
|
num -= 0.05
|
|
}else{
|
|
num -= 0.1
|
|
}
|
|
}else{
|
|
//放大
|
|
if(num <= 1){
|
|
num += 0.05
|
|
}else{
|
|
num += 0.1
|
|
}
|
|
}
|
|
if(num >= 3){
|
|
num = 3
|
|
}else if (num < .2){
|
|
num = .2
|
|
}
|
|
setTimeout(() => {
|
|
timeSwitch = true
|
|
}, 100);
|
|
elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
|
|
}
|
|
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
},
|
|
angle:{
|
|
mounted(el,angle){
|
|
let mouse = false;
|
|
el.addEventListener('mousedown', (e:MouseEvent) => {
|
|
e.stopPropagation()
|
|
|
|
el.parentNode.children.forEach((v:any) =>{
|
|
v.classList.add('eventNode')
|
|
})
|
|
mouse = true;
|
|
let elParent = el.parentNode.parentNode
|
|
let eX:any
|
|
let eY:any
|
|
let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
|
|
let mouseMove = (e:MouseEvent)=>{
|
|
if (mouse) {
|
|
if(angle.value == 'right'){
|
|
eX = elParent.offsetWidth - e.offsetX
|
|
eY = elParent.offsetHeight - e.offsetY
|
|
}else if(angle.value == 'top'){
|
|
eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
|
|
eY = elParent.offsetHeight - e.offsetY
|
|
}else if(angle.value == 'left'){
|
|
eX = elParent.offsetWidth - e.offsetX
|
|
eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
|
|
}else if(angle.value == 'bottom'){
|
|
eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
|
|
eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
|
|
}
|
|
let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
|
|
// el.style.left = e.offsetX /2 +'px'
|
|
// el.style.top = e.offsetY /2+'px'
|
|
if(100 - 100 * mouseSide/elParentSide <= 50){
|
|
let Xy = (100 - 100 * mouseSide/elParentSide) / 3.33-1
|
|
if(Xy<=0){
|
|
Xy = 0
|
|
}
|
|
if(angle.value == 'right'){
|
|
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = Xy +'%'
|
|
el.style.top = Xy +'%'
|
|
}else if(angle.value == 'top'){
|
|
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = Xy +'%'
|
|
el.style.left = 'auto'
|
|
el.style.top = Xy +'%'
|
|
}else if(angle.value == 'bottom'){
|
|
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = Xy +'%'
|
|
el.style.top = 'auto'
|
|
el.style.left = 'auto'
|
|
el.style.bottom = Xy +'%'
|
|
}else if(angle.value == 'left'){
|
|
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = Xy +'%'
|
|
el.style.top = 'auto'
|
|
el.style.bottom = Xy +'%'
|
|
}
|
|
}else{
|
|
if(angle.value == 'right'){
|
|
el.parentNode.style.borderTopLeftRadius = 50+'%'
|
|
elParent.style.borderTopLeftRadius = 50+'%'
|
|
}else if(angle.value == 'top'){
|
|
el.parentNode.style.borderTopRightRadius = 50+'%'
|
|
elParent.style.borderTopRightRadius = 50+'%'
|
|
}else if(angle.value == 'bottom'){
|
|
el.parentNode.style.borderBottomRightRadius = 50+'%'
|
|
elParent.style.borderBottomRightRadius = 50+'%'
|
|
}else if(angle.value == 'left'){
|
|
el.parentNode.style.borderBottomLeftRadius = 50+'%'
|
|
elParent.style.borderBottomLeftRadius = 50+'%'
|
|
}
|
|
}
|
|
}
|
|
// 添加鼠标松开事件监听器
|
|
document.addEventListener('mouseup', mouseup);
|
|
|
|
}
|
|
let mouseup = () => {
|
|
mouse = false;
|
|
el.parentNode.removeEventListener('mousemove',mouseMove)
|
|
el.parentNode.children.forEach((v:any) =>{
|
|
v.classList.remove('eventNode')
|
|
})
|
|
document.removeEventListener('mouseup', mouseup);
|
|
}
|
|
el.parentNode.addEventListener('mousemove', mouseMove);
|
|
|
|
})
|
|
}
|
|
},
|
|
//移动图片
|
|
translate:{
|
|
mounted (el,layout:any,binding) {
|
|
el.addEventListener('mousedown',(e: MouseEvent)=>{
|
|
e.stopPropagation()
|
|
let elParent = el.parentNode.parentNode
|
|
el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
|
|
el.style.top = (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
|
|
let left = el.style.left? el.style.left.replace(/%/g,'') : 0
|
|
let top = el.style.top? el.style.top.replace(/%/g,'') : 0
|
|
let mouseX = e.offsetX //鼠标点击位置到domleft距离
|
|
let mouseY = e.offsetY
|
|
let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
|
|
let domY = e.clientY - e.offsetY - el.offsetTop
|
|
let mouse = true
|
|
document.onmousemove = function(e:MouseEvent){
|
|
if(mouse){
|
|
let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
|
|
let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
|
|
el.style.left = left
|
|
el.style.top = top;
|
|
el.previousSibling.style.top = top
|
|
el.previousSibling.style.left = left
|
|
elParent.firstChild.style.top = top
|
|
elParent.firstChild.style.left = left
|
|
if(el.offsetLeft <=0){
|
|
el.style.left = 0+'%'
|
|
el.previousSibling.style.left = 0+'%'
|
|
elParent.firstChild.style.left = 0+'%'
|
|
}
|
|
if(el.offsetTop <=0){
|
|
el.style.top = 0+'%'
|
|
el.previousSibling.style.top = 0+'%'
|
|
elParent.firstChild.style.top = 0+'%'
|
|
}
|
|
// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
|
|
// // el.style.left = el.parentNode.offsetWidth - el.offsetWidth+'%'
|
|
// console.log(2);
|
|
// }
|
|
if(el.style.left.replace(/%/g,'')>=100){
|
|
el.style.left = 100+'%'
|
|
el.previousSibling.style.left = 100+'%'
|
|
elParent.firstChild.style.left = 100+'%'
|
|
}
|
|
// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
|
|
// el.style.top = el.parentNode.offsetHeight - el.offsetHeight+'%'
|
|
// }
|
|
if(el.style.top.replace(/%/g,'')>=100){
|
|
el.style.top = 100+'%'
|
|
el.previousSibling.style.top = 100+'%'
|
|
elParent.firstChild.style.top = 100+'%'
|
|
}
|
|
}
|
|
}
|
|
document.onmouseup = function(){
|
|
mouse = false
|
|
document.onmousemove = ()=>{}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
modelImg:{
|
|
mounted(el) {
|
|
let parentNode = el.parentNode
|
|
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
|
el.style.height = 100+'%'
|
|
el.style.width = 'auto'
|
|
}else{
|
|
el.style.width = 100+'%'
|
|
el.style.height = 'auto'
|
|
}
|
|
},
|
|
updated (el) {
|
|
let parentNode = el.parentNode
|
|
if(parentNode.offsetHeight > parentNode.offsetWidth){
|
|
el.style.height = 100+'%'
|
|
el.style.width = 'auto'
|
|
}else{
|
|
el.style.width = 100+'%'
|
|
el.style.height = 'auto'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init(){
|
|
let parentList:any = this.$parent
|
|
parentList = parentList.layoutList
|
|
this.layout = true
|
|
// let layoutList = this.store.state.UploadFilesModule.moodboard
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
this.layoutList = parentList
|
|
|
|
this.moodbList = this.moodb[parentList.length-1]
|
|
this.moodbClassName = this.moodb_className
|
|
},
|
|
cancelDsign(){
|
|
this.layout = false
|
|
},
|
|
setpitch(item:any,index:any){
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
item.setPitch = true
|
|
if(this.content){
|
|
(this.content as any)[index].style.zIndex = GO.zIndex++
|
|
|
|
}
|
|
},
|
|
setmoodb(item:any){
|
|
this.moodbClassName = item
|
|
this.$emit('setmoodbClass',this.moodbClassName)
|
|
if(this.content){
|
|
for (item of (this.content as any)) {
|
|
item.classList.remove('active')
|
|
item.style.top = ''
|
|
item.style.left = ''
|
|
item.style.right = ''
|
|
item.style.bottom = ''
|
|
item.style.width = ''
|
|
item.style.height = ''
|
|
}
|
|
}
|
|
},
|
|
changeTemplateModal(){
|
|
this.layout = !this.layout
|
|
},
|
|
//提交模板
|
|
submitTemplate() {
|
|
this.loadingShow = true
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
nextTick().then(async ()=>{
|
|
let layoutCentent = document.getElementById('layoutCentent')
|
|
let file = await domTurnImg(layoutCentent)
|
|
let param = new FormData();
|
|
param.append('inPin','0')
|
|
param.append('gender','')
|
|
param.append('level1Type','Moodboard')
|
|
param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
|
|
param.append('file',file);
|
|
let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*' }}
|
|
Https.axiosPost(Https.httpUrls.elementUpload,param,config)
|
|
.then((rv: any) => {
|
|
// console.log(rv);
|
|
rv.imgUrl = rv.url
|
|
this.layout = false
|
|
this.loadingShow = false
|
|
this.store.commit("setDisposeMoodboard", rv);
|
|
}
|
|
).catch(rv=>{
|
|
this.loadingShow = false
|
|
})
|
|
})
|
|
|
|
},
|
|
beforeUpload(){
|
|
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.layout_modal {
|
|
-moz-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-khtml-user-select: none;
|
|
user-select: none;
|
|
.ant-modal-content{
|
|
// transform: scale(1.2);
|
|
// transform-origin: center !important;
|
|
}
|
|
// max-width: 1150px;
|
|
.ant-modal-body {
|
|
padding: 0;
|
|
// height: calc(65vh - 6.4rem);
|
|
height: calc(65rem*1.2);
|
|
}
|
|
.ant-modal-content{
|
|
border-radius: calc(1rem*1.2);
|
|
}
|
|
|
|
.layout_content {
|
|
// background: #f2f3fb;
|
|
// padding-bottom: 2.9rem;
|
|
height: 100%;
|
|
.collection_title{
|
|
position: absolute;
|
|
top: calc(4rem*1.2);
|
|
display: flex;
|
|
font-size: calc(1.8rem*1.2);
|
|
font-weight: 900;
|
|
color: rgba(0,0,0,.65);
|
|
align-items: center;
|
|
.collection_title_text{
|
|
margin-right: calc(4rem*1.2);
|
|
}
|
|
.collection_title_text_intro{
|
|
font-size: calc(1.2rem*1.2);
|
|
font-weight: 400;
|
|
color: rgba(0,0,0,.45);
|
|
}
|
|
}
|
|
.collection_closeIcon{
|
|
position: absolute;
|
|
top: calc(2rem*1.2);
|
|
right: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
width: calc(4rem*1.2);
|
|
height: calc(4rem*1.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.fi-rr-cross-small::before{
|
|
padding: calc(.2rem*1.2);
|
|
border-radius: 5px;
|
|
border: solid 2px rgba(0, 0, 0, 0.25);
|
|
transition: 1s all;
|
|
color: rgba(0, 0, 0, 0.55);
|
|
}
|
|
&.collection_closeIcon:hover .fi-rr-cross-small::before{
|
|
border: solid 2px rgba(0, 0, 0, 0.55);
|
|
color: rgba(0, 0, 0, 1);
|
|
}
|
|
}
|
|
.layout_nav{
|
|
display: flex;
|
|
margin-top: calc(2rem*1.2);
|
|
justify-content: center;
|
|
max-height: 13%;
|
|
overflow: hidden;
|
|
.active{
|
|
img{
|
|
border: 2px solid;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
>div{
|
|
max-height: 13%;
|
|
overflow: hidden;
|
|
img{
|
|
object-fit: cover;
|
|
width:calc(5rem*1.2);
|
|
cursor: pointer;
|
|
margin: 0 calc(2rem*1.2);
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
}
|
|
.layout_centent{
|
|
display: flex;
|
|
// height: 55%;
|
|
height: calc(35rem*1.2);
|
|
width: calc(57rem*1.2);
|
|
// height: 60%;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: space-around;
|
|
margin: calc(3rem*1.2) auto;
|
|
overflow: hidden;
|
|
// padding: 3rem 0;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
user-select:none
|
|
&.active{
|
|
flex-direction: row;
|
|
}
|
|
.layout_btn{
|
|
list-style: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid rgb(20, 188, 255);
|
|
padding: 0;
|
|
-webkit-user-drag: none;
|
|
user-select:none;
|
|
li{
|
|
cursor: pointer;
|
|
// border-radius: 50%;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
background-color: rgb(20, 188, 255);
|
|
position: absolute;
|
|
z-index: 1049;
|
|
}
|
|
.layout_btn_top,.layout_btn_bottom{
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: n-resize;
|
|
}
|
|
.layout_btn_top{
|
|
top: 0;
|
|
}
|
|
.layout_btn_bottom{
|
|
top: 100%;
|
|
}
|
|
.layout_btn_left,.layout_btn_right{
|
|
top: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: e-resize;
|
|
}
|
|
.layout_btn_left{
|
|
left: 0;
|
|
}
|
|
.layout_btn_right{
|
|
left: 100%;
|
|
}
|
|
.layout_rotote{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%);
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
.layout_rotote::after{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
width: 2px;
|
|
height: 30px;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.layout_rotote::before{
|
|
position: absolute;
|
|
content: "";
|
|
background-color: #14bcff;
|
|
top: calc(50% - 30px);
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
width: calc(1.5rem*1.2);
|
|
height: calc(1.5rem*1.2);
|
|
border-radius: 50%;
|
|
}
|
|
.layout_translate{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: crosshair;
|
|
cursor: move;
|
|
}
|
|
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
|
|
// opacity: 0;
|
|
width: calc(.8rem*1.2);
|
|
height: calc(.8rem*1.2);
|
|
}
|
|
.layout_angle_tr{
|
|
right: 0%;
|
|
top: 0;
|
|
}
|
|
.layout_angle_tl{
|
|
left: 0%;
|
|
top: 0;
|
|
}
|
|
.layout_angle_br{
|
|
right: 0%;
|
|
bottom: 0%;
|
|
}
|
|
.layout_angle_bl{
|
|
left: 0%;
|
|
bottom: 0%;
|
|
}
|
|
.eventNode{
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.layout_centent_bor{
|
|
|
|
}
|
|
.modal_imgItem{
|
|
position: relative;
|
|
// >div{
|
|
// position: absolute;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// }
|
|
overflow: hidden;
|
|
&.active{
|
|
position: absolute;
|
|
}
|
|
img{
|
|
// object-fit: cover;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
pointer-events: none;
|
|
float: left;
|
|
user-select:none;
|
|
-webkit-user-drag: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) scale(1);
|
|
}
|
|
::selection {
|
|
// background: rgba(0,0,0,0);
|
|
// background: yellow;
|
|
}
|
|
|
|
}
|
|
}
|
|
.wh1{
|
|
width: 23%;
|
|
height: 48%;
|
|
|
|
}
|
|
.wh4{
|
|
width: 48.5%;
|
|
height: 100%;
|
|
|
|
}
|
|
.wh8{
|
|
width: 100%;
|
|
height: 48.5%;
|
|
}
|
|
.w1h2{
|
|
width: 23%;
|
|
height: 100%;
|
|
|
|
}
|
|
.w2h1{
|
|
width: 48.5%;
|
|
height: 48%;
|
|
}
|
|
.layout_left{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: calc(5rem*1.2);
|
|
overflow-x: hidden;
|
|
// background-color: #000;
|
|
width: 10%;
|
|
height: 50%;
|
|
&.layout_left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.layout_left_text{
|
|
font-size: calc(1.6rem*1.2);
|
|
margin-bottom: calc(1rem*1.2);
|
|
color: #000;
|
|
}
|
|
.layout_left_items{
|
|
width: 100%;
|
|
height: calc(6rem*1.2);
|
|
display: flex;
|
|
align-content: space-between;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
margin-bottom: calc(2rem*1.2);
|
|
cursor: pointer;
|
|
.layout_left_item{
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
}
|
|
}
|
|
.submit_button {
|
|
margin: calc(2rem*1.2) auto 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.mark_loading{
|
|
position: absolute;
|
|
}
|
|
}
|
|
</style> |