布局修改 部分bug修复
This commit is contained in:
X1627315083
202
src/component/Detail/model/index.vue
Normal file
202
src/component/Detail/model/index.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div class="modelindex">
|
||||
<div class="modelindex_left">
|
||||
<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
|
||||
</div>
|
||||
<div class="modelindex_right">
|
||||
<div class="detail_btn">
|
||||
<!-- 全屏 -->
|
||||
<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
|
||||
|
||||
<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
|
||||
<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
|
||||
<!-- 编辑 -->
|
||||
<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></i>
|
||||
<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
|
||||
<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
|
||||
<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
|
||||
|
||||
<!-- 层 -->
|
||||
<i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mousedownDesignImg" @touchstart="mousedownDesignImg" @touchend="mousedownDesignImg"></i>
|
||||
|
||||
</div>
|
||||
<position ref="position" @canvasReload="()=>$emit('canvasReload')" :imgDesignImg=imgDesignImg></position>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,inject,onBeforeUnmount,createVNode,toRefs, reactive, onMounted} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import position from './modelPosition.vue';
|
||||
import modelNav from './modelNav.vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
position,modelNav
|
||||
},
|
||||
emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
})
|
||||
const setRevocation:any = inject('setRevocation')
|
||||
const getDetailListData = reactive({
|
||||
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
imgDesignImg:false,
|
||||
})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
position:null as any,
|
||||
})
|
||||
const getSubmitData = (value:any)=>{
|
||||
return getDetailListDom.position.getSubmitData(value)
|
||||
}
|
||||
const showDesignImgDetail = (str:any)=>{
|
||||
new Promise((resolve, reject) => {
|
||||
// if(
|
||||
// getDetailListData.isEditPattern.value&&
|
||||
// detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
||||
// ){
|
||||
// Modal.confirm({
|
||||
// title: t('collectionModal.jsContent2'),
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// mask:false,
|
||||
// centered:true,
|
||||
// onOk() {
|
||||
// resolve(true)
|
||||
// emit('detailEdit',str)
|
||||
// },
|
||||
// onCancel(){
|
||||
// resolve(false)
|
||||
// }
|
||||
// });
|
||||
// }else{
|
||||
resolve(true)
|
||||
emit('detailEdit',str)
|
||||
// }
|
||||
})
|
||||
}
|
||||
const deleteItem = ()=>{
|
||||
setRevocation()
|
||||
}
|
||||
const revocation = ()=>{//撤回
|
||||
emit('revocation')
|
||||
getDetailListDom.position.updataPosition()
|
||||
}
|
||||
const oppositeRevocation = ()=>{//反撤回
|
||||
emit('oppositeRevocation')
|
||||
getDetailListDom.position.updataPosition()
|
||||
}
|
||||
|
||||
//图片按下样子
|
||||
const mousedownDesignImg = ()=>{
|
||||
getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
|
||||
}
|
||||
let time = null as any
|
||||
|
||||
const handleResize = ()=>{
|
||||
clearTimeout(time)
|
||||
time = setTimeout(()=>{
|
||||
store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
|
||||
getDetailListDom.position.updataPosition()
|
||||
|
||||
},1000)
|
||||
}
|
||||
onMounted(()=>{
|
||||
window.addEventListener('resize', handleResize);
|
||||
})
|
||||
onBeforeUnmount(()=>{
|
||||
window.removeEventListener('resize', handleResize);
|
||||
})
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(getDetailListData),
|
||||
...toRefs(getDetailListDom),
|
||||
getSubmitData,
|
||||
showDesignImgDetail,
|
||||
revocation,
|
||||
deleteItem,
|
||||
oppositeRevocation,
|
||||
mousedownDesignImg,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modelindex{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
// padding-top: 3rem;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.modelindex_right,.modelindex_left{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
> .modelindex_right{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
> .detail_btn{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-radius: 1rem;
|
||||
padding: .7rem ;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
// max-height: 4rem;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
> i{
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
// padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: .6rem;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
justify-content: center;
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
> i:hover{
|
||||
background: #000000;
|
||||
color: #fff;
|
||||
}
|
||||
> .active{
|
||||
background: #000000;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modelindex_left{
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
311
src/component/Detail/model/modelNav.vue
Normal file
311
src/component/Detail/model/modelNav.vue
Normal file
@@ -0,0 +1,311 @@
|
||||
<template>
|
||||
<div class="modelNavBox">
|
||||
<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
|
||||
<div class="modelNav_item item"
|
||||
v-for="item,index in designDetail.clothes"
|
||||
:class="{active:(selectDetail && item.id == selectDetail.id)}"
|
||||
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
|
||||
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
|
||||
@click="selectDetailItem(item,index)">
|
||||
<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
|
||||
<img :src="item.path" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="singleOveral.value == 'overall'" v-if="(currentDetailType == 'sketch' || currentDetailType == '') && designDetail.clothes.length < 5 " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
|
||||
+
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined, } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import position from './modelPosition.vue';
|
||||
import { getMousePosition } from "@/tool/mdEvent"
|
||||
export default defineComponent({
|
||||
components:{
|
||||
position,
|
||||
},
|
||||
emits:['canvasReload','addSketch','deleteItem'],
|
||||
setup(props,{emit}) {
|
||||
const store = useStore();
|
||||
const {t} = useI18n()
|
||||
const detailData = reactive({
|
||||
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||
frontBack_:computed(()=>store.state.DesignDetail.frontBack),
|
||||
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||||
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
singleOveral:inject('singleOveral') as any,
|
||||
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
|
||||
modelNav:null as any,
|
||||
})
|
||||
const collItemSize = reactive({
|
||||
collValue:18,
|
||||
num:1,
|
||||
prentHeight:0 as any,
|
||||
padding:10,
|
||||
likeStyle:{
|
||||
|
||||
},
|
||||
itemStyle:{
|
||||
width:0,
|
||||
height:0,
|
||||
},
|
||||
collTime:null as any,
|
||||
isMove:false,
|
||||
elList:[] as any,
|
||||
selectIndex:0,
|
||||
})
|
||||
watch(()=>detailData.designDetail.clothes.length,(newVal)=>{
|
||||
nextTick(()=>{
|
||||
setItemPosition()
|
||||
})
|
||||
},{immediate:true})
|
||||
const selectDetailItem = (item:any,index:number)=>{
|
||||
new Promise((resolve, reject) => {
|
||||
// if(detailData.isEditPattern.value &&
|
||||
// detailData.selectDetail?.id &&
|
||||
// detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
|
||||
// ){
|
||||
// Modal.confirm({
|
||||
// title: t('collectionModal.jsContent2'),
|
||||
// icon: createVNode(ExclamationCircleOutlined),
|
||||
// okText: 'Yes',
|
||||
// cancelText: 'No',
|
||||
// mask:false,
|
||||
// centered:true,
|
||||
// onOk() {
|
||||
// resolve(true)
|
||||
// emit('canvasReload')
|
||||
// },
|
||||
// onCancel(){
|
||||
// resolve(false)
|
||||
// }
|
||||
// });
|
||||
// }else{
|
||||
resolve(true)
|
||||
emit('canvasReload')
|
||||
// }
|
||||
}).then((rv)=>{
|
||||
if(rv)store.commit('DesignDetail/setDesignColthes',item.id)
|
||||
})
|
||||
}
|
||||
const deleteDetailItem = (id:number)=>{
|
||||
detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
|
||||
detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
|
||||
detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
|
||||
emit('deleteItem')
|
||||
}
|
||||
const addSketch = ()=>{
|
||||
if(detailData.currentDetailType != 'sketch')store.commit('DesignDetail/setCurrentDetailType','sketch')
|
||||
store.commit('DesignDetail/addDesignColthes')
|
||||
emit('addSketch')
|
||||
}
|
||||
|
||||
|
||||
|
||||
const designMousedown = (e:any,uniqueId:number,str:string)=>{
|
||||
let item:any = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
|
||||
if(!item)return
|
||||
item.el.style.zIndex = 2;
|
||||
item.el.style.transition = 'all 0s';
|
||||
let startX = e.clientX,
|
||||
startY = e.clientY,
|
||||
top = item.el.offsetTop;
|
||||
collItemSize.isMove = false
|
||||
let moveFun = (e:any) => {
|
||||
collItemSize.isMove = true
|
||||
let X = 0;
|
||||
let Y = e.clientY - startY + top;
|
||||
item.el.style.left = `${X}px`;
|
||||
item.el.style.top = `${Y}px`;
|
||||
reRange(item, X, Y,str);
|
||||
};
|
||||
let mouseUpFun = ()=>{
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
|
||||
document.removeEventListener('mouseup',mouseUpFun)
|
||||
document.removeEventListener('touchend',mouseUpFun)
|
||||
item.el.style.zIndex = 1;
|
||||
item.el.style.transition = 'top .5s';
|
||||
moveItem();
|
||||
sortDesignCollection()
|
||||
}
|
||||
let mouseMove = function(event:any){
|
||||
let e = getMousePosition(event,false)
|
||||
moveFun(e)
|
||||
}
|
||||
let touchmove = function(event:any){
|
||||
let e = getMousePosition(event,true)
|
||||
moveFun(e)
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove',mouseMove)
|
||||
document.addEventListener('touchmove',touchmove)
|
||||
|
||||
document.addEventListener('mouseup',mouseUpFun)
|
||||
document.addEventListener('touchend',mouseUpFun)
|
||||
}
|
||||
//排序 从大到小
|
||||
const sortDesignCollection = ()=> {
|
||||
|
||||
}
|
||||
const reRange = (item:any, x:number, y:number,str:string)=>{
|
||||
let elList:any = collItemSize.elList
|
||||
let index = collItemSize.selectIndex
|
||||
let width,height,num
|
||||
num = collItemSize.num
|
||||
width = collItemSize.itemStyle.width
|
||||
height = collItemSize.itemStyle.height
|
||||
|
||||
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
|
||||
moveIndex = elList.length - 1 - moveIndex
|
||||
moveIndex = moveIndex < 0 ? 0 : moveIndex;
|
||||
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
|
||||
if(moveIndex != index){
|
||||
collItemSize.selectIndex = moveIndex;
|
||||
let currentSort = item.sort;
|
||||
for(let i = 0;i < elList.length;i++){
|
||||
if(currentSort < moveIndex){
|
||||
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
|
||||
elList[i].sort -= 1;
|
||||
};
|
||||
}else if(currentSort > moveIndex){
|
||||
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
|
||||
elList[i].sort += 1;
|
||||
};
|
||||
}
|
||||
};
|
||||
elList[item.index].sort = moveIndex;
|
||||
moveItem();
|
||||
}
|
||||
}
|
||||
const moveItem = ()=>{
|
||||
let value = collItemSize.num
|
||||
for(let i = 0;i < collItemSize.elList.length;i++){
|
||||
let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +collItemSize.padding) + 'px';
|
||||
collItemSize.elList[i].el.style.top = height
|
||||
}
|
||||
setZIndex()
|
||||
}
|
||||
const setZIndex = ()=>{
|
||||
collItemSize.elList.forEach((elItem:any)=>{
|
||||
let clothesIndex = detailData.designDetail.clothes.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
|
||||
let clothesId = detailData.designDetail.clothes[clothesIndex].id
|
||||
detailData.designDetail.clothes[clothesIndex].priority = elItem.sort
|
||||
let frontIndex = detailData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
|
||||
detailData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
|
||||
// detailData.frontBack_.back[frontIndex].style.zIndex = elItem.sort + 1
|
||||
})
|
||||
}
|
||||
const setItemPosition = ()=>{
|
||||
let parent = detailData.modelNav.offsetWidth
|
||||
let elArr = detailData.modelNav.querySelectorAll('.item')
|
||||
let value = collItemSize.num
|
||||
const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||||
const remValue = 12 * htmlFontSize;
|
||||
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
|
||||
collItemSize.itemStyle.height = remValue
|
||||
collItemSize.elList = []
|
||||
let arr:any = detailData.designDetail.clothes
|
||||
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
|
||||
|
||||
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
|
||||
const sortMap = {} as any;
|
||||
sortedArray.forEach((item, index) => {
|
||||
sortMap[item.priority] = index ; // 1, 2, 3, 4...
|
||||
});
|
||||
for(let i = 0;i < elArr.length;i++){
|
||||
collItemSize.elList.push({
|
||||
el: elArr[i],
|
||||
// sort: elArr.length - i -1,
|
||||
sort: sortMap[arr[i].priority],
|
||||
index: i,
|
||||
uniqueId:arr[i]?.uniqueId || 99999,
|
||||
});
|
||||
}
|
||||
collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
|
||||
moveItem()
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
// onBeforeUnmount(()=>{
|
||||
// detailData.selectIndex = -1
|
||||
// })
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(collItemSize),
|
||||
selectDetailItem,
|
||||
deleteDetailItem,
|
||||
designMousedown,
|
||||
addSketch,
|
||||
getMousePosition,
|
||||
}
|
||||
},
|
||||
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.modelNavBox{
|
||||
.modelNav_item{
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
padding: 1rem;
|
||||
border-radius: 2rem;
|
||||
border: 2px solid #B4B4B4;
|
||||
margin-bottom: 1.5rem;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
transition: top .3s;
|
||||
&:hover{
|
||||
> i{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
> i{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.active{
|
||||
border: 3px solid #000;
|
||||
}
|
||||
> img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
&.add{
|
||||
font-size: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modelNav{
|
||||
position: relative;
|
||||
width: 12rem;
|
||||
|
||||
}
|
||||
</style>
|
||||
595
src/component/Detail/model/modelPosition.vue
Normal file
595
src/component/Detail/model/modelPosition.vue
Normal file
@@ -0,0 +1,595 @@
|
||||
<template>
|
||||
<div class="molepositon" :class="{active:!imgDesignImg}">
|
||||
<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
|
||||
<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
|
||||
<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
|
||||
</div>
|
||||
<img class="perview_img" ref="detailBody" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
|
||||
<div class="detail_modal_item_front" v-for="item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style">
|
||||
<img :src="item.imageUrl" alt="">
|
||||
</div>
|
||||
<div class="designOpenrtion_btnBox">
|
||||
<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
|
||||
<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
|
||||
<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="designOpenrtion_imgMask" v-else>
|
||||
<img :src="designDetail.currentFullBodyView || selectDetail.undividedLayer" style="object-fit: cover;" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="molepositon" :class="{active:imgDesignImg}">
|
||||
<div class="designOpenrtion_imgMask">
|
||||
<div class="detail_modal_item_front">
|
||||
<img :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||||
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { Https } from "@/tool/https";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { getMousePosition } from "@/tool/mdEvent";
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import newFollowVue from '@/component/Account/message/newFollow.vue';
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
props:{
|
||||
imgDesignImg:{
|
||||
default:false,
|
||||
type:Boolean,
|
||||
}
|
||||
},
|
||||
emits:['canvasReload'],
|
||||
setup(props,{emit}) {
|
||||
const {t} = useI18n()
|
||||
const store = useStore();
|
||||
const detailData = reactive({
|
||||
frontBack:computed(()=>store.state.DesignDetail.frontBack),
|
||||
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
||||
isEditPattern:inject('isEditPattern') as any,
|
||||
singleOveral:inject('singleOveral') as any,
|
||||
detailBody:null as any,
|
||||
})
|
||||
const selectItem = reactive({
|
||||
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
||||
imgDomIndex:-1,
|
||||
printZIndex:store.state.DesignDetail.printZIndex,
|
||||
imgDom:null as any,
|
||||
direction:'',
|
||||
})
|
||||
watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
|
||||
if(newValue.id == oldValue?.id)return
|
||||
selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
|
||||
},{immediate: true,})
|
||||
watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
|
||||
|
||||
let sacle = 0
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
// resolve(img)
|
||||
sacle = detailData.detailBody.parentNode.offsetWidth / img.width
|
||||
detailData.frontBack.front.forEach((item:any,index:number) => {
|
||||
for (const key in item.style) {
|
||||
if(key == 'zIndex')return
|
||||
let value = item.style[key]
|
||||
if(typeof value !== 'number'){
|
||||
value = value.replace('px','')
|
||||
item.style[key] = value
|
||||
}else{
|
||||
item.style[key] = value*sacle+'px'
|
||||
}
|
||||
// item.style[key] = value*sacle+'px'
|
||||
}
|
||||
for (const key in detailData.frontBack.back[index].style) {
|
||||
if(key == 'zIndex')return
|
||||
let value = detailData.frontBack.back[index].style[key]
|
||||
if(typeof value !== 'number'){
|
||||
value = value.replace('px','')
|
||||
detailData.frontBack.back[index].style[key] = value
|
||||
}else{
|
||||
detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
||||
}
|
||||
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = newVal;
|
||||
},{immediate: true,})
|
||||
const getDetailListDom = reactive({
|
||||
libraryList:null as any,
|
||||
})
|
||||
|
||||
//设置尺寸
|
||||
const itemSizeMousedown = (direction:any,event:any)=>{
|
||||
selectItem.direction = direction
|
||||
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
|
||||
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
||||
let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
|
||||
if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
|
||||
}else{
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', sizeMouseMove);
|
||||
document.addEventListener('touchmove', sizeTouchmove);
|
||||
document.addEventListener('mouseup', sizeMouseup);
|
||||
document.addEventListener('touchend', sizeMouseup);
|
||||
}
|
||||
const sizeMouseMove = (event:any)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
sizeMouseMoveOperation(e)
|
||||
}
|
||||
const sizeTouchmove = (event:any)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
sizeMouseMoveOperation(e)
|
||||
}
|
||||
const sizeMouseup = (e:any)=>{
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style={
|
||||
right:'auto',
|
||||
left:selectItem.imgDom.offsetLeft+'px',
|
||||
bottom:'auto',
|
||||
top:selectItem.imgDom.offsetTop+'px',
|
||||
height:selectItem.imgDom.offsetHeight+'px',
|
||||
width:selectItem.imgDom.offsetWidth+'px',
|
||||
zIndex:selectItem.imgDom.style.zIndex,
|
||||
// zIndex:selectItem.printZIndex
|
||||
}
|
||||
// detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
|
||||
document.removeEventListener('mousemove',sizeMouseMove)
|
||||
document.removeEventListener('touchmove',sizeTouchmove)
|
||||
document.removeEventListener('mouseup',sizeMouseup)
|
||||
document.removeEventListener('touchend',sizeMouseup)
|
||||
}
|
||||
const sizeMouseMoveOperation = (e:any)=> {
|
||||
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
||||
let parentNode =selectItem.imgDom.parentNode
|
||||
let width = imgDomWH.width
|
||||
let height = imgDomWH.height
|
||||
let w,h
|
||||
let num = height/width
|
||||
//判断移动四个边
|
||||
if(selectItem.direction == 'right'){
|
||||
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
|
||||
h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
|
||||
width = w+'px'
|
||||
// height = w*num+'px'
|
||||
}else if(selectItem.direction == 'top'){
|
||||
num = width/height
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
|
||||
// this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
|
||||
w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
|
||||
h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
|
||||
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(selectItem.direction == 'bottom'){
|
||||
num = width/height
|
||||
h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
|
||||
height = h+'px'
|
||||
// width = h*num+'px'
|
||||
}else if(selectItem.direction == 'left'){
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
|
||||
w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
|
||||
|
||||
width = w+'px'
|
||||
// height = w*num+'px'
|
||||
}
|
||||
//判断尺寸是否到边
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
|
||||
}
|
||||
// 设置移动
|
||||
const mouseMove = (event:any)=>{
|
||||
let e = getMousePosition(event,false)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
const touchmove=(event:any)=>{
|
||||
let e = getMousePosition(event,true)
|
||||
mouseMoveOperation(e)
|
||||
}
|
||||
const mouseup = (e:any)=> {
|
||||
document.removeEventListener('mousemove',mouseMove)
|
||||
document.removeEventListener('touchmove',touchmove)
|
||||
document.removeEventListener('mouseup',mouseup)
|
||||
document.removeEventListener('touchend',mouseup)
|
||||
}
|
||||
const mouseMoveOperation = (e:any)=>{
|
||||
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
||||
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||
let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
|
||||
let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
|
||||
detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
|
||||
}
|
||||
const clothesOpenActive = (index:number)=>{
|
||||
// this.designItemDetail.clothes.forEach((item)=>{
|
||||
// item.clothesOpenItem = false
|
||||
// })
|
||||
// if(index != -1){
|
||||
// this.designItemDetail.clothes[index].clothesOpenItem = true
|
||||
// }
|
||||
}
|
||||
const itemMoveMousedown = async (index:any,e:any)=>{
|
||||
let isOpen = false
|
||||
let isModal = false
|
||||
await new Promise((resolve, reject) => {
|
||||
if(
|
||||
detailData.isEditPattern.value &&
|
||||
selectItem.selectDetail?.id &&
|
||||
(detailData.frontBack.front[index].id != selectItem.selectDetail.id)
|
||||
){
|
||||
isModal = true
|
||||
Modal.confirm({
|
||||
title: t('collectionModal.jsContent2'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
okText: 'Yes',
|
||||
cancelText: 'No',
|
||||
mask:false,
|
||||
centered:true,
|
||||
onOk() {
|
||||
resolve(true)
|
||||
isOpen = true
|
||||
},
|
||||
onCancel(){
|
||||
resolve(false)
|
||||
isOpen = false
|
||||
}
|
||||
});
|
||||
}else{
|
||||
resolve(true)
|
||||
isModal = false
|
||||
}
|
||||
}).then((rv)=>{
|
||||
})
|
||||
if(isOpen){
|
||||
store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
|
||||
emit('canvasReload')
|
||||
return
|
||||
}
|
||||
|
||||
if(isModal)return
|
||||
store.commit('DesignDetail/setDesignColthes',detailData.frontBack.front[index].id)
|
||||
selectItem.imgDomIndex = index
|
||||
detailData.frontBack.front.forEach((v:any)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
clothesOpenActive(index)
|
||||
let event = e||window.event
|
||||
selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
|
||||
detailData.frontBack.front[index].designOpenrtionBtn = true
|
||||
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
let imgDomWH = selectItem.imgDom.getBoundingClientRect()
|
||||
let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
|
||||
let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
|
||||
detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
|
||||
detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
|
||||
|
||||
document.addEventListener('mousemove', mouseMove);
|
||||
document.addEventListener('touchmove', touchmove);
|
||||
document.addEventListener('mouseup', mouseup);
|
||||
document.addEventListener('touchend', mouseup);
|
||||
}
|
||||
const sort = (arr:any)=>{
|
||||
arr.sort((a:any, b:any) => {
|
||||
var a_num = a.style.zIndex;
|
||||
var b_num = b.style.zIndex;
|
||||
return a_num - b_num;
|
||||
});
|
||||
return arr
|
||||
}
|
||||
const getSubmitData = (value:any)=>{
|
||||
let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
|
||||
if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
|
||||
return{
|
||||
scale:value.layersObject[0].scale,
|
||||
offset:value.layersObject[0].offset,
|
||||
priority:value.layersObject[0].priority,
|
||||
}
|
||||
}
|
||||
let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
|
||||
|
||||
// let arr:any = sort(detailData.frontBack.front)
|
||||
let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
|
||||
let num = 10
|
||||
arr.forEach((item:any)=>{
|
||||
item.priority = num++
|
||||
})
|
||||
let data:any = {
|
||||
scale:null,
|
||||
offset:null,
|
||||
priority:'',
|
||||
maskUrl:'',
|
||||
maskMinioUrl:'',
|
||||
}
|
||||
let state = false
|
||||
for (let index = 0; index < arr.length; index++) {
|
||||
if(value.id == arr[index].id){
|
||||
state = true
|
||||
let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
|
||||
let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
|
||||
let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
|
||||
let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
|
||||
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
|
||||
data.scale = [scaleWidth,scaleHeight]
|
||||
let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
|
||||
let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
|
||||
data.offset = [left?left:0,top?top:0]
|
||||
// data.offset = [left?left:0,top?top:0]
|
||||
data.maskUrl = arr[index].maskUrl
|
||||
data.maskMinioUrl = arr[index].maskMinioUrl
|
||||
// data.priority = arr[index].style.zIndex
|
||||
data.priority = arr[index].priority
|
||||
arr[index].similarity = true
|
||||
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
|
||||
break
|
||||
}
|
||||
}
|
||||
if(!state){
|
||||
data.scale = [1,1]
|
||||
data.offset = [0,0]
|
||||
data.priority = 10+arr.length
|
||||
}
|
||||
return data
|
||||
}
|
||||
const deleteNav = ()=>{
|
||||
|
||||
}
|
||||
const setpitch = (item:any,index:any)=>{
|
||||
detailData.frontBack.front.forEach((v:any)=>{
|
||||
v.designOpenrtionBtn = false
|
||||
})
|
||||
detailData.frontBack.front[index].designOpenrtionBtn = true
|
||||
// detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
|
||||
// detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
|
||||
clothesOpenActive(index)
|
||||
}
|
||||
const updataPosition = ()=>{
|
||||
let url = detailData.frontBack?.body?.path
|
||||
let sacle = 0
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
let dom:any = document.querySelector('.molepositon .perview_img')
|
||||
// resolve(img)
|
||||
sacle = dom.parentNode.offsetWidth / img.width
|
||||
detailData.frontBack.front.forEach((item:any,index:number) => {
|
||||
for (const key in item.style) {
|
||||
if(key == 'zIndex')return
|
||||
item.style[key] = item.style[key]*sacle+'px'
|
||||
}
|
||||
for (const key in detailData.frontBack.back[index].style) {
|
||||
if(key == 'zIndex')return
|
||||
detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = url;
|
||||
}
|
||||
return{
|
||||
...toRefs(detailData),
|
||||
...toRefs(selectItem),
|
||||
...toRefs(getDetailListDom),
|
||||
|
||||
itemSizeMousedown,
|
||||
itemMoveMousedown,
|
||||
deleteNav,
|
||||
setpitch,
|
||||
getSubmitData,
|
||||
getMousePosition,
|
||||
updataPosition,
|
||||
}
|
||||
},
|
||||
directives:{
|
||||
detailBody:{
|
||||
mounted (el,data:any) {
|
||||
let sacle = 0
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
// resolve(img)
|
||||
sacle = el.parentNode.offsetWidth / img.width
|
||||
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
||||
for (const key in item.style) {
|
||||
if(key == 'zIndex')return
|
||||
item.style[key] = item.style[key]*sacle+'px'
|
||||
}
|
||||
for (const key in data.instance.frontBack.back[index].style) {
|
||||
if(key == 'zIndex')return
|
||||
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = data.value;
|
||||
},
|
||||
updated (el,data:any) {
|
||||
let sacle = 0
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
// resolve(img)
|
||||
sacle = el.parentNode.offsetWidth / img.width
|
||||
data.instance.frontBack.front.forEach((item:any,index:number) => {
|
||||
for (const key in item.style) {
|
||||
if(key == 'zIndex')return
|
||||
item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
|
||||
}
|
||||
for (const key in data.instance.frontBack.back[index].style) {
|
||||
if(key == 'zIndex')return
|
||||
data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
|
||||
}
|
||||
});
|
||||
};
|
||||
img.src = data.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.molepositon{
|
||||
// width: 30rem;
|
||||
// width: calc(66 * .470rem);
|
||||
width: calc(66 * .457rem);
|
||||
height: 66rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// margin: auto 0;
|
||||
// padding-top: 3rem;
|
||||
position: relative;
|
||||
display: none;
|
||||
&.active{
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
> .designOpenrtion_imgMask{
|
||||
width: auto;
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
>img{
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
// height: 100%;
|
||||
// object-fit: contain;
|
||||
}
|
||||
>div{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
.detail_modal_item_front,.designOpenrtion_print{
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// width: 100%;
|
||||
// height: auto;
|
||||
float: left;
|
||||
user-select:none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
.modal_imgItem{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
}
|
||||
.designOpenrtion_print{
|
||||
z-index: 1 !important;
|
||||
}
|
||||
> .designOpenrtion_btnBox{
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
ul{
|
||||
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;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
|
||||
li{
|
||||
cursor: pointer;
|
||||
// border-radius: 50%;
|
||||
width: calc(2rem*1.2);
|
||||
height: calc(2rem*1.2);
|
||||
background-color: rgb(20, 188, 255);
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&.active{
|
||||
opacity: 1;
|
||||
z-index: 999 !important;
|
||||
li{
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: n-resize;
|
||||
}
|
||||
.designOpenrtion_btn_top{
|
||||
top: 0;
|
||||
}
|
||||
.designOpenrtion_btn_bottom{
|
||||
top: 100%;
|
||||
}
|
||||
.designOpenrtion_btn_left,.designOpenrtion_btn_right{
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%) ;
|
||||
cursor: e-resize;
|
||||
}
|
||||
.designOpenrtion_btn_left{
|
||||
left: 0;
|
||||
}
|
||||
.designOpenrtion_btn_right{
|
||||
left: 100%;
|
||||
}
|
||||
.designOpenrtion_rotote{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.designOpenrtion_rotote::after{
|
||||
position: absolute;
|
||||
content: "";
|
||||
background-color: #14bcff;
|
||||
width: 2px;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.designOpenrtion_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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user