From 8d1a258f2bf7644af87eed4539256c2a9e5e0705 Mon Sep 17 00:00:00 2001
From: zhangxiaoxu123456 <zxx19900626>
Date: 星期五, 08 四月 2022 18:16:48 +0800
Subject: [PATCH] 毕业生统计
---
src/pages/login.vue | 188 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 182 insertions(+), 6 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index a89d30f..c2af86e 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -1,28 +1,204 @@
<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">
+ <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: "",
+ 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() {
},
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%;
+ //text-align: center;
+ margin-left: 8rem;
+ .el-input__inner {
+ height: 8.8rem;
+ font-size: 2.8rem;
+ background: rgba(81, 210, 255, 0.24);
+ margin-top: 4.8rem;
+ color: #ffffff;
+ padding-left: 8.8rem;
+ //.el-input__prefix {
+ // width: 3rem;
+ // height: 3rem;
+ //}
+ }
+
+ :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: 5rem;
+ }
+
+ //input:disabled::-webkit-input-placeholder {
+ // -webkit-text-fill-color: red;
+ //}
+}
</style>
<style lang="scss" scoped>
-</style>
+@import '../assets/css/base';
+.login-container {
+ width: 256rem;
+ height: 168rem;
+ background: url(../assets/images/login/鑳屾櫙@2x.png);
+ position: relative;
+}
+
+.title {
+ width: 334.368rem;
+ height: 12.8rem;
+ background: url(../assets/images/login/top@2x.png);
+ 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;
+}
+
+.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;
+ }
+
+ .title-text {
+ width: 80rem;
+ margin-top: 8.6rem;
+ text-align: center;
+ }
+
+ .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;
+ }
+}
+
+//.el-input__icon .el-icon-lock{
+// width:1rem;
+//
+//}
+///deep/ .el-input {
+// width: 64rem;
+//}
+
+</style>
--
Gitblit v1.9.1