ccsens_zhengzhichuan
/
acupuncture
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

后台登录

newMaster
1747191978@qq.com 4 months ago
parent
06503cdd3f
commit
02f362e105
4 changed files with 147 additions and 118 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      acupuncture-后台/src/assets/styles/variables.scss
  2. 57
      acupuncture-后台/src/store/modules/settings.js
  3. BIN
      acupuncture-后台/src/views/bg.png
  4. 176
      acupuncture-后台/src/views/login.vue

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

@ -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
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

176
acupuncture-后台/src/views/login.vue
View File

@ -1,85 +1,88 @@
<template> <template>
<div class="login"> <div class="login">
<el-form <div class="login-left"></div>
ref="loginForm" <div class="login-right">
:model="loginForm" <el-form
:rules="loginRules" ref="loginForm"
class="login-form" :model="loginForm"
> :rules="loginRules"
<h3 class="title">朱琏针灸联盟数据系统</h3> class="login-form"
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
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="密码"
@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="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</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%"> <h3 class="title">
<el-button 登录到
:loading="loading" <br />
size="medium" 朱琏针灸联盟数据系统
type="primary" </h3>
style="width: 100%" <el-form-item prop="username">
@click.native.prevent="handleLogin" <el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
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="密码"
@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="code" v-if="captchaEnabled">
<el-input
v-model="loginForm.code"
auto-complete="off"
placeholder="验证码"
style="width: 63%"
@keyup.enter.native="handleLogin"
>
<svg-icon
slot="prefix"
icon-class="validCode"
class="el-input__icon input-icon"
/>
</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; color: #fff"
>记住密码</el-checkbox
> >
<span v-if="!loading">登 录</span> <el-form-item style="width: 100%">
<span v-else>登 录 中...</span> <el-button
</el-button> :loading="loading"
<div style="float: right" v-if="register"> size="medium"
<router-link class="link-type" :to="'/register'" type="primary"
>立即注册</router-link style="width: 100%"
@click.native.prevent="handleLogin"
> >
</div> <span v-if="!loading">登 录</span>
</el-form-item> <span v-else>登 录 中...</span>
</el-form> </el-button>
<!-- 底部 --> <div style="float: right" v-if="register">
<div class="el-login-footer"> <router-link class="link-type" :to="'/register'"
<span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span> >立即注册</router-link
>
</div>
</el-form-item>
</el-form>
</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;

Write Preview
Loading…
Cancel
Save