From 1ab0cf3767015f67dcb4dfa84ceafdc5bbf14fa0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=B0=91=E4=BC=9F?= <wsw.sun@qq.com>
Date: Wed, 19 Mar 2025 13:26:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A6=96=E9=A1=B5=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E8=BF=87=E5=A4=9A=E6=B2=A1=E5=81=9A=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Jyh/Home/index.vue | 131 ++++++++++++++++++++---------------
 1 file changed, 76 insertions(+), 55 deletions(-)

diff --git a/src/views/Jyh/Home/index.vue b/src/views/Jyh/Home/index.vue
index 7c86420..3eabbee 100644
--- a/src/views/Jyh/Home/index.vue
+++ b/src/views/Jyh/Home/index.vue
@@ -6,8 +6,14 @@
         <h1>可信开源代码库</h1>
       </div>
       <div class="home-search" ref="homeSearch" :class="{ 'glow-border': inputGlow }">
-        <d-input ref="searchInput" placeholder="请输入搜索关键字" @focus="inputFocus" @blur="inputBlur" :autocomplete="'off'"
-        v-model="searchStr">
+        <d-input
+          ref="searchInput"
+          placeholder="请输入搜索关键字"
+          @focus="inputFocus"
+          @blur="inputBlur"
+          :autocomplete="'off'"
+          v-model="searchStr"
+        >
           <template #prepend>
             <d-dropdown @toggle="onCateToggle($event)">
               <div class="flex items-center gap-1 cursor-pointer">
@@ -25,7 +31,7 @@
                     <template #menu>
                       <ul class="list-menu">
                         <li class="menu-item" v-for="option in industryOptions" @click="onCategoryChange(option)">
-                            {{ option }}
+                          {{ option }}
                         </li>
                       </ul>
                     </template>
@@ -36,15 +42,20 @@
           </template>
           <template #append>
             <div class="advanced-search" @click="openAdvancedSearch">
-                <span>高级筛选</span>
-                <d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
-                <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
-              </div>
+              <span>高级筛选</span>
+              <d-badge :count="6" :bg-color="'#f0f0f0'"></d-badge>
+              <d-icon :rotate="rotate" name="icon-chevron-down-2"></d-icon>
+            </div>
           </template>
         </d-input>
-        <d-dropdown-menu v-model="isOpen" :origin="searchInput?.$el" close-scope="'blank'"
-        :offset="offset" :clickOutside="closeOutside">
-          <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px'}">
+        <d-dropdown-menu
+          v-model="isOpen"
+          :origin="searchInput?.$el"
+          close-scope="'blank'"
+          :offset="offset"
+          :clickOutside="closeOutside"
+        >
+          <div class="advanced-search-menu" :style="{ width: dropdownWidth + 'px' }">
             <AdvanceSearch @submit="submit($event)" @cancel="isOpen = false" class="p-20" :layout="'vertical'">
               <template #title>
                 <span class="title">高级筛选</span>
@@ -58,18 +69,25 @@
       <div class="home-information">
         <div class="info-title">
           <div class="sub-title">
-            <img src="@/assets/imgs/home/informIcon@2x.png">
+            <img src="@/assets/imgs/home/informIcon@2x.png" />
             <span>预警公告</span>
           </div>
           <a class="devui-link" @click="checkMore">更多 ></a>
         </div>
         <div class="info-content">
           <d-timeline :direction="'vertical'" :time-position="'right'" :position="'right'">
-            <d-timeline-item v-for="(item, index) in infoList" :key="index"
-            :dot-color="item.dotColor" :line-color="'var(--devui-form-control-line-hover)'">
+            <d-timeline-item
+              v-for="(item, index) in infoList"
+              :key="index"
+              :dot-color="item.dotColor"
+              :line-color="'var(--devui-form-control-line-hover)'"
+            >
               <template #default>
                 <div class="flex items-center justify-between w-full">
-                  <div class="cursor-pointer notice-content flex gap-2 items-center" @click="openWarningDetail(item, index)">
+                  <div
+                    class="cursor-pointer notice-content flex gap-2 items-center"
+                    @click="openWarningDetail(item, index)"
+                  >
                     <span>{{ item.subject }}</span>
                     <d-tag :color="tagMap[item.importance]" size="sm">{{ item.importance }}</d-tag>
                   </div>
@@ -89,7 +107,7 @@
     </div>
   </div>
 
-  <d-modal class="warning-modal" v-model="warningModalVisable" title="" style="width: 600px;">
+  <d-modal class="warning-modal" v-model="warningModalVisable" title="" style="width: 600px">
     <EarlyWarningDetail :warningData="currentWarning" :type="'user'"></EarlyWarningDetail>
   </d-modal>
 </template>
@@ -98,7 +116,7 @@
 import { ref, onMounted, onBeforeUnmount } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import AdvanceSearch from '@/components/AdvanceSearch/index.vue';
-import { getHomeNoticeList } from '@/api/jyh'
+import { getHomeNoticeList } from '@/api/jyh';
 import EarlyWarningDetail from '@/views/Jyh/PersonalCenter/Detail/EarlyWarningDetail.vue';
 
 const route = useRoute();
@@ -106,14 +124,14 @@ const router = useRouter();
 const inputGlow = ref(false);
 const searchStr = ref('');
 const position = ref(['right-start', 'right-end']);
-const industryOptions = ref(['通信', '军工', '金融', '能源'])
+const industryOptions = ref(['通信', '军工', '金融', '能源']);
 const searchType = ref('软件');
 const searchOptions = ref(['软件']);
