From 5fd662d308099287d4405374a8d931061d0482dc Mon Sep 17 00:00:00 2001
From: xuewuerduo <53554701+xuewuerduo@users.noreply.github.com>
Date: Tue, 16 Jul 2024 22:17:12 +0800
Subject: [PATCH] =?UTF-8?q?17.=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C?=
=?UTF-8?q?=E5=B0=81=E8=A3=85=E4=BE=A7=E8=BE=B9=E6=A0=8F=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/admin/css/home.css | 73 ++++++++++++++++++++++--
src/components/admin/home/HomeHeader.vue | 34 +++++++++++
src/views/admin/home.vue | 9 +--
3 files changed, 108 insertions(+), 8 deletions(-)
create mode 100644 src/components/admin/home/HomeHeader.vue
diff --git a/src/assets/admin/css/home.css b/src/assets/admin/css/home.css
index b1e22a6..7ccdea1 100644
--- a/src/assets/admin/css/home.css
+++ b/src/assets/admin/css/home.css
@@ -15,25 +15,90 @@ a {
ul,
li {
- list-style: none;
+ list-style-type: none;
}
-/*.dr-home */
+/* .dr-home */
.dr-home {
display: flex;
- flex-direction: column; /* 容器内元素从上至下排列 */
+ flex-direction: column; /* 容器内的元素从上至下排列 */
height: 100vh;
}
+/* .dr-home .header */
.dr-home .header {
display: flex;
height: 55px;
background: #393d49;
}
+.dr-home .header .title {
+ display: flex;
+ width: 200px;
+ background: #0c0c0c;
+}
+
+.dr-home .header .title .logo {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 60px;
+}
+
+.dr-home .header .title .logo i {
+ color: lightslategray;
+ font-size: 30px;
+}
+
+.dr-home .header .title .text {
+ display: flex;
+ align-items: center;
+ flex: 1;
+}
+
+.dr-home .header .title .text a {
+ color: lightslategray;
+ font-size: 18px;
+ font-weight: bold;
+}
+
+.dr-home .header .info {
+ display: flex;
+ justify-content: flex-end;
+ flex: 1;
+}
+
+.dr-home .header .info .admin {
+ display: flex;
+ color: #fff;
+ font-size: 15px;
+}
+
+.dr-home .header .info .admin .name {
+ padding-right: 10px;
+ height: 55px;
+ line-height: 55px;
+ text-align: center;
+}
+
+.dr-home .header .info .admin .name i {
+ color: #FF5722;
+ font-size: 13px;
+}
+
+.dr-home .header .info .admin .exit {
+ width: 90px;
+ height: 55px;
+ line-height: 55px;
+ text-align: center;
+ background: #555c64;
+ cursor: pointer;
+}
+
+/* .dr-home .main */
.dr-home .main {
display: flex;
- height: calc(100vh - 55px); /* 减去 header 高度 */
+ height: calc(100vh - 55px); /* 减去 header 高度 */
}
.dr-home .main .side {
diff --git a/src/components/admin/home/HomeHeader.vue b/src/components/admin/home/HomeHeader.vue
new file mode 100644
index 0000000..a583320
--- /dev/null
+++ b/src/components/admin/home/HomeHeader.vue
@@ -0,0 +1,34 @@
+<template>
+ <div class="header">
+ <div class="title">
+ <div class="logo">
+ <el-icon><MostlyCloudy /></el-icon>
+ </div>
+ <div class="text">
+ <a href="/admin">李龙龙编程</a>
+ </div>
+ </div>
+ <div class="info">
+ <div class="admin">
+ <div class="name">
+ <span>李龙龙</span>
+ <el-icon><Bell /></el-icon>
+ </div>
+
+ <div class="exit">
+ 退出
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+</template>
+
+<script>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/admin/home.vue b/src/views/admin/home.vue
index 52150f1..b57f725 100644
--- a/src/views/admin/home.vue
+++ b/src/views/admin/home.vue
@@ -1,14 +1,15 @@
<script setup>
-import '@/assets/admin/css/home.css' //导入央视
+import '@/assets/admin/css/home.css' //导入样式
import HomeSide from "@/components/admin/home/HomeSide.vue";
+import HomeHeader from "@/components/admin/home/HomeHeader.vue";
+
+import {HomeFilled} from "@element-plus/icons-vue";
</script>
<template>
<div class="dr-home">
- <div class="header">
-
- </div>
+ <HomeHeader />
<div class="main">
<HomeSide />