yangyin
2024-11-12 28828f349a6af71d291dd54ee66e08ee90e27e8a
src/layout/component/header/Header.vue
@@ -8,34 +8,6 @@
            {{ routerMeta.title }}
         </span>
      </div>
      <div class="notice" v-if="!isSharePage">
         <el-badge :value="`${state.announcementList.length}`">
            <el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">系统公告</el-button>
         </el-badge>
         <div class="notice_box notice_box_show" v-show="state.isShowAnnouncement">
            <div class="notice_box_header">
               <span>最新公告</span>
            </div>
            <div class="notice_box_body">
               <div
                  class="notice_item"
                  v-for="item in state.announcementList"
                  :key="item.notify_id"
                  @click="announcementContentClick(item)"
               >
                  <div class="flex items-center">
                     <p class="set-circle"></p>
                     <p>{{ item.notify_message }}</p>
                  </div>
                  <p class="text-right mr-[19px]">
                     <span>{{ item.notify_time }}</span>
                  </p>
               </div>
            </div>
         </div>
      </div>
      <el-dialog
         v-model="state.isAnnouncementDialog"
         width="500"
@@ -53,6 +25,28 @@
            </p>
         </template>
      </el-dialog>
   </div>
   <div class="notice" v-if="!isSharePage">
      <el-badge :value="`${state.announcementList.length}`">
         <el-button link size="small" icon="ele-Message" class="set-notice" @click="handleAnnouncementClick">系统公告</el-button>
      </el-badge>
      <div class="notice_box notice_box_show" v-show="state.isShowAnnouncement">
         <div class="notice_box_header">
            <span>最新公告</span>
         </div>
         <div class="notice_box_body">
            <div class="notice_item" v-for="item in state.announcementList" :key="item.notify_id" @click="announcementContentClick(item)">
               <div class="flex items-center">
                  <p class="set-circle"></p>
                  <p>{{ item.notify_message }}</p>
               </div>
               <p class="text-right mr-[19px]">
                  <span>{{ item.notify_time }}</span>
               </p>
            </div>
         </div>
      </div>
   </div>
</template>
@@ -74,7 +68,7 @@
   res.messages?.forEach((element) => {
      element.notify_time = element.notify_time.slice(0, 10);
   });
   state.announcementList = res.messages?.sort(sortData).slice(0, 5) ??[];
   state.announcementList = res.messages?.sort(sortData).slice(0, 5) ?? [];
};
const routerMeta = computed(() => router.currentRoute.value.meta);
const handleAnnouncementClick = () => {
@@ -114,13 +108,14 @@
   position: fixed;
   top: 18px;
   right: 30px;
   z-index: 12;
   z-index: 1;
   .set-notice {
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 17.38px;
      color: #9598b3;
      z-index: 0;
   }
   .notice_box_show {
      width: 300px !important;
@@ -135,7 +130,7 @@
   }
   .notice_box {
      position: absolute;
      z-index: 12;
      z-index: 1;
      top: calc(100% + 20px);
      right: -10px;
      width: 0;