参照vben修改侧边栏样式,增加tabs旁边的刷新与全屏按钮

This commit is contained in:
vben
2022-07-02 17:20:29 +08:00
parent 6e089a8c1e
commit 560d1cb9e6
3 changed files with 836 additions and 718 deletions
+20 -16
View File
@@ -1,5 +1,5 @@
<template>
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
<div class="layout-navbars-breadcrumb-user" :style="{ flex: layoutUserFlexNum }">
<div>
<el-select v-show="userInfos.portals.length>1" v-model='userInfos.dePortal' placeholder='门户名称' @change="portalChange" style='margin-right: 10px;width: 140px'>
<el-option
@@ -10,18 +10,18 @@
/>
</el-select>
</div>
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
<div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
<el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
<el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">-->
<!-- <div class="layout-navbars-breadcrumb-user-icon">-->
<!-- <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>-->
<!-- </div>-->
<!-- <template #dropdown>-->
<!-- <el-dropdown-menu>-->
<!-- <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>-->
<!-- <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>-->
<!-- <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>-->
<!-- </el-dropdown-menu>-->
<!-- </template>-->
<!-- </el-dropdown>-->
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
<div class="layout-navbars-breadcrumb-user-icon">
<i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>
@@ -39,9 +39,6 @@
<ele-Search />
</el-icon>
</div>
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
</div>
<div class="layout-navbars-breadcrumb-user-icon">
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
<template #reference>
@@ -83,6 +80,12 @@
</template>
</el-dropdown>
<Search ref="searchRef" />
<div class="layout-navbars-breadcrumb-user-icon" style="width: 42px" @click="onLayoutSetingClick">
<!-- <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
<el-icon class="el-icon--right">
<ele-Setting />
</el-icon>
</div>
</div>
</template>
@@ -276,6 +279,7 @@ export default defineComponent({
<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
cursor: pointer;
display: flex;
align-items: center;
justify-content: flex-end;
File diff suppressed because it is too large Load Diff
+35
View File
@@ -260,3 +260,38 @@
.el-sub-menu__title .el-tooltip__trigger .el-tooltip__trigger{
padding-left: 10px;
}
.el-menu--vertical .el-menu-item.is-active{
background-color: #0960bd !important;
color: white;
}
//.el-menu--vertical .el-menu-item.is-hover{
// background-color: red !important;
// color: white;
//}
//
//.el-menu--vertical .el-sub-menu .is-active .el-sub-menu__title{
// color: white;
//}
.el-menu--vertical .el-menu-item{
color: #b3b9bf ;
height: 48px !important;
line-height: 48px !important;
}
.el-menu--vertical .el-menu-item:hover{
color: white ;
}
.el-menu--vertical .el-sub-menu__title{
color: #b3b9bf;
height: 48px !important;
line-height: 48px !important;
}
.el-menu--vertical .el-sub-menu__title:hover{
color: white ;
}