860 lines
25 KiB
Vue
860 lines
25 KiB
Vue
<template>
|
|
<div>
|
|
<a-modal
|
|
class="layout_modal"
|
|
v-model:visible="layout"
|
|
:footer="null"
|
|
width="80%"
|
|
:maskClosable="false"
|
|
:centered="true"
|
|
:closable="false"
|
|
:mask="false"
|
|
:destroyOnClose="true"
|
|
>
|
|
<div class="layout_content">
|
|
<div class="layout_header">
|
|
<div class="layout_title">MoodBoard Design</div>
|
|
<div
|
|
class="icon iconfont icon-guanbi close_icon"
|
|
@click.stop="init()"
|
|
></div>
|
|
</div>
|
|
<div class="layout_nav">
|
|
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
|
|
<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" @click="setpitch(item)" ref="content" >
|
|
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false">
|
|
<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 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()"
|
|
>
|
|
Submit
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, h, ref ,computed,reactive, toRefs} 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 domTurnImg from '@/tool/domTurnImg'
|
|
export default defineComponent({
|
|
props:["moodb_className",'flex_direction'],
|
|
components: {
|
|
draggable
|
|
},
|
|
setup(prop) {
|
|
let fileList: any = ref([]);
|
|
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);
|
|
return {
|
|
fileList,
|
|
layout,
|
|
templateFileList,
|
|
openClick,
|
|
drag,
|
|
layoutList,
|
|
content
|
|
};
|
|
},
|
|
data() {
|
|
return {
|
|
indicator: h(LoadingOutlined, {
|
|
style: {
|
|
fontSize: "2.4rem",
|
|
},
|
|
spin: true,
|
|
}),
|
|
// 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,
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
directives:{
|
|
//操作移动
|
|
layout:{
|
|
mounted (el,layout:any,binding) {
|
|
el.addEventListener('mousedown',(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 = false;
|
|
}
|
|
})
|
|
},
|
|
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
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//操作旋转
|
|
rotote:{
|
|
mounted(el){
|
|
let mouse = true;
|
|
let angle :any = 0
|
|
let num:any
|
|
let elParent = el.parentNode.parentNode
|
|
|
|
if(document.defaultView){
|
|
num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
|
|
}
|
|
// 添加鼠标按下事件监听器
|
|
el.addEventListener('mousedown', (e:MouseEvent) => {
|
|
e.stopPropagation()
|
|
mouse = true;
|
|
let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
|
|
let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
|
|
document.addEventListener('mousemove', (e:MouseEvent) => {
|
|
if (mouse) {
|
|
let X = eX
|
|
let Y = eY
|
|
let x:any = e.pageX - X
|
|
let y:any = Y - e.pageY
|
|
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', () => {
|
|
mouse = false;
|
|
});
|
|
});
|
|
//缩放
|
|
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)
|
|
el.parentNode.addEventListener('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){
|
|
if(angle.value == 'right'){
|
|
|
|
el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
}else if(angle.value == 'top'){
|
|
el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
el.style.left = 'auto'
|
|
el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
}else if(angle.value == 'bottom'){
|
|
el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
el.style.top = 'auto'
|
|
el.style.left = 'auto'
|
|
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
}else if(angle.value == 'left'){
|
|
el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
|
|
el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
el.style.top = 'auto'
|
|
el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
|
|
}
|
|
}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', () => {
|
|
mouse = false;
|
|
el.parentNode.children.forEach((v:any) =>{
|
|
v.classList.remove('eventNode')
|
|
})
|
|
});
|
|
|
|
});
|
|
|
|
|
|
}
|
|
},
|
|
//移动图片
|
|
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
|
|
}
|
|
})
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
init(){
|
|
this.layout = !this.layout
|
|
let layoutList = this.store.state.UploadFilesModule.moodboard
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
this.layoutList = layoutList
|
|
|
|
this.moodbList = this.moodb[layoutList.length-1]
|
|
this.moodbClassName = this.moodb_className
|
|
},
|
|
setpitch(item:any){
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
item.setPitch = true
|
|
},
|
|
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 = ''
|
|
}
|
|
}
|
|
},
|
|
//开始拖拽事件
|
|
layoutBtnTop(){
|
|
|
|
},
|
|
// setmoodbClassName(){
|
|
// },
|
|
//获取图片宽高
|
|
// getimgWH(){
|
|
// let layoutList = [...(useStore().state.UploadFilesModule.moodboardFiles),
|
|
// ...(useStore().state.UploadFilesModule.generateFiles),
|
|
// ...(useStore().state.UploadFilesModule.MaterialFiles)]
|
|
|
|
|
|
// return new Promise(res => {
|
|
// var img = document.createElement("img");
|
|
// img.src = item.imgUrl
|
|
// img.addEventListener("load", function () {
|
|
// document.body.appendChild(img);
|
|
// var w = img.offsetWidth;
|
|
// var h = img.offsetHeight;
|
|
// img.remove()
|
|
// res({ w, h });
|
|
// })
|
|
// })
|
|
// layoutList.forEach(item => {
|
|
// let img = document.createElement('img')
|
|
// img.addEventListener("load",function(){
|
|
// document.body.appendChild(img);
|
|
// var w = img.offsetWidth;
|
|
// var h = img.offsetHeight;
|
|
// img.remove()
|
|
// })
|
|
|
|
// });
|
|
// },
|
|
// layoutcli(num: Number) {
|
|
// this.openClick = num;
|
|
// if(num ==2 ){
|
|
// let material:any = this.$refs.Material
|
|
// material.init('Moodboard')
|
|
// }else if (num == 3){
|
|
// let material:any = this.$refs.Material
|
|
// material.init('generate')
|
|
// }
|
|
// },
|
|
|
|
|
|
//随机重置图片顺序
|
|
// refetchTemplate() {
|
|
// let arr = Array.from({ length: this.templateFileList.length });
|
|
// for (let item of this.templateFileList) {
|
|
// let index = this.randomRange(
|
|
// 0,
|
|
// this.templateFileList.length,
|
|
// -1
|
|
// );
|
|
// while (arr[index]) {
|
|
// index = this.randomRange(
|
|
// 0,
|
|
// this.templateFileList.length,
|
|
// -1
|
|
// );
|
|
// }
|
|
// arr[index] = item;
|
|
// }
|
|
// this.templateFileList = arr;
|
|
// },
|
|
changeTemplateModal(){
|
|
this.layout = !this.layout
|
|
},
|
|
|
|
//提交模板
|
|
submitTemplate() {
|
|
// this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
|
|
// this.store.commit("setMoodboardFile", this.fileList);
|
|
// this.store.commit("setMoodTemplateId", this.moodTemplateId);
|
|
// this.changeTemplateModal();
|
|
this.layoutList.forEach((v:any)=>{
|
|
v.setPitch = false
|
|
})
|
|
let layoutCentent = document.getElementById('layoutCentent')
|
|
console.log(layoutCentent);
|
|
setTimeout(() => {
|
|
console.log(domTurnImg(layoutCentent));
|
|
this.layout = false
|
|
|
|
}, 0);
|
|
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.layout_modal {
|
|
max-width: 1150px;
|
|
.ant-modal-body {
|
|
padding: 0;
|
|
// height: calc(65vh - 6.4rem);
|
|
height: 60rem;
|
|
}
|
|
.ant-modal-content{
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
.layout_content {
|
|
// background: #f2f3fb;
|
|
// padding-bottom: 2.9rem;
|
|
height: 100%;
|
|
.layout_header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 2rem 0 2.5rem;
|
|
height: 6.6rem;
|
|
|
|
.layout_title {
|
|
font-size: 1.8rem;
|
|
font-weight: 500;
|
|
color: #030303;
|
|
}
|
|
|
|
.close_icon {
|
|
font-size: 1.8rem;
|
|
color: #aeb2b7;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.layout_nav{
|
|
display: flex;
|
|
margin-top: 2rem;
|
|
justify-content: center;
|
|
.active{
|
|
img{
|
|
border: 2px solid;
|
|
border-radius: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
img{
|
|
width:5rem;
|
|
cursor: pointer;
|
|
margin: 0 2rem;
|
|
}
|
|
}
|
|
.layout_centent{
|
|
display: flex;
|
|
height: 55%;
|
|
// height: 60%;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
align-content: space-around;
|
|
width: 50%;
|
|
margin: 3rem 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: 1rem;
|
|
height: 1rem;
|
|
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: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
}
|
|
.layout_translate{
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%,-50%) ;
|
|
cursor: crosshair;
|
|
cursor: move;
|
|
}
|
|
.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%;
|
|
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%;
|
|
|
|
}
|
|
.w1h2{
|
|
width: 23%;
|
|
height: 100%;
|
|
|
|
}
|
|
.w2h1{
|
|
width: 48.5%;
|
|
height: 48%;
|
|
}
|
|
.layout_left{
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 2rem;
|
|
overflow-x: hidden;
|
|
// background-color: #000;
|
|
width: 8%;
|
|
height: 50%;
|
|
&.layout_left::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.layout_left_items{
|
|
width: 100%;
|
|
height: 6rem;
|
|
display: flex;
|
|
align-content: space-between;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
margin-bottom: 2rem;
|
|
cursor: pointer;
|
|
.layout_left_item{
|
|
box-sizing: border-box;
|
|
border: 1px solid #000;
|
|
}
|
|
}
|
|
}
|
|
.submit_button {
|
|
margin: 2rem auto 0;
|
|
}
|
|
}
|
|
}
|
|
</style> |