From 0dd7801a34f859556d8b45b9bfeb7f10c626e8be Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 26 Mar 2025 17:31:18 +0800
Subject: [PATCH] feat: 头部和中间布局
---
src/page/Home/Home.vue | 25 ++++++-
src/assets/images/header-right.png | 0
src/page/Home/components/Header.vue | 74 ++++++++++++++++++++++++
src/page/Home/components/HomeLeft/Index.vue | 35 +++++++++++
src/page/Home/components/HomeRight/Index.vue | 16 +++++
src/assets/images/header-left.png | 0
src/assets/images/header-active.png | 0
7 files changed, 145 insertions(+), 5 deletions(-)
diff --git a/src/assets/images/header-active.png b/src/assets/images/header-active.png
new file mode 100644
index 0000000..2059bcc
--- /dev/null
+++ b/src/assets/images/header-active.png
Binary files differ
diff --git a/src/assets/images/header-left.png b/src/assets/images/header-left.png
new file mode 100644
index 0000000..aa57dba
--- /dev/null
+++ b/src/assets/images/header-left.png
Binary files differ
diff --git a/src/assets/images/header-right.png b/src/assets/images/header-right.png
new file mode 100644
index 0000000..4d838b4
--- /dev/null
+++ b/src/assets/images/header-right.png
Binary files differ
diff --git a/src/page/Home/Home.vue b/src/page/Home/Home.vue
index 62d7651..d346691 100644
--- a/src/page/Home/Home.vue
+++ b/src/page/Home/Home.vue
@@ -1,17 +1,27 @@
<template>
- <div class="page-index">
-
+ <div class="page-home">
+ <Header></Header>
+ <div class="warp">
+ <HomeLeft></HomeLeft>
+ <!-- <div>中间搜索</div> -->
+ <HomeRight></HomeRight>
+ </div>
</div>
</template>
<script>
import index from '@/mixins';
import { mapGetters } from 'vuex';
+import Header from '../Home/components/Header.vue';
+import HomeLeft from '../Home/components/HomeLeft/Index.vue'
+import HomeRight from '../Home/components/HomeRight/Index.vue'
export default {
mixins: [index],
components: {
-
+ Header,
+ HomeLeft,
+ HomeRight,
},
name: 'index',
provide() {
@@ -27,11 +37,16 @@
};
</script>
<style scoped lang="scss">
-.page-index {
- height: 100%;
+.page-home {
+ height: 100vh;
width: 100%;
background-image: url('../../assets/images/bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ .warp {
+ display: flex;
+ justify-content: space-between;
+ }
}
</style>
diff --git a/src/page/Home/components/Header.vue b/src/page/Home/components/Header.vue
new file mode 100644
index 0000000..6997908
--- /dev/null
+++ b/src/page/Home/components/Header.vue
@@ -0,0 +1,74 @@
+<template>
+ <div class="header">
+ <div class="h-left">
+ <div class="left-item active">首页</div>
+ <div class="left-item">集群调度</div>
+ <div class="left-item">任务管理</div>
+ <div class="left-item">航线规划</div>
+ </div>
+ <div class="h-right">
+ <div class="right-item">AI识别分析</div>
+ <div class="right-item">综合分析</div>
+ <div class="right-item">数据中心</div>
+ <div class="right-item">系统运维</div>
+ </div>
+ </div>
+</template>
+
+<script>
+
+</script>
+
+<style scoped lang="scss">
+.header {
+ width: calc(100% - 57px - 59px);
+ margin-left: 57px;
+ padding-top: 38px;
+ display: flex;
+ justify-content: space-between;
+ .h-left {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .left-item {
+ width: 105px;
+ height: 39px;
+ background: url(@/assets/images/header-left.png) no-repeat;
+ background-size: 100% 100%;
+ margin-right: 3px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 34px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ }
+ .active {
+ background: url(@/assets/images/header-active.png) no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ .h-right {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .right-item {
+ width: 105px;
+ height: 39px;
+ background: url(@/assets/images/header-right.png) no-repeat;
+ background-size: 100% 100%;
+ margin-right: 3px;
+ font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+ font-weight: 400;
+ font-size: 18px;
+ color: #FFFFFF;
+ line-height: 34px;
+ text-align: center;
+ font-style: normal;
+ text-transform: none;
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/page/Home/components/HomeLeft/Index.vue b/src/page/Home/components/HomeLeft/Index.vue
new file mode 100644
index 0000000..92626da
--- /dev/null
+++ b/src/page/Home/components/HomeLeft/Index.vue
@@ -0,0 +1,35 @@
+<template>
+ <div class="home-left-index">
+ <!--时间 天气-->
+ <div class="time-watch">
+ <div class="time">2025.03.04 15:30:00</div>
+ <div>
+ <img src="" alt="">
+ <span>阴天</span>
+ <span>适合飞行</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+.home-left-index {
+ margin-top: 12px;
+ margin-left: 45px;
+ // border: 1px springgreen solid;
+ width: 360px;
+
+ .time-watch {
+ font-size: 14px;
+ height: height(36);
+ display: flex;
+ .time {
+ font-weight: 400;
+ font-size: 14px;
+ line-height: height(16);
+ }
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/page/Home/components/HomeRight/Index.vue b/src/page/Home/components/HomeRight/Index.vue
new file mode 100644
index 0000000..a978c11
--- /dev/null
+++ b/src/page/Home/components/HomeRight/Index.vue
@@ -0,0 +1,16 @@
+<template>
+ <div class="home-right-index">
+ <div class="">
+ 哒哒哒
+ </div>
+ </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+.home-right-index {
+ margin-top: 12px;
+ margin-right: 58px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3