dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

11.21前端

Browse Source
This commit is contained in:
@QQNZX 2023-11-21 16:44:51 +08:00
parent f6e71dac8d
commit 5988a46511
3 changed files with 151 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
fuintAdmin/src/views/login.vue
View File

@ -57,16 +57,10 @@
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
</div>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
<el-form-item style="width:100%;">

2
fuintCashierWeb/src/router/index.js
View File

@ -48,7 +48,7 @@ export const constantRoutes = [
{
path: '',
component: Layout,
redirect: 'index',
redirect: '/login',
children: [
{
path: 'index',

192
fuintCashierWeb/src/views/login/index.vue
View File

@ -1,49 +1,84 @@
<template>
<div class="login-container">
<div class="login-from-box">
<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left">
<h3 class="title">{{ systemName }}</h3>
<el-form-item prop="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
<el-input name="username" type="text" clearable v-model="loginForm.username" autocomplete="on" placeholder="用户名" />
</el-form-item>
<el-form-item prop="password">
<span class="svg-container svg-container_login">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input name="password" :type="pwdType" clearable @keyup.enter.native="handleLogin()" v-model="loginForm.password"
autocomplete="on" placeholder="密码"></el-input>
<span class="show-pwd" @click="showPwd()">
<svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
<el-form-item prop="captchaCode">
<span class="svg-container svg-container_login">
<svg-icon icon-class="validCode" />
</span>
<el-input
v-model="loginForm.captchaCode"
auto-complete="off"
placeholder="请输入验证码"
style="width: 63%"
clearable
@keyup.enter.native="handleLogin"
>
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</el-form-item>
<div class="login-btn">
<button type="button" class="btn" @click="handleLogin()">立即登录</button>
<div class="login">
<div class="box-center">
<div class="box-left">
<div class="bai-size">蓝鲸智慧加油站收银台</div>
<div class="bact-box">
<div class="sanhh">活动营销</div>
<div class="sanhh">节省人力</div>
<div class="sanhh">精准定位</div>
</div>
<div class="tips">
<span>深蓝数科</span>
</div>
<div class="box-right">
<div class="box-title">
登录
</div>
</el-form>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
<!-- <div class="title">-->
<!-- <img class="logo" src="@/assets/logo/logo.png"/>-->
<!-- <span class="name">{{ systemName }}</span>-->
<!-- </div>-->
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
clearable
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="密码"
clearable
@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="captchaCode" v-if="captchaOnOff">
<div style="display: flex;align-items: center">
<div>
<el-input
v-model="loginForm.captchaCode"
auto-complete="off"
placeholder="请输入验证码"
style="width: 90%"
clearable
@keyup.enter.native="handleLogin"
>
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
</div>
<div class="login-code">
<img :src="codeUrl" @click="getCode" class="login-code-img"/>
</div>
</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%;line-height: 24px;font-size: 16px;"
@click.native.prevent="handleLogin"
>
<span v-if="!loading">立即登录</span>
<span v-else>登 录 中...</span>
</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
@ -164,6 +199,79 @@ $bg: #2d3a4b;
$light_gray: #eee;
$dark_gray: #889aa4;
$light_gray: #eee;
.login {
height: 100vh;
width: 100%;
position: relative;
background-image: url("../../assets/images/loginback.png");
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.box-center{
width: 1000px;
height: 580px;
border-radius: 8px;
background: #FFFFFF;
box-shadow: 0px 4px 10px 0px rgba(20,61,129,0.1);
border-radius: 16px 16px 16px 16px;
opacity: 1;
margin: 150px auto;
overflow: hidden;
display: flex;
}
.box-left{
width: 50%;
height: 100%;
background: #00aaff;
background-image: url("../../assets/images/box-left.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.box-right{
width: 50%;
box-sizing: border-box;
padding: 80px;
}
.box-title{
width: 100%;
text-align: center;
margin-bottom: 20px;
}
.bai-size{
width: 100%;
text-align: center;
font-size: 40px;
font-weight: bold;
color: #FFFFFF;
margin-top: 65px;
}
.bact-box{
width: 85%;
margin: 15px auto;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
}
.sanhh{
width: 112px;
height: 34px;
background: linear-gradient(90deg, #E1EBFF 0%, #FFFFFF 100%);
border-radius: 2px 2px 2px 2px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1755D0;
}
/* reset element-ui css */
.login-container {