导航页数据中心及监测中心显示效果优化

src/views/subject/subject_lindidiaocha/index.vue

@@ -52,11 +52,11 @@
           <div> {{ currentTime_week }} </div>
           <div> {{ currentTime_year }} </div>
         </div>
-        <div class="subject_top_currentTime_interval"></div>
+        <!-- <div class="subject_top_currentTime_interval"></div>
         <div class="subject_top_currentTime_monitor" @click="getHome(monitor)">
           <div class="subject_top_currentTime_monitor_icon"></div>
           <div class="subject_top_currentTime_monitor_span">监测中心</div>
-        </div>
+        </div> -->
       </div>
       <div
         class="subject_top_adminAndLogout"
@@ -68,9 +68,30 @@
       >
         <span class="loginUser"> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
         &nbsp;&nbsp;
-        <img src="/subject_lindidiaocha/setting.png" @click="getHome(setting)" />
-        &nbsp;&nbsp;
-        <span class="line" @click="getHome(setting)"> {{ setting.title }} &nbsp;&nbsp;</span>
+        <a-dropdown :placement="'bottomRight'" :arrow="{ pointAtCenter: true }" overlayClassName="subject-right-menu-list">
+          <div style="display: flex;align-items: center;">
+            <img src="/subject_lindidiaocha/setting.png" @click="getHome(setting)" />
+            &nbsp;&nbsp;
+            <span class="line" @click="getHome(setting)"> {{ setting.title }}</span>
+            <div class="dropdown-icon"></div>
+          </div>
+            <template #overlay>
+              <a-menu>
+                <a-menu-item>
+                  <div class="button-item" @click="getHome(monitor)">
+                    <div class="button-icon monitor-center-icon"></div>
+                    监测中心
+                  </div>
+                </a-menu-item>
+                <a-menu-item>
+                  <div class="button-item" @click="getHome(data)">
+                    <div class="button-icon data-center-icon"></div>
+                    数据中心
+                  </div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+        </a-dropdown>
         <span class="line"> | </span>
         &nbsp;&nbsp;&nbsp;&nbsp;
         <img src="/subject_lindidiaocha/logout.png" @click="handleLoginOut()" />
@@ -285,25 +306,35 @@
   const spanWrap = ref(1);
   const setting = ref({});
   const monitor = ref({})
+  const data = ref()
 
   async function getData() {
     const res: any = await getSpecialData();
+    let result:any = []
     // 最大标题文字行数
     res?.forEach((item, index) => {
-      if (item.title == '系统管理') {
-        setting.value = item;
-        res.splice(index, 1);
-      }else if(item.title == '监测中心'){
-        monitor.value = item
-        res.splice(index, 1);
-      } else {
-        res.isHover = false;
-        if (Math.ceil(item.title.length / 6) > spanWrap.value) {
-          spanWrap.value = Math.ceil(item.title.length / 6);
-        }
+      switch(item.title){
+        case '系统管理':
+          setting.value = item;
+          break
+        case '监测中心':
+          monitor.value = item
+          break
+        case '数据中心':
+          data.value = item
+          break
+        default:
+          let useItem = {
+            ...item,
+            isHover: false,
+          }
+          result.push(useItem)
+          if (Math.ceil(item.title.length / 6) > spanWrap.value) {
+            spanWrap.value = Math.ceil(item.title.length / 6);
+          }
       }
     });
-    list.value = res;
+    list.value = result;
     loginUser.value = localStorage.getItem('fireUserLoginName');
   }
 
@@ -525,6 +556,14 @@
           top: 0px;
           font-size: 18px;
           color: #ffffff;
+          margin-right: 8px;
+        }
+        .dropdown-icon{
+          width: 8px;
+          height: 8px;
+          background-image: url('/public/subject/dropdown_icon.png');
+          background-size: 100% 100%;
+          margin-right: 15px;
         }
       }
     }
@@ -636,3 +675,40 @@
     }
   }
 </style>
+<style lang="scss">
+.subject-right-menu-list{
+  .button-item{
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    font-size: 16px;
+    color: #000000;
+    line-height: 24px;
+    display: flex;
+    .button-icon{
+      width: 20px;
+      height: 20px;
+      margin-right: 9px;
+    }
+    .monitor-center-icon{
+      background-image: url('/public/subject/monitor_center.png');
+      background-size: 100% 100%;
+    }
+    .data-center-icon{
+      background-image: url('/public/subject/data_center.png');
+      background-size: 100% 100%;
+    }
+  }
+  .ant-dropdown-menu-item:hover{
+    background-color: rgba(42, 144, 241, 0.1) !important;
+    .button-item{
+      color: #2A90F1;
+      .monitor-center-icon{
+        background-image: url('/public/subject/monitor_center_hover.png');
+      }
+      .data-center-icon{
+        background-image: url('/public/subject/data_center_hover.png');
+      }
+    }
+  }
+}
+</style>