档案查询，档案柜

src/styles/page/using/scoped/query.scss

@@ -325,7 +325,7 @@
                         &.query {
                             background: #ffddc6;
                         }
-                        &:hover {
+                        &.cur, &:hover {
                             z-index: 22;
                             background: #A16222;
                             border: 1px solid #bbbbbb;

src/views/using/query.vue

@@ -183,7 +183,13 @@
                         <img :src="imageViewGui1" alt="">
                         <div class="gui-file-item-box">
                             <div class="gui-file-item" v-for="item in guiInfoData">
-                                <div class="item" :class="index === 2 || index === 5 ?'query': ''" v-for="(items, index) in item.children">{{items.name}}</div>
+                                <template v-for="(items, index) in item.children">
+                                    <!-- query 为搜索后的结果进行选中，cur 为点击的选中-->
+                                    <div class="item"
+                                         :class="[index === 2 || index === 5 ?'query': '', guiInfoCurKey=== items.id ? 'cur' : '']"
+                                         @click="guiFileInfo(items)"
+                                    >{{items.name}}</div>
+                                </template>
                             </div>
                         </div>
                     </div>
@@ -1315,6 +1321,7 @@ const onCloseGuiInfoDrawer = () => {
 }
 
 //案卷文件数据
+const guiInfoCurKey = ref('')
 const guiInfoData = ref([
     {
         children: [
@@ -1498,6 +1505,12 @@ const guiInfoData = ref([
     },
 ])
 
+//点击档案
+const guiFileInfo = (item) => {
+    //因为当前测试数据的id是有重复的，所以，点击后，会出现多个选中。
+    guiInfoCurKey.value = item.id
+}
+
 </script>
 
 <style lang="scss" scoped>