tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 导航栏右侧样式优化

Browse Source 
Former-commit-id: af72114efdff31af2d385b1be2f7a19ca2045c3d
This commit is contained in:
haoxr
2023-03-26 10:38:16 +08:00
parent e3919f3552
commit 078392728b
2 changed files with 20 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,25 +49,19 @@ function logout() {
<breadcrumb /> <breadcrumb />
</div> </div>
<!-- 右侧导航 --> <!-- 右侧导航设置 -->
<div class="navbar-right"> <div class="flex">
<!-- 导航栏设置(窄屏隐藏)--> <!-- 导航栏设置(窄屏隐藏)-->
<div v-if="device !== 'mobile'" class="navbar-setting-wrapper">
<div v-if="device !== 'mobile'" class="flex items-center">
<!--全屏 --> <!--全屏 -->
<screenfull <screenfull class="navbar-setting-item" />
class="navbar-setting-item hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
id="screenfull"
/>
<!-- 布局大小 --> <!-- 布局大小 -->
<el-tooltip content="布局大小" effect="dark" placement="bottom"> <el-tooltip content="布局大小" effect="dark" placement="bottom">
<size-select <size-select class="navbar-setting-item" />
class="navbar-setting-item hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
/>
</el-tooltip> </el-tooltip>
<!--语言选择--> <!--语言选择-->
<lang-select <lang-select class="navbar-setting-item" />
class="navbar-setting-item hover:bg-gray-50 dark:hover:bg-[var(--el-fill-color-light)]"
/>
</div> </div>
<!-- 用户头像 --> <!-- 用户头像 -->
@@ -112,19 +106,16 @@ function logout() {
justify-content: space-between; justify-content: space-between;
box-shadow: 0 0 1px #0003; box-shadow: 0 0 1px #0003;
.navbar-right {
display: flex;
.navbar-setting-wrapper {
display: flex;
align-items: center;
.navbar-setting-item { .navbar-setting-item {
height: 50px; height: 50px;
line-height: 50px; line-height: 50px;
padding: 0 8px; width: 30px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
text-align: center;
color: #5a5e66; color: #5a5e66;
} &:hover {
background: rgba(249, 250, 251, 1);
} }
} }
} }

3
src/styles/dark.scss
View File

@@ -12,6 +12,9 @@ html.dark{
.navbar { .navbar {
background-color: var(--el-bg-color); background-color: var(--el-bg-color);
color: var(--el-text-color-regular); color: var(--el-text-color-regular);
.navbar-setting-item:hover{
background: var(--el-fill-color-light);
}
} }
.right-panel-btn{ .right-panel-btn{