-const offset = ref({ mainAxis: 7 , crossAxis: -10 });
+const offset = ref({ mainAxis: 7, crossAxis: -10 });
 const isOpen = ref(false);
 const rotate = ref(0);
 const cateRotate = ref(0);
-const infoList = ref([])
+const infoList = ref([]);
 const warningModalVisable = ref(false);
 const currentWarning = ref();
 
@@ -121,10 +139,10 @@ const homeSearch = ref(null);
 const dropdownWidth = ref(0);
 const selectedCate = ref('软件');
 const tagMap = {
-  '高': '#f66f6a',
-  '中': '#fac20a',
-  '低': '#5e7ce0'
-}
+  高: '#f66f6a',
+  中: '#fac20a',
+  低: '#5e7ce0'
+};
 
 const searchInput = ref(null);
 const openAdvancedSearch = () => {
@@ -136,17 +154,17 @@ const openAdvancedSearch = () => {
 const check = () => {
   router.push({
     name: 'Search',
-    query: { tab: 'BatchVerify' }, // 通过查询参数指定 Tab
+    query: { tab: 'BatchVerify' } // 通过查询参数指定 Tab
   });
-}
+};
 
 const closeOutside = () => {
-  return false
-}
+  return false;
+};
 
 const submit = (formData) => {
   isOpen.value = false;
-  router.push({ name: 'Search', query: { searchWord: searchStr, ...formData, searchType: selectedCate.value}});
+  router.push({ name: 'Search', query: { searchWord: searchStr, ...formData, searchType: selectedCate.value } });
 };
 
 const inputFocus = () => {
@@ -155,7 +173,7 @@ const inputFocus = () => {
 
 const inputBlur = () => {
   inputGlow.value = false;
-}
+};
 
 const updateDropdownWidth = () => {
   if (homeSearch.value) {
@@ -164,20 +182,20 @@ const updateDropdownWidth = () => {
 };
 
 const search = () => {
-  router.push({ name: 'Search', query: { searchWord: searchStr.value, searchType: selectedCate.value}});
+  router.push({ name: 'Search', query: { searchWord: searchStr.value, searchType: selectedCate.value } });
 };
 
 const onCategoryChange = (cate) => {
   selectedCate.value = cate;
-}
+};
 
 const onCateToggle = (event) => {
   cateRotate.value = event ? 180 : 0;
-}
+};
 
 const checkMore = () => {
   router.push({ name: 'PersonalCenter' });
-}
+};
 
 const openWarningDetail = (event, index) => {
   infoList.value.forEach((item, i) => {
@@ -186,11 +204,11 @@ const openWarningDetail = (event, index) => {
     } else {
       item.dotColor = '';
     }
-  })
+  });
 
   warningModalVisable.value = true;
   currentWarning.value = event;
-}
+};
 
 let resizeObserver: ResizeObserver | null = null;
 
@@ -209,15 +227,14 @@ onBeforeUnmount(() => {
   }
 });
 
-const getNoticeList = async() => {
-  const res:any = await getHomeNoticeList();
+const getNoticeList = async () => {
+  const res: any = await getHomeNoticeList();
   if (!res.error) {
     infoList.value = res.data.data;
   }
-}
+};
 
 getNoticeList();
-
 </script>
 
 <style scoped lang="scss">
@@ -232,10 +249,9 @@ getNoticeList();
   position: relative;
   overflow: hidden;
 
-
   .home-content {
     font-size: 14px;
-    height: 50%;
+    height: 80%;
     width: 50%;
     display: flex;
     flex-direction: column;
@@ -245,6 +261,7 @@ getNoticeList();
 
     .home-title {
       display: flex;
+      flex-shrink: 0;
       justify-content: center;
       align-items: center;
       gap: 20px;
@@ -262,6 +279,7 @@ getNoticeList();
     .home-search {
       width: 100%;
       height: 40px;
+      flex-shrink: 0;
       background-color: white;
       border-radius: 10px;
       display: flex;
@@ -312,6 +330,7 @@ getNoticeList();
     .batch-btn {
       color: $devui-aide-text;
       width: 150px;
+      flex-shrink: 0;
       background-color: #f0f0f0;
       border-color: $devui-aide-text;
     }
@@ -319,6 +338,8 @@ getNoticeList();
     .home-information {
       width: 100%;
       background-color: #f0f0f0;
+      overflow: auto;
+      margin-bottom: 20px;
       border-radius: 10px;
       padding: 12px;
 
@@ -363,27 +384,27 @@ getNoticeList();
 .glow-border {
   border: 1px solid var(--devui-form-control-line, #d7d8da);
   border-color: var(--devui-form-control-line-active, #5e7ce0) !important;
-  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, .08));
+  box-shadow: 0 0 0 4px var(--devui-form-control-interactive-outline, rgba(94, 124, 224, 0.08));
   transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }
 
 .menu-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    padding: 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: var(--devui-list-item-hover-bg, #f2f5fc);
-      color: var(--devui-list-item-hover-text, #526ecc);
-    }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 4px;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--devui-list-item-hover-bg, #f2f5fc);
+    color: var(--devui-list-item-hover-text, #526ecc);
+  }
 }
 
 .list-menu {
-    padding: 8px;
-    margin: 0;
-    width: 100px;
+  padding: 8px;
+  margin: 0;
+  width: 100px;
 }
 
 .title {