style(header): 修改头部图标默认值大小

This commit is contained in:
chen.home 2022-08-27 23:27:02 +08:00
parent c7249558a6
commit 2a3fb4c64b
10 changed files with 25 additions and 19 deletions

View File

@ -1,17 +1,23 @@
<template> <template>
<n-icon :size="props.size || 20" :depth="props.depth" :color="props.color"> <n-icon :size="props.size" :depth="props.depth" :color="props.color">
<Icon :icon="props.icon" /> <Icon :icon="props.icon" />
</n-icon> </n-icon>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
const props = defineProps<{ const props = withDefaults(
defineProps<{
icon: string; icon: string;
color?: string; color?: string;
size?: number; size?: number;
depth?: 1 | 2 | 3 | 4 | 5; depth?: 1 | 2 | 3 | 4 | 5;
}>(); }>(),
{
size: 18,
icon: 'icon-park-outline:baby-feet',
},
);
</script> </script>
<style scoped></style> <style scoped></style>

View File

@ -17,7 +17,7 @@ const router = useRouter();
const routeStore = useRouteStore(); const routeStore = useRouteStore();
const { routerPush } = useAppRouter(); const { routerPush } = useAppRouter();
const routes = computed(() => { const routes = computed(() => {
return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string!, routeStore.userRoutes); return routeStore.createBreadcrumbFromRoutes(router.currentRoute.value.name as string, routeStore.userRoutes);
}); });
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<HeaderButton @click="appStore.toggleCollapse()"> <HeaderButton @click="appStore.toggleCollapse()">
<i-icon-park-outline-menu-unfold v-if="appStore.collapsed" class="text-18px" /> <i-icon-park-outline-menu-unfold v-if="appStore.collapsed" />
<i-icon-park-outline-menu-fold v-else class="text-18px" /> <i-icon-park-outline-menu-fold v-else />
</HeaderButton> </HeaderButton>
</template> </template>

View File

@ -2,8 +2,8 @@
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<HeaderButton @click="appStore.toggleDarkMode()"> <HeaderButton @click="appStore.toggleDarkMode()">
<i-icon-park-outline-moon v-if="appStore.darkMode" class="text-18px" /> <i-icon-park-outline-moon v-if="appStore.darkMode" />
<i-icon-park-outline-sun v-else class="text-18px" /> <i-icon-park-outline-sun v-else />
</HeaderButton> </HeaderButton>
</template> </template>
<span>切换主题模式</span> <span>切换主题模式</span>

View File

@ -2,8 +2,8 @@
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<HeaderButton @click="appStore.toggleFullScreen()"> <HeaderButton @click="appStore.toggleFullScreen()">
<i-icon-park-outline-off-screen-two v-if="appStore.fullScreen" class="text-18px" /> <i-icon-park-outline-off-screen-two v-if="appStore.fullScreen" />
<i-icon-park-outline-full-screen-two v-else class="text-18px" /> <i-icon-park-outline-full-screen-two v-else />
</HeaderButton> </HeaderButton>
</template> </template>
<span>全屏</span> <span>全屏</span>

View File

@ -2,7 +2,7 @@
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<HeaderButton @click="toMyGithub"> <HeaderButton @click="toMyGithub">
<i-icon-park-outline-github class="text-18px" /> <i-icon-park-outline-github />
</HeaderButton> </HeaderButton>
</template> </template>
<span>Github</span> <span>Github</span>

View File

@ -5,7 +5,7 @@
<template #trigger> <template #trigger>
<HeaderButton> <HeaderButton>
<n-badge :value="massageCount" :max="99" style="color: unset"> <n-badge :value="massageCount" :max="99" style="color: unset">
<i-icon-park-outline-remind class="text-18px" /> <i-icon-park-outline-remind />
</n-badge> </n-badge>
</HeaderButton> </HeaderButton>
</template> </template>

View File

@ -2,7 +2,7 @@
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<HeaderButton @click="handleReload"> <HeaderButton @click="handleReload">
<i-icon-park-outline-refresh class="text-18px" :class="{ 'animate-spin': loading }" /> <i-icon-park-outline-refresh :class="{ 'animate-spin': loading }" />
</HeaderButton> </HeaderButton>
</template> </template>
<span>刷新页面</span> <span>刷新页面</span>

View File

@ -2,7 +2,7 @@
<n-tooltip placement="bottom" trigger="hover"> <n-tooltip placement="bottom" trigger="hover">
<template #trigger> <template #trigger>
<HeaderButton @click="handleSearch"> <HeaderButton @click="handleSearch">
<i-icon-park-outline-search class="text-18px" /> <i-icon-park-outline-search />
</HeaderButton> </HeaderButton>
</template> </template>
<span>搜索</span> <span>搜索</span>

View File

@ -3,7 +3,7 @@
<template #trigger> <template #trigger>
<HeaderButton @click="openSetting"> <HeaderButton @click="openSetting">
<div> <div>
<i-icon-park-outline-setting-two class="text-18px" /> <i-icon-park-outline-setting-two />
<n-drawer v-model:show="drawerActive" :width="300"> <n-drawer v-model:show="drawerActive" :width="300">
<n-drawer-content title="系统设置">这是系统设置但是暂时还没有内容</n-drawer-content> <n-drawer-content title="系统设置">这是系统设置但是暂时还没有内容</n-drawer-content>
</n-drawer> </n-drawer>