wenyongda/ZRAdmin-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style：优化ui

Browse Source
This commit is contained in:
不做码农 2023-04-29 09:40:28 +08:00
parent b9ad9522b1
commit dd2d9cd12f
13 changed files with 62 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/assets/styles/black.scss
View File

@ -1,138 +0,0 @@
// 黑夜模式
[data-theme='theme-black'] {
--base-color: #22272e; // #304156;
--base-color-rgba: rgba(34,39,46, 0.3);
--base-color-white: #ffffff;
// root
--base-bg-main: var(--base-color);
--base-menu-background: var(--base-color);
--base-logo-title-color: var(--base-color-white);
--base-topBar-background: var(--base-color) !important;
--base-topBar-color: var(--base-color-white);
--base-color-bar: #dadada;
--base-border-color: #424242;
--base-border-black: #333333;
--base-text-color-regular: #9b9da1;
--base-text-color-placeholder: #7a7a7a;
--base-color-hover: #3c3c3c;
// el-ement ui 设置
--el-fill-color-light: var(--base-color-rgba) !important;
--el-fill-color-blank: var(--base-bg-main) !important;
// --el-table-bg-color: var(--el-fill-color-blank);
--el-color-white: var(--base-color) !important;
--el-text-color-primary: var(--base-color-bar) !important;
--el-border-color-base: var(--base-border-black) !important;
--el-border-color-light: var(--base-border-black) !important;
--el-text-color-regular: var(--base-text-color-regular) !important;
--el-bg-color: var(--base-bg-main) !important;
--el-color-success-lighter: var(--base-color) !important;
--el-color-warning-lighter: var(--base-color) !important;
--el-color-danger-lighter: var(--base-color) !important;
--el-color-primary-lighter: var(--base-color) !important;
--el-color-primary-light-9: var(--base-color-hover) !important;
--el-text-color-disabled-base: var(--el-color-primary) !important;
--el-border-color-lighter: var(--base-border-black) !important;
// --el-text-color-placeholder: var(--base-text-color-placeholder) !important;
// --el-disabled-bg-color: var(--base-color) !important;
--el-fill-base: var(--base-color-white) !important;
// el-date-picker bg
--el-bg-color-overlay: var(--base-bg-main) !important;
--el-disabled-text-color: var(--base-bg-main) !important;
// drawer
.drawer-item,
.drawer-title {
color: var(--base-color-white) !important;
}
.el-button--primary,
.el-button--info,
.el-button--danger,
.el-button--success,
.el-button--warning {
--el-button-text-color: var(--base-color-white) !important;
--el-button-hover-text-color: var(--base-color-white) !important;
--el-button-disabled-text-color: var(--base-color-white) !important;
&:hover {
border-color: var(--el-button-hover-border-color, var(--el-button-hover-bg-color)) !important;
}
}
// pagination
.el-pagination.is-background .el-pager li:not(.disabled).active {
color: var(--base-color-white) !important;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
background-color: var(--main-bg-color);
}
// tabs
.el-tabs--border-card {
background-color: var(--el-color-white) !important;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
background: var(--base-color) !important;
}
// alert / notice-bar
.home-card-item {
border: 1px solid var(--base-border-color-light) !important;
}
.el-alert,
.notice-bar {
border: 1px solid var(--base-border-color) !important;
background-color: var(--base-color) !important;
}
// colorPicker
.el-color-picker__mask {
background: unset !important;
}
.el-color-picker__trigger {
border: 1px solid var(--base-border-color-light) !important;
}
// popper / dropdown
.el-popper {
border: 1px solid var(--base-border-color) !important;
color: var(--el-text-color-primary) !important;
.el-popper__arrow:before {
background: var(--el-color-white) !important;
border: 1px solid var(--base-border-color);
}
a {
color: var(--el-text-color-primary) !important;
}
}
.el-popper,
.el-dropdown-menu {
background: var(--el-color-white) !important;
}
.el-dropdown-menu__item:hover:not(.is-disabled) {
background: var(--el-bg-color) !important;
}
.el-dropdown-menu__item.is-disabled {
font-weight: 700 !important;
}
//tags menu 选择
.tags-view-container .tags-view-wrapper .tags-view-item.active {
background-color: var(--base-color) !important;
// border-color: var(--base-color) !important;
}
// md 编辑器、图片加载错误、
.md,
.el-upload--picture-card,
.el-image__error {
background: none !important;
}
//el table loading mask
.el-loading-mask {
background-color: var(--base-color-rgba) !important;
}
}

