From 1051ffa8ae4544a169384552564c10aa96d3c7f1 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Mon, 06 Jan 2025 14:08:19 +0800
Subject: [PATCH] 修改首页
---
src/views/login.vue | 301 ++++++++++++++++++++++++++++++++++----------------
1 files changed, 204 insertions(+), 97 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 8ceb629..13736c2 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,65 +1,75 @@
<template>
- <div class="login">
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">新疆维吾尔自治区特种作业<br/>安全生产知识和管理能力考核系统</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- auto-complete="off"
- placeholder="账号"
- >
- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- auto-complete="off"
- placeholder="密码"
- show-password
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="medium"
- type="primary"
- style="width:100%;"
- @click.native.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div style="float: right;" v-if="register">
- <router-link class="link-type" :to="'/register'">立即注册</router-link>
- </div>
- </el-form-item>
- </el-form>
+ <el-row class="login">
+ <el-col :sm="24" :md="12" class="login-name">
+ 新疆维吾尔自治区特种作业<br/>安全生产知识和管理能力考核平台
+ </el-col>
+ <el-col :sm="24" :md="12" class="login-box">
+ <div class="login-card">
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+ <h3 class="title">登录系统</h3>
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ auto-complete="off"
+ placeholder="账号"
+ >
+ <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="密码"
+ show-password
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="code" v-if="captchaEnabled">
+ <el-input
+ v-model="loginForm.code"
+ auto-complete="off"
+ placeholder="验证码"
+ style="width: 63%"
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </div>
+ </el-form-item>
+ <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;color: #ccc">记住密码</el-checkbox>
+ <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
+ <div style="width: 100%">
+ <el-button
+ class="btn-cont"
+ :loading="loading"
+ size="medium"
+ type="primary"
+ @click.native.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ </div>
+ </div>
+ <div style="float: right;" v-if="register">
+ <router-link class="link-type" :to="'/register'">立即注册</router-link>
+ </div>
+
+ </el-form>
+ </div>
+ </el-col>
<!-- 底部 -->
<!-- <div class="el-login-footer">-->
<!-- <span>技术支持：中国科学院</span>-->
<!-- </div>-->
- </div>
+ </el-row>
</template>
<script>
@@ -159,38 +169,116 @@
</script>
<style rel="stylesheet/scss" lang="scss">
-.login {
- display: flex;
- justify-content: center;
- align-items: center;
+@font-face {
+ font-family: "AliMa";
+ src: url("../assets/styles/AlimamaShuHeiTi-Bold.ttf");
+ font-style: normal;
+ font-weight: normal;
+}
+.login{
+ width: 100%;
height: 100%;
background: url("../assets/images/login-background.jpg") no-repeat center;
background-size: cover;
-}
-.title {
- margin: 0 auto 30px;
- text-align: center;
- color: #707070;
- line-height: 28px;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ position: relative;
+ box-sizing: border-box;
}
-.login-form {
- border-radius: 6px;
- background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
- .el-input {
- height: 38px;
- input {
- height: 38px;
- }
- }
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 2px;
+@keyframes floatDown {
+ 100% {
+ transform: translateY(-80px);
+ opacity: 100%;
+ -webkit-opacity: 100%
}
}
+
+.login-name{
+ display: flex;
+ opacity: 0;
+ -webkit-opacity: 0;
+ animation: floatDown ease 0.6s forwards;
+ justify-content: center;
+ align-items: center;
+ font-family: 'AliMa';
+ color: #fff;
+ font-size: 3rem;
+ text-align: center;
+ line-height: 1.6;
+ transform: translateY(-120px);
+ text-shadow: -10px 10px 20px rgba(0,0,0,.4);
+}
+
+@keyframes floatUp {
+ 100% {
+ transform: translateY(-40px);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
+
+.login-box{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ opacity: 0;
+ -webkit-opacity: 0;
+ animation: floatUp ease 0.6s forwards;
+ .login-card{
+ width: 500px;
+ padding: 30px;
+ border-radius: 16px;
+ background-color: rgba(40,40,40,.4);
+ backdrop-filter: blur(6px);
+ -webkit-backdrop-filter: blur(6px);
+ border: 1px solid rgba(255,255,255,.6);
+ max-width: 100%;
+ box-sizing: border-box;
+ box-shadow: 0 10px 20px rgba(0,0,0,.05);
+ }
+ .login-form {
+ width: 100%;
+ box-sizing: border-box;
+
+ .title{
+ margin: 0 0 30px;
+ text-align: center;
+ color: #fff;
+ font-size: 1.4rem;
+ letter-spacing: 8px;
+ }
+
+ .el-form-item{
+ margin-bottom: 30px;
+ }
+
+ .el-input {
+ height: 48px;
+ input {
+ height: 48px;
+ }
+ .el-input__prefix{
+ display: flex;
+ left: 15px;
+ align-items: center;
+ }
+ }
+
+ .el-input__inner{
+ padding-left: 45px;
+ }
+
+ .input-icon {
+ height: 42px;
+ width: 16px;
+ margin-left: 0;
+ }
+ }
+}
+
.login-tip {
font-size: 13px;
text-align: center;
@@ -198,26 +286,45 @@
}
.login-code {
width: 33%;
- height: 38px;
+ height: 48px;
float: right;
- img {
+ .login-code-img {
+ display: inline-block;
+ width: 100%;
+ padding-left: 12px;
cursor: pointer;
vertical-align: middle;
}
}
-.el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
+
+.el-form-item--default{
+ margin-bottom: 15px;
}
-.login-code-img {
- height: 38px;
+
+::v-deep(.el-form-item__content){
+ display: flex;
+ justify-content: space-between;
+}
+
+.login-btn {
+ width: 100%;
+ font-size: 1.2em;
+ padding: 0.6em 0.8em;
+ border-radius: 0.5em;
+ border: none;
+ background-color: #2563EB;
+ color: #fff;
+ cursor: pointer;
+ box-shadow: 2px 2px 3px #000000b4;
+}
+
+.btn-cont {
+ width: 100%;
+ height: 48px;
+ padding: 3px;
+ background: #03a9f4;
+ border-radius: 0.6em;
+ box-sizing: border-box;
+ font-size: 18px;
}
</style>
--
Gitblit v1.9.2