chore: 优化样式
This commit is contained in:
@@ -450,14 +450,6 @@ p {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.global-search {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.header-badge {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.header-user {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
|
||||
@@ -56,14 +56,9 @@
|
||||
</div>
|
||||
|
||||
<div class="header-right">
|
||||
<el-input v-model="keyword" class="global-search" :prefix-icon="Search" clearable placeholder="全局搜索..." />
|
||||
<el-badge :value="3" class="header-badge">
|
||||
<el-button :icon="Bell" circle />
|
||||
</el-badge>
|
||||
<el-tooltip content="切换主题" placement="bottom">
|
||||
<el-button :icon="appStore.darkMode ? Sunny : Moon" circle @click="appStore.darkMode = !appStore.darkMode" />
|
||||
</el-tooltip>
|
||||
<el-button :icon="QuestionFilled" circle />
|
||||
<div class="header-user">
|
||||
<strong>{{ appStore.user.name }}</strong>
|
||||
<span>{{ appStore.roleLabel }}</span>
|
||||
@@ -88,9 +83,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ArrowDown, Bell, Expand, Fold, Moon, QuestionFilled, Search, Sunny } from '@element-plus/icons-vue'
|
||||
import { ArrowDown, Expand, Fold, Moon, Sunny } from '@element-plus/icons-vue'
|
||||
import logoUrl from '@/assets/images/logo.png'
|
||||
import { getPagePath, pageTitles, roleMenus } from '@/mock/navigation'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
@@ -98,7 +93,6 @@ import { useAppStore } from '@/stores/app'
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const appStore = useAppStore()
|
||||
const keyword = ref('')
|
||||
|
||||
const visibleSections = computed(() => roleMenus[appStore.user.role])
|
||||
const sidebarToggleIcon = computed(() => (appStore.collapsed ? Expand : Fold))
|
||||
|
||||
Reference in New Issue
Block a user