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

样式修改

Browse Source
dev_招标
yewj 2 weeks 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'
VUE_APP_BASE_API = 'http://192.168.0.188:9993'
VUE_APP_BASE_API = 'http://127.0.0.1:9993'
# 应用访问路径 例如使用前缀 /admin/
VUE_APP_CONTEXT_PATH = '/'

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

@ -26,6 +26,30 @@
z-index: 1001;
overflow: hidden;
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
.horizontal-collapse-transition {
@ -34,6 +58,7 @@
.scrollbar-wrapper {
overflow-x: hidden !important;
padding: 0 8px;
}
.el-scrollbar__bar.is-vertical {
@ -46,7 +71,7 @@
&.has-logo {
.el-scrollbar {
height: calc(100% - 60px);
height: calc(100% - 110px);
}
}
@ -63,6 +88,7 @@
.svg-icon {
margin-right: 16px;
color: $base-menu-icon-color;
transition: $base-transition;
}
.el-menu {
@ -81,6 +107,8 @@
font-size: 14px;
color: $base-menu-color;
transition: $base-transition;
border-radius: $base-border-radius;
margin: 4px 0;
}
// menu hover
@ -89,6 +117,11 @@
&:hover {
background-color: $base-menu-hover !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 {
min-width: $base-sidebar-width !important;
background-color: $base-sub-menu-background !important;
border-radius: $base-border-radius;
margin: 3px 0;
&:hover {
background-color: $base-sub-menu-hover !important;
@ -120,7 +155,7 @@
.el-menu-item.is-active {
background-color: $base-menu-active-background !important;
color: $base-menu-color-active !important;
border-right: 3px solid $blue;
border-left: 3px solid $blue;
&:hover {
background-color: $base-menu-active-background !important;
@ -130,15 +165,36 @@
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 {
.sidebar-container {
width: 54px !important;
width: 64px !important;
.scrollbar-wrapper {
padding: 0 2px;
}
}
.main-container {
margin-left: 54px;
margin-left: 64px;
}
.submenu-title-noDropdown {
@ -232,9 +288,13 @@
>.el-menu--popup {
max-height: 100vh;
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 {
background: #f0f2f5;
background: $base-sub-menu-background;
}
&::-webkit-scrollbar {
@ -242,51 +302,93 @@
}
&::-webkit-scrollbar-thumb {
background: #c0c4cc;
background: rgba(0, 0, 0, 0.1);
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 {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: $base-menu-background;
height: 110px;
line-height: 50px;
text-align: center;
overflow: hidden;
padding: 10px 15px;
& .sidebar-logo-link {
height: 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,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 {
width: 32px;
height: 32px;
width: 50px;
height: 50px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
display: inline-block;
display: block;
margin: 0;
color: $base-menu-color-active;
color: $base-logo-title-color;
font-weight: 600;
line-height: 60px;
line-height: 24px;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
vertical-align: middle;
font-family: 'Nunito', sans-serif;
white-space: nowrap;
}
}
&.collapse {
.sidebar-logo {
margin-right: 0;
.sidebar-logo-link {
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
$blue: #1890ff;
$light-blue: #36cfc9;
$red: #f5222d;
$blue: #409eff;
$light-blue: #3f8cff;
$red: #ef476f;
$pink: #E65D6E;
$green: #52c41a;
$green: #06d6a0;
$tiffany: #4AB7BD;
$yellow: #faad14;
$yellow: #ffd166;
$panGreen: #30B08F;
$purple: #722ed1;
$purple: #7209b7;
// 新增渐变色和背景色
$primary-gradient: linear-gradient(45deg, $blue, $light-blue);
@ -16,27 +16,29 @@ $background-dark: #141414;
$card-background-light: #ffffff;
$card-background-dark: #1f1f1f;
// 默认菜单主题风格
$base-menu-color: #bfcbd9;
$base-menu-color-active: #f4f4f5;
$base-menu-background: #001529;
$base-logo-title-color: #ffffff;
// 默认菜单主题风格 - 浅色系
$base-menu-color: #303133;
$base-menu-color-active: #409eff;
$base-menu-background: #f0f2f5;
$base-logo-title-color: #303133;
// 保持原有的亮色配置作为备用
$base-menu-light-color: rgba(0,0,0,.70);
$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-menu-hover: rgba(0, 0, 0, 0.06);
$base-menu-active-background: rgba(24, 144, 255, 0.1);
$base-menu-icon-color: #bfcbd9;
// 子菜单颜色
$base-sub-menu-background: #e8ebf0;
$base-sub-menu-hover: #dde2e9;
$base-menu-hover: rgba(64, 158, 255, 0.1);
$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-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
}
}
</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 }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"/>
<h1 v-show="false" v-else class="sidebar-title"
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
{{ title }} </h1>
<div class="logo-wrapper">
<img v-if="logo" :src="logo" class="sidebar-logo"/>
</div>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"/>
<h1 v-show="false" class="sidebar-title"
<div class="logo-wrapper">
<img v-if="logo" :src="logo" class="sidebar-logo"/>
</div>
<h1 class="sidebar-title"
:style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
{{ title }} </h1>
{{ title }}
</h1>
</router-link>
</transition>
</div>
@ -62,40 +64,70 @@ export default {
width: 100%;
height: 110px;
line-height: 50px;
background: #2b2f3a;
text-align: center;
overflow: hidden;
padding: 10px 15px;
& .sidebar-logo-link {
height: 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 {
width: 100px;
height: 100px;
margin-top: 12px;
width: 50px;
height: 50px;
vertical-align: middle;
margin-right: 12px;
}
& .sidebar-title {
width: 100%;
display: inline-block;
display: block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
line-height: 24px;
font-size: 16px;
font-family: 'Nunito', sans-serif;
white-space: nowrap;
}
}
&.collapse {
.sidebar-logo {
width: 44px;
height: 44px;
margin-right: 0px;
.sidebar-logo-link {
justify-content: center;
.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>
<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" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
@ -55,3 +55,7 @@ export default {
}
};
</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;
height: 100%;
width: 100%;
background-color: #f9fafc;
overflow: hidden;
&.mobile.openSidebar {
position: fixed;
@ -98,7 +100,7 @@ export default {
}
.hideSidebar .fixed-header {
width: calc(100% - 54px);
width: calc(100% - 64px);
}
.sidebarHide .fixed-header {
@ -108,4 +110,19 @@ export default {
.mobile .fixed-header {
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>

Write Preview
Loading…
Cancel
Save