From 5bcda7181ef01fbf880b2f93fd1db8a6518504d2 Mon Sep 17 00:00:00 2001
From: zhouyuejun <505127606@qq.com>
Date: Wed, 23 Jan 2019 11:44:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B6=88=E6=81=AF=E9=80=9A=E7=9F=A5=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA=E6=A1=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/toast/toast-box.component.html |  2 +-
 .../components/toast/toast-box.component.scss | 13 +++-
 .../components/toast/toast-box.component.ts   | 18 ++---
 src/app/components/toast/toast.component.scss |  3 +
 src/app/pages/main/main.component.scss        |  1 +
 src/index.html                                | 70 -------------------
 6 files changed, 19 insertions(+), 88 deletions(-)

diff --git a/src/app/components/toast/toast-box.component.html b/src/app/components/toast/toast-box.component.html
index b938517..9959f6e 100644
--- a/src/app/components/toast/toast-box.component.html
+++ b/src/app/components/toast/toast-box.component.html
@@ -1,5 +1,5 @@
 <div class="toast-container"  [ngClass]="toastPosition">
-    <div *ngFor="let toastCfg of getToastConfigs()" [@animation]="toastAnimation">
+    <div class="toast-list" *ngFor="let toastCfg of getToastConfigs()" [@animation]="toastAnimation">
         <toast [config]="toastCfg" (dismissed)="remove(toastCfg)"></toast>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/toast/toast-box.component.scss b/src/app/components/toast/toast-box.component.scss
index 7b70b83..0517a95 100644
--- a/src/app/components/toast/toast-box.component.scss
+++ b/src/app/components/toast/toast-box.component.scss
@@ -1,10 +1,10 @@
 .toast-container {
     position: absolute;
     z-index: 22222;
-    margin-top:10px;
+    // margin-top:10px;
     width:450px;
-    height: 174px;
-    overflow: hidden
+    // height: 174px;
+    // overflow: hidden
   }
 
   .toast-top-left{
@@ -34,5 +34,12 @@
     left: 10px;
     bottom:0;
   }
+  .toast-list{
+    height: 100px;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   
   
\ No newline at end of file
diff --git a/src/app/components/toast/toast-box.component.ts b/src/app/components/toast/toast-box.component.ts
index 6e645ad..2a60431 100644
--- a/src/app/components/toast/toast-box.component.ts
+++ b/src/app/components/toast/toast-box.component.ts
@@ -13,22 +13,12 @@ import {ToastConfig} from './toast-model';
   styleUrls:['./toast-box.component.scss'],
   animations: [
     trigger('animation', [
-      state('none', style({})),
-      state('decent', style([{opacity: 1}, {maxWidth: 450}])),
-      state('fancy', style([{transform: 'translateX(0)'},{transform: 'translateY(0)'}, {opacity: 1}, {maxWidth: 450}])),
       transition('void => fancy', [
-        style({opacity: 0, maxWidth: 450, transform: 'translateX(100%)'}),
-        animate('1000ms ease-in-out')
+        style({opacity: 1, maxWidth: 450, transform: 'translateX(100%)'}),
+        animate('500ms ease-in-out')
       ]),
       transition('fancy => void', [
-        animate('1000ms ease-in-out', style({transform: 'translateX(100%)', height: 0, opacity: 0}))
-      ]),
-      transition('void => decent', [
-        style({opacity: 0, maxWidth: 0}),
-        animate('1000ms ease-in-out')
-      ]),
-      transition('decent => void', [
-        animate('1000ms ease-in-out', style({width: 0, opacity: 0}))
+        animate('500ms ease-in-out', style({transform: 'translateX(100%)'}))
       ])
     ])
   ]
@@ -41,7 +31,7 @@ export class ToastBoxComponent implements OnInit {
 
   constructor(private toastService: ToastService) { 
       this.toastService.getToasts().forEach((config: ToastConfig) => {
-         this.toastConfigs.unshift(config);
+         this.toastConfigs.push(config);
       });
   }
 
diff --git a/src/app/components/toast/toast.component.scss b/src/app/components/toast/toast.component.scss
index 04e88c1..b895ca8 100644
--- a/src/app/components/toast/toast.component.scss
+++ b/src/app/components/toast/toast.component.scss
@@ -5,5 +5,8 @@
     -moz-box-shadow: 1px 1px 3px rgba(100, 100, 100, 0.3);
     border-radius: 20px;
  }
+ .c-toast{
+     height: 100%;
+ }
 
 
diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss
index 022eabb..e88bd8c 100644
--- a/src/app/pages/main/main.component.scss
+++ b/src/app/pages/main/main.component.scss
@@ -3,6 +3,7 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 15px 10px;
     background-color: #fff;
     .page-content {
diff --git a/src/index.html b/src/index.html
index 42ba1a7..1cd3dee 100644
--- a/src/index.html
+++ b/src/index.html
@@ -47,80 +47,10 @@
                 transform: rotate(1turn)
             }
         }
-
-        /* .spin-container {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 1003;
-                display: none;
-            }
-    
-            .spin-container .spin1 {
-                display: block;
-                position: relative;
-                left: calc(50% + 15px);
-                top: calc(50% - 75px);
-                width: 150px;
-                height: 150px;
-                margin: -75px 0 0 -75px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #f95372;
-                transform: translateZ(0);
-                animation: spin 2s linear infinite
-            }
-    
-            .spin-container .spin2 {
-                content: "";
-                position: absolute;
-                top: 5px;
-                left: 5px;
-                right: 5px;
-                bottom: 5px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #00abff;
-                -webkit-animation: spin 3s linear infinite;
-                animation: spin 3s linear infinite
-            }
-    
-            .spin-container .spin3 {
-                content: "";
-                position: absolute;
-                top: 15px;
-                left: 15px;
-                right: 15px;
-                bottom: 15px;
-                border-radius: 50%;
-                border: 4px solid transparent;
-                border-top-color: #e7ba08;
-                animation: spin 1.5s linear infinite
-            } */
     </style>
 </head>
 
 <body>
-    <!-- <div class="spin-container" id="pageSpin">
-        <div class="spin1">
-            <div class="spin2"></div>
-            <div class="spin3"></div>
-        </div>
-    </div> -->
-    <!-- <script type="text/javascript">
-        const initialize = function () {
-            let pageSpin = document.getElementById("pageSpin");
-            pageSpin.style.display = 'block';
-            document.onreadystatechange = function () {
-                if (document.readyState == "complete") {
-                    pageSpin.style.display = 'none';
-                }
-            }
-        }
-        initialize();
-    </script> -->
     <app-root></app-root>
 </body>