From e983cbc7a775bfe69ae8124039cd266a8acc1704 Mon Sep 17 00:00:00 2001
From: 安瑾然 <107107765@qq.com>
Date: 星期三, 20 七月 2022 16:31:43 +0800
Subject: [PATCH] login

---
 src/views/Login.vue |  136 +++++++++++++++++++++++++++++++++++++++++++-
 1 files changed, 131 insertions(+), 5 deletions(-)

diff --git a/src/views/Login.vue b/src/views/Login.vue
index f89ec9b..bbb8b38 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,15 +1,141 @@
 <template>
-  <div>
-    鐧诲綍缁勪欢
+  <div class='login_container'>
+    <div class="login_box">
+      <!-- 澶村儚鍖哄煙 -->
+      <div class="avater_box">
+        <img src="../assets/logo.png"
+             alt="">
+      </div>
+      <!-- 鐧诲綍琛ㄥ崟鍖哄煙 -->
+      <el-form label-width="0px"
+               class="login_form"
+               :model="loginForm"
+               :rules="loginFormRules"
+               ref="loginFormRef">
+        <!-- 鐢ㄦ埛鍚� -->
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username"
+                    prefix-icon="iconfont icon-user"></el-input>
+        </el-form-item>
+        <!-- 瀵嗙爜 -->
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password"
+                    prefix-icon="iconfont icon-3702mima"
+                    type="password" @keyup.enter.native="login"></el-input>
+        </el-form-item>
+        <!-- 鎻愪氦鎸夐挳 -->
+        <el-form-item class="btns">
+          <el-button type="primary"
+                     @click="login">鐧诲綍
+          </el-button>
+          <el-button type="info"
+                     @click="resetLoginForm">閲嶇疆
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: "Login"
+  data() {
+    return {
+      loginForm: {
+        username: 'admin',
+        password: 'admin'
+      },
+      // 琛ㄥ崟楠岃瘉瑙勫垯瀵硅薄
+      loginFormRules: {
+        username: [
+          {required: true, message: '鐢ㄦ埛鍚嶄笉鑳戒负绌�', trigger: 'blur'},
+          {
+            min: 3,
+            max: 10,
+            message: '闀垮害鍦� 3 鍒� 10 涓瓧绗�',
+            trigger: 'blur'
+          }
+        ],
+        password: [
+          {required: true, message: '瀵嗙爜涓嶈兘涓虹┖', trigger: 'blur'},
+        ]
+      }
+    }
+  },
+  methods: {
+    resetLoginForm() {
+      this.$refs.loginFormRef.resetFields()
+    },
+    login() {
+      this.$refs.loginFormRef.validate(async (vaild) => {
+        if (!vaild) return this.$message.error('杈撳叆鏈夎')
+        const {data: res} = await this.$http("/api/login", {
+          method: 'POST',
+          params: this.loginForm
+        })
+        if (res.code === 200) {
+          this.$message.success('鐧诲綍鎴愬姛')
+          window.sessionStorage.setItem('token', res.data)
+          await this.$router.push('/home')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.login_container {
+  background-color: #2b4b6b;
+  height: 100%;
+}
 
-</style>
\ No newline at end of file
+.login_box {
+  width: 450px;
+  height: 300px;
+  background-color: #fff;
+  // 鍦嗚杈规
+  border-radius: 3px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  .avater_box {
+    height: 130px;
+    width: 130px;
+    border: 1px solid #eee;
+    border-radius: 50%;
+    padding: 10px;
+    // 闃村奖
+    box-shadow: 0 0 10px #ddd;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: #eee;
+    }
+  }
+}
+
+.login_form {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.btns {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

--
Gitblit v1.8.0