From 1d42ad8fd052501107a4ef5ecb3249facb7d54d0 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期六, 09 四月 2022 01:10:21 +0800
Subject: [PATCH] login静态
---
src/pages/login.vue | 213 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 207 insertions(+), 6 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index a89d30f..3e24f5e 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,28 +1,229 @@
<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 {
data() {
return {
+ loginForm: {
+ username: "admin",
+ password: "123456"
+ },
+ 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() {
},
methods: {
- },
+ login() {
+ this.$refs.loginFormRef.validate(async valid => {
+ console.log(valid);
+ if (!valid) return;
+ this.$router.push("/");
+ });
+ }
+ }
};
</script>
<style lang="scss">
-$bg: #283443;
-$light_gray: rgb(43, 7, 7);
-$cursor: #fff;
+.FormBox {
+ width: 100%;
+ margin-left: 8rem;
+ position: absolute;
+ top: 17.6rem;
+ .el-input__inner {
+ height: 8.8rem;
+ font-size: 2.8rem;
+ background: rgba(81, 210, 255, 0.24);
+ color: #ffffff;
+ padding-left: 10.4rem;
+ }
+
+ :nth-of-type(2) {
+ margin-top: 4.8rem;
+ }
+
+
+ .el-form-item__content {
+ width: 64rem;
+ height: 8.8rem;
+ line-height: 8.8rem;
+ }
+
+ .el-form-item__error {
+ font-size: 2.8rem !important;
+ margin-top: 0.9rem;
+ }
+
+ .el-input .el-input__clear {
+ position: relative;
+ //background-color: blue;
+ width: 1.7rem;
+ height: 1.1rem;
+ top: -3.4rem;
+ right: 2.3rem;
+ border-radius: 60%;
+ }
+
+ .el-icon-view:before {
+ position: absolute;
+ top: -1.4rem;
+ right: 0.1rem;
+ }
+}
</style>
<style lang="scss" scoped>
-</style>
+@import '../assets/css/base';
+.login-container {
+ width: 256rem;
+ height: 168rem;
+ 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) no-repeat;
+ background-size: 100%;
+ position: absolute;
+ left: -39.184rem;
+ top: 0;
+ font-size: 3.6rem;
+ color: #ffffff;
+ font-weight: 400;
+ text-align: center;
+ line-height: 10rem;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+}
+
+.headerIcon {
+ position: absolute;
+ width: 8.8rem;
+ height: 8.6rem;
+ background: url(../assets/images/login/header@2x.png) no-repeat;
+ background-size: 100%;
+ border-right: 1px dashed #51D2FF;
+}
+
+.lockIcon {
+ position: absolute;
+ top: 8.8rem;
+ width: 8.8rem;
+ height: 8.6rem;
+ border-right: 1px 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/loginBorder@2x.png);
+ background-size: 100%;
+ position: relative;
+ margin: 0 auto;
+ top: 39rem;
+
+ .title-text {
+ position: absolute;
+ width: 80rem;
+ margin-top: 9.6rem;
+ 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: 12px;
+ }
+ }
+
+ .LoginForm {
+ width: 100%;
+ box-sizing: border-box;
+ }
+
+ .loginButton {
+ width: 64rem;
+ height: 8.8rem;
+ background: #51d2ff;
+ font-size: 3.2rem;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ font-weight: 400;
+ text-align: center;
+ color: #000e2d;
+ line-height: 2.4rem;
+ position: absolute;
+ bottom: 14.46rem;
+ left: 8rem;
+ }
+}
+
+</style>
--
Gitblit v1.9.1