|
@@ -1,15 +1,15 @@
|
|
|
<template>
|
|
|
<!-- :style="{ flex: layoutUserFlexNum }" -->
|
|
|
- <div class="layout-navbars-breadcrumb-user">
|
|
|
- <!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
|
|
+ <div class="layout-navbars-breadcrumb-user pr15">
|
|
|
+<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
|
|
<div class="layout-navbars-breadcrumb-user-icon" title="组件大小">
|
|
|
<i class="iconfont icon-ziti"></i>
|
|
|
</div>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
|
- <el-dropdown-item command="large" :disabled="disabledSize === 'large'">大型</el-dropdown-item>
|
|
|
- <el-dropdown-item command="default" :disabled="disabledSize === 'default'">默认</el-dropdown-item>
|
|
|
- <el-dropdown-item command="small" :disabled="disabledSize === 'small'">小型</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="large" :disabled="state.disabledSize === 'large'">大型</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="default" :disabled="state.disabledSize === 'default'">默认</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">小型</el-dropdown-item>
|
|
|
</el-dropdown-menu>
|
|
|
</template>
|
|
|
</el-dropdown>
|
|
@@ -20,8 +20,8 @@
|
|
|
</div>
|
|
|
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick" title="布局配置">
|
|
|
<i class="icon-skin iconfont"></i>
|
|
|
- </div> -->
|
|
|
- <div class="layout-navbars-breadcrumb-user-icon">
|
|
|
+ </div>-->
|
|
|
+ <div class="layout-navbars-breadcrumb-user-icon mr10">
|
|
|
<el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
|
|
|
<template #reference>
|
|
|
<el-badge :value="12">
|
|
@@ -42,14 +42,13 @@
|
|
|
<el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
|
|
|
<div class="layout-navbars-breadcrumb-user-link" :title="userInfos.name">
|
|
|
<div class="layout-navbars-breadcrumb-user-link-photoBox">
|
|
|
- <el-avatar :src="userInfos.photo" :size="28" class="layout-navbars-breadcrumb-user-link-photo">
|
|
|
+ <el-avatar :src="userInfos.photo" :size="24" class="layout-navbars-breadcrumb-user-link-photo">
|
|
|
<SvgIcon name="ele-UserFilled" color="var(--el-color-primary)" />
|
|
|
</el-avatar>
|
|
|
+ <span class="text-no-wrap layout-navbars-breadcrumb-user-link-photoBox-name">{{ userInfos.name ? userInfos.name : '' }}</span>
|
|
|
+ <SvgIcon name="ele-ArrowDown" class="ml3"/>
|
|
|
</div>
|
|
|
- <div class="mt10 text-no-wrap">{{ userInfos.name ? userInfos.name : '' }}</div>
|
|
|
- <!-- <el-icon class="el-icon--right">
|
|
|
- <ele-ArrowDown />
|
|
|
- </el-icon> -->
|
|
|
+
|
|
|
</div>
|
|
|
<template #dropdown>
|
|
|
<el-dropdown-menu>
|
|
@@ -390,13 +389,13 @@ const onSearchClick = () => {
|
|
|
searchRef.value.openSearch();
|
|
|
};
|
|
|
// 组件大小改变
|
|
|
-// const onComponentSizeChange = (size: string) => {
|
|
|
-// Local.remove('themeConfig');
|
|
|
-// themeConfig.value.globalComponentSize = size;
|
|
|
-// Local.set('themeConfig', themeConfig.value);
|
|
|
-// initComponentSize();
|
|
|
-// window.location.reload();
|
|
|
-// };
|
|
|
+const onComponentSizeChange = (size: string) => {
|
|
|
+ Local.remove('themeConfig');
|
|
|
+ themeConfig.value.globalComponentSize = size;
|
|
|
+ Local.set('themeConfig', themeConfig.value);
|
|
|
+ initComponentSize();
|
|
|
+ window.location.reload();
|
|
|
+};
|
|
|
// 初始化全局组件大小
|
|
|
const initComponentSize = () => {
|
|
|
switch (Local.get('themeConfig').globalComponentSize) {
|
|
@@ -475,10 +474,12 @@ onMounted(() => {
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.layout-navbars-breadcrumb-user {
|
|
|
- width: 150px;
|
|
|
- overflow: hidden;
|
|
|
+
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
&-link {
|
|
|
height: 100%;
|
|
|
white-space: nowrap;
|
|
@@ -487,11 +488,16 @@ onMounted(() => {
|
|
|
&-photo {
|
|
|
background-color: var(--hotline-bg-main-color);
|
|
|
border: 2px solid var(--el-color-primary);
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
&-photoBox {
|
|
|
- width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &-name{
|
|
|
+ max-width: 150px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|