菜单初始化

src/assets/font/font.css

@@ -0,0 +1,30 @@
+@font-face {
+    font-family: "clockFont";
+    src: url('alarm clock.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DS1Font";
+    src: url('DS-DIGI-1.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DS2Font";
+    src: url('DS-DIGIB-2.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DS3Font";
+    src: url('DS-DIGII-3.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "DS4Font";
+    src: url('DS-DIGIT-4.ttf');
+    font-weight: normal;
+    font-style: normal;
+  }

src/layout/components/SideBar/Logo.vue

@@ -33,6 +33,7 @@ export default {
        height: 2.5rem;
        margin-top: 1.25rem;
        margin-left: 1.67rem;
+       vertical-align: middle;
     }
 }
 </style>

src/layout/components/SideBar/SidebarItem.vue

@@ -0,0 +1,29 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ScdProjectSidebarItem',
+
+    data() {
+        return {
+            
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/components/SideBar/Title.vue

@@ -35,7 +35,7 @@ export default {
         font-size: 1.6rem;
         font-weight: 600;
         color: #09162C;
-        margin: 0.8rem 0 0 1rem;
+        margin-top: 0.8rem;
     }
     .companyBox{
         display: flex;
@@ -44,7 +44,8 @@ export default {
         font-size: 1.2rem;
         font-weight: 700;
         max-width: 24%;
-        margin: 0 1rem;
+        // margin: 0 1rem;
+        margin-right: 1rem;
     }
 
 }

src/layout/components/SideBar/UserIcon.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="header_user_container">
+    <!-- 菜单 -->
+    <el-menu
+      :default-active="'/'"
+      :unique-opened="true"
+      :active-text-color="'#134BEA'"
+      :collapse-transition="false"
+      mode="horizontal"
+      class="header_menu"
+    >
+    <!-- #TODO 目前写死 后面再改 -->
+      <!-- 根据 sidebarRouters 路由，生成菜单 -->
+      <!-- <sidebar-item
+            v-for="(route, index) in sidebarRouters"
+            :key="route.path  + index"
+            :item="route"
+            :base-path="route.path"
+            /> -->
+      <el-menu-item index="/">
+        <i class="el-icon-menu"></i>
+        <span slot="title">网络结构图</span>
+      </el-menu-item>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">SCD可视化</span>
+      </el-menu-item>
+      <el-menu-item index="3">
+        <i class="el-icon-menu"></i>
+        <span slot="title">签入签出</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-menu"></i>
+        <span slot="title">统计分析</span>
+      </el-menu-item>
+      <el-menu-item index="5">
+        <i class="el-icon-menu"></i>
+        <span slot="title">管理后台</span>
+      </el-menu-item>
+    </el-menu>
+    <div class="header_user_line">|</div>
+    <!-- 时间 -->
+    <div class="time_box">
+        <!-- #TODO 动态获取实时变化 -->
+      <span class="time_day">2023-08-09</span>
+      <span class="time_weekday">星期三</span>
+      <span class="time_date">14:20:22</span>
+    </div>
+    <div class="header_user_line">|</div>
+    <!-- 图标 -->
+    <div class="icon_box">
+      <i class="el-icon-message-solid"></i>
+      <div class="header_user_line">/</div>
+      <i class="el-icon-user-solid"></i>
+      <span>username</span>
+      <div class="header_user_line">/</div>
+      <i class="el-icon-switch-button" style="margin-right:2rem"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.header_user_container {
+  display: flex;
+  align-items: center;
+  .time_box {
+    display: flex;
+    align-items: center;
+    cursor: default;
+    font-size: 1.4rem;
+    color: #516380;
+    .time_day {
+      font-family: DS4Font;
+      // width: 8rem;
+    }
+    .time_weekday {
+      margin: 0 1rem;
+    }
+    .time_date {
+      font-family: DS4Font;
+      margin-right: 2rem;
+    }
+  }
+  .icon_box {
+    display: flex;
+    align-items: center;
+    i {
+      font-size: 1.8rem;
+      color: #00cefb;
+    }
+    span{
+        font-size: 1.4rem;
+        color: #516380;
+    }
+    .header_user_line {
+      font-size: 1.33rem;
+      margin: 0 2rem;
+      color: #7A13E1;
+      cursor: pointer;
+    }
+  }
+}
+.header_menu {
+  height: 48px;
+}
+.header_user_line {
+  font-size: 1.33rem;
+  margin-right: 2rem;
+  color: #7A13E1;
+  cursor: pointer;
+}
+::v-deep .el-menu-item {
+  height: 48px !important;
+  font-size: 1.33rem;
+  line-height: 48px !important;
+}
+::v-deep .is-active {
+  border-bottom: 4px solid #134bea !important;
+}
+</style>

src/layout/components/SideBar/index.vue

@@ -1,38 +1,42 @@
 <template>
-    <div class="nav">
-        <Logo></Logo>
-        <Title></Title>
+  <div class="nav">
+    <div class="left_box">
+      <Logo></Logo>
+      <Title></Title>
     </div>
+    <div>
+      <UserIcon></UserIcon>
+    </div>
+  </div>
 </template>
 
 <script>
-import Logo from "./Logo"
-import Title from "./Title"
+import Logo from "./Logo";
+import Title from "./Title";
+import UserIcon from "./UserIcon";
 export default {
-    name: 'SideBar',
-    components:{Logo,Title},
+  name: "SideBar",
+  components: { Logo, Title, UserIcon },
 
-    data() {
-        return {
-            
-        };
-    },
+  data() {
+    return {};
+  },
 
-    mounted() {
-        
-    },
+  mounted() {},
 
-    methods: {
-        
-    },
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
-.nav{
-    width: 100vw;
-    height: 48px;
-    background-color: #fff;
+.nav {
+  width: 100vw;
+  height: 48px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  .left_box {
     display: flex;
+  }
 }
 </style>

src/main.js

@@ -6,6 +6,9 @@ import store from './store'
 
 import '@/styles/index.scss' // global css
 
+//引入字体
+import '@/assets/font/font.css'
+
 //引用Elementui组件
 import ElementUI from 'element-ui';
 //导入elementui样式