1

src/layout/index.vue

@@ -17,8 +17,8 @@
     >
       <div :class="{ 'fixed-header': fixedHeader }">
         <Top></Top>
-        <navbar v-if="$route.path != '/index'" />
-        <tags-view v-if="needTagsView && $route.path != '/index'" />
+        <navbar />
+        <tags-view v-if="needTagsView" />
       </div>
       <app-main />
       <right-panel>

src/layout/index2.vue

@@ -0,0 +1,142 @@
+<template>
+  <div
+    :class="classObj"
+    class="app-wrapper"
+    :style="{ '--current-color': theme }"
+  >
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
+    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
+    <!--    <Menu></Menu>-->
+    <div
+      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
+      class="main-container"
+    >
+      <!-- <div :class="{ 'fixed-header': fixedHeader }">
+        <Top v-if="$route.path != '/index'"></Top>
+        <navbar v-if="$route.path != '/index'" />
+        <tags-view v-if="needTagsView && $route.path != '/index'" />
+      </div> -->
+      <app-main />
+      <right-panel>
+        <settings />
+      </right-panel>
+    </div>
+  </div>
+</template>
+
+<script>
+import RightPanel from "@/components/RightPanel";
+import Top from "./components/Top";
+import Menu from "./components/Menu";
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import { mapState } from "vuex";
+import variables from "@/assets/styles/variables.scss";
+
+export default {
+  name: "Layout",
+  components: {
+    AppMain,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView,
+    Top,
+    Menu,
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      theme: (state) => state.settings.theme,
+      sideTheme: (state) => state.settings.sideTheme,
+      sidebar: (state) => state.app.sidebar,
+      device: (state) => state.app.device,
+      needTagsView: (state) => state.settings.tagsView,
+      fixedHeader: (state) => state.settings.fixedHeader,
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
+      };
+    },
+    variables() {
+      return variables;
+    },
+  },
+  created() {
+    console.log(this.$route.path, "x");
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/mixin.scss";
+@import "~@/assets/styles/variables.scss";
+
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+//#app .app-wrapper .sidebar-container {
+//  position: relative;
+//  width: 100% !important;
+//  height: 80px;
+//}
+//
+#app .main-container {
+  //margin: 0;
+  height: calc(100% - 130px);
+}
+//
+//.drawer-bg {
+//  background: #000;
+//  opacity: 0.3;
+//  width: 100%;
+//  top: 0;
+//  height: 100%;
+//  position: absolute;
+//  z-index: 999;
+//}
+//
+//.fixed-header {
+//  position: fixed;
+//  top: 0;
+//  right: 0;
+//  z-index: 9;
+//  width: calc(100% - #{$base-sidebar-width});
+//  transition: width 0.28s;
+//}
+//
+//.hideSidebar .fixed-header {
+//  width: calc(100% - 54px);
+//}
+//
+//.sidebarHide .fixed-header {
+//  width: 100%;
+//}
+//
+//.mobile .fixed-header {
+//  width: 100%;
+//}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ Vue.use(Router);
 
 /* Layout */
 import Layout from "@/layout";
+import Layout2 from "@/layout/index2.vue";
 
 /**
  * Note: 路由配置项
@@ -120,7 +121,7 @@ export const constantRoutes = [
   },
   {
     path: "",
-    component: Layout,
+    component: Layout2,
     redirect: "index",
     children: [
       {

src/views/home/components/Header.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="header">
+    <slot></slot>
+  </div>
+</template>
+<script setup></script>
+<style scoped>
+.header {
+  /* position: absolute; */
+  /* top: 0;
+  z-index: 1; */
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 60px;
+  font-size: 1.8rem;
+  font-weight: bold;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  color: #fff;
+  background: url("../../../assets/images/header.png");
+  background-repeat: no-repeat;
+  background-size: 100% 60px;
+  background-position: center center;
+}
+</style>

src/views/home/components/TargetSituation/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full" v-loading="loading">
-    <div class="c-title flex justify-between">
+    <div class="c-title flex-center justify-between">
       <span>目标完成情况</span>
       <div>
         <el-select
@@ -426,4 +426,9 @@ export default {
   padding-left: 10px;
   color: #00a4ff;
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

src/views/home/components/map/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="h-full" style="position: relative">
-    <div class="c-title flex justify-between">
+    <div class="c-title flex-center justify-between">
       <span>作业计划</span>
       <el-button
         style="font-size: 16px; position: absolute; right: 65%; top: 5px"
@@ -350,4 +350,9 @@ export default {
 .orange {
   color: orange !important;
 }
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 </style>

src/views/home/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="map-container">
+    <!-- <Header>配网首页</Header> -->
     <el-row :gutter="10">
       <el-col :span="12" class="h-full-calc">
         <el-card class="h-40">
@@ -30,6 +31,7 @@ import TargetSituation from "./components/TargetSituation/index.vue";
 import RiskIdentification from "./components/RiskIdentification/index.vue";
 import PointsRanking from "./components/PointsRanking/index.vue";
 import TargetMonth from "./components/TargetMonth/index.vue";
+import Header from "./components/Header.vue";
 // import MapView from "../map-view/MapView.vue";
 
 export default {
@@ -39,6 +41,7 @@ export default {
     RiskIdentification,
     MapHy,
     PointsRanking,
+    Header,
     // MapView,
   },
   data() {
@@ -72,8 +75,8 @@ export default {
   // background-size: 100% 100%;
 }
 .h-full-calc {
-  height: calc(100vh - 110px);
-  // height: calc(100vh);
+  height: calc(100vh - 30px);
+  // height: calc(100vh - 90px);
 }
 .mt-10 {
   margin-top: 10px;
@@ -97,7 +100,11 @@ export default {
 ::v-deep {
   .el-card__body {
     height: 100%;
-    border: 1px solid #1b3166;
+    // border: 1px solid #1b3166;
+    background-image: url("../../assets/images/card_bg.png");
+    // background-color: rgba(0, 34, 51, 0.6);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
   }
   .el-card {
     border: none;