feat: update

src/app/termpage/termpage.component.css

@@ -31,3 +31,7 @@
   padding-bottom: 16px !important;
   font-family: 'Monaco', iosevka !important;
 }
+
+button{
+  width: 40px;
+}

src/app/termpage/termpage.component.html

 <span id="liuzheng">liuzheng</span>
-<i class="fa fa-backward" aria-hidden="true"></i>
-<i class="fa fa-play" aria-hidden="true"></i>
-<i class="fa fa-stop" aria-hidden="true"></i>
-<i class="fa fa-pause" aria-hidden="true"></i>
-<i class="fa fa-forward" aria-hidden="true"></i>
+<button type="button" class="btn">
+  <i class="fa fa-stop" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-step-backward" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-backward" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn" (click)="play()">
+  <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':playing,'fa-pause': !playing}"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-forward" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-step-forward" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-expand" aria-hidden="true"></i>
+</button>
+<button type="button" class="btn">
+  <i class="fa fa-compress" aria-hidden="true"></i>
+</button>
+
 <div id="term"></div>

src/app/termpage/termpage.component.ts

@@ -12,6 +12,8 @@ declare let Terminal: any;
   styleUrls: ['./termpage.component.css']
 })
 export class TermpageComponent implements OnInit {
+  playing: boolean;
+
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;
   }
@@ -54,4 +56,8 @@ export class TermpageComponent implements OnInit {
 
   }
 
+  play() {
+    this.playing = !this.playing;
+  }
+
 }