1
src/assets/styles/index.scss
View File

@ -5,7 +5,6 @@
@import './sidebar.scss';
@import './btn.scss';
@import './waves.scss';
// @import './black.scss';
html,
body,

8
src/assets/styles/login.scss
View File

@ -1,13 +1,12 @@
.login {
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
background-attachment: fixed;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
// background-image: url('../assets/images/login-background.jpg');
// background-image: url('@/assets/images/login-bg.jpg');
background-size: cover;
}
@ -21,7 +20,7 @@
border-radius: 6px;
background: #ffffff;
// background-color: hsla(0, 0%, 100%, 0.3);
width: 310px;
width: var(--base-login-width);
padding: 25px 15px 5px 15px;
position: relative;
@ -44,6 +43,7 @@
float: right;
img {
width: 100%;
cursor: pointer;
vertical-align: middle;
}

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

@ -12,17 +12,19 @@ $panGreen: #30b08f;
:root {
--base-text-color-rgba: rgba(0, 0, 0, 0.85);
--base-sidebar-width: 220px;
// 左侧菜单宽度
// 左侧菜单宽度
--el-aside-width: 220px;
//底部高度
//底部高度
--base-footer-height: 30px;
--base-tags-height: 34px;
--base-header-height: 50px;
//登录框宽度
--base-login-width: 280px;
}
/***侧边栏深色配置***/
[data-theme='theme-dark'] {
--base-menu-background: #304156;
--base-menu-background: #324157;
--base-logo-title-color: #ffffff;
// // el-ement ui 设置
// --el-fill-color-blank: #304156;

10
src/components/LangSelect/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<el-dropdown trigger="hover" @command="handleLanguageChange" style="vertical-align: middle">
<svg-icon class-name="size-icon" name="language" />
<svg-icon class-name="size-icon" name="language" :color="props.color" />
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="item of langOptions" :key="item.value" :disabled="lang === item.value" :command="item.value">
@ -17,12 +17,16 @@
import useAppStore from '@/store/modules/app'
const appStore = useAppStore()
const lang = computed(() => useAppStore().lang)
const props = defineProps({
color: {
type: String
}
})
const { proxy } = getCurrentInstance()
const langOptions = ref([
{ label: '简体中文', value: 'zh-cn' },
{ label: 'English', value: 'en' },
{ label: '繁體中文', value: 'zh-tw' },
{ label: '繁體中文', value: 'zh-tw' }
])
function handleLanguageChange(lang) {

2
src/i18n/pages/login/zh-cn.json
View File

@ -10,6 +10,6 @@
"reLogin": "重新登录",
"invalidSession": "无效的会话，或者会话已过期，请重新登录。",
"otherLoginWay": "其他登录方式",
"register": "立即注册"
"register": "注册"
}
}

2
src/i18n/pages/login/zh-tw.json
View File

@ -10,6 +10,6 @@
"reLogin": "重新登錄",
"invalidSession": "無效的會話，或者會話已過期，請重新登錄。",
"otherLoginWay": "其他登錄方式",
"register": "立即註冊"
"register": "註冊"
}
}

2
src/layout/components/Navbar.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="navbar" :data-theme="sideTheme" :class="appStore.device">
<div class="navbar" :class="appStore.device">
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<template v-if="appStore.device == 'desktop'">
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!settingsStore.topNav" />

2
src/layout/components/Sidebar/index.vue
View File

@ -2,7 +2,7 @@
<el-aside :data-theme="sideTheme" class="sidebar" :class="{ 'has-logo': showLogo }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"

32
src/store/modules/user.js
View File

