[修改]左侧和头部菜单栏样式修改

src/app/examiner/examiner-index/examiner-index.component.html

@@ -0,0 +1 @@
+<p>examiner-index works!</p>

src/app/examiner/examiner-index/examiner-index.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExaminerIndexComponent } from './examiner-index.component';
+
+describe('ExaminerIndexComponent', () => {
+  let component: ExaminerIndexComponent;
+  let fixture: ComponentFixture<ExaminerIndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExaminerIndexComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExaminerIndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/examiner/examiner-index/examiner-index.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-examiner-index',
+  templateUrl: './examiner-index.component.html',
+  styleUrls: ['./examiner-index.component.scss']
+})
+export class ExaminerIndexComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/examiner/examiner-routing.ts

@@ -1,8 +1,18 @@
+/*
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-12-10 12:11:26
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-12-11 09:15:24
+ */
 import { Routes, RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
+import { ExaminerIndexComponent } from './examiner-index/examiner-index.component'
 
 const routes: Routes = [
     // { path: '', component:CreateExamComponent }
+    { path: 'createexam-index', component:ExaminerIndexComponent }
 
 ]
 @NgModule({

src/app/examiner/examiner.module.ts

@@ -47,9 +47,10 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { myPaginator } from '../ui/my-paginator';
+import { ExaminerIndexComponent } from './examiner-index/examiner-index.component';
 
 @NgModule({
-  declarations: [],
+  declarations: [ExaminerIndexComponent],
   imports: [
     CommonModule,
     examinerRoutingModule,

src/app/navigation/navigation.component.html

@@ -1,19 +1,34 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-12-10 10:21:40
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-12-11 09:51:16
+-->
 
 <mat-sidenav-container class="example-container" autosize [class.myapp-dark-theme]="darktheme">
     <mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;">
+        <div class="backtopleft">
+            <img src="../../assets/images/backleft.png" style="height: 60px;width: 93px;">
+        </div>
         <div class="biglogobox">
-            <img src="../../assets/images/logo.png" alt="logo">
+            <div class="biglogoimg">
+                <img src="../../assets/images/logo.png" alt="logo">
+            </div>
+            <div class="biglogospan">
+                <div class="top"><span style="font-size: 22px;font-weight: 800;margin-left: 3px;">上海消防救援</span></div>
+                <div class="down"><span style="font-size: 4px;font-weight: 400;width: 125px;">shanghai fire and rescue</span></div>
+            </div>
+            
         </div>
         <div class="navbox">
             <ul class="teacher">
-                <li [routerLink]="['/home/createexam']" routerLinkActive="router-link-active" >创建考试</li>
+                <li   [routerLink]="['/home/createexam']" routerLinkActive="router-link-active" ><div  (click)="clickLeftmenu('found')" [ngClass]="{'clickStyle': leftMenuname=='found'}"><img src="../../assets/images/found.png" style="background-color: #FFFFFF;"> 创建考试</div></li>
-                <li [routerLink]="['/home/looktest']" routerLinkActive="router-link-active" >阅卷</li>
+                <li   [routerLink]="['/home/looktest']" routerLinkActive="router-link-active" ><div (click)="clickLeftmenu('papers')" [ngClass]="{'clickStyle': leftMenuname=='papers'}"><img src="../../assets/images/papers.png" style="position: relative;right: 20px;background-color: #07CDCF;"> 阅卷</div></li>
-                <li [routerLink]="['/home/statisticAnalysis']" routerLinkActive="router-link-active" >统计分析</li>
+                <li   [routerLink]="['/home/statisticAnalysis']" routerLinkActive="router-link-active" ><div (click)="clickLeftmenu('Statistics')" [ngClass]="{'clickStyle': leftMenuname=='Statistics'}"><img src="../../assets/images/Statistics.png" style="background-color: #07CDCF;"> 统计分析</div></li>
-            </ul>
-            <ul class="student">
-                <li [routerLink]="['/home/joinExam']" routerLinkActive="router-link-active" >参加考试</li>
-                <li [routerLink]="['/home/testRecords']" routerLinkActive="router-link-active" >考试记录</li>
             </ul>
+            <img style="width: 191px;height: 113px; position: absolute; bottom: 0;" src="../../assets/images/backbottom.png">
         </div>
 
        

src/app/navigation/navigation.component.scss

@@ -9,8 +9,9 @@ mat-accordion{
 mat-sidenav{
     box-shadow: 2px 0px 5px #888888;
     color: white;
-    background: url(../../assets/images/main_bg.png) 100% 100%;
+    //background: url(../../assets/images/main_bg.png) 100% 100%;
-    width: 194px;
+    background-color: #07CDCF;
+    width: 216px;
     overflow-x: hidden;
     p{
         height: 48px; 
@@ -91,13 +92,26 @@ mat-sidenav{
         overflow-y: scroll;
         font-size: 15px;
         .router-link-active{
-            background-color: #5d9cf2;
+            background-color: #FFFFFF;
         }
         ul{
             li{
+                width: 198px;
+                height: 44px;
+                line-height:44px;
+                font-size: 20px;
+                margin-left: 10px;
+                margin-top: 30px;
                 position: relative;
                 text-align: center;
-                border-bottom: 1px solid #326db1;
+                outline:none;
+                
+            }
+            img{
+                position: relative;
+                top: 2px;
+                width: 18px;
+                height: 20px;
             }
         }
    }
@@ -109,7 +123,7 @@ mat-sidenav{
        }
        ul li{
            background-color: white;
-           color: black;
+           //color: black;
        }
        .biglogobox{
             background-color: #d50000;
@@ -118,20 +132,33 @@ mat-sidenav{
         color: black;
    }
    .biglogobox{
-       width: 194px;
+       width: 220px;
-       height: 148px;
+       height: 56px;
-       background-color: #4699f6;
        display: block;
        text-align: center;
-       position: relative;
+       display: flex;
-       left: 0;
-       margin-bottom: 20px;
        color: #FFF;
        margin: 0 auto;
-       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+       .biglogoimg{
+           margin-left: 20px;
+           height: 40px;
+           width: 36px;
+       }
+       .biglogospan{
+        display: flex;
+        flex-direction: column;
+        .down{
+            position: relative;
+            bottom: 7px;
+            width: 125px;
+            span{
+                white-space: nowrap;
+            }
+        }
+       }
        img{
-            width: 138px;
+            width: 32px;
-            height: 138px;
+            height: 34px;
             margin-top: 6px;
        }
    }
@@ -162,9 +189,9 @@ mat-sidenav{
         color: white;
     }
 
-.example-container .navbox .router-link-active {
+.example-container  .router-link-active {
     background-color: rgba(225,225,225,.5);
-    border:0
+    border-radius: 8px ;
 }
 .btn{
     text-align: center;
@@ -188,4 +215,15 @@ mat-sidenav{
   border-radius: 50%;
   border: 2px solid #fff;
   font-weight: 550;
+}
+//选中左侧菜单样式
+.clickStyle{
+    background-color: #FFFFFF;
+    border-radius: 8px ;
+    //border:1px solid #FFFFFF ;
+    color: #07CDCF;
+}
+//鼠标移入改变背景色
+.onmousbackcolor{
+    background-color: #FFFFFF;
 }

src/app/navigation/navigation.component.ts

@@ -23,6 +23,13 @@ export class NavigationComponent implements OnInit {
   selectedDataBank:any //当前选中的资料库
   hoverDataBank:any //当前鼠标移入的资料库
   isOneClick:boolean //是否第一次进入网页
+  leftMenuname=""
+
+  //左侧菜单点击事件
+  clickLeftmenu(name){
+    this.leftMenuname=name
+    console.log(this.leftMenuname)
+  }
 
   //支队级菜单
   detachmentMenus:any = [

src/app/tabbar/tabbar.component.html

@@ -1,30 +1,39 @@
-<mat-toolbar style="background-color: #3b8cff;">
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: sueRimn
+ * @Date: 2020-12-10 10:21:40
+ * @LastEditors: sueRimn
+ * @LastEditTime: 2020-12-10 19:47:19
+-->
+<mat-toolbar style="background-color:#FFFFFF;height: 60px;">
 
   <!-- <mat-toolbar> -->
-  <p style="color: white;border-bottom: 3px solid #fff;border-radius: 3px; font-size: 16px;padding: 0 4px;">考核系统</p>
+  <p>欢迎登录消防救援考核系统</p>
 
   <!-- 未登录状态 -->
   <!-- <button mat-icon-button class="login" *ngIf="!isLogin.isLogin" (click)='login()'>
     <mat-icon>account_circle</mat-icon>
   </button> -->
 
-  <span style="position: absolute;right:100px;color: white;font-size: 16px;">欢迎您，{{realName}}</span>
+  
   <!-- 已登录状态 -->
-  <button mat-icon-button [matMenuTriggerFor]="appMenu" class="login">
+  <button mat-icon-button  class="login">
       <mat-icon>account_circle</mat-icon>
   </button>
+  <span  style="position: absolute;right:80px;color: #1E2323;font-size: 16px;">用户名：{{realName}}<mat-icon [matMenuTriggerFor]="appMenu" style="color: #1E2323;position: relative;top: 8px;cursor: pointer;">keyboard_arrow_down</mat-icon></span>
   <mat-menu #appMenu="matMenu">
     <!-- <button mat-menu-item (click)='changeUserData()'>
       <mat-icon>perm_identity</mat-icon>
       <span>修改资料</span>
     </button> -->
-    <button mat-menu-item (click)='changPassword()'>
+    <button mat-menu-item >
-      <mat-icon>verified_user</mat-icon>
+      <img style="width: 16px;height: 18px;position: relative;top: 2px;" src="../../assets/images/uppsd.png">
-      <span>修改密码</span>
+      <span style="margin-left: 5px;">修改密码</span>
     </button>
     <button mat-menu-item (click)='signOut()'>
-      <mat-icon>power_settings_new</mat-icon>
+      <img style="width: 16px;height: 18px;position: relative;top: 2px;" src="../../assets/images/sign.png">
-      <span>退出系统</span>
+      <span style="margin-left: 5px;">安全退出</span>
     </button>
   </mat-menu>
 

src/app/tabbar/tabbar.component.scss

@@ -8,5 +8,15 @@ mat-icon{
 }
 .login{
   position: absolute;
-  right:60px;
+  right:220px;
+  background-color: #000000;
+}
+p{
+  color:#1E2323;
+  border-bottom: 3px solid #fff;
+  border-radius: 3px; 
+  font-size: 25px;
+  padding: 0 4px;
+  font-weight: 400;
+  line-height: 34px;
 }