初始化仓库

src/views/header/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="header">
+    <div class="tab flex a-c">
+      <div
+        class="tab-item"
+        :class="{ active: activeIndex === item.id }"
+        v-for="item in tabList"
+        :key="item.id"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      tabList: [
+        { id: 1, label: "机动路线规划" },
+        { id: 2, label: "临时部署驻地分析" },
+      ],
+      activeIndex: 1,
+    };
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+$label_height: 50px;
+
+.header {
+  width: 100%;
+  height: 100%;
+  background-color: #2f705f;
+  .tab {
+    margin-left: 50px;
+    width: 680px;
+    height: 100%;
+    color: #fff;
+    &-item {
+      height: $label_height;
+      line-height: $label_height;
+      padding: 0 30px;
+      margin-right: 20px;
+      font-family: "HarmonyOS Sans";
+      font-weight: 400;
+      font-size: 20px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+
+      &.active {
+        background-image: url("@/assets/image/tab-active.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+      }
+    }
+  }
+}
+</style>

src/views/home.vue

@@ -0,0 +1,31 @@
+<template>
+  <div id="home">
+    <Header id="header" />
+  </div>
+</template>
+
+<script>
+import Header from "./header/index.vue";
+export default {
+  name: "",
+  components: {
+    Header,
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+#home {
+  width: 100%;
+  height: 100%;
+  #header {
+    width: 100%;
+    height: 74px;
+  }
+}
+</style>