aida_front/src/component/HomePage/layout.vue

<template>
  <div>
	<a-modal
            class="layout_modal"
            v-model:visible="layout"
            :footer="null"
            width="65%"
            :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}" @click="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" @click="setpitch(item,index)" ref="content" >
						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false" v-modelImg> 
						<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
				: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,
                level1Type: "Moodboard",
                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            },
        };
    },

    mounted() {
		this.token = getCookie("token") || "";
        this.uploadUrl = getUploadUrl();
    },
	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 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])
				}
				// 添加鼠标按下事件监听器
				el.addEventListener('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', () => {
						mouse = false;
						// x = e.pageX
						// y = e.pageY
					});
				});
				//缩放
				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', () => {
							mouse = false;
							el.removeEventListener('mousemove',mouseMove)
							el.parentNode.children.forEach((v:any) =>{
								v.classList.remove('eventNode')
							})
						});
					
					}
					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
					}
				})
			},
		},
		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('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: 65rem;
    }
	.ant-modal-content{
		border-radius: 1rem;
	}

    .layout_content {
        // background: #f2f3fb;
        // padding-bottom: 2.9rem;
		height: 100%;
		.collection_title{
			position: absolute;
			top: 4rem;
			display: flex;
			font-size: 1.8rem;
			font-weight: 900;
			color: rgba(0,0,0,.65);
			align-items: center;
			.collection_title_text{
				margin-right: 4rem;
			}
			.collection_title_text_intro{
				font-size: 1.2rem;
				font-weight: 400;
				color: rgba(0,0,0,.45);
			}
		}
		.collection_closeIcon{
			position: absolute;
			top: 2rem;
			right: 2rem;
			cursor: pointer;
			width: 4rem;
			height: 4rem;
			display: flex;
			align-items: center;
			justify-content: center;

			.fi-rr-cross-small::before{
				padding: .2rem;
				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: 2rem;
			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:5rem;
					cursor: pointer;
					margin: 0 2rem;
					max-height: 100%;
				}
			}
			
		}
		.layout_centent{
			display: flex;
			// height: 55%;
			height: 35rem;
			width: 57rem;
			// 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,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
					// opacity: 0;
					width: .8rem;
					height: .8rem;
				}
				.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: 5rem;
			overflow-x: hidden;
			// background-color: #000;
			width: 8%;
			height: 50%;
			&.layout_left::-webkit-scrollbar {
                display: none;
            }
			.layout_left_text{
				font-size: 1.6rem;
				margin-bottom: 1rem;
				color: #000;
			}
			.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;
        }
    }
	.mark_loading{
		position: absolute;
	}
}
</style>