From 06b7757e3de40b5c380df429a06b859389c80fbc Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期三, 10 五月 2023 18:15:18 +0800
Subject: [PATCH] 修改公共时间
---
src/views/Login.vue | 150 ++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 145 insertions(+), 5 deletions(-)
diff --git a/src/views/Login.vue b/src/views/Login.vue
index f89ec9b..34bc780 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,15 +1,155 @@
<template>
- <div>
- 鐧诲綍缁勪欢
+ <div class='login_container'>
+ <div class="login_span">
+ <!-- 澶村儚鍖哄煙 -->
+ <span style="text-align: center;display:block;font-size: 100px;color: #FFFFFF;">闈掔緤缁忎睛绠＄悊绯荤粺</span>
+ </div>
+ <div class="login_box">
+ <!-- 澶村儚鍖哄煙 -->
+ <div class="avater_box">
+ <img src="../assets/jh.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" show-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: '',
+ password: ''
+ },
+ // 琛ㄥ崟楠岃瘉瑙勫垯瀵硅薄
+ 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
+ })
+ console.log(res)
+ 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_span {
+// position: absolute;
+// bottom: 0;
+// width: 100%;
+// padding: 0 20px;
+// box-sizing: border-box;
+// }
+
+.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