框架搭建

src/layout/components/SideBar/Logo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="header_logo_container">
-        
+        <img src="../../../assets/logo.jpg" alt="">
     </div>
 </template>
 
@@ -26,10 +26,13 @@ export default {
 
 <style lang="scss" scoped>
 .header_logo_container{
-    margin-left: 20px;
-    padding: 10px 0;
-    width: 112px;
+    width: 13rem;
     height: 100%;
-    background-color: #ccc;
+    // background-color: #ccc;
+    img{
+       height: 2.5rem;
+       margin-top: 1.25rem;
+       margin-left: 1.67rem;
+    }
 }
 </style>

src/layout/components/SideBar/Title.vue

@@ -1,5 +1,10 @@
 <template>
-    <div>
+    <div class="header_title_container">
+        <div class="titleFont">SCD文档管理系统</div>
+        <div class="companyBox">
+            <div class="company_name">xxx公司</div>
+            <div class="scd_name">四川西昌110kV安宁变20210825.scd</div>
+        </div>
         
     </div>
 </template>
@@ -24,5 +29,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.header_title_container{
+    height: 100%;
+    .titleFont{
+        font-size: 1.6rem;
+        font-weight: 600;
+        color: #09162C;
+        margin: 0.8rem 0 0 1rem;
+    }
+    .companyBox{
+        display: flex;
+    }
+    .company_name{
+        font-size: 1.2rem;
+        font-weight: 700;
+        max-width: 24%;
+        margin: 0 1rem;
+    }
+
+}
 
 </style>

src/layout/components/SideBar/index.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="nav">
         <Logo></Logo>
+        <Title></Title>
     </div>
 </template>
 
 <script>
 import Logo from "./Logo"
+import Title from "./Title"
 export default {
     name: 'SideBar',
-    components:{Logo},
+    components:{Logo,Title},
 
     data() {
         return {
@@ -31,5 +33,6 @@ export default {
     width: 100vw;
     height: 48px;
     background-color: #fff;
+    display: flex;
 }
 </style>

src/styles/index.scss

@@ -13,6 +13,7 @@ body {
   
   html {
     height: 100%;
+    font-size: 10px;
     box-sizing: border-box;
   }