style: use unocss rewrite css

src/layout/components/header/components/GithubSite.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-icon mr20 size="18" style="cursor: pointer" @click="handleLinkClick">
+  <n-icon mr-20 size="18" style="cursor: pointer" @click="handleLinkClick">
     <icon-mdi:github />
   </n-icon>
 </template>
@@ -9,5 +9,3 @@ function handleLinkClick() {
   window.open('https://github.com/zclzone/vue-naive-admin')
 }
 </script>
-
-<style lang="scss" scoped></style>

src/layout/components/header/components/MenuCollapse.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-icon size="20" style="cursor: pointer" @click="appStore.switchCollapsed">
+  <n-icon size="20" cursor-pointer @click="appStore.switchCollapsed">
     <icon-mdi:format-indent-increase v-if="appStore.collapsed" />
     <icon-mdi:format-indent-decrease v-else />
   </n-icon>

src/layout/components/header/components/UserAvatar.vue

@@ -1,7 +1,7 @@
 <template>
   <n-dropdown :options="options" @select="handleSelect">
-    <div class="avatar">
-      <img :src="userStore.avatar" />
+    <div flex items-center cursor-pointer>
+      <img :src="userStore.avatar" mr10 w-35 h-35 rounded-full />
       <span>{{ userStore.name }}</span>
     </div>
   </n-dropdown>
@@ -35,18 +35,3 @@ function handleSelect(key) {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.avatar {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  img {
-    width: 100%;
-    width: 35px;
-    height: 35px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-}
-</style>

src/layout/components/header/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <header class="header">
-    <div class="h-left">
+  <header px-15 h-full flex items-center>
+    <div flex items-center>
       <MenuCollapse />
       <BreadCrumb ml-15 />
     </div>
-    <div class="h-right">
+    <div ml-auto flex items-center>
       <GithubSite />
       <FullScreen />
       <UserAvatar />
@@ -19,21 +19,3 @@ import FullScreen from './components/FullScreen.vue'
 import UserAvatar from './components/UserAvatar.vue'
 import GithubSite from './components/GithubSite.vue'
 </script>
-
-<style lang="scss" scoped>
-.header {
-  padding: 0 15px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  .h-left {
-    display: flex;
-    align-items: center;
-  }
-  .h-right {
-    display: flex;
-    align-items: center;
-  }
-}
-</style>