|
|
@@ -1,7 +1,19 @@
|
|
|
<template>
|
|
|
- <a-layout-header class="header" :style="{backgroundColor: headerBgColor}">
|
|
|
- <a-row >
|
|
|
- <a-col :span="18" >
|
|
|
+ <a-layout-header class="header" v-if="isMobile" :style="{backgroundColor: headerBgColor}">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8" >
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="8" class="df-center">
|
|
|
+ <a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
|
|
|
+ </a-col>
|
|
|
+ <a-col class="df-center" span="8" >
|
|
|
+ <user />
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-layout-header>
|
|
|
+ <a-layout-header class="header" v-else :style="{backgroundColor: headerBgColor}">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="15" >
|
|
|
<a-menu
|
|
|
mode="horizontal"
|
|
|
:style="{ lineHeight: '64px', border: 'none' }"
|
|
|
@@ -16,7 +28,7 @@
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-col>
|
|
|
- <a-col :span="4" >
|
|
|
+ <a-col :span="9" >
|
|
|
<a-row :gutter="[8, 8]" justify="end" >
|
|
|
<a-col class="df-center" >
|
|
|
<a-button type="text" @click="changeTheme" > <IconTsx :name="iconName" /></a-button>
|
|
|
@@ -37,6 +49,7 @@ import user from './user.vue'
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
import { IconTsx } from '@/components/MicroComponents/index'
|
|
|
import { useDesignStore } from '@/store'
|
|
|
+import { useDeviceType } from '@/hooks'
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
@@ -52,6 +65,8 @@ const iconName = computed(() => designStore.theme ? 'sun' : 'moon')
|
|
|
|
|
|
const headerBgColor = computed(() => designStore.theme ? '#141414' : '#fff')
|
|
|
|
|
|
+const isMobile = useDeviceType()
|
|
|
+
|
|
|
const changeTheme = () => {
|
|
|
designStore.changeModeltheme()
|
|
|
}
|