From f288d0ddbd7be0ef1d5b984d75b8c573be80a09f Mon Sep 17 00:00:00 2001
From: shuguang <qqsyun@163.com>
Date: Sun, 23 Mar 2025 21:07:31 +0800
Subject: [PATCH] fix: Login Input

---
 src/components/Login.vue | 72 ++++++++++++++++++++++++++++------------
 1 file changed, 50 insertions(+), 22 deletions(-)

diff --git a/src/components/Login.vue b/src/components/Login.vue
index 2b7baa4..41c4566 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,36 +1,67 @@
 <template>
   <div class="login_container">
-    <div class="login_title">用户登录界面</div>
+    <div class="login_title">用户登录</div>
     <div class="login_box">
       <!-- 头像区域 -->
       <div class="avatar_box">
-        <img src="../assets/images/dinosaur.jpg" alt="" />
+        <!-- <img src="../assets/images/dinosaur.jpg" alt="" /> -->
       </div>
       <!-- 登录表单区域 -->
-      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
+      <el-form
+        ref="loginFormRef"
+        :model="loginForm"
+        :rules="loginFormRules"
+        label-width="0px"
+        class="login_form"
+      >
         <!-- 用户名 -->
         <el-form-item prop="username">
-          <el-input v-model.trim="loginForm.username" prefix-icon="iconfont icon-gerenxinxi"></el-input>
+          <el-input
+            v-model.trim="loginForm.username"
+            prefix-icon="iconfont icon-gerenxinxi"
+          ></el-input>
         </el-form-item>
         <!-- 密码 -->
         <el-form-item prop="password">
-          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-tianchongxing-" type="password"
-            @keyup.enter.native="login" :show-password="true"></el-input>
+          <el-input
+            v-model="loginForm.password"
+            prefix-icon="iconfont icon-tianchongxing-"
+            type="password"
+            @keyup.enter.native="login"
+            :show-password="true"
+          ></el-input>
         </el-form-item>
         <!-- 按钮区域 -->
         <el-form-item class="btns">
-          <el-button type="primary" @click="login" :loading="loginLoading">登录</el-button>
+          <el-button type="primary" @click="login" :loading="loginLoading"
+            >登录</el-button
+          >
           <el-button type="info" @click="resetLoginForm">重置</el-button>
         </el-form-item>
       </el-form>
     </div>
-<!--    粒子插件特效-->
-    <vue-particles class="login-bg" color="#39AFFD" :particleOpacity="0.7" :particlesNumber="100" shapeType="circle"
-      :particleSize="4" linesColor="#8DD1FE" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
-      :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push">
+    <!--    粒子插件特效-->
+    <vue-particles
+      class="login-bg"
+      color="#39AFFD"
+      :particleOpacity="0.7"
+      :particlesNumber="100"
+      shapeType="circle"
+      :particleSize="4"
+      linesColor="#8DD1FE"
+      :linesWidth="1"
+      :lineLinked="true"
+      :lineOpacity="0.4"
+      :linesDistance="150"
+      :moveSpeed="3"
+      :hoverEffect="true"
+      hoverMode="grab"
+      :clickEffect="true"
+      clickMode="push"
+    >
     </vue-particles>
     <div class="footer">
-      <span style="font-weight: bold;color:white;margin-bottom: 10px">
+      <span style="font-weight: bold; color: white; margin-bottom: 10px">
         登录页面切换
         <!-- <i class="iconfont icon-haoyou " @click="goUser"></i> -->
       </span>
@@ -38,7 +69,6 @@
         <i class="iconfont icon-guanliyuan" @click="goManage"></i>
       </span>
     </div>
-
   </div>
 </template>
 
@@ -73,7 +103,7 @@ export default {
           },
         ],
       },
-      loginLoading: false
+      loginLoading: false,
     };
   },
   methods: {
@@ -93,13 +123,10 @@ export default {
         const username = this.loginForm.username;
         const password = this.loginForm.password;
         //向数据库发送axios请求，如果登录成功，就跳转
-        const { data: res } = await this.$http.post(
-          "user/login",
-          {
-            username,
-            password
-          }
-        );
+        const { data: res } = await this.$http.post("user/login", {
+          username,
+          password,
+        });
         if (res.status !== 200) {
           this.loginLoading = false;
           return this.$message.error(res.msg);
@@ -136,7 +163,8 @@ export default {
 
 .login_container {
   // background-color: #2b4b6b;
-  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg) no-repeat 0px 0px;
+  background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211236280.jpg)
+    no-repeat 0px 0px;
   background-size: cover;
   height: 100%;
 }