@ -50,20 +50,24 @@ const useUserStore = defineStore('user', {
*/
oauthLogin(data, param) {
return new Promise((resolve, reject) => {
oauthCallback(data, param).then((res) => {
const { code, data } = res
if (code == 200) {
setToken(data.token)
this.token = data.token
Cookies.set('username', data.userName, { expires: 30 })
Cookies.set('password', encrypt(data.password), { expires: 30 })
Cookies.set('rememberMe', true, { expires: 30 })
resolve(res) //then处理
} else {
console.log('login error ', res)
reject(res) //catch处理
}
})
oauthCallback(data, param)
.then((res) => {
const { code, data } = res
if (code == 200) {
setToken(data.token)
this.token = data.token
Cookies.set('username', data.userName, { expires: 30 })
Cookies.set('password', encrypt(data.password), { expires: 30 })
Cookies.set('rememberMe', true, { expires: 30 })
resolve(res) //then处理
} else {
console.log('login error ', res)
reject(res) //catch处理
}
})
.catch((err) => {
reject(err)
})
})
},
// 获取用户信息

40
src/views/login.vue
View File

@ -6,35 +6,23 @@
<LangSelect title="多语言设置" class="langSet" />
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" size="default" auto-complete="off" :placeholder="$t('login.account')">
<el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
<template #prefix>
<svg-icon name="user" class="el-input__icon input-icon" />
<svg-icon name="user" class="input-icon" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
size="default"
auto-complete="off"
:placeholder="$t('login.password')"
@keyup.enter="handleLogin">
<el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('login.password')" @keyup.enter="handleLogin">
<template #prefix>
<svg-icon name="password" class="el-input__icon input-icon" />
<svg-icon name="password" class="input-icon" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="code" v-if="captchaOnOff != 'off'">
<el-input
v-model="loginForm.code"
size="default"
auto-complete="off"
:placeholder="$t('login.captcha')"
style="width: 63%"
@keyup.enter="handleLogin">
<el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('login.captcha')" style="width: 63%" @keyup.enter="handleLogin">
<template #prefix>
<svg-icon name="validCode" class="el-input__icon input-icon" />
<svg-icon name="validCode" class="input-icon" />
</template>
</el-input>
<div class="login-code">
@ -44,7 +32,10 @@
<div style="display: flex; justify-content: space-between">
<el-checkbox v-model="loginForm.rememberMe">{{ $t('login.rememberMe') }}</el-checkbox>
<router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
<span style="font-size: 12px">
<span @click="handleForgetPwd()" class="forget-pwd">忘记密码</span>
<router-link class="link-type" :to="'/register'">{{ $t('login.register') }}</router-link>
</span>
</div>
<el-form-item style="width: 100%">
@ -167,15 +158,24 @@ function onAuth(type) {
break
}
}
function handleForgetPwd() {
proxy.$modal.msg('请联系管理员')
}
getCode()
getCookie()
</script>
<style lang="scss" scoped>
@import '@/assets/styles/login.scss';
.forget-pwd {
color: #ccc;
margin-right: 10px;
cursor: pointer;
}
.login-icon {
width: 30px;
margin-right: 10px;
height: 30px;
margin-right: 20px;
cursor: pointer;
}
.other-login {

5
src/views/register.vue
View File

@ -152,8 +152,7 @@ getCode()
justify-content: center;
align-items: center;
height: 100%;
background: radial-gradient(200% 100% at bottom center, #f7f7b6, #e96f92, #1b2947);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #75517d 40%, #e96f92 65%, #f7f7b6);
background: radial-gradient(220% 105% at top center, #1b2947 10%, #4b76a7 40%, #81acae 65%, #f7f7b6);
}
.title {
margin: 0px auto 30px auto;
@ -164,7 +163,7 @@ getCode()
.register-form {
border-radius: 6px;
background: #fff;
width: 310px;
width: var(--base-login-width);
padding: 25px 15px 5px 15px;
.el-input {
height: 38px;

4
src/views/socialLogin.vue
View File

@ -49,7 +49,7 @@ if (callbackQuery.value && callbackQuery.value.state != null) {
router.push({ path: redirect.value || '/' })
})
.catch((error) => {
console.error(error)
console.error('login-error', error)
proxy.$modal.msgError(error.msg)
loading.value = false
})
@ -60,6 +60,6 @@ if (callbackQuery.value && callbackQuery.value.state != null) {
.loading {
text-align: center;
color: #ccc;
padding: 10px;
padding: 10px;
}
</style>