hwj_system
/
scmy
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页

Browse Source
master
wj 2 years ago
parent 0d560afee0
commit 162121615b
3 changed files with 122 additions and 82 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      psdc-ui/src/App.vue
  2. 2
      psdc-ui/src/views/index.vue
  3. 198
      psdc-ui/src/views/login.vue

4
psdc-ui/src/App.vue
Unescape View File

@ -20,4 +20,8 @@ onMounted(() => {
padding: 0;
box-sizing:border-box;
}
body{
color: #f3ffff;
font-size: 14px;
}
</style>

2
psdc-ui/src/views/index.vue
Unescape View File

@ -1,6 +1,6 @@
<template>
<div class="app-container home">
<h1>这是能源控制页</h1>
<h1>首页</h1>
</div>
</template>

198
psdc-ui/src/views/login.vue
Unescape View File

@ -1,63 +1,68 @@
<template>
<div class="login">
<h2>电能替代分布式控制试验平台</h2>
<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"
>
<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-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<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>
<div style="float: right;" v-if="register">
<router-link class="link-type" :to="'/register'">立即注册</router-link>
</div>
</el-form-item>
</el-form>
<div class="loginBox">
<div class="dianzhui"></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"
>
<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-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<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>
<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 © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
@ -156,39 +161,70 @@ getCookie();
height: 100%;
background-image: url("../assets/images/bg.png");
background-size: cover;
padding-top: 50px;
h2{
text-align: center;
font-size: 36px;
font-weight: bold;
color: #AFEAFF;
margin:20px 0 50px 0;
margin:0px 0 50px 0;
}
.loginBox{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 400px;
.dianzhui{
width: 100%;
height: 20px;
background-image: url("../assets/images/1.png");
background-size: 100% 100%;
margin-bottom: 10px;
}
.login-form {
border-radius: 4px;
background-image: url("../assets/images/5.png");
background-size: 100% 100%;
padding: 25px 25px 5px 25px;
.title {
font-size: 24px;
font-weight: bold;
margin: 0px auto 30px auto;
text-align: center;
color: #9BCDFF;
}
.el-input {
height: 40px;
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
}
}
}
}
.title {
font-size: 24px;
font-weight: bold;
margin: 0px auto 30px auto;
text-align: center;
::v-deep .el-input__prefix{
color: #1678C0;
}
::v-deep .el-input__inner{
color: #1678C0;
}
::v-deep .el-input__wrapper{
border: 1px solid #1678C0 !important;
border-radius: 5px;
background-color: #1B2553 !important;
}
::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
color: #9BCDFF;
}
.login-form {
border-radius: 4px;
background-image: url("../assets/images/5.png");
background-size: 100% 100%;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 40px;
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
}
::v-deep .el-button.el-button--primary.el-button--large{
background-image: linear-gradient(#339BF6,#336FF6);
}
.login-tip {
font-size: 13px;

Write Preview
Loading…
Cancel
Save