loading组件

src/components/QuoteLoader/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="loader">
+    <i style="color: #d42426" class="el-icon-loading"></i>
+    <p class="text">
+      <span class="letter letter1">掌</span>
+      <span class="letter letter2">柜</span>
+      <span class="letter letter3">正</span>
+      <span class="letter letter4">在</span>
+      <span class="letter letter5">为</span>
+      <span class="letter letter6">您</span>
+      <span class="letter letter7">报</span>
+      <span class="letter letter8">价</span>
+      <span class="letter letter9">.</span>
+      <span class="letter letter10">.</span>
+      <span class="letter letter11">.</span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'QuoteLoader'
+}
+</script>
+
+<style scoped>
+.loader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .text {
+    margin: 10px 0 0 0;
+    line-height: 24px;
+    color: red;
+    font-weight: bolder;
+    background: -webkit-linear-gradient(45deg, orange, orangered);
+    background: linear-gradient(45deg, orange, orangered);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    color: transparent;
+    font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
+  }
+
+  @keyframes letter {
+    0% {
+      font-size: 14px;
+    }
+
+    50% {
+      font-size: 15px;
+    }
+
+    100% {
+      font-size: 14px;
+    }
+  }
+
+  .letter {
+    animation: letter 1s infinite;
+  }
+
+  .letter1 {
+    animation-delay: 0s;
+  }
+
+  .letter2 {
+    animation-delay: -0.9s;
+  }
+
+  .letter3 {
+    animation-delay: -0.8s;
+  }
+
+  .letter4 {
+    animation-delay: -0.7s;
+  }
+
+  .letter5 {
+    animation-delay: -0.6s;
+  }
+
+  .letter6 {
+    animation-delay: -0.5s;
+  }
+
+  .letter7 {
+    animation-delay: -0.4s;
+  }
+
+  .letter8 {
+    animation-delay: -0.3s;
+  }
+
+  .letter9 {
+    animation-delay: -0.2s;
+  }
+
+  .letter10 {
+    animation-delay: -0.1s;
+  }
+
+  .letter11 {
+    animation-delay: 0s;
+  }
+}
+</style>

src/types/components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     PageMain: typeof import('./../components/PageMain/index.vue')['default']
     PaginationWrapper: typeof import('./../components/PaginationWrapper/index.vue')['default']
     PcasCascader: typeof import('./../components/PcasCascader/index.vue')['default']
+    QuoteLoader: typeof import('./../components/QuoteLoader/index.vue')['default']
     RegisterForm: typeof import('./../components/RegisterForm/index.vue')['default']
     ResetPasswordForm: typeof import('./../components/ResetPasswordForm/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']