| 
					
				 | 
			
			
				@@ -0,0 +1,73 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  <v-card class="card rightCardBox"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      <div class="rightCard"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        <div v-for="item in items" :key="item.id"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <!-- <v-divider v-if="index" class="divider"></v-divider> --> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          <div class="rowItem d-flex"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div class="categoryName2">{{ item.nameCn }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            <div class="rightContent"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <div v-if="!item.children?.length"></div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+              <div v-else class="jobItem" v-for="val in item.children" :key="val.id">{{ val.nameCn }}</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+          </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    </v-card> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<script setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { getDict } from '@/hooks/web/useDictionaries' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { ref } from 'vue'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+defineOptions({ name:'common-components-industryTypeCard'}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+let items = ref() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  data = data?.length && data || [] 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  items.value = data 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</script> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="scss" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.card { border-radius: 12px; } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.rightCard { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  height: 384px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  width: 786px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  margin: 4px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  padding: 0 16px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  overflow-y: auto; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .categoryName2 { font-size: 14px; color: #000; width: 150px; margin-right: 4px;} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .jobItem { font-size: 14px; color: #333333; } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .rowItem { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    padding: 8px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .divider { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    margin-left: 150px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  .rightContent { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    flex: 1; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    div { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      margin: 4px 28px 2px 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      float: left; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      cursor: pointer; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      // color: #000; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      &:hover { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        color: var(--v-primary-base); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+      } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+::-webkit-scrollbar { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  width: 4px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  height: 10px; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // display: none; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // 滚动条-颜色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  background: #c3c3c379; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  // 滚动条-底色 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  background: #e5e5e58f; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |