首页头部

components.d.ts

@@ -10,12 +10,26 @@ declare module '@vue/runtime-core' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    Hleft: typeof import('./src/components/header/hleft.vue')['default']
+    Hright: typeof import('./src/components/header/hright.vue')['default']
+    Hsearch: typeof import('./src/components/header/hsearch.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }

src/components/header/hleft.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { Sunny, Moon } from '@element-plus/icons-vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <el-space wrap>
+    <el-switch v-model="isDark"
+               class="mt-2 hidden-md-and-down"
+               size="large"
+               style="margin-left: 24px"
+               inline-prompt
+               :active-icon="Moon"
+               :inactive-icon="Sunny" />
+    <el-button>登陆/注册</el-button>
+  </el-space>
+
+</template>
+
+<style scoped>
+</style>

src/components/header/hright.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Operation } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import { useDark, useToggle } from '@vueuse/core'
+import { Sunny, Moon, Close } from '@element-plus/icons-vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+const url = ''
+const drawer = ref(false)
+</script>
+
+<template>
+  <el-image style="width: 100px; height: 50px"
+            :src="url"
+            class="hidden-sm-and-down"
+            fit="fit" />
+  <el-button type=""
+             class="hidden-md-and-up"
+             @click="drawer = true">
+    <el-icon>
+      <Operation />
+    </el-icon>
+  </el-button>
+  <el-drawer v-model="drawer"
+             direction="ltr">
+    <template #header="{titleId, titleClass}">
+      <span :id="titleId"
+            :class="titleClass">设置</span>
+    </template>
+
+    <template #default>
+      <el-image style=" min-width: 100px; height: 50px"
+                :src="url"
+                fit="fit" />
+      <el-form label-width="80px"
+               label-position="">
+        <el-form-item label="夜间模式">
+          <el-switch v-model="isDark"
+                     style="margin-left: 24px"
+                     inline-prompt
+                     :active-icon="Moon"
+                     :inactive-icon="Sunny" />
+        </el-form-item>
+      </el-form>
+
+    </template>
+
+  </el-drawer>
+</template>
+
+<style scoped>
+.el-drawer_header {
+  margin-bottom: 0px;
+}
+</style>

src/components/header/hsearch.vue

@@ -0,0 +1,31 @@
+
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+const select = ref('')
+const input3 = ref('')
+</script>
+
+<template>
+  <el-input v-model="input3"
+            placeholder="请输入搜索内容"
+            class="input-with-select">
+    <template #prepend>
+      <el-select v-model="select"
+                 style="width: 80px">
+        <el-option label="帖子"
+                   value="1" />
+        <el-option label="用户"
+                   value="2" />
+      </el-select>
+
+    </template>
+    <template #append>
+      <el-button :icon="Search" />
+    </template>
+  </el-input>
+</template>
+
+<style scoped>
+</style>

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
 import "element-plus/theme-chalk/dark/css-vars.css";
+import "element-plus/theme-chalk/display.css";
 import router, { setupRouter } from "./plugins/router";
 function bootstrap() {
   const app = createApp(App);

src/views/homeHeader/index.vue

@@ -1,18 +1,46 @@
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core'
-import { Check, Close } from '@element-plus/icons-vue'
-const isDark = useDark()
-const toggleDark = useToggle(isDark)
+import left from '../../components/header/hleft.vue'
+import hright from '../../components/header/hright.vue'
+import hsearch from '../../components/header/hsearch.vue'
 </script>
 
 <template>
-  <el-switch v-model="isDark"
-             class="mt-2"
-             style="margin-left: 24px"
-             inline-prompt
-             :active-icon="Check"
-             :inactive-icon="Close" />
+
+  <el-row justify="center">
+
+    <el-col :xs="3"
+            :sm="3"
+            :md="3"
+            :lg="3"
+            :xl="2">
+      <hright />
+    </el-col>
+    <el-col :xs="15"
+            :sm="17"
+            :md="17"
+            :lg="17"
+            :xl="18">
+      <div style="height: 10px;"
+           class="hidden-sm-and-down"></div>
+      <hsearch />
+    </el-col>
+    <el-col :xs="6"
+            :sm="4"
+            :md="3"
+            :lg="4"
+            :xl="4">
+      <div style="height: 10px;"
+           class="hidden-sm-and-down"></div>
+      <div class="left">
+        <left />
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <style scoped>
+.left {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>