UDI
/
udi-spms-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
dev_招标
yewj 3 months ago
parent 1155b55c9a
commit a55f999573
7 changed files with 225 additions and 68 deletions
Show Stats Download Patch File Download Diff File

2
.env.development
Unescape Escape View File

@ -4,7 +4,7 @@ VUE_APP_TITLE = 供应商自助管理平台
# 开发环境配置 # 开发环境配置
ENV = 'development' ENV = 'development'
VUE_APP_BASE_API = 'http://192.168.0.188:9993' VUE_APP_BASE_API = 'http://127.0.0.1:9993'
# 应用访问路径 例如使用前缀 /admin/ # 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/' VUE_APP_CONTEXT_PATH = '/'

148
src/assets/styles/sidebar.scss
Unescape Escape View File

@ -26,6 +26,30 @@
z-index: 1001; z-index: 1001;
overflow: hidden; overflow: hidden;
box-shadow: $menu-box-shadow; box-shadow: $menu-box-shadow;
// 左侧边框渐变
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: $primary-gradient;
z-index: 2;
}
// 底部装饰效果
&::after {
content: '';
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
z-index: 1;
}
// reset element-ui css // reset element-ui css
.horizontal-collapse-transition { .horizontal-collapse-transition {
@ -34,6 +58,7 @@
.scrollbar-wrapper { .scrollbar-wrapper {
overflow-x: hidden !important; overflow-x: hidden !important;
padding: 0 8px;
} }
.el-scrollbar__bar.is-vertical { .el-scrollbar__bar.is-vertical {
@ -46,7 +71,7 @@
&.has-logo { &.has-logo {
.el-scrollbar { .el-scrollbar {
height: calc(100% - 60px); height: calc(100% - 110px);
} }
} }
@ -63,6 +88,7 @@
.svg-icon { .svg-icon {
margin-right: 16px; margin-right: 16px;
color: $base-menu-icon-color; color: $base-menu-icon-color;
transition: $base-transition;
} }
.el-menu { .el-menu {
@ -81,6 +107,8 @@
font-size: 14px; font-size: 14px;
color: $base-menu-color; color: $base-menu-color;
transition: $base-transition; transition: $base-transition;
border-radius: $base-border-radius;
margin: 4px 0;
} }
// menu hover // menu hover
@ -89,6 +117,11 @@
&:hover { &:hover {
background-color: $base-menu-hover !important; background-color: $base-menu-hover !important;
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
.svg-icon {
transform: translateX(3px);
color: $base-menu-color-active;
}
} }
} }
@ -100,6 +133,8 @@
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $base-sidebar-width !important; min-width: $base-sidebar-width !important;
background-color: $base-sub-menu-background !important; background-color: $base-sub-menu-background !important;
border-radius: $base-border-radius;
margin: 3px 0;
&:hover { &:hover {
background-color: $base-sub-menu-hover !important; background-color: $base-sub-menu-hover !important;
@ -120,7 +155,7 @@
.el-menu-item.is-active { .el-menu-item.is-active {
background-color: $base-menu-active-background !important; background-color: $base-menu-active-background !important;
color: $base-menu-color-active !important; color: $base-menu-color-active !important;
border-right: 3px solid $blue; border-left: 3px solid $blue;
&:hover { &:hover {
background-color: $base-menu-active-background !important; background-color: $base-menu-active-background !important;
@ -130,15 +165,36 @@
color: $base-menu-color-active; color: $base-menu-color-active;
} }
} }
// 子菜单上下边距
.el-submenu {
.el-menu {
padding: 2px 0;
}
}
// 添加滚动条美化
.el-scrollbar__thumb {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 20px;
&:hover {
background-color: rgba(0, 0, 0, 0.2);
}
}
} }
.hideSidebar { .hideSidebar {
.sidebar-container { .sidebar-container {
width: 54px !important; width: 64px !important;
.scrollbar-wrapper {
padding: 0 2px;
}
} }
.main-container { .main-container {
margin-left: 54px; margin-left: 64px;
} }
.submenu-title-noDropdown { .submenu-title-noDropdown {
@ -232,9 +288,13 @@
>.el-menu--popup { >.el-menu--popup {
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
background-color: $base-menu-background;
padding: 4px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
&::-webkit-scrollbar-track-piece { &::-webkit-scrollbar-track-piece {
background: #f0f2f5; background: $base-sub-menu-background;
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -242,51 +302,93 @@
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #c0c4cc; background: rgba(0, 0, 0, 0.1);
border-radius: 20px; border-radius: 20px;
} }
.el-menu-item {
border-radius: 6px;
margin: 2px 0;
&.is-active {
background-color: $base-menu-active-background !important;
color: $base-menu-color-active !important;
}
}
} }
} }
// 侧边栏 Logo 样式 // Logo样式
.sidebar-logo-container { .sidebar-logo-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 60px; height: 110px;
line-height: 60px; line-height: 50px;
background: $base-menu-background;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
padding: 10px 15px;
& .sidebar-logo-link { & .sidebar-logo-link {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255,255,255,1), rgba(240,242,245,0.7));
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.8);
margin-bottom: 6px;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
}
& .sidebar-logo { & .sidebar-logo {
width: 32px; width: 50px;
height: 32px; height: 50px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px;
} }
& .sidebar-title { & .sidebar-title {
display: inline-block; display: block;
margin: 0; margin: 0;
color: $base-menu-color-active; color: $base-logo-title-color;
font-weight: 600; font-weight: 600;
line-height: 60px; line-height: 24px;
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-family: 'Nunito', sans-serif;
vertical-align: middle; white-space: nowrap;
} }
} }
&.collapse { &.collapse {
.sidebar-logo { .sidebar-logo-link {
margin-right: 0; justify-content: center;
.logo-wrapper {
width: 50px;
height: 50px;
margin-bottom: 0;
}
.sidebar-logo {
width: 32px;
height: 32px;
}
} }
} }
} }

