From 41d6da7f5f8f0ce37c3521f6c4d639ab77ed9aac Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期五, 29 四月 2022 14:49:52 +0800
Subject: [PATCH] 其他业务
---
src/pages/login.vue | 220 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 212 insertions(+), 8 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index a89d30f..0e88b64 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,28 +1,232 @@
<template>
<div class="login-container">
+ <div class="title">鐭冲搴勪汉绀惧眬涓氬姟杩愯鏁版嵁鍒嗘瀽骞冲彴</div>
+ <!-- 鐢ㄦ埛鐧诲綍鐩掑瓙-->
+ <div class="loginBox">
+ <div class="title-text">
+ <span>鐢ㄦ埛鐧诲綍</span>
+ </div>
+ <!-- 琛ㄥ崟鐧诲綍鐩掑瓙-->
+ <div class="FormBox">
+ <!--涓や釜鍥炬爣-->
+ <div class="headerIcon"></div>
+ <div class="lockIcon"></div>
+ <!--琛ㄥ崟-->
+ <el-form
+ ref="loginFormRef"
+ :model="loginForm"
+ class="LoginForm"
+ label-width="0rem"
+ :rules="loginFormRules"
+ >
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ class="userInput"
+ 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"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ class="passwordInput"
+ show-password
+ ></el-input>
+ </el-form-item>
+ </el-form>
+ </div>
+
+ <el-button type="primary" class="loginButton" @click="login()"
+ >鐧诲綍
+ </el-button>
+ </div>
</div>
</template>
<script>
-import { login } from "@/api/index";
+import {login} from "@/api/index";
+
export default {
+ name: "login",
data() {
return {
+ loginForm: {
+ username: "",
+ password: "",
+ },
+ loginFormRules: {
+ // 楠岃瘉鐢ㄦ埛鍚嶆槸鍚﹀悎娉�
+ username: [
+ { 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" }
+ ]
+ }
};
},
- beforeCreate() {
- },
+ beforeCreate() {},
methods: {
- },
+ login() {
+ this.$refs.loginFormRef.validate(async valid => {
+ console.log(valid);
+ if (!valid) return;
+ this.$store.dispatch('login',this.loginForm).then(res => {
+ this.$router.push('/index')
+ })
+ // login(this.loginForm).then(res => {
+ // this.$router.push('/index')
+ // })
+ });
+ }
+ }
};
</script>
<style lang="scss">
-$bg: #283443;
-$light_gray: rgb(43, 7, 7);
-$cursor: #fff;
+.loginButton {
+ font-size: 0.125rem !important;
+}
+.FormBox {
+ width: 100%;
+ margin-left: 0.3125rem;
+ position: absolute;
+ top: 0.6875rem;
+ .el-input__inner {
+ height: 0.3438rem;
+ font-size: 0.1094rem;
+ background: rgba(81, 210, 255, 0.24);
+ color: #ffffff;
+ padding-left: 0.4063rem;
+ }
+
+ :nth-of-type(2) {
+ margin-top: 0.1875rem;
+ }
+
+ .el-form-item__content {
+ width: 2.5rem;
+ height: 0.3438rem;
+ line-height: 0.3438rem;
+ }
+
+ .el-form-item__error {
+ font-size: 0.1094rem !important;
+ margin-top: 0.0352rem;
+ }
+
+ .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>
-</style>
+@import "../assets/css/base";
+.login-container {
+ width: 10rem;
+ height: 6.5625rem;
+ background: url(../assets/images/login/loginBackground@2x.png) no-repeat;
+ background-size: 100%;
+ position: relative;
+}
+.title {
+ width: 13.0612rem;
+ height: 0.5rem;
+ background: url(../assets/images/login/top@2x.png) no-repeat;
+ background-size: 100%;
+ position: absolute;
+ left: -1.5306rem;
+ top: 0;
+ font-size: 0.1406rem;
+ color: #ffffff;
+ font-weight: 400;
+ text-align: center;
+ 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: 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 {
+ 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 {
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .loginButton {
+ width: 2.5rem;
+ height: 0.3438rem;
+ background: #51d2ff;
+ 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: 0.0938rem;
+ position: absolute;
+ bottom: 0.5648rem;
+ left: 0.3125rem;
+ }
+}
+</style>
--
Gitblit v1.9.1