Browse Source

后台登录

new
1747191978@qq.com 1 year ago
parent
commit
02f362e105
  1. 32
      acupuncture-后台/src/assets/styles/variables.scss
  2. 57
      acupuncture-后台/src/store/modules/settings.js
  3. BIN
      acupuncture-后台/src/views/bg.png
  4. 32
      acupuncture-后台/src/views/login.vue

32
acupuncture-后台/src/assets/styles/variables.scss

@ -1,25 +1,25 @@
// base color // base color
$blue:#324157; $blue: #324157;
$light-blue:#3A71A8; $light-blue: #3a71a8;
$red:#C03639; $red: #c03639;
$pink: #E65D6E; $pink: #e65d6e;
$green: #30B08F; $green: #30b08f;
$tiffany: #4AB7BD; $tiffany: #4ab7bd;
$yellow:#FEC171; $yellow: #fec171;
$panGreen: #30B08F; $panGreen: #30b08f;
// 默认菜单主题风格 // 默认菜单主题风格
$base-menu-color:#bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active:#f4f4f5; $base-menu-color-active: #f4f4f5;
$base-menu-background:#304156; $base-menu-background: #304156;
$base-logo-title-color: #ffffff; $base-logo-title-color: #ffffff;
$base-menu-light-color:rgba(0,0,0,.70); $base-menu-light-color: rgba(0, 0, 0, 0.7);
$base-menu-light-background:#ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #001529;
$base-sub-menu-background:#1f2d3d; $base-sub-menu-background: #1f2d3d;
$base-sub-menu-hover:#001528; $base-sub-menu-hover: #001528;
// 自定义暗色菜单风格 // 自定义暗色菜单风格
/** /**
@ -50,5 +50,5 @@ $base-sidebar-width: 200px;
subMenuHover: $base-sub-menu-hover; subMenuHover: $base-sub-menu-hover;
sideBarWidth: $base-sidebar-width; sideBarWidth: $base-sidebar-width;
logoTitleColor: $base-logo-title-color; logoTitleColor: $base-logo-title-color;
logoLightTitleColor: $base-logo-light-title-color logoLightTitleColor: $base-logo-light-title-color;
} }

57
acupuncture-后台/src/store/modules/settings.js

@ -1,42 +1,59 @@
import defaultSettings from '@/settings' import defaultSettings from "@/settings";
const { sideTheme, showSettings, topNav, tagsView, fixedHeader, sidebarLogo, dynamicTitle } = defaultSettings const {
sideTheme,
showSettings,
topNav,
tagsView,
fixedHeader,
sidebarLogo,
dynamicTitle,
} = defaultSettings;
const storageSetting = JSON.parse(localStorage.getItem('layout-setting')) || '' const storageSetting = JSON.parse(localStorage.getItem("layout-setting")) || "";
const state = { const state = {
title: '', title: "",
theme: storageSetting.theme || '#409EFF', theme: storageSetting.theme || "#fff",
sideTheme: storageSetting.sideTheme || sideTheme, sideTheme: storageSetting.sideTheme || sideTheme,
showSettings: showSettings, showSettings: showSettings,
topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav, topNav: storageSetting.topNav === undefined ? topNav : storageSetting.topNav,
tagsView: storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView, tagsView:
fixedHeader: storageSetting.fixedHeader === undefined ? fixedHeader : storageSetting.fixedHeader, storageSetting.tagsView === undefined ? tagsView : storageSetting.tagsView,
sidebarLogo: storageSetting.sidebarLogo === undefined ? sidebarLogo : storageSetting.sidebarLogo, fixedHeader:
dynamicTitle: storageSetting.dynamicTitle === undefined ? dynamicTitle : storageSetting.dynamicTitle storageSetting.fixedHeader === undefined
} ? fixedHeader
: storageSetting.fixedHeader,
sidebarLogo:
storageSetting.sidebarLogo === undefined
? sidebarLogo
: storageSetting.sidebarLogo,
dynamicTitle:
storageSetting.dynamicTitle === undefined
? dynamicTitle
: storageSetting.dynamicTitle,
};
const mutations = { const mutations = {
CHANGE_SETTING: (state, { key, value }) => { CHANGE_SETTING: (state, { key, value }) => {
if (state.hasOwnProperty(key)) { if (state.hasOwnProperty(key)) {
state[key] = value state[key] = value;
} }
} },
} };
const actions = { const actions = {
// 修改布局设置 // 修改布局设置
changeSetting({ commit }, data) { changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data) commit("CHANGE_SETTING", data);
}, },
// 设置网页标题 // 设置网页标题
setTitle({ commit }, title) { setTitle({ commit }, title) {
state.title = title state.title = title;
} },
} };
export default { export default {
namespaced: true, namespaced: true,
state, state,
mutations, mutations,
actions actions,
} };

BIN
acupuncture-后台/src/views/bg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

32
acupuncture-后台/src/views/login.vue

@ -1,12 +1,18 @@
<template> <template>
<div class="login"> <div class="login">
<div class="login-left"></div>
<div class="login-right">
<el-form <el-form
ref="loginForm" ref="loginForm"
:model="loginForm" :model="loginForm"
:rules="loginRules" :rules="loginRules"
class="login-form" class="login-form"
> >
<h3 class="title">朱琏针灸联盟数据系统</h3> <h3 class="title">
登录到
<br />
朱琏针灸联盟数据系统
</h3>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
@ -56,7 +62,7 @@
</el-form-item> </el-form-item>
<el-checkbox <el-checkbox
v-model="loginForm.rememberMe" v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px" style="margin: 0px 0px 25px 0px; color: #fff"
>记住密码</el-checkbox >记住密码</el-checkbox
> >
<el-form-item style="width: 100%"> <el-form-item style="width: 100%">
@ -77,9 +83,6 @@
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 底部 -->
<div class="el-login-footer">
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
</div> </div>
</div> </div>
</template> </template>
@ -193,7 +196,7 @@ export default {
path: this.redirect || "/", path: this.redirect || "/",
}) })
.catch(() => {}); .catch(() => {});
// this.getCommonQueue(); // this.getCommonQueue();
}) })
.catch(() => { .catch(() => {
this.loading = false; this.loading = false;
@ -228,19 +231,28 @@ export default {
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("./bg.png");
background-size: cover; background-size: cover;
display: flex;
.login-left {
flex: 1.5;
}
.login-right {
flex: 1;
}
} }
.title { .title {
font-size: 26 px;
margin: 0px auto 30px auto; margin: 0px auto 30px auto;
text-align: center; text-align: left;
color: #707070; color: #fff;
} }
.login-form { .login-form {
border-radius: 6px; border-radius: 6px;
background: #ffffff; // background: #ffffff;
width: 400px; width: 400px;
padding: 25px 25px 5px 25px; padding: 25px 25px 5px 25px;

Loading…
Cancel
Save