保存进度！

企业级管理系统/前端/admin_system/src/views/account/Login.vue

@@ -0,0 +1,104 @@
+<!--
+ * @Author: Kane
+ * @Date: 2022-12-14 15:23:54
+ * @LastEditors: Kane
+ * @LastEditTime: 2022-12-14 18:04:50
+ * @FilePath: \admin_system\src\views\account\login.vue
+ * @Description: 
+ * 
+ * Copyright (c) ${2022} by Kane, All Rights Reserved. 
+-->
+<template>
+  <div id="login">
+    <div class="form-warp">
+      <ul class="menu-tab">
+        <li class="current">登录</li>
+        <li>注册</li>
+      </ul>
+      <el-form ref="form" :model="form">
+        <el-form-item>
+          <label class="form-label">用户名</label>
+          <el-input type="text" v-model="loginForm.username"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <label class="form-label">密码</label>
+          <el-input type="password" v-model="loginForm.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <label class="form-label">验证码</label>
+          <el-row :gutter="30">
+            <el-col :span="14">
+              <el-input type="text"></el-input>
+            </el-col>
+            <el-col :span="10">
+              <el-button type="danger" class="el-button-block">获取验证码</el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" class="el-button-block">立即创建</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "loginPage",
+  data() {
+    return {
+      loginForm: {
+        username: "",
+        password: "",
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#login {
+  height: 100vh;
+  background-color: #344a5f;
+  padding-top: 50px;
+}
+
+.form-warp {
+  width: 320px;
+  padding: 30px;
+  margin: auto;
+  background-color: #ffffff10;
+  border-radius: 5px;
+}
+
+.menu-tab {
+  text-align: center;
+  margin-bottom: 15px;
+
+  li {
+    display: inline-block;
+    padding: 10px 24px;
+    margin: 0 10px;
+    color: #fff;
+    font-size: 16px;
+    border-radius: 5px;
+    cursor: pointer;
+
+    &.current {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+.form-label {
+  display: block;
+  color: #fff;
+  font-size: 14px;
+}
+
+.el-button-block {
+  // display: block;
+  width: 100%;
+}
+</style>