40
src/assets/styles/variables.scss
Unescape Escape View File

@ -1,13 +1,13 @@
// base color // base color
$blue: #1890ff; $blue: #409eff;
$light-blue: #36cfc9; $light-blue: #3f8cff;
$red: #f5222d; $red: #ef476f;
$pink: #E65D6E; $pink: #E65D6E;
$green: #52c41a; $green: #06d6a0;
$tiffany: #4AB7BD; $tiffany: #4AB7BD;
$yellow: #faad14; $yellow: #ffd166;
$panGreen: #30B08F; $panGreen: #30B08F;
$purple: #722ed1; $purple: #7209b7;
// 新增渐变色和背景色 // 新增渐变色和背景色
$primary-gradient: linear-gradient(45deg, $blue, $light-blue); $primary-gradient: linear-gradient(45deg, $blue, $light-blue);
@ -16,27 +16,29 @@ $background-dark: #141414;
$card-background-light: #ffffff; $card-background-light: #ffffff;
$card-background-dark: #1f1f1f; $card-background-dark: #1f1f1f;
// 默认菜单主题风格 // 默认菜单主题风格 - 浅色系
$base-menu-color: #bfcbd9; $base-menu-color: #303133;
$base-menu-color-active: #f4f4f5; $base-menu-color-active: #409eff;
$base-menu-background: #001529; $base-menu-background: #f0f2f5;
$base-logo-title-color: #ffffff; $base-logo-title-color: #303133;
// 保持原有的亮色配置作为备用
$base-menu-light-color: rgba(0,0,0,.70); $base-menu-light-color: rgba(0,0,0,.70);
$base-menu-light-background: #ffffff; $base-menu-light-background: #ffffff;
$base-logo-light-title-color: #001529; $base-logo-light-title-color: #303133;
$base-sub-menu-background: #000c17; // 子菜单颜色
$base-sub-menu-hover: #001528; $base-sub-menu-background: #e8ebf0;
$base-menu-hover: rgba(0, 0, 0, 0.06); $base-sub-menu-hover: #dde2e9;
$base-menu-active-background: rgba(24, 144, 255, 0.1); $base-menu-hover: rgba(64, 158, 255, 0.1);
$base-menu-icon-color: #bfcbd9; $base-menu-active-background: rgba(64, 158, 255, 0.15);
$base-menu-icon-color: #606266;
// 菜单阴影 // 菜单阴影
$menu-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35); $menu-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
// 新增样式变量 // 新增样式变量
$base-border-radius: 8px; $base-border-radius: 4px;
$base-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); $base-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
$base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); $base-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

