toast 大屏样式调整

src/components/toast/Toast.vue

@@ -1,7 +1,7 @@
 <template>
   <transition
-    enter-active-class="fadeIn"
-    leave-active-class="fadeOut"
+    enter-active-class="toast-in"
+    leave-active-class="toast-out"
     @after-leave="$emit('closed')"
   >
     <div
@@ -81,6 +81,13 @@ watch(() => props.message, reset)
   border-radius: 12px;
   z-index: 9999;
 
+  @include media-breakpoint-up(md) {
+    top: 15%;
+    transform: translate(-50%, 0);
+    background-color: #dbe8ff;
+    color: $primary-color;
+  }
+
   &--loading {
     padding: 56px 24px 40px;
   }
@@ -97,4 +104,21 @@ watch(() => props.message, reset)
     }
   }
 }
+
+.toast-in {
+  animation: fadeIn 0.3s;
+  @include media-breakpoint-up(md) {
+    animation: slideFadeIn 0.3s;
+  }
+}
+.toast-out {
+  animation: fadeOut 0.3s forwards;
+}
+
+@keyframes slideFadeIn {
+  0% {
+    transform: translate(-50%, -40px);
+    opacity: 0;
+  }
+}
 </style>