cxc/qiaoba-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update dep

Browse Source
This commit is contained in:
ailanyin
2023-07-05 10:11:47 +08:00
parent 9fd5f83ddc
commit 704a9fd67f
8 changed files with 176 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
src/views/login.vue
View File

@ -1,103 +1,116 @@
<template>
<div class="login">
<el-form
ref="loginRef"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="tenant">
<paged-select
v-model="loginForm.tenant"
:default-label="defaultTenantNamt"
:prop="{
label: 'companyName',
value: 'tenantId',
}"
:query="{
page: 'pageNum',
size: 'pageSize',
searchKey: 'companyName',
}"
:remote-method="loadTenantOptions"
:width="350"
prefix-icon="OfficeBuilding"
size="large"
@change="handleTenantChange"
@confirm="handleTenantConfirm"
/>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
auto-complete="off"
placeholder="账号"
size="large"
type="text"
>
<template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="user" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
size="large"
type="password"
@keyup.enter="handleLogin"
>
<template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="password" />
</template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled && loginForm.tenant" prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
size="large"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix>
<svg-icon
class="el-input__icon input-icon"
icon-class="validCode"
/>
</template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" />
</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"
style="width: 100%"
type="primary"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div v-if="register" style="float: right">
<router-link :to="'/register'" class="link-type"
>立即注册
</router-link>
</div>
</el-form-item>
</el-form>
<div class="login-card">
<div class="login-banner">
<!-- 主标题 -->
<h2 class="title">若依后台管理系统</h2>
<!-- 副标题 -->
<p class="sub-title">前后端分离的后台管理系统架构</p>
<el-image class="banner-image" :src="loginLeftBanner" />
</div>
<el-form
ref="loginRef"
:model="loginForm"
:rules="loginRules"
class="login-form"
>
<h3 class="title">若依后台管理系统</h3>
<el-form-item prop="tenant">
<paged-select
v-model="loginForm.tenant"
:default-label="defaultTenantNamt"
:prop="{
label: 'companyName',
value: 'tenantId',
}"
:query="{
page: 'pageNum',
size: 'pageSize',
searchKey: 'companyName',
}"
:remote-method="loadTenantOptions"
:width="350"
prefix-icon="OfficeBuilding"
size="large"
@change="handleTenantChange"
@confirm="handleTenantConfirm"
/>
</el-form-item>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
auto-complete="off"
placeholder="账号"
size="large"
type="text"
>
<template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="user" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
auto-complete="off"
placeholder="密码"
size="large"
type="password"
@keyup.enter="handleLogin"
>
<template #prefix>
<svg-icon
class="el-input__icon input-icon"
icon-class="password"
/>
</template>
</el-input>
</el-form-item>
<el-form-item v-if="captchaEnabled && loginForm.tenant" prop="code">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
size="large"
style="width: 63%"
@keyup.enter="handleLogin"
>
<template #prefix>
<svg-icon
class="el-input__icon input-icon"
icon-class="validCode"
/>
</template>
</el-input>
<div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" />
</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"
style="width: 100%"
type="primary"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span>
</el-button>
<div v-if="register" style="float: right">
<router-link :to="'/register'" class="link-type"
>立即注册
</router-link>
</div>
</el-form-item>
</el-form>
</div>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
@ -106,6 +119,7 @@
</template>
<script setup>
import loginLeftBanner from "@/assets/images/login-left-banner.png";
import { getCodeImg, getTenantNormalList } from "@/api/login";
import Cookies from "js-cookie";
import { decrypt, encrypt } from "@/utils/jsencrypt";
@ -236,7 +250,8 @@ defaultTenantNamt.value = useUserStore().tempTenantName;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/login-background.jpg");
background-image: url("https://php.likeadmin.cn/admin/assets/login_bg.2f630cea.png");
//background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
@ -246,24 +261,64 @@ defaultTenantNamt.value = useUserStore().tempTenantName;
color: #707070;
}
.login-form {
border-radius: 6px;
.login-card {
border-radius: 14px;
background: #ffffff;
width: 400px;
padding: 25px 25px 5px 25px;
display: flex;
overflow: hidden;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
0 8px 10px -6px rgb(0 0 0 / 0.1);
.el-input {
height: 40px;
input {
height: 40px;
.login-banner {
padding: 0 20px 0;
display: none;
@media (min-width: 768px) {
display: inline-block;
}
.title,
.sub-title {
text-align: center;
color: #fff;
}
.title {
margin: 32px 0 0;
font-weight: 900;
}
.sub-title {
margin: 16px 0 0;
font-weight: 600;
}
.banner-image {
margin-top: 12px;
}
width: 400px;
background-color: #6777fe;
//background: url("https://php.likeadmin.cn/resource/image/adminapi/default/login_image.png") no-repeat;
//background-size: cover;
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0px;
.login-form {
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 40px;
input {
height: 40px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 0;
}
}
}
@ -292,7 +347,7 @@ defaultTenantNamt.value = useUserStore().tempTenantName;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-family: Arial, serif;
font-size: 12px;
letter-spacing: 1px;
}