[完善]完善侧边导航栏

src/app/is-login.service.ts

@@ -8,5 +8,6 @@ export class IsLoginService {
   constructor() { }
 
   isLogin:boolean = false; //登录状态
+  xxx:any
 
 }

src/app/navigation/navigation.component.html

@@ -5,12 +5,19 @@
             <img src="../../assets/images/logo.png" alt="">
         </div>
         <div class="navbox">
-            <ul>
-                <li>启动培训系统</li>
-            </ul>
+            <div class="openSystem">
+                <span>启动培训系统</span>
+            </div>
             <div class="addBankBtn" (click)="addDataBank()">
                 <mat-icon>note_add</mat-icon> <span>新增资料库</span>
             </div>
+            <ul>
+                <li (click)="xxx('10086')">资料库1</li>
+                <li>资料库2</li>
+                <li>资料库3</li>
+                <li>资料库4</li>
+                <li>资料库5</li>
+            </ul>
         </div>
     </mat-sidenav>
 
@@ -20,7 +27,7 @@
 
     <div class="example-sidenav-content">
         <app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
-        <router-outlet></router-outlet>
+        <router-outlet ></router-outlet>
     </div>
 
 </mat-sidenav-container>

src/app/navigation/navigation.component.scss

@@ -2,8 +2,6 @@
 .example-container {
     width: 100%;
     height:100%;  
-    // border: 1px solid rgba(0, 0, 0, 0.5);
-    
 }
 mat-accordion{
     height: 100%;
@@ -11,8 +9,7 @@ mat-accordion{
 mat-sidenav{
     box-shadow: 2px 0px 5px #888888;
     color: white;
-    background-color: #49a6fb;
-    background-image: linear-gradient(#428ef2, #4cb1ff);
+    background: url(../../assets/images/main_bg.png) 100% 100%;
     width: 194px;
     overflow-x: hidden;
     p{
@@ -29,13 +26,15 @@ mat-sidenav{
             height: 48px;
             line-height: 48px;
             cursor: pointer;
-            background: white;
-            padding-left: 45px;
-            background-color: #3c4252;
             color: white;
+            width: 194px;
+            text-align: center;
+            overflow: hidden;
+            text-overflow:ellipsis;
+            white-space: nowrap;
         }
-        .superli{
-        padding-left: 66px;
+        li:hover{
+            background-color: #5d9cf2;
         }
     }
       
@@ -100,18 +99,26 @@ mat-sidenav{
             mat-icon{
                 // margin: 16px 0 0 6px;
                 position: absolute;
-                left: 30px;
+                left: 38px;
                 top: 7px;
             }
             span{
                 position: absolute;
-                left: 57px;
+                left: 66px;
                 font-size: 15px;
             }
         }
         .addBankBtn:hover{
             background-color: #5d9cf2;
         }
+        .openSystem{
+            cursor: pointer;
+            width: 194px;
+            height: 46px;
+            line-height: 46px;
+            text-align: center;
+            background-color: #3c4252;
+        }
    }
    mat-sidenav-container.myapp-dark-theme{
        background-color: #fafafa;

src/app/navigation/navigation.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit ,Inject} from '@angular/core';
-import {CacheTokenService} from '../http-interceptors/cache-token.service'//引入服务
+import { CacheTokenService } from '../http-interceptors/cache-token.service'//引入服务
 import { HttpClient } from '@angular/common/http';
-import {FormControl} from '@angular/forms';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+import { FormControl } from '@angular/forms';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
+import { IsLoginService } from '../is-login.service'
 @Component({
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
@@ -11,7 +12,7 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 })
 export class NavigationComponent implements OnInit {
   
-  constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar) { }
+  constructor(public navmenus:CacheTokenService,private http: HttpClient,public dialog: MatDialog,public snackBar: MatSnackBar,public sss:IsLoginService) { }
 
   ngOnInit() {
 
@@ -46,6 +47,9 @@ export class NavigationComponent implements OnInit {
       }
     );
   }
+  xxx(e){
+    this.sss.xxx = e
+  }
 }
 
 

src/app/ui/all-file/all-file.component.html

@@ -11,3 +11,11 @@
         </div>
     </div>
 </div>
+<div class="titlebox">
+    <div class="titleleft">
+        <span>全部文件</span>
+    </div>
+    <div class="titleright">
+        <span>已全部加载，共5个</span>
+    </div>
+</div>

src/app/ui/all-file/all-file.component.scss

@@ -55,3 +55,18 @@
         }
     }
 }
+.titlebox{
+    height: 30px;
+    line-height: 30px;
+    padding-left: 18px;
+    padding-right: 18px;
+    span{
+        font-size: 12px;
+    }
+    .titleleft{
+        float: left;
+    }
+    .titleright{
+        float: right;
+    }
+}

src/app/ui/all-file/all-file.component.ts

@@ -31,4 +31,9 @@ export class AllFileComponent implements OnInit {
     this.searchData = "搜索您的文件"
     this.isCancel = false
   }
+
+  ceshi(e){
+    alert()
+    
+  }
 }