From 5ba9e720110c486f8c4354348a9c776d19e74672 Mon Sep 17 00:00:00 2001
From: 付延余 <f-yanyu@outlook.com>
Date: 星期六, 09 四月 2022 00:43:14 +0800
Subject: [PATCH] login静态
---
src/pages/login.vue | 103 +++++++++++++++++++++++++++++++++------------------
1 files changed, 66 insertions(+), 37 deletions(-)
diff --git a/src/pages/login.vue b/src/pages/login.vue
index c2af86e..fa92479 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
@@ -45,14 +48,14 @@
</div>
</template>
<script>
-import {login} from "@/api/index";
+// import {login} from "@/api/index";
export default {
data() {
return {
loginForm: {
- username: "",
- password: ""
+ username: "admin",
+ password: "123456"
},
loginFormRules: {
// 楠岃瘉鐢ㄦ埛鍚嶆槸鍚﹀悎娉�
@@ -85,20 +88,16 @@
<style lang="scss">
.FormBox {
width: 100%;
- //text-align: center;
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);
- margin-top: 4.8rem;
color: #ffffff;
- padding-left: 8.8rem;
- //.el-input__prefix {
- // width: 3rem;
- // height: 3rem;
- //}
+ padding-left: 10.4rem;
}
:nth-of-type(2) {
@@ -114,12 +113,20 @@
.el-form-item__error {
font-size: 2.8rem !important;
- margin-top: 5rem;
+ margin-top: 0.9rem;
}
- //input:disabled::-webkit-input-placeholder {
- // -webkit-text-fill-color: red;
- //}
+ .el-input .el-input__clear {
+ position: relative;
+ //background-color: blue;
+ top: -5.4rem;
+ }
+
+ .el-icon-view:before {
+ position: absolute;
+ top: 3rem;
+ right: 2.5rem;
+ }
}
</style>
@@ -129,14 +136,16 @@
.login-container {
width: 256rem;
height: 168rem;
- background: url(../assets/images/login/鑳屾櫙@2x.png);
+ background: url(../assets/images/login/鑳屾櫙@2x.png) no-repeat;
+ background-size: 100%;
position: relative;
}
.title {
width: 334.368rem;
height: 12.8rem;
- background: url(../assets/images/login/top@2x.png);
+ background: url(../assets/images/login/top@2x.png) no-repeat;
+ background-size: 100%;
position: absolute;
left: -39.184rem;
top: 0;
@@ -145,31 +154,51 @@
font-weight: 400;
text-align: center;
line-height: 10rem;
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ //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/妗咢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;
- }
+ background-size: 100%;
+ position: relative;
+ margin: 0 auto;
+ top: 39rem;
.title-text {
+ position: absolute;
width: 80rem;
- margin-top: 8.6rem;
+ 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 {
@@ -182,7 +211,7 @@
height: 8.8rem;
background: #51d2ff;
font-size: 3.2rem;
- font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+ //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
font-weight: 400;
text-align: center;
color: #000e2d;
--
Gitblit v1.9.1