refactor: 更新组件样式,优化全屏、通知下拉和大小选择器的触发区域

This commit is contained in:
Ray.Hao
2026-01-10 12:34:45 +08:00
parent ca15fa0322
commit 15fe2c2328
4 changed files with 62 additions and 14 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div @click="toggle">
<div class="fullscreen-trigger" @click="toggle">
<div :class="`i-svg:` + (isFullscreen ? 'fullscreen-exit' : 'fullscreen')" />
</div>
</template>
@@ -8,4 +8,12 @@
const { isFullscreen, toggle } = useFullscreen();
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.fullscreen-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>

View File

@@ -1,10 +1,12 @@
<template>
<el-dropdown trigger="click">
<el-badge v-if="list.length > 0" :value="list.length" :max="99">
<div class="i-svg:bell" />
</el-badge>
<el-dropdown class="notice__dropdown" trigger="click">
<div class="notice__trigger">
<el-badge v-if="list.length > 0" :value="list.length" :max="99">
<div class="i-svg:bell" />
</el-badge>
<div v-else class="i-svg:bell" />
<div v-else class="i-svg:bell" />
</div>
<template #dropdown>
<div class="p-5">
@@ -79,4 +81,22 @@ import { useNotice } from "./useNotice";
const { list, detail, dialogVisible, read, readAll, goMore } = useNotice();
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.notice {
&__dropdown {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
&__trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
</style>

View File

@@ -2,7 +2,9 @@
<!-- 布局大小 -->
<el-tooltip :content="t('sizeSelect.tooltip')" effect="dark" placement="bottom">
<el-dropdown trigger="click" @command="handleSizeChange">
<div class="i-svg:size" />
<div class="size-trigger">
<div class="i-svg:size" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
@@ -38,3 +40,13 @@ function handleSizeChange(size: string) {
ElMessage.success(t("sizeSelect.message.success"));
}
</script>
<style lang="scss" scoped>
.size-trigger {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
</style>

View File

@@ -182,7 +182,7 @@ function handleSettingsClick() {
.navbar-actions {
display: flex;
align-items: center;
height: 100%;
min-height: 44px;
&__item {
position: relative;
@@ -190,8 +190,7 @@ function handleSettingsClick() {
align-items: center;
justify-content: center;
min-width: 44px; /* 增加最小点击区域到44px符合人机交互标<E4BA92>?*/
height: 100%;
min-height: 44px;
height: 44px;
padding: 0 8px;
text-align: center;
cursor: pointer;
@@ -211,7 +210,16 @@ function handleSettingsClick() {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
height: 44px;
}
:deep(.i-svg\:language) {
flex-shrink: 0;
width: 18px;
height: 18px;
font-size: 18px;
line-height: 18px;
background-size: 18px 18px;
}
// 图标样式
@@ -235,7 +243,7 @@ function handleSettingsClick() {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
height: 44px;
padding: 0 8px;
&__avatar {