121 lines
2.7 KiB
Vue
121 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="canvasBox">
|
||
|
|
<!-- designDetailShow -->
|
||
|
|
<!-- :class="[driver__.driver?'hideEvents':'']" -->
|
||
|
|
<div class="canvasContent">
|
||
|
|
<div class="argument-box">
|
||
|
|
<argument ref="argument" v-if="canvasObj.canvas"></argument>
|
||
|
|
</div>
|
||
|
|
<div class="canvas">
|
||
|
|
<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
|
||
|
|
<div class="canvas">
|
||
|
|
<canvasContent ref="canvasContent"></canvasContent>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- <div class="mark_loading" v-show="isShowMark">
|
||
|
|
<a-spin size="large" />
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
||
|
|
import { Https } from "@/tool/https";
|
||
|
|
import { Modal,message } from 'ant-design-vue';
|
||
|
|
import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
|
||
|
|
import { useStore } from "vuex";
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
|
||
|
|
import canvasGeneral from "@/tool/canvasGeneralCopy";
|
||
|
|
import argument from './argument.vue'
|
||
|
|
import canvasContent from './canvasContent.vue'
|
||
|
|
import tool from "./tool.vue"
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
components:{
|
||
|
|
tool,argument,canvasContent,
|
||
|
|
},
|
||
|
|
setup(props,{emit}) {
|
||
|
|
const store = useStore();
|
||
|
|
|
||
|
|
const detailDom = reactive({
|
||
|
|
model:null
|
||
|
|
})
|
||
|
|
const userDetail = computed(()=>{
|
||
|
|
return store.state.UserHabit.userDetail
|
||
|
|
})
|
||
|
|
const detailData = reactive({
|
||
|
|
canvasObj:canvasGeneral,
|
||
|
|
|
||
|
|
|
||
|
|
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
|
||
|
|
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
|
||
|
|
selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
|
||
|
|
designDetailShow:false,
|
||
|
|
loadingShow:false,
|
||
|
|
isEditPattern:{
|
||
|
|
value:false,
|
||
|
|
},// 是否编辑图案
|
||
|
|
})
|
||
|
|
|
||
|
|
onBeforeUnmount(()=>{
|
||
|
|
})
|
||
|
|
return{
|
||
|
|
...toRefs(detailDom),
|
||
|
|
...toRefs(detailData),
|
||
|
|
}
|
||
|
|
},
|
||
|
|
provide() {
|
||
|
|
return {
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
},
|
||
|
|
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.canvasBox{
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
// top: -100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
.argument-box,
|
||
|
|
.canvas,
|
||
|
|
.detail-box{
|
||
|
|
:deep(i){
|
||
|
|
font-size: 2.5rem;
|
||
|
|
cursor: pointer;
|
||
|
|
width: 3rem;
|
||
|
|
height: 3rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
transition: all .3s;
|
||
|
|
margin-bottom: .5rem;
|
||
|
|
&.active{
|
||
|
|
border: 1px solid;
|
||
|
|
border-radius: .4rem;
|
||
|
|
}
|
||
|
|
&.icon-xiala{
|
||
|
|
transform: rotate(-90deg);
|
||
|
|
}
|
||
|
|
&.icon-xialaActive{
|
||
|
|
transform: rotate(90deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.canvasContent{
|
||
|
|
height: 73rem;
|
||
|
|
width: 100%;
|
||
|
|
border: 2px solid #000;
|
||
|
|
border-radius: 3rem;
|
||
|
|
padding: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|