From 79f08099c190a78beb676c6895804530739c2a0b Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 29 十一月 2024 14:48:35 +0800
Subject: [PATCH] 修改首页
---
src/views/homePage.vue | 402 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 303 insertions(+), 99 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 1128c01..48450d3 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,76 +1,153 @@
<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 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>-->
- <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="content">
+ <div class="imgBox">
+ <div class="imG">
+ <img :src="back">
</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 class="formBox">
+ <div class="loginTitle"><span>国泰新华</span><br/>安全教育平台</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%;height: 50px"
+ @click.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ </div>
+ </el-form-item>
+ </el-form>
+ </div>
+ </div>
+ </div>
+
</div>
<!-- 底部 -->
- <!-- <div class="el-login-footer">-->
- <!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
- <!-- </div>-->
+ <div class="el-login-footer">
+ <span>Copyright ©2024-{{nowYear}} 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,15 +161,26 @@
import menu from "@/layout/components/Sidebar/menu";
import dataPng from "@/assets/images/login-data.png"
import searchPng from "@/assets/images/login-search.png"
-
+import back from "@/assets/images/logo22.png"
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
+const nowYear = ref();
+// 时间格式化
+const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+}
const loginForm = ref({
- username: "admin",
- password: "Gkhy@c413",
+ username: "",
+ password: "",
code: "",
uuid: ""
});
@@ -113,7 +201,8 @@
const redirect = ref(undefined);
onMounted(()=>{
-
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ nowYear.value = curTime.slice(0, 4);
})
const openRegist = ()=>{
@@ -214,12 +303,29 @@
<style lang='scss' scoped>
.login {
+ 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%;
display: flex;
- position: relative;
justify-content: center;
align-items: center;
- 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 +335,100 @@
opacity: 0.5;
}
.pics2{
+ width:60px;
+ margin-right: 10px;
+ //top: 20px;
+ //left: 20px;
+
+}
+.content{
+ display: flex;
+ min-width: 1200px;
+ min-height: 560px;
+ border-radius: 80px 40px 80px 40px;
+ border: 2px solid #fff;
+ background: url("../assets/images/logbox.jpg") no-repeat center;
+ background-size: cover;
+ box-shadow: 0 10px 20px rgba(0,0,0,.15);
+ transform: translateY(-50px);
+ position: relative;
+}
+@keyframes float {
+ 100% {
+ transform: translateX(0);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
+.imgBox {
+ width: 50%;
+ min-height: 560px;
+ opacity: 0;
+ -webkit-opacity: 0;
+ transform: translateX(50px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ animation: float ease 0.6s 0.6s forwards;
+ .imG{
+ width: 90%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-repeat: no-repeat;
+ }
+}
+.fromRow{
+ width: 100%;
+ margin: 25px 0;
+}
+
+@keyframes showForm {
+ 100% {
+ transform: translateY(0);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
+.formBox{
+ width: 50%;
+ height: 100%;
position: absolute;
- width: 420px;
- top: 20px;
- left: 20px;
- opacity: 0.5;
+ right: 0;
+ top: 0;
+ transform: translateY(30px);
+ opacity: 0;
+ -webkit-opacity: 0;
+ min-height: 560px;
+ border-radius: 16px;
+ padding: 20px 30px 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ z-index: 999;
+ animation: showForm ease-in-out 0.6s forwards;
+}
+.loginTitle{
+ width: 100%;
+ text-align: center;
+ font-size: 56px;
+ color: #2563eb;
+ line-height: 1.2;
+ font-weight: bolder;
+ letter-spacing: 12px;
+ text-shadow: 0 5px 10px rgba(0,0,0,.1);
+
+ span{
+ font-size: 32px;
+ font-weight: normal;
+ }
}
.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 +449,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 +500,22 @@
letter-spacing: 1px;
}
.login-code-img {
- height: 40px;
- padding-left: 12px;
+ width: 90px;
+ height: 50px;
+ padding-left: 7px;
}
+
+@media screen and (max-width: 1050px) {
+ .imG {
+ display: none;
+ }
+ .imgBox {
+ width: 0;
+ }
+ .formBox{
+ width: 100%;
+ }
+}
+
+
</style>
--
Gitblit v1.9.2