aida_front/src/component/Detail/detailRight/index.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" :sketchSize="sketchSize"></editPrintElement>
		<editPrintElement ref="editPrintElement" v-if="currentDetailType === 'element'" type="element" :sketchSize="sketchSize"></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
    },
	props:{
		sketchSize:{
			type:Object,
			default:()=>{}
		},
	},
    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>