UI美化及渐变效果
This commit is contained in:
Cheng Zhou
@@ -92,10 +92,14 @@
|
||||
<StudySelector />
|
||||
<el-dropdown trigger="click" @command="onCommand" class="user-profile">
|
||||
<span class="dropdown-trigger compact">
|
||||
<div class="user-avatar">
|
||||
<img v-if="auth.user?.avatar_url" :src="auth.user.avatar_url" alt="avatar" />
|
||||
<span v-else>{{ (auth.user?.username || auth.user?.email || "用户").charAt(0).toUpperCase() }}</span>
|
||||
</div>
|
||||
<el-avatar
|
||||
:size="28"
|
||||
:src="auth.user?.avatar_url"
|
||||
shape="square"
|
||||
class="user-avatar-comp"
|
||||
>
|
||||
{{ (auth.user?.username || auth.user?.email || "U").charAt(0).toUpperCase() }}
|
||||
</el-avatar>
|
||||
<span class="username">{{ auth.user?.username || auth.user?.email || "用户" }}</span>
|
||||
<el-icon><ArrowDown /></el-icon>
|
||||
</span>
|
||||
@@ -117,10 +121,13 @@
|
||||
|
||||
<el-main class="layout-main">
|
||||
<div class="content-wrapper">
|
||||
<router-view />
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
@@ -153,7 +160,6 @@ const onCommand = (cmd: string) => {
|
||||
if (cmd === "logout") {
|
||||
onLogout();
|
||||
} else if (cmd === "profile") {
|
||||
// 预留个人设置路由占位，如后续有页面则跳转
|
||||
router.push("/profile");
|
||||
}
|
||||
};
|
||||
@@ -162,15 +168,16 @@ const onCommand = (cmd: string) => {
|
||||
<style scoped>
|
||||
.layout-container {
|
||||
height: 100vh;
|
||||
background-color: var(--ctms-bg-base);
|
||||
background-color: #f6f8fb;
|
||||
}
|
||||
|
||||
.layout-aside {
|
||||
background-color: #001529;
|
||||
background-color: #001529; /* 经典深色，保持专业感 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 4px 0 10px rgba(0, 0, 0, 0.05);
|
||||
z-index: 10;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.aside-logo {
|
||||
@@ -178,21 +185,22 @@ const onCommand = (cmd: string) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
background-color: #002140;
|
||||
background-color: #001529;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--ctms-primary);
|
||||
border-radius: 4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: linear-gradient(135deg, var(--ctms-primary) 0%, #6366f1 100%);
|
||||
border-radius: 8px;
|
||||
margin-right: 12px;
|
||||
box-shadow: 0 4px 8px rgba(47, 84, 235, 0.3);
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@@ -200,45 +208,60 @@ const onCommand = (cmd: string) => {
|
||||
border-right: none;
|
||||
background-color: transparent;
|
||||
flex: 1;
|
||||
padding: 16px 0;
|
||||
padding: 12px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.menu-divider {
|
||||
padding: 16px 24px 8px;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item) {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
margin: 4px 12px;
|
||||
border-radius: var(--ctms-radius);
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
transition: var(--ctms-transition);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item:hover) {
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active) {
|
||||
color: #fff !important;
|
||||
background-color: var(--ctms-primary) !important;
|
||||
box-shadow: 0 4px 12px rgba(47, 84, 235, 0.2);
|
||||
}
|
||||
|
||||
:deep(.el-menu-item.is-active::before) {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 12px;
|
||||
bottom: 12px;
|
||||
width: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title) {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
color: rgba(255, 255, 255, 0.7) !important;
|
||||
margin: 4px 12px;
|
||||
border-radius: var(--ctms-radius);
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
:deep(.el-sub-menu__title:hover) {
|
||||
:deep(.el-sub-menu.is-active .el-sub-menu__title) {
|
||||
color: #fff !important;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
:deep(.el-menu--inline) {
|
||||
@@ -257,7 +280,7 @@ const onCommand = (cmd: string) => {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
|
||||
height: 64px !important;
|
||||
z-index: 9;
|
||||
}
|
||||
@@ -265,85 +288,49 @@ const onCommand = (cmd: string) => {
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid var(--ctms-border-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: var(--ctms-primary-light);
|
||||
color: var(--ctms-primary);
|
||||
border-radius: 50%;
|
||||
.dropdown-trigger.compact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
padding: 4px 12px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #eef2f6;
|
||||
color: #334155;
|
||||
transition: var(--ctms-transition);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.dropdown-trigger.compact:hover {
|
||||
background: #f1f5f9;
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.user-avatar-comp {
|
||||
color: var(--ctms-primary) !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 8px !important;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--ctms-text-main);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.user-role {
|
||||
font-size: 12px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.dropdown-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.dropdown-trigger.compact {
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
background: #f4f6fa;
|
||||
border: 1px solid #e2e6f0;
|
||||
color: #333;
|
||||
}
|
||||
.avatar-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.user-dropdown-menu :deep(.el-dropdown-menu__item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.study-tag {
|
||||
font-weight: 500;
|
||||
color: var(--ctms-primary);
|
||||
border-color: var(--ctms-primary-hover);
|
||||
background-color: var(--ctms-primary-light);
|
||||
font-weight: 600;
|
||||
margin: 0 10px 0 8px;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.layout-main {
|
||||
@@ -352,7 +339,23 @@ const onCommand = (cmd: string) => {
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
padding: var(--ctms-spacing-lg);
|
||||
padding: 24px;
|
||||
min-height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
/* 过渡动画 */
|
||||
.fade-transform-enter-active,
|
||||
.fade-transform-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-transform-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
.fade-transform-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user