detail页面调整

src/component/DetailCopy/detailLeft/sketch.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="sketch">
+		<div class="detailText">Current Print</div>
+		<div class="select_sketch">
+			<img :src="selectDetail.path" alt="">
+		</div>
+		<div class="switch_type_list">
+			<div
+				@click.stop="openCurrent()"
+				class="switch_type_item"
+				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+			</div>
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</div>
+		<div class="sketch_content_list">
+			<div class="content_item" v-show="selectTitle == 'current'">
+				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+			</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,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 sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './module/libraryList.vue'
+import uploadList from './module/uploadList.vue'
+import currentList from './module/currentList.vue'
+export default defineComponent({
+    components:{
+		currentList,
+		libraryList,
+		uploadList,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'current',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			sketchCatecoryList:computed(()=>{
+				return store.state.Workspace.workspacePosition
+			})
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openCurrent = ()=>{
+			detailData.selectTitle = 'current'
+		}
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+			openCurrent,
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .sketch{
+		// width: 34rem;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		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:last-child{
+				margin-right: 0;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+				margin-right: 6.5rem;
+			}
+			> .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;
+				transform: scale(1.15);
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .sketch_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>