examSystem-Anxin/src/app/navigation/navigation.component.html

<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-12-10 10:21:40
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-12-14 17:03:11
-->

<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">
          <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-index']" routerLinkActive="clickStyle">
              <img src="../../assets/images/found.png" style="background-color: #fff;"><label>创建考试</label>
            </li>
            <li [routerLink]="['/home/mark-papers-index']" routerLinkActive="clickStyle">
              <img src="../../assets/images/papers.png" style="background-color: #07CDCF;"><label>阅卷</label>
            </li>
            <li [routerLink]="['/home/createexam-index3']" routerLinkActive="clickStyle">
              <img src="../../assets/images/Statistics.png" style="background-color: #07CDCF;"><label>统计分析</label>
            </li>
          </ul>
          <img style="width: 191px;height: 113px; position: absolute; bottom: 0;" src="../../assets/images/backbottom.png">
        </div>

  </mat-sidenav>

  <div class="example-sidenav-content">
    <div style="height: 60px; min-height: 60px;">
      <app-tabbar (toggleDarkTheme)="switchTheme($event)" (defaulttheme)="defaulttheme()" (redtheme)="redtheme()"></app-tabbar>
    </div>
    <div style="flex: 1; overflow: hidden;">
      <router-outlet></router-outlet>
    </div>
  </div>

</mat-sidenav-container>