fix: Logo区域自适应优化,支持折叠/展开状态
- 文字溢出处理(ellipsis) - 折叠时只显示图标居中 - 传递collapsed状态给Logo组件 - 减小字体和间距适配150px侧边栏
This commit is contained in:
@@ -5,7 +5,7 @@
|
|||||||
:collapsible="collapsible"
|
:collapsible="collapsible"
|
||||||
v-model="collapsed"
|
v-model="collapsed"
|
||||||
:trigger="null">
|
:trigger="null">
|
||||||
<logo />
|
<logo :collapsed="collapsed" />
|
||||||
<s-menu
|
<s-menu
|
||||||
:collapsed="collapsed"
|
:collapsed="collapsed"
|
||||||
:menu="menus"
|
:menu="menus"
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="logo">
|
<div class="logo" :class="{ 'logo-collapsed': collapsed }">
|
||||||
<div class="logo-content">
|
<div class="logo-content">
|
||||||
<div class="logo-icon">🏔️</div>
|
<div class="logo-icon">🏔️</div>
|
||||||
<h1 v-if="showTitle" class="logo-title">{{ title }}</h1>
|
<h1 v-if="showTitle && !collapsed" class="logo-title">{{ title }}</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -23,12 +23,16 @@
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
required: false
|
required: false
|
||||||
|
},
|
||||||
|
collapsed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
required: false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
/*缩小首页布 局顶部的高度*/
|
|
||||||
@height: 49px;
|
@height: 49px;
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
@@ -36,34 +40,48 @@
|
|||||||
height: @height !important;
|
height: @height !important;
|
||||||
line-height: @height !important;
|
line-height: @height !important;
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
transition: background 300ms;
|
transition: all 300ms ease;
|
||||||
background: linear-gradient(135deg, #001a3a 0%, #003d82 100%);
|
background: linear-gradient(135deg, #001a3a 0%, #003d82 100%);
|
||||||
padding: 0 16px;
|
padding: 0 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
.logo-content {
|
.logo-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.logo-icon {
|
.logo-icon {
|
||||||
font-size: 24px;
|
font-size: 22px;
|
||||||
margin-right: 8px;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
|
justify-content: center;
|
||||||
|
min-width: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-title {
|
.logo-title {
|
||||||
font-size: 18px;
|
font-size: 14px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
margin: 0;
|
margin: 0 0 0 8px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 300ms ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
// 折叠状态:只显示图标居中
|
||||||
background: linear-gradient(135deg, #003d82 0%, #001a3a 100%);
|
&.logo-collapsed {
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.logo-content {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|||||||
Reference in New Issue
Block a user