优化topbar样式

src/components/Notice/Index.vue

@@ -1,35 +1,48 @@
 <template>
-  <div class="layout-navbars-breadcrumb-user-news">
-    <div class="head-box">
-      <div class="head-box-title">通知</div>
-      <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
-    </div>
-    <div class="content-box">
-      <template v-if="noticeList.length > 0">
-        <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
-          <div>{{ v.noticeTitle }}</div>
-          <div class="content-box-msg" v-html="v.noticeContent"></div>
-          <div class="content-box-time">{{ v.updateTime }}</div>
-        </div>
+  <div>
+    <el-popover placement="bottom" trigger="hover" width="400" popper-class="el-popover-pupop-user-news">
+      <template #reference>
+        <el-badge :is-dot="newsDot" style="line-height: 18px">
+          <el-icon><bell /></el-icon>
+        </el-badge>
       </template>
-      <div class="content-box-empty" v-else>
-        <div class="content-box-empty-margin">
-          <el-icon><Promotion /></el-icon>
-          <div class="mt15">全部已读</div>
+      <div class="layout-navbars-breadcrumb-user-news">
+        <div class="head-box">
+          <div class="head-box-title">通知</div>
+          <div class="head-box-btn" v-if="noticeList.length > 0" @click="onAllReadClick">全部已读</div>
         </div>
+        <div class="content-box">
+          <template v-if="noticeList.length > 0">
+            <div class="content-box-item" v-for="(v, k) in noticeList" :key="k">
+              <div>{{ v.noticeTitle }}</div>
+              <div class="content-box-msg" v-html="v.noticeContent"></div>
+              <div class="content-box-time">{{ v.updateTime }}</div>
+            </div>
+          </template>
+          <div class="content-box-empty" v-else>
+            <div class="content-box-empty-margin">
+              <el-icon><Promotion /></el-icon>
+              <div class="mt15">全部已读</div>
+            </div>
+          </div>
+        </div>
+        <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
       </div>
-    </div>
-    <div class="foot-box" @click="onGoToGiteeClick" v-if="noticeList.length > 0">前往通知中心</div>
+    </el-popover>
   </div>
 </template>
 
 <script setup name="noticeIndex">
 const { proxy } = getCurrentInstance()
+// 小红点
+const newsDot = ref(true)
+
 const noticeList = computed(() => {
   return proxy.$store.getters.noticeList
 })
 // 全部已读点击
 function onAllReadClick() {
+  newsDot.value = false
   proxy.$modal.msg('敬请期待！！！')
 }
 // 前往通知中心点击

src/components/SizeSelect/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
-    <el-dropdown trigger="click" @command="handleSetSize">
-      <div class="size-icon--style">
-        <svg-icon class-name="size-icon" icon-class="size" />
-      </div>
+    <el-dropdown trigger="hover" @command="handleSetSize" style="vertical-align: middle">
+      <svg-icon class-name="size-icon" icon-class="size" />
       <template #dropdown>
         <el-dropdown-menu>
           <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
@@ -16,40 +14,40 @@
 </template>
 
 <script setup>
-const store = useStore();
-const size = computed(() => store.getters.size);
-const route = useRoute();
-const router = useRouter();
-const { proxy } = getCurrentInstance();
+const store = useStore()
+const size = computed(() => store.getters.size)
+const route = useRoute()
+const router = useRouter()
+const { proxy } = getCurrentInstance()
 const sizeOptions = ref([
-  { label: "较大", value: "large" },
-  { label: "默认", value: "default" },
-  { label: "稍小", value: "small" },
-]);
+  { label: '较大', value: 'large' },
+  { label: '默认', value: 'default' },
+  { label: '稍小', value: 'small' },
+])
 
 function refreshView() {
   // In order to make the cached page re-rendered
-  store.dispatch("tagsView/delAllCachedViews", route);
+  store.dispatch('tagsView/delAllCachedViews', route)
 
-  const { fullPath } = route;
+  const { fullPath } = route
 
   nextTick(() => {
     router.replace({
-      path: "/redirect" + fullPath,
-    });
-  });
+      path: '/redirect' + fullPath,
+    })
+  })
 }
 function handleSetSize(size) {
-  proxy.$modal.loading("正在设置布局大小，请稍候...");
-  store.dispatch("app/setSize", size);
-  setTimeout("window.location.reload()", 1000);
+  proxy.$modal.loading('正在设置布局大小，请稍候...')
+  store.dispatch('app/setSize', size)
+  setTimeout('window.location.reload()', 1000)
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .size-icon--style {
   font-size: 18px;
   line-height: 50px;
   padding-right: 7px;
 }
-</style>
+</style>