优化 AdminLayout 组件,调整用户名称显示逻辑以适应不同设备,新增移动端样式以提升用户体验。
This commit is contained in:
@@ -62,7 +62,7 @@
|
|||||||
<div v-if="!isMobile" class="spacer" />
|
<div v-if="!isMobile" class="spacer" />
|
||||||
<el-dropdown>
|
<el-dropdown>
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
<span v-if="!isMobile">{{ currentUser?.username || '用户' }}</span>
|
<span>{{ currentUser?.username || '用户' }}</span>
|
||||||
<i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
|
<i class="el-icon el-icon--right"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10l5 5 5-5z"/></svg></i>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
@@ -333,6 +333,26 @@ onUnmounted(() => {
|
|||||||
.name {
|
.name {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-page-title {
|
||||||
|
font-size: 14px;
|
||||||
|
max-width: 120px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dropdown-link {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dropdown-link span {
|
||||||
|
max-width: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 桌面端样式 */
|
/* 桌面端样式 */
|
||||||
|
|||||||
Reference in New Issue
Block a user