build: 导航样式

src/components/Breadcrumb/index.vue

@@ -1,12 +1,11 @@
 <template>
-  <el-breadcrumb class="h-[50px] flex items-center">
+  <el-breadcrumb class="h-[70px] flex items-center">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
         <span
           v-if="
             item.redirect === 'noredirect' || index === breadcrumbs.length - 1
           "
-          class="text-[var(--el-disabled-text-color)]"
           >{{ item.meta.title }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
@@ -88,10 +87,12 @@ onBeforeMount(() => {
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   margin-left: 8px;
-  font-size: 14px;
-  line-height: 50px;
+  font-size: 18px;
+  line-height: 70px;
+}
+.items-center span {
+  font-size: 16px;
 }
-
 // 覆盖 element-plus 的样式
 .el-breadcrumb__inner,
 .el-breadcrumb__inner a {

src/components/Hamburger/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="px-[15px] hover:bg-gray-50 cursor-pointer h-[50px] leading-[50px]"
+    class="px-[18px] hover:bg-gray-50 cursor-pointer h-[70px] leading-[70px]"
     @click="toggleClick"
   >
     <svg
@@ -35,9 +35,9 @@ function toggleClick() {
 
 <style lang="scss" scoped>
 .hamburger {
-  width: 20px;
-  height: 20px;
-  vertical-align: -4px;
+  width: 24px;
+  height: 24px;
+  vertical-align: -8px;
   &.is-active {
     transform: rotate(180deg);
   }

src/layout/components/Navbar.vue

@@ -7,6 +7,7 @@ import { useUserStore } from "@/store/modules/user";
 import { SchoolList } from "@/api/school/types";
 import { getSchoolList } from "@/api/school";
 import { watch } from "vue";
+import SvgIcon from "@/components/SvgIcon/index.vue";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -49,12 +50,12 @@ function logout() {
  */
 const schoolData = ref<SchoolList[]>([
   {
-    school_id: 1,
+    school_id: 0,
     name: "全部学校",
   },
   {
-    school_id: 2,
-    name: "全部学校2",
+    school_id: 1,
+    name: "学校1",
   },
 ]);
 const schoolNumber = ref(0);
@@ -90,46 +91,36 @@ watch(
       />
       <breadcrumb />
     </div>
-    <!-- 学校选择下拉框 -->
-    <div class="flex">
-      <el-select v-model="schoolNumber" class="m-2" placeholder="全部学校">
-        <el-option
-          v-for="item in schoolData"
-          :key="item.school_id"
-          :label="item.name"
-          :value="item.school_id"
-        />
-      </el-select>
-    </div>
     <!-- 右侧导航设置 -->
     <div class="flex">
       <!-- 导航栏设置(窄屏隐藏)-->
       <div v-if="device !== 'mobile'" class="setting-container">
         <!--全屏 -->
         <div class="setting-item" @click="toggle">
-          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"/>
+          <svg-icon
+            :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
+            size="16px"
+          />
         </div>
       </div>
+      <!-- 学校选择下拉框 -->
+      <el-select v-model="schoolNumber" size="large" placeholder="全部学校">
+        <el-option
+          v-for="item in schoolData"
+          :key="item.school_id"
+          :label="item.name"
+          :value="item.school_id"
+        />
+      </el-select>
       <!-- 用户头像 -->
-      <el-dropdown trigger="click">
-        <div class="avatar-container">
-          <span class="ml-[10px] text-[16px]">
-            {{ userStore.nickname }}
-          </span>
-          <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
-          <i-ep-caret-bottom class="w-3 h-3" />
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <router-link to="/">
-              <el-dropdown-item>首页</el-dropdown-item>
-            </router-link>
-            <el-dropdown-item divided @click="logout"
-              >退出登录</el-dropdown-item
-            >
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      <div class="avatar-container">
+        <span class="spl">|</span>
+        <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
+        <span class="">{{ userStore.nickname }}</span>
+        <span @click="logout"
+          ><svg-icon icon-class="exit" color="#006eff" size="20px"
+        /></span>
+      </div>
     </div>
   </div>
 </template>
@@ -139,7 +130,7 @@ watch(
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 50px;
+  height: 70px;
   background-color: #fff;
   box-shadow: 0 0 1px #0003;
 
@@ -150,8 +141,8 @@ watch(
     .setting-item {
       display: inline-block;
       width: 30px;
-      height: 50px;
-      line-height: 50px;
+      height: 70px;
+      line-height: 70px;
       color: #5a5e66;
       text-align: center;
       cursor: pointer;
@@ -161,19 +152,33 @@ watch(
       }
     }
   }
-
+  .el-select {
+    padding: 15px 0;
+    margin-left: 12px;
+  }
   .avatar-container {
     display: flex;
     align-items: center;
     justify-items: center;
-    margin: 0 5px;
+    margin: 0 20px 0 0;
     cursor: pointer;
-
     img {
       width: 40px;
       height: 40px;
-      border-radius: 5px;
+      border-radius: 20px;
     }
+    span {
+      margin-left: 12px;
+      font-size: 16px;
+      color: #494949;
+      &.spl {
+        margin: 0 12px 0 12px;
+        color: #d7d8d8;
+      }
+    }
+  }
+  .svg-icon {
+    margin-bottom: -2px;
   }
 }
 </style>