日常开发

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 
 body {
   margin: 0;
+  background: radial-gradient(87% 87% at 9% -34%, #315F7E 0%, #0F1926 100%);
 }
 
 ul,

src/components/FaceWindow/index.vue

@@ -22,7 +22,7 @@
           <div class="confirmDiaWindow-con">
             <div class="pic">
               <div class="shine">
-                <img mode="aspectFill" class="image" src="../../static/images/common/shine.png">
+                <img src="@/assets/images/shine.png">
                 </img>
               </div>
               <el-avatar :src="faceCheckStu.logo_url || faceCheckStu.face_pic" />

src/utils/animate.ts

@@ -23,9 +23,14 @@ const page = {
   leave: animatePrefix + 'animate__fadeOutLeft'
 };
 
+const error = {
+  enter: animatePrefix + 'animate__shakeX'
+};
+
 export default {
   mask,
   dialog,
   face,
-  page
+  page,
+  error
 };

src/views/login/index.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="login">
-    <div>
-      <div class="login-input-box">
-        <div class="login-title">登录</div>
-        <form>
-          <div class="login-item">
-            <div class="login-item-title">账号</div><input class="login-input login-input-username" type="text"
-              placeholder="请输入帐号" v-model.trim="loginForm.username" />
+    <div class="login-logo"> <img src="@/assets/images/logo.png">
+      </img></div>
+    <transition :enter-active-class="proxy?.animate.error.enter">
+      <div class="login-content" :key="key">
+        <div class="login-content-center">
+          <div class="login-title"> <img src="@/assets/images/login.png">
+            </img></div>
+          <div class="login-input-box">
+            <div class="login-item">
+              <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
+                v-model.trim="loginForm.username" />
+            </div>
+            <div class="login-item">
+              <input class="login-input login-input-password" type="password" autocomplete="off" placeholder="请输入密码"
+                v-model.trim="loginForm.password" />
+            </div>
+            <div @click="getLogin" class="login-btn">登 录</div>
           </div>
-          <div class="login-item">
-            <div class="login-item-title">密码</div><input class="login-input login-input-password" type="password"
-              autocomplete="off" placeholder="请输入密码" v-model.trim="loginForm.password" />
-          </div>
-        </form>
+        </div>
       </div>
-      <div @click="getLogin">登 录</div>
+    </transition>
+    <div class="erweima"> <img src="@/assets/images/erweima.png">
+      </img>
+      <span>扫码登录</span>
     </div>
   </div>
 </template>
@@ -22,6 +31,7 @@
 <script setup name="Login" lang="ts">
 const { proxy } = getCurrentInstance() as any;
 const router = useRouter();
+
 const loginForm = ref<{
   username?: string;
   password?: string;
@@ -30,6 +40,12 @@ const loginForm = ref<{
   password: ''
 }) as any;
 
+const data = reactive<any>({
+  key: 0,
+});
+
+const { key } = toRefs(data);
+
 // 登录
 const getLogin = () => {
   let username = loginForm.value.username;
@@ -51,6 +67,8 @@ const getLogin = () => {
       router.push({ path: '/' });
       getUserInfo();
     }
+  }).catch(() => {
+    key.value++;
   }).finally(() => proxy?.$modal?.closeLoading());
 };
 
@@ -76,15 +94,106 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.login-title {
-  font-size: 2rem;
+.login-logo {
+  img {
+    width: 14.563rem;
+  }
+
+  position: absolute;
+  left: 6.51rem;
+  top: 5.19rem;
 }
 
-.login-title2 {
-  font-size: 36px;
+.login-title {
+  img {
+    width: 9.88rem;
+  }
+
+  margin-bottom: 1.8rem;
 }
 
 .login-input {
   width: 10rem;
 }
+
+.login-content {
+  width: 45%;
+  height: 100vh;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .login-content-center {
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+
+    .login-input-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+      padding: 6.8vh 0;
+      border-radius: 1.42rem;
+      opacity: 1;
+      background: linear-gradient(68deg, #1D2F3D -85%, #304453 96%);
+      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+
+      .login-item {
+        width: 100%;
+        margin-bottom: 2rem;
+
+        .login-input {
+          width: 52.6%;
+          height: 2.9rem;
+          line-height: 2.9rem;
+          border-radius: 0.83rem;
+          padding: 0 1rem;
+          text-align: center;
+          font-size: 1.65rem;
+          opacity: 1;
+          background: #EAEAEA;
+          box-sizing: border-box;
+          border: 1px solid #FFFFFF;
+          box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
+        }
+      }
+
+
+      .login-btn {
+        width: 36.7%;
+        height: 3.59rem;
+        line-height: 3.59rem;
+        border-radius: 15px;
+        font-size: 2rem;
+        opacity: 1;
+        cursor: pointer;
+        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
+        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
+      }
+    }
+  }
+}
+
+.erweima {
+  position: absolute;
+  right: 3.87rem;
+  bottom: 3.87rem;
+  text-align: center;
+
+  img {
+    width: 6.625rem;
+  }
+
+  span {
+    display: block;
+    color: #FFFFFF;
+    font-size: 1.1rem;
+    padding-top: 3px;
+  }
+}
 </style>