2
src/layout/components/Sidebar/Item.vue
Unescape Escape View File

@ -30,4 +30,4 @@ export default {
return vnodes return vnodes
} }
} }
</script> </script>

76
src/layout/components/Sidebar/Logo.vue
Unescape Escape View File

@ -3,16 +3,18 @@
:style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"/> <div class="logo-wrapper">
<h1 v-show="false" v-else class="sidebar-title" <img v-if="logo" :src="logo" class="sidebar-logo"/>
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }"> </div>
{{ title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"/> <div class="logo-wrapper">
<h1 v-show="false" class="sidebar-title" <img v-if="logo" :src="logo" class="sidebar-logo"/>
</div>
<h1 class="sidebar-title"
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }"> :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
{{ title }} </h1> {{ title }}
</h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
@ -62,40 +64,70 @@ export default {
width: 100%; width: 100%;
height: 110px; height: 110px;
line-height: 50px; line-height: 50px;
background: #2b2f3a;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
padding: 10px 15px;
& .sidebar-logo-link { & .sidebar-logo-link {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.logo-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 6px;
transition: all 0.3s;
&:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
}
& .sidebar-logo { & .sidebar-logo {
width: 100px; width: 50px;
height: 100px; height: 50px;
margin-top: 12px;
vertical-align: middle; vertical-align: middle;
margin-right: 12px;
} }
& .sidebar-title { & .sidebar-title {
width: 100%; display: block;
display: inline-block;
margin: 0; margin: 0;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
line-height: 50px; line-height: 24px;
font-size: 14px; font-size: 16px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif; font-family: 'Nunito', sans-serif;
vertical-align: middle; white-space: nowrap;
} }
} }
&.collapse { &.collapse {
.sidebar-logo { .sidebar-logo-link {
width: 44px; justify-content: center;
height: 44px;
margin-right: 0px; .logo-wrapper {
width: 50px;
height: 50px;
margin-bottom: 0;
}
.sidebar-logo {
width: 32px;
height: 32px;
}
} }
} }
} }

6
src/layout/components/Sidebar/index.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> <div class="sidebar-container" :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
@ -55,3 +55,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped>
// 样式已移至sidebar.scss，此处移除以避免冲突
</style>

19
src/layout/index.vue
Unescape Escape View File

@ -71,6 +71,8 @@ export default {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #f9fafc;
overflow: hidden;
&.mobile.openSidebar { &.mobile.openSidebar {
position: fixed; position: fixed;
@ -98,7 +100,7 @@ export default {
} }
.hideSidebar .fixed-header { .hideSidebar .fixed-header {
width: calc(100% - 54px); width: calc(100% - 64px);
} }
.sidebarHide .fixed-header { .sidebarHide .fixed-header {
@ -108,4 +110,19 @@ export default {
.mobile .fixed-header { .mobile .fixed-header {
width: 100%; width: 100%;
} }
.main-container {
padding: 10px;
transition: margin-left 0.28s;
position: relative;
overflow: auto;
height: 100%;
width: calc(100% - #{$base-sidebar-width});
float: right;
box-sizing: border-box;
}
.hideSidebar .main-container {
width: calc(100% - 64px);
}
</style> </style>

Write Preview
Loading…
Cancel
Save