forked from drone/command-center-dashboard

LGH
2025-03-26 976ed1d388b9ecc19449329230b66f5e12f6dac7
Merge remote-tracking branch 'origin/master'

# Conflicts:
# src/page/Home/Home.vue
7 files added
177 ■■■■■ changed files
src/assets/images/header-active.png patch | view | raw | blame | history
src/assets/images/header-left.png patch | view | raw | blame | history
src/assets/images/header-right.png patch | view | raw | blame | history
src/page/Home/Home.vue 52 ●●●●● patch | view | raw | blame | history
src/page/Home/components/Header.vue 74 ●●●●● patch | view | raw | blame | history
src/page/Home/components/HomeLeft/Index.vue 35 ●●●●● patch | view | raw | blame | history
src/page/Home/components/HomeRight/Index.vue 16 ●●●●● patch | view | raw | blame | history
src/assets/images/header-active.png
src/assets/images/header-left.png
src/assets/images/header-right.png
src/page/Home/Home.vue
New file
@@ -0,0 +1,52 @@
<template>
  <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() {
    return {
      index: this,
    };
  },
  computed: {},
  props: [],
  methods: {
  },
};
</script>
<style scoped lang="scss">
.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>
src/page/Home/components/Header.vue
New file
@@ -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>
src/page/Home/components/HomeLeft/Index.vue
New file
@@ -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>
src/page/Home/components/HomeRight/Index.vue
New file
@@ -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>