DeXun/fad_oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: 修改登录页

Browse Source
This commit is contained in:
flower-string
2025-03-05 20:43:03 +08:00
parent 64a7502568
commit 930a9ca564
2 changed files with 145 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
ruoyi-ui/package.json
View File

@@ -41,18 +41,22 @@
"bpmn-js-token-simulation": "0.10.0",
"clipboard": "2.0.8",
"core-js": "3.25.3",
"diagram-js": "^15.2.4",
"echarts": "5.4.0",
"element-ui": "2.15.12",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",
"highlight.js": "10.5.0",
"husky": "^9.1.7",
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"nprogress": "0.2.0",
"quill": "1.3.7",
"screenfull": "5.0.2",
"serve-static": "^1.16.2",
"sortablejs": "1.10.2",
"throttle-debounce": "^5.0.2",
"v-emoji-picker": "^2.3.3",
"vue": "2.6.12",
"vue-count-to": "1.0.13",
@@ -70,6 +74,9 @@
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"babel-plugin-dynamic-import-node": "2.3.3",
"bpmn-js": "7.5.0",
"bpmn-js-properties-panel": "0.37.2",
"camunda-bpmn-moddle": "4.4.1",
"chalk": "4.1.0",
"compression-webpack-plugin": "5.0.2",
"connect": "3.6.6",
@@ -81,10 +88,7 @@
"sass-loader": "10.1.1",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-template-compiler": "2.6.12",
"bpmn-js": "7.5.0",
"bpmn-js-properties-panel": "0.37.2",
"camunda-bpmn-moddle": "4.4.1"
"vue-template-compiler": "2.6.12"
},
"engines": {
"node": ">=8.9",

193
ruoyi-ui/src/views/login.vue
View File

@@ -1,59 +1,66 @@
<template>
<div class="login">
<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="密码"
@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>
<div class="left">
<h1>福安德综合办公系统</h1>
</div>
<div class="right">
<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="密码"
@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%;"
class="login-button"
@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>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2024 spark All Rights Reserved.</span>
@@ -161,20 +168,70 @@ export default {
justify-content: center;
align-items: center;
height: 100%;
width: 100vw;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
.left {
flex: 2;
height: 100vh;
position: relative;
display: block;
h1 {
position: absolute;
top: 30px;
left: 40px;
color: white;
font-size: 36px;
font-weight: 500;
}
}
.right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #191d3490;
box-sizing: border-box;
color: #04c4dc;
padding: 30px;
height: 100vh;
}
.title {
margin: 0px auto 30px auto;
text-align: center;
color: #707070;
color: #04c4dc;
}
.el-form-item:focus-within {
border-color: #00e5ff;
box-shadow: 0 0 20rpx rgba(0, 229, 255, 0.3);
}
input {
flex: 1;
height: 100%;
margin-left: 20rpx;
color: #fff;
font-size: 28rpx;
}
.placeholder {
color: rgba(255, 255, 255, 0.4);
}
.login-form {
border-radius: 6px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
border-radius: 20rpx;
backdrop-filter: blur(10px);
border: 2px solid rgba(0, 229, 255, 0.1);
.el-input {
height: 38px;
input {
@@ -216,4 +273,28 @@ export default {
.login-code-img {
height: 38px;
}
.login-button {
width: 100%;
height: 90rpx;
background: linear-gradient(45deg, #00e5ff, #b400ff);
border-radius: 45rpx;
color: #fff;
font-size: 32rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 40rpx;
border: none;
position: relative;
overflow: hidden;
}
.login-button::after {
border: none;
}
.login-button:active {
transform: scale(0.98);
}
</style>