From 71d9388c0f16a0e878fab4e935380f33835458f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=AD=A5=E5=B1=A5=E4=B8=8D=E5=81=9C?= <1873501479@qq.com>
Date: Tue, 9 Aug 2022 22:12:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E6=97=B6=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=95=8C=E9=9D=A2=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?3+=E5=BC=80=E5=B1=8F=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html   | 18 +++++------
 src/App.vue         | 15 +++++++--
 src/views/Login.vue | 78 +++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 96 insertions(+), 15 deletions(-)
diff --git a/public/index.html b/public/index.html
index 51f0153..77c9203 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>alj.ico">
     <title>安检设备综合管理平台</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<body>
+<noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
index e4f9c6e..71d6b1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,6 +12,11 @@ export default {
   components: {
     // NewsDialog
   },
+  data() {
+    return {
+      show: false
+    }
+  },
   computed: {
     deviceId() {
       return this.$store.state.dataPageData.deviceId
@@ -36,16 +41,20 @@ export default {
       },
       deep: true
     }
+  },
+  created() {
+
   }
 }
 </script>
 
 <style lang="less">
-/deep/.el-notification{
+/deep/ .el-notification {
   background-color: rgba(245, 163, 113, 0.89) !important;
   border-radius: 0.04rem 0px 0px 0.04rem !important;
 }
-/deep/.el-notification__content {
-  color: rgb(245, 163, 113)!important;
+
+/deep/ .el-notification__content {
+  color: rgb(245, 163, 113) !important;
 }
 </style>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 6abb328..c37db3e 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,7 +1,14 @@
-  <!-- 登录界面 -->
+<!-- 登录界面 -->
 <template>
   <div class="login">
-    <div class="login-box">
+    <div v-if="show" id="Loading">
+      <div class="loader-inner ball-beat">
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+    <div v-if="!show" class="login-box">
       <el-form ref="loginForm" :model="loginForm" :rules="rules">
         <h3 class="title">
           欢迎登录安检设备综合管理平台
@@ -42,6 +49,7 @@ import { login } from '@/utils/SystemSettingApi'
 export default {
   data() {
     return {
+      show: true,
       loginForm: {
         staffNumber: '',
         password: ''
@@ -56,6 +64,11 @@ export default {
       }
     }
   },
+  mounted() {
+    setTimeout(() => {
+      this.show = false
+    }, 4000)
+  },
   methods: {
     // 登录提交
     async submitForm() {
@@ -86,13 +99,15 @@ export default {
   height: 100vh;
   background-color: skyblue;
   display: flex;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
 }
+
 .login-box {
   width: 400px;
   height: 350px;
 }
+
 .title {
   font-size: 26px;
   color: #000;
@@ -100,8 +115,65 @@ export default {
   text-align: center;
   font-weight: bold;
 }
+
 .el-input {
   height: 47px;
   width: 100%;
 }
+
+#Loading {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  -webkit-transform: translateY(-50%) translateX(-50%);
+  transform: translateY(-50%) translateX(-50%);
+  z-index: 100;
+}
+
+@-webkit-keyframes ball-beat {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+@keyframes ball-beat {
+  50% {
+    opacity: 0.2;
+    -webkit-transform: scale(0.75);
+    transform: scale(0.75);
+  }
+
+  100% {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+}
+
+.ball-beat > div {
+  background-color: #279fcf;
+  width: 15px;
+  height: 15px;
+  border-radius: 100% !important;
+  margin: 2px;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  display: inline-block;
+  -webkit-animation: ball-beat 0.7s 0s infinite linear;
+  animation: ball-beat 0.7s 0s infinite linear;
+}
+
+.ball-beat > div:nth-child(2n-1) {
+  -webkit-animation-delay: 0.35s !important;
+  animation-delay: 0.35s !important;
+}
+
 </style>
-- 
Gitee

