refactor: 更新组件样式,优化全屏、通知下拉和大小选择器的触发区域
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user