From 95ac0601f43a68c07092501bbd057b8bdb37487b Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 19 七月 2024 15:25:35 +0800
Subject: [PATCH] 登录页修改
---
src/views/homePage.vue | 341 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 241 insertions(+), 100 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 1128c01..078084f 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,76 +1,147 @@
<template>
<div class="login">
- <img class="pics1" :src="dataPng">
- <img class="pics2" :src="searchPng">
- <div class="login-panel">
-<!-- <div class="login-img">-->
-<!-- <img :src="loginImgPng">-->
-<!-- </div>-->
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">安全在线教育平台</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="账号"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter="handleLogin"
- show-password
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ <div class="title">
+ <div class="logo">
+ <img class="pics2" :src="logoPng">
+ <span style="font-size: 40px;color: black">国科鸿宇</span>
+ <div style="width: 2px;height: 40px;background-color: #1C68A7;margin-top: 5px;margin-left: 15px;margin-right: 15px"></div>
+ <span style="font-size: 28px;color: white">安全在线教育平台</span>
+ </div>
+ <div class="content">
+ <div class="imgBox">
+ <div class="imG"></div>
+ </div>
+ <div class="formBox">
+ <div class="loginTitle">账号登录</div>
+ <div style="padding: 20px 0;">
+ <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+ <el-form-item>
+ <div class="fromRow">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ size="large"
+ auto-complete="off"
+ placeholder="请输入用户名"
+ style="height: 50px"
+ >
+ <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </div>
+ </el-form-item>
+ <el-form-item>
+ <div class="fromRow">
+ <el-input
+ style="height: 50px"
+ v-model="loginForm.password"
+ type="password"
+ size="large"
+ auto-complete="off"
+ placeholder="请输入密码"
+ @keyup.enter="handleLogin"
+ show-password
+ >
+ <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+ </el-input>
+ </div>
+ </el-form-item>
+ <el-form-item>
+ <div class="fromRow">
+ <el-input
+ v-model="loginForm.code"
+ size="large"
+ auto-complete="off"
+ placeholder="验证码"
+ style="height: 50px;width:63%"
+ @keyup.enter="handleLogin"
+ >
+ <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </div>
+ </div>
+ </el-form-item>
+ <el-form-item>
+ <div class="fromRow">
+ <el-button
+ :loading="loading"
+ size="large"
+ type="primary"
+ style="width:100%;"
+ @click.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ </div>
+ </el-form-item>
+ </el-form>
</div>
- </el-form-item>
-<!-- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">-->
-<!-- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>-->
-<!-- <div v-if="isRegister">-->
-<!-- <el-button link type="primary" @click="openRegist">立即注册</el-button>-->
-<!-- </div>-->
-<!-- </div>-->
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:100%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- </el-form-item>
- </el-form>
+ </div>
+ </div>
+
</div>
- <!-- 底部 -->
- <!-- <div class="el-login-footer">-->
- <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
- <!-- </div>-->
+<!-- <img class="pics1" :src="dataPng">-->
+<!-- <img class="pics2" :src="searchPng">-->
+
+
+<!-- <div class="login-panel">-->
+<!-- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">-->
+<!-- <h3 class="title">安全在线教育平台</h3>-->
+<!-- <el-form-item prop="username">-->
+<!-- <el-input-->
+<!-- v-model="loginForm.username"-->
+<!-- type="text"-->
+<!-- size="large"-->
+<!-- auto-complete="off"-->
+<!-- placeholder="账号"-->
+<!-- >-->
+<!-- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>-->
+<!-- </el-input>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item prop="password">-->
+<!-- <el-input-->
+<!-- v-model="loginForm.password"-->
+<!-- type="password"-->
+<!-- size="large"-->
+<!-- auto-complete="off"-->
+<!-- placeholder="密码"-->
+<!-- @keyup.enter="handleLogin"-->
+<!-- show-password-->
+<!-- >-->
+<!-- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>-->
+<!-- </el-input>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item prop="code" v-if="captchaEnabled">-->
+<!-- <el-input-->
+<!-- v-model="loginForm.code"-->
+<!-- size="large"-->
+<!-- auto-complete="off"-->
+<!-- placeholder="验证码"-->
+<!-- style="width: 63%"-->
+<!-- @keyup.enter="handleLogin"-->
+<!-- >-->
+<!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>-->
+<!-- </el-input>-->
+<!-- <div class="login-code">-->
+<!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/>-->
+<!-- </div>-->
+<!-- </el-form-item>-->
+<!-- <el-form-item style="width:100%;">-->
+<!-- <el-button-->
+<!-- :loading="loading"-->
+<!-- size="large"-->
+<!-- type="primary"-->
+<!-- style="width:100%;"-->
+<!-- @click.prevent="handleLogin"-->
+<!-- >-->
+<!-- <span v-if="!loading">登 录</span>-->
+<!-- <span v-else>登 录 中...</span>-->
+<!-- </el-button>-->
+<!-- </el-form-item>-->
+<!-- </el-form>-->
+<!-- </div>-->
</div>
</template>
@@ -84,6 +155,7 @@
import menu from "@/layout/components/Sidebar/menu";
import dataPng from "@/assets/images/login-data.png"
import searchPng from "@/assets/images/login-search.png"
+import logoPng from "@/assets/logo/logo1.png"
const userStore = useUserStore()
const route = useRoute();
@@ -91,8 +163,8 @@
const { proxy } = getCurrentInstance();
const loginForm = ref({
- username: "admin",
- password: "Gkhy@c413",
+ username: "",
+ password: "",
code: "",
uuid: ""
});
@@ -214,12 +286,26 @@
<style lang='scss' scoped>
.login {
- display: flex;
- position: relative;
- justify-content: center;
- align-items: center;
+ margin: 0;
+ padding: 0;
+ font-family: "microsoft yahei";
+ font-size: 14px;
+ //background: #04C1F8;
+ background: #04C1F8 url(../assets/images/bgpag.png) no-repeat;
+ //background-repeat: no-repeat;
+ background-size: cover;
height: 100%;
- background-image: url("../assets/images/login-bg.jpg");
+ :deep(.el-form-item__content .el-form-item) {
+ display: block;
+ }
+ :deep(.el-form-item--default) {
+ margin-bottom: -25px;
+ }
+}
+.logo {
+ display: flex;
+ align-items: center;
+ padding-top: 80px;
}
.pics1{
position: absolute;
@@ -229,17 +315,56 @@
opacity: 0.5;
}
.pics2{
+ width:60px;
+ //top: 20px;
+ //left: 20px;
+
+}
+.content{
+ position: relative;
+}
+.imgBox {
+ width: 560px;
+ height: 560px;
+ margin-top: 80px;
+ float: left;
+ position: relative;
+}
+.fromRow{
+ width: 100%;
+ margin: 25px 0;
+}
+.imG{
+ width: 500px;
+ height: 500px;
+ background-image: url(../assets/images/ad.png) ;
+ background-repeat: no-repeat;
position: absolute;
- width: 420px;
- top: 20px;
- left: 20px;
- opacity: 0.5;
+ left: 30px;
+ top: 30px;
+}
+.formBox{
+ width: 370px;
+ height: 400px;
+ border-radius: 5px;
+ background: rgba(25,25,25,0.6);
+ margin-top: 130px;
+ padding: 20px;
+ float: right;
+}
+.loginTitle{
+ width: 100%;
+ text-align: center;
+ font-size: 16px;
+ color: #FFF;
+ line-height: 50px;
+ border-bottom: 1px solid #FFF;
}
.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #333;
- font-size: 1.4rem;
+ width: 90%;
+ height: auto;
+ max-width: 1200px;
+ margin: 0 auto;
}
.login-panel{
border-radius: 1.2rem;
@@ -260,21 +385,21 @@
width: 80%;
}
}
-.login-form {
- flex: 1;
- padding: 25px;
- .el-input {
- height: 44px;
- input {
- height: 44px;
- }
- }
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
- }
-}
+//.login-form {
+// flex: 1;
+// padding: 25px;
+// .el-input {
+// height: 44px;
+// input {
+// height: 44px;
+// }
+// }
+// .input-icon {
+// height: 39px;
+// width: 14px;
+// margin-left: 0px;
+// }
+//}
.login-tip {
font-size: 13px;
text-align: center;
@@ -311,7 +436,23 @@
letter-spacing: 1px;
}
.login-code-img {
+ margin-top: 5px;
+ width: 90px;
height: 40px;
- padding-left: 12px;
+ padding-left: 7px;
}
+
+@media screen and (max-width: 980px) {
+ .imG {
+ display: none;
+ }
+ .imgBox {
+ width: 0;
+ }
+ .formBox{
+ width: 100%;
+ }
+}
+
+
</style>
--
Gitblit v1.9.2