116 lines
3.3 KiB
Vue
116 lines
3.3 KiB
Vue
<template>
|
|
<div class="detailRight">
|
|
<!-- <div class="detailText">Current Print</div>
|
|
<div class="select_sketch">
|
|
<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
|
|
</div> -->
|
|
<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
|
|
<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
|
|
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'print'" type="print"></editPrintElement>
|
|
<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element"></editPrintElement>
|
|
<modelsType ref="modelsType" v-if="currentDetailType === 'models'"></modelsType>
|
|
</div>
|
|
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
|
|
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
|
|
import { useStore } from "vuex";
|
|
import sketchType from './sketchType.vue'
|
|
import printType from './printType.vue'
|
|
import editPrintElement from './editPrintElement.vue'
|
|
import modelsType from './modelsType.vue'
|
|
export default defineComponent({
|
|
components:{
|
|
sketchType,printType,editPrintElement,modelsType
|
|
},
|
|
setup(props,{emit}) {
|
|
const store = useStore();
|
|
const detailData = reactive({
|
|
designDetail:computed(()=>store.state.DesignDetail.designDetail),
|
|
editPrintElement:null as any,
|
|
selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
|
|
currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
|
|
})
|
|
const privewDetail = ()=>{
|
|
if(detailData.editPrintElement?.previewDetailPrintData)detailData.editPrintElement.previewDetailPrintData()
|
|
}
|
|
return{
|
|
...toRefs(detailData),
|
|
privewDetail,
|
|
}
|
|
},
|
|
|
|
provide() {
|
|
return {
|
|
}
|
|
},
|
|
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.detailRight{
|
|
height: 100%;
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
> .detailText{
|
|
margin-bottom: 1rem;
|
|
}
|
|
> .select_sketch{
|
|
width: 100%;
|
|
height: 23.5rem;
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
border-radius: .5rem;
|
|
// border: 1px dashed #202020;
|
|
border: 1px dashed transparent;
|
|
background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em, #000 0,#000 0.6em);
|
|
margin-bottom: 3rem;
|
|
> img{
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
> .switch_type_list{
|
|
display: flex;
|
|
margin-bottom: 2.5rem;
|
|
> .switch_type_item:nth-child(1){
|
|
margin-right: 6.5rem;
|
|
}
|
|
> .switch_type_item{
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
> .switch_type_item::before {
|
|
position: absolute;
|
|
content: "";
|
|
display: block;
|
|
background: #000;
|
|
height: calc(.4rem*1.2);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -.5rem;
|
|
width: 0px;
|
|
transition: 0.3s all;
|
|
}
|
|
> .select_swtich {
|
|
color: #000;
|
|
font-weight: 600;
|
|
}
|
|
> .select_swtich::before {
|
|
width: 100%;
|
|
}
|
|
}
|
|
> .sketch_content_list{
|
|
flex: 1;
|
|
overflow: hidden;
|
|
> .content_item{
|
|
height: 100%;
|
|
margin-top: 1rem;
|
|
}
|
|
}
|
|
}
|
|
</style> |