cxc/qiaoba-vue3
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

BIN
src/assets/images/login-left-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

2
src/assets/styles/ruoyi.scss
View File

@ -141,7 +141,7 @@
/** 表格更多操作下拉样式 */ /** 表格更多操作下拉样式 */
.el-table .el-dropdown-link { .el-table .el-dropdown-link {
cursor: pointer; cursor: pointer;
color: #409EFF; color: #4a5dff;
margin-left: 10px; margin-left: 10px;
} }

2
src/assets/styles/variables.module.scss
View File

@ -36,7 +36,7 @@ $base-sub-menu-background:#000c17;
$base-sub-menu-hover:#001528; $base-sub-menu-hover:#001528;
*/ */
$--color-primary: #409EFF; $--color-primary: #4a5dff;
$--color-success: #67C23A; $--color-success: #67C23A;
$--color-warning: #E6A23C; $--color-warning: #E6A23C;
$--color-danger: #F56C6C; $--color-danger: #F56C6C;

2
src/components/InfiniteSelect/index.vue
View File

@ -302,7 +302,7 @@ onUnmounted(() => {
font-weight: 700; font-weight: 700;
&.selected { &.selected {
color: #409eff; color: #4a5dff;
} }
&:hover { &:hover {

8
src/main.js
View File

@ -4,14 +4,11 @@ import Cookies from "js-cookie";
import ElementPlus from "element-plus"; import ElementPlus from "element-plus";
import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言 import locale from "element-plus/lib/locale/lang/zh-cn"; // 中文语言
import "@/assets/styles/index.scss"; // global css import "@/assets/styles/index.scss"; // global css
import App from "./App"; import App from "./App";
import store from "./store"; import store from "./store";
import router from "./router"; import router from "./router";
import directive from "./directive"; // directive import directive from "./directive"; // directive
// 注册指令 // 注册指令
import plugins from "./plugins"; // plugins import plugins from "./plugins"; // plugins
import { download } from "@/utils/request"; import { download } from "@/utils/request";
@ -22,12 +19,11 @@ import SvgIcon from "@/components/SvgIcon";
import elementIcons from "@/components/SvgIcon/svgicon"; import elementIcons from "@/components/SvgIcon/svgicon";
import "./permission"; // permission control import "./permission"; // permission control
import { import {
parseTime,
resetForm,
addDateRange, addDateRange,
handleTree, handleTree,
parseTime,
resetForm,
selectDictLabel, selectDictLabel,
selectDictLabels, selectDictLabels,
} from "@/utils/ruoyi"; } from "@/utils/ruoyi";

2
src/store/modules/settings.js
View File

@ -16,7 +16,7 @@ const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || "";
const useSettingsStore = defineStore("settings", { const useSettingsStore = defineStore("settings", {
state: () => ({ state: () => ({
title: "", title: "",
theme: storageSetting.theme || "#409EFF", theme: storageSetting.theme || "#4a5dff",
sideTheme: storageSetting.sideTheme || sideTheme, sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings, showSettings: showSettings,
topNav: topNav:

281
src/views/login.vue
View File

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

4
src/views/tenant/initialize.vue
View File

@ -406,7 +406,7 @@ onMounted(() => {
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
background-color: #409eff; background-color: #4a5dff;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -421,7 +421,7 @@ onMounted(() => {
width: 100px; width: 100px;
height: 100px; height: 100px;
border-radius: 50%; border-radius: 50%;
background-color: #409eff; background-color: #4a5dff;
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 100px; line-height: 100px;