上传字体包 版本树页面

src/views/home/versionTree/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import Tree from './tree/index.vue'
+import Detail from './detail/index.vue'
 const props = defineProps({
 	versionTreeData:{
 		type:Object,
@@ -16,6 +17,8 @@ const props = defineProps({
 //])
 const treeState = ref(true)//
 
+const selectItem = ref({})
+
 const openTree = ()=>{
 	treeState.value = !treeState.value
 	
@@ -47,16 +50,16 @@ const {} = toRefs(data);
 					</div>
 				</div>
 			</div>
-			<div style="display: flex;">
+			<div style="display: flex;" class="expandBtnBox">
 				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">+</el-button>
 				<el-button class="expandBtn" @click="openTree" style="width: 5rem;">-</el-button>
 			</div>
 			<div class="versionTreeBox">
 				<div class="tree">
-					<Tree :treeState="treeState"></Tree>
+					<Tree :treeState="treeState" v-model:selectItem="selectItem"></Tree>
 				</div>
 				<div class="detail">
-
+					<Detail v-model:selectItem="selectItem"></Detail>
 				</div>
 			</div>
 		</el-drawer>
@@ -83,17 +86,21 @@ const {} = toRefs(data);
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding: 0 .8rem 0 1.2rem;
+			padding: 0 .8rem 0 2.4rem;
 			border-bottom: 1px solid #C9C9C9;
 			> span{
 				font-size: 2rem;
 				font-weight: 600;
+				font-family: 'SemiBold';
 			}
 			> .closeBtn{
 				width: 2.4rem;
 				height: 2.4rem;
 				cursor: pointer;
 			}
+		}
+		.expandBtnBox{
+
 		}
 		.versionTreeBox{
 			flex: 1;
@@ -103,14 +110,13 @@ const {} = toRefs(data);
 				flex: 1;
 				height: 100%;
 				overflow: hidden;
-				padding: 1.8rem 0 1.8rem 2.1rem;
+				padding: 2.1rem 0 5.4rem 2.2rem;
 			}
 			> .detail{
 				width: 35rem;
-				margin: 1.4rem 3rem 0 3.4rem;
-				height: 100%;
-				overflow: auto;
-				background-color: #F5F5F5;
+				margin: 2.1rem 3rem 5.4rem 3.4rem;
+				height: calc(100% - 2.1rem - 5.4rem);
+				overflow: hidden;
 			}
 		}
 	}