Skip to content

Q
qr-consistency-vue3
Commit 64844fbe authored by qiyaxin's avatar qiyaxin
Browse files
Options

前端框架主题颜色修改

parent cdfbf860
Expand all Show whitespace changes
Inline Side-by-side
Showing with 82 additions and 921 deletions
src/assets/styles/index.scss
View file @ 64844fbe
...@@ -13,12 +13,7 @@ body { ...@@ -13,12 +13,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: font-family:
Helvetica Neue, "思源黑体",
Helvetica,
PingFang SC,
Hiragino Sans GB,
Microsoft YaHei,
Arial,
sans-serif; sans-serif;
} }
...@@ -132,7 +127,12 @@ aside { ...@@ -132,7 +127,12 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
display: flex;
flex-direction: column; /* 垂直排列 */
margin: 24px;
padding: 20px; padding: 20px;
background: #FAFAFB;
min-height: calc(100vh - 150px);
} }
.components-container { .components-container {
......
src/assets/styles/sidebar.scss
View file @ 64844fbe
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
.sub-menu-title-noDropdown, .sub-menu-title-noDropdown,
.el-sub-menu__title { .el-sub-menu__title {
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.1) !important;
} }
} }
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.1) !important;
} }
} }
......
src/assets/styles/variables.module.scss
View file @ 64844fbe
...@@ -11,8 +11,8 @@ $panGreen: #30b08f; ...@@ -11,8 +11,8 @@ $panGreen: #30b08f;
// 默认主题变量 // 默认主题变量
$menuText: #bfcbd9; $menuText: #bfcbd9;
$menuActiveText: #409eff; $menuActiveText: #409eff;
$menuBg: #304156; $menuBg: #123881;
$menuHover: #263445; $menuHover: #1B51B4;
// 浅色主题theme-light // 浅色主题theme-light
$menuLightBg: #ffffff; $menuLightBg: #ffffff;
...@@ -26,10 +26,10 @@ $sideBarWidth: 200px; ...@@ -26,10 +26,10 @@ $sideBarWidth: 200px;
// 菜单暗色变量 // 菜单暗色变量
$base-menu-color: #bfcbd9; $base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #FFFFFF; //选中菜单标题背景色
$base-menu-background: #304156; $base-menu-background: #143468;
$base-sub-menu-background: #1f2d3d; $base-sub-menu-background: #ffffff; //选中展开的子菜单背景色
$base-sub-menu-hover: #001528; $base-sub-menu-hover: #f4f4f5; //鼠标悬停处子菜单背景色
// 组件变量 // 组件变量
$--color-primary: #409eff; $--color-primary: #409eff;
...@@ -73,7 +73,7 @@ $--color-info: #909399; ...@@ -73,7 +73,7 @@ $--color-info: #909399;
--menu-hover: #{$menuHover}; --menu-hover: #{$menuHover};
--navbar-bg: #ffffff; --navbar-bg: #ffffff;
--navbar-text: #303133; --navbar-text: #f1f1f1;
/* splitpanes default-theme 变量 */ /* splitpanes default-theme 变量 */
--splitpanes-default-bg: #ffffff; --splitpanes-default-bg: #ffffff;
......
src/languageSwitch/cn.json 0 → 100644
View file @ 64844fbe
{
"title": "Chery back office management framework"
}
src/languageSwitch/en.json 0 → 100644
View file @ 64844fbe
{
"title": "奇瑞后台管理框架"
}
src/layout/components/AppMain.vue
View file @ 64844fbe
...@@ -44,6 +44,7 @@ function addIframe() { ...@@ -44,6 +44,7 @@ function addIframe() {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #F3F4F7;
} }
.fixed-header + .app-main { .fixed-header + .app-main {
......
src/layout/components/Navbar.vue
View file @ 64844fbe
...@@ -18,33 +18,33 @@ ...@@ -18,33 +18,33 @@
/> />
<div class="right-menu"> <div class="right-menu">
<template v-if="appStore.device !== 'mobile'"> <!-- <template v-if="appStore.device !== 'mobile'">-->
<header-search id="header-search" class="right-menu-item" /> <!-- <header-search id="header-search" class="right-menu-item" />-->
<el-tooltip content="源码地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">-->
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" /> <!-- <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="文档地址" effect="dark" placement="bottom"> <!-- <el-tooltip content="文档地址" effect="dark" placement="bottom">-->
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" /> <!-- <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
<screenfull id="screenfull" class="right-menu-item hover-effect" /> <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
<el-tooltip content="主题模式" effect="dark" placement="bottom"> <!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">-->
<div <!-- <div-->
class="right-menu-item hover-effect theme-switch-wrapper" <!-- class="right-menu-item hover-effect theme-switch-wrapper"-->
@click="toggleTheme" <!-- @click="toggleTheme"-->
> <!-- >-->
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" /> <!-- <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />-->
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" /> <!-- <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />-->
</div> <!-- </div>-->
</el-tooltip> <!-- </el-tooltip>-->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">-->
<size-select id="size-select" class="right-menu-item hover-effect" /> <!-- <size-select id="size-select" class="right-menu-item hover-effect" />-->
</el-tooltip> <!-- </el-tooltip>-->
</template> <!-- </template>-->
<div class="avatar-container"> <div class="avatar-container">
<el-dropdown <el-dropdown
class="right-menu-item hover-effect" class="right-menu-item hover-effect"
...@@ -52,8 +52,9 @@ ...@@ -52,8 +52,9 @@
@command="handleCommand" @command="handleCommand"
> >
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img :src="userStore.avatar" class="user-avatar" /> <div> <img :src="userStore.avatar" class="user-avatar" /> </div>
<el-icon><caret-bottom /></el-icon> <div> <span class="name-avatar"> {{userStore.name}}</span> </div>
<div> <el-icon><caret-bottom /></el-icon> </div>
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
...@@ -138,10 +139,11 @@ function toggleTheme() { ...@@ -138,10 +139,11 @@ function toggleTheme() {
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: 50px; height: 60px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: var(--navbar-bg); background: var(--navbar-bg);
background-color: #123881;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.hamburger-container { .hamburger-container {
...@@ -214,16 +216,18 @@ function toggleTheme() { ...@@ -214,16 +216,18 @@ function toggleTheme() {
.avatar-container { .avatar-container {
margin-right: 40px; margin-right: 40px;
.avatar-wrapper { .avatar-wrapper {
margin-top: 5px; margin-top: 18px;
position: relative; display: flex;
.user-avatar { .user-avatar {
margin-right: 5px;
cursor: pointer; cursor: pointer;
width: 40px; width: 24px;
height: 40px; height: 24px;
border-radius: 10px; border-radius: 50px;
}
.name-avatar{
font-size: 14px;
} }
i { i {
...@@ -234,6 +238,7 @@ function toggleTheme() { ...@@ -234,6 +238,7 @@ function toggleTheme() {
font-size: 12px; font-size: 12px;
} }
} }
avatar-wrapper-name
} }
} }
} }
......
src/layout/components/Sidebar/Logo.vue
View file @ 64844fbe
...@@ -66,11 +66,12 @@ const getLogoTextColor = computed(() => { ...@@ -66,11 +66,12 @@ const getLogoTextColor = computed(() => {
} }
.sidebar-logo-container { .sidebar-logo-container {
background-color: #123881;
position: relative; position: relative;
width: 100%; width: 100%;
height: 50px; height: 60px;
line-height: 50px; line-height: 50px;
background: v-bind(getLogoBackground); //background: v-bind(getLogoBackground);
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
......
src/layout/components/TagsView/index.vue
View file @ 64844fbe
...@@ -276,13 +276,13 @@ function handleScroll() { ...@@ -276,13 +276,13 @@ function handleScroll() {
<style lang="scss" scoped> <style lang="scss" scoped>
.tags-view-container { .tags-view-container {
height: 34px; height: 45px;
width: 100%; width: 100%;
background: var(--tags-bg, #fff); background: var(--tags-bg, #fff);
border-bottom: 1px solid var(--tags-item-border, #d8dce5); border-bottom: 1px solid var(--tags-item-border, #d8dce5);
box-shadow: //box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.12), // 0 1px 3px 0 rgba(0, 0, 0, 0.12),
0 0 3px 0 rgba(0, 0, 0, 0.04); // 0 0 3px 0 rgba(0, 0, 0, 0.04);
.tags-view-wrapper { .tags-view-wrapper {
.tags-view-item { .tags-view-item {
......
src/views/index.vue
View file @ 64844fbe
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment