报警组件

src/app/components/alarm-bar/alarm-bar.component.html

@@ -2,7 +2,8 @@
     <Icon [type]="'voice'" class="alarmLeftIcon"></Icon>
     <div class="alarmShows">
         <div class="alarmItem" *ngFor="let one of options;let i = index"
-             [ngClass]="{'active' : active === i, 'unActive': active !== i}">{{one.a}}</div>
-        <div>{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
+             [ngClass]="{'active' : active === i, 'unActive': active !== i}">{{one.a}}
+            <div class="alarmTime">{{one.time | date: 'yyyy-MM-dd HH:mm:ss'}}</div>
+        </div>
     </div>
 </div>

src/app/components/alarm-bar/alarm-bar.component.scss

@@ -5,13 +5,13 @@
 }
 
 .alarmLeftIcon {
-  color: #f98e55;
+  color: #ff0000;
   height: 20px;
   width: 20px;
   display: inline-flex;
   text-align: center;
-  padding: 0 5px 0 15px;
-  vertical-align: middle;
+  padding: 7px 5px 0 15px;
+  vertical-align: top;
 }
 
 .alarmShows {
@@ -25,64 +25,83 @@
 
 .alarmItem {
   width: 100%;
+  color: #ff0000;
+  font-size: 12px;
+  height: auto;
 }
 
 .alarmItem.active {
   display: block;
-  -webkit-animation: slideIn .2s forwards;
-  animation: slideIn .2s forwards;
+  -webkit-animation: slideIn 1s forwards;
+  animation: slideIn 1s forwards;
 }
 
 .alarmItem.unActive {
   display: none;
-  -webkit-animation: slideOut .2s forwards;
-  animation: slideOut .2s forwards;
+  -webkit-animation: slideOut 1s forwards;
+  animation: slideOut 1s forwards;
+}
+
+.alarmTime {
+  text-align: right;
+  padding-right: 10px;
+  color: #ff0000;
+  font-size: 12px;
+  padding-top: 5px;
 }
 
 @-webkit-keyframes slideIn {
   from {
     -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0)
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
   }
 
   to {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 }
 
 @keyframes slideIn {
   from {
     -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0)
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
   }
 
   to {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 }
 
 @-webkit-keyframes slideOut {
   from {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 
   to {
     -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0)
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
   }
 }
 
 @keyframes slideOut {
   from {
     -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 
   to {
     -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0)
+    transform: translate3d(0, 100%, 0);
+    opacity: 0;
   }
 }

src/app/components/alarm-bar/alarm-bar.component.ts

@@ -26,7 +26,7 @@ export class AlarmBarComponent implements OnInit {
                 this.active++;
             }
             this.changeAlarm();
-        }, 2000);
+        }, 3000);
     }
 
     ngOnInit() {