From 7f3bd68b67a4f8ae0565b19433299c5e6336f951 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期四, 19 五月 2022 14:46:07 +0800
Subject: [PATCH] 其他业务
---
src/pages/login.vue | 192 +++++++++++++++++++++++++++--------------------
1 files changed, 110 insertions(+), 82 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index c2af86e..0e88b64 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,15 +1,17 @@
<template>
<div class="login-container">
<div class="title">鐭冲搴勪汉绀惧眬涓氬姟杩愯鏁版嵁鍒嗘瀽骞冲彴</div>
+ <!-- 鐢ㄦ埛鐧诲綍鐩掑瓙-->
<div class="loginBox">
<div class="title-text">
<span>鐢ㄦ埛鐧诲綍</span>
</div>
-<!-- <div class="img">-->
-<!-- <img src="../assets/images/login/缁�%20377@2x.png" alt="">-->
-<!-- <img src="../assets/images/login/缁�%20377@2x_1.png" alt="">-->
-<!-- </div>-->
+ <!-- 琛ㄥ崟鐧诲綍鐩掑瓙-->
<div class="FormBox">
+ <!--涓や釜鍥炬爣-->
+ <div class="headerIcon"></div>
+ <div class="lockIcon"></div>
+ <!--琛ㄥ崟-->
<el-form
ref="loginFormRef"
:model="loginForm"
@@ -23,7 +25,8 @@
placeholder="璇疯緭鍏ョ敤鎴峰悕"
class="userInput"
prefix-icon="iconfont icon-user"
- ></el-input>
+ >
+ </el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
@@ -38,9 +41,8 @@
</div>
<el-button type="primary" class="loginButton" @click="login()"
- >鐧诲綍
- </el-button
- >
+ >鐧诲綍
+ </el-button>
</div>
</div>
</template>
@@ -48,34 +50,39 @@
import {login} from "@/api/index";
export default {
+ name: "login",
data() {
return {
loginForm: {
username: "",
- password: ""
+ password: "",
},
loginFormRules: {
// 楠岃瘉鐢ㄦ埛鍚嶆槸鍚﹀悎娉�
username: [
- {required: true, message: "璇疯緭鍏ョ櫥褰曞悕绉�", trigger: "blur"},
- {min: 3, max: 15, message: "闀垮害鍦�6鍒�15涓瓧绗�", trigger: "blur"}
+ { required: true, message: "璇疯緭鍏ョ櫥褰曞悕绉�", trigger: "blur" },
+ { min: 3, max: 15, message: "闀垮害鍦�6鍒�15涓瓧绗�", trigger: "blur" }
],
// 楠岃瘉瀵嗙爜鏄惁鍚堟硶
password: [
- {required: true, message: "璇疯緭鍏ョ櫥褰曞瘑鐮�", trigger: "blur"},
- {min: 6, max: 10, message: "闀垮害鍦�6鍒�10涓瓧绗�", trigger: "blur"}
+ { required: true, message: "璇疯緭鍏ョ櫥褰曞瘑鐮�", trigger: "blur" },
+ { min: 6, max: 10, message: "闀垮害鍦�6鍒�10涓瓧绗�", trigger: "blur" }
]
}
};
},
- beforeCreate() {
- },
+ beforeCreate() {},
methods: {
login() {
this.$refs.loginFormRef.validate(async valid => {
console.log(valid);
if (!valid) return;
- this.$router.push("/");
+ this.$store.dispatch('login',this.loginForm).then(res => {
+ this.$router.push('/index')
+ })
+ // login(this.loginForm).then(res => {
+ // this.$router.push('/index')
+ // })
});
}
}
@@ -83,93 +90,123 @@
</script>
<style lang="scss">
+.loginButton {
+ font-size: 0.125rem !important;
+}
.FormBox {
width: 100%;
- //text-align: center;
- margin-left: 8rem;
+ margin-left: 0.3125rem;
+ position: absolute;
+ top: 0.6875rem;
.el-input__inner {
- height: 8.8rem;
- font-size: 2.8rem;
+ height: 0.3438rem;
+ font-size: 0.1094rem;
background: rgba(81, 210, 255, 0.24);
- margin-top: 4.8rem;
color: #ffffff;
- padding-left: 8.8rem;
- //.el-input__prefix {
- // width: 3rem;
- // height: 3rem;
- //}
+ padding-left: 0.4063rem;
}
:nth-of-type(2) {
- margin-top: 4.8rem;
+ margin-top: 0.1875rem;
}
-
.el-form-item__content {
- width: 64rem;
- height: 8.8rem;
- line-height: 8.8rem;
+ width: 2.5rem;
+ height: 0.3438rem;
+ line-height: 0.3438rem;
}
.el-form-item__error {
- font-size: 2.8rem !important;
- margin-top: 5rem;
+ font-size: 0.1094rem !important;
+ margin-top: 0.0352rem;
}
- //input:disabled::-webkit-input-placeholder {
- // -webkit-text-fill-color: red;
- //}
+ .el-input .el-input__clear {
+ position: relative;
+ //background-color: blue;
+ width: 0.0664rem;
+ height: 0.043rem;
+ top: -0.1328rem;
+ right: 0.0898rem;
+ border-radius: 60%;
+ }
+
+ .el-icon-view:before {
+ position: absolute;
+ top: -0.0547rem;
+ right: 0.0039rem;
+ }
}
</style>
<style lang="scss" scoped>
-@import '../assets/css/base';
-
+@import "../assets/css/base";
.login-container {
- width: 256rem;
- height: 168rem;
- background: url(../assets/images/login/鑳屾櫙@2x.png);
+ width: 10rem;
+ height: 6.5625rem;
+ background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
+ background-size: 100%;
position: relative;
}
.title {
- width: 334.368rem;
- height: 12.8rem;
- background: url(../assets/images/login/top@2x.png);
+ width: 13.0612rem;
+ height: 0.5rem;
+ background: url(../assets/images/login/top@2x.png) no-repeat;
+ background-size: 100%;
position: absolute;
- left: -39.184rem;
+ left: -1.5306rem;
top: 0;
- font-size: 3.6rem;
+ font-size: 0.1406rem;
color: #ffffff;
font-weight: 400;
text-align: center;
- line-height: 10rem;
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ line-height: 0.3906rem;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+}
+
+.headerIcon {
+ position: absolute;
+ width: 0.3438rem;
+ height: 0.3359rem;
+ background: url(../assets/images/login/header@2x.png) no-repeat;
+ background-size: 100%;
+ border-right: 0.0039rem dashed #51d2ff;
+}
+
+.lockIcon {
+ position: absolute;
+ top: 0.3438rem;
+ width: 0.3438rem;
+ height: 0.3359rem;
+ border-right: 0.0039rem dashed #51d2ff;
+ background: url(../assets/images/login/lock@2x_1.png) no-repeat;
+ background-size: 100%;
}
.loginBox {
- width: 80rem;
- height: 81.866rem;
- background: url(../assets/images/login/妗咢2x.png);
- position: absolute;
- margin-top: 39rem;
- margin-bottom: 39rem;
- margin-left: 88rem;
-
- span {
- font-size: $fontSize-32;
- color: #51d2ff;
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
- font-weight: 400;
- color: #51d2ff;
- line-height: 12px;
- }
+ width: 3.125rem;
+ height: 3.1979rem;
+ background: url(../assets/images/login/loginBorder@2x.png);
+ background-size: 100%;
+ position: relative;
+ margin: 0 auto;
+ top: 1.5234rem;
.title-text {
- width: 80rem;
- margin-top: 8.6rem;
+ position: absolute;
+ width: 3.125rem;
+ margin-top: 0.375rem;
text-align: center;
+
+ span {
+ font-size: $fontSize-32;
+ color: #51d2ff;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ font-weight: 400;
+ line-height: 0.0469rem;
+ }
}
.LoginForm {
@@ -178,27 +215,18 @@
}
.loginButton {
- width: 64rem;
- height: 8.8rem;
+ width: 2.5rem;
+ height: 0.3438rem;
background: #51d2ff;
- font-size: 3.2rem;
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ font-size: 0.125rem !important;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
color: #000e2d;
- line-height: 2.4rem;
+ line-height: 0.0938rem;
position: absolute;
- bottom: 14.46rem;
- left: 8rem;
+ bottom: 0.5648rem;
+ left: 0.3125rem;
}
}
-
-//.el-input__icon .el-icon-lock{
-// width:1rem;
-//
-//}
-///deep/ .el-input {
-// width: 64rem;
-//}
-
</style>
--
Gitblit v1.9.1