初始化仓库

src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style lang="scss">
+@import "@/assets/scss/index.scss";
+</style>

src/assets/scss/index.scss

@@ -0,0 +1,38 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
+  user-select: none;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.flex {
+  display: flex;
+}
+.j-s {
+  justify-content: space-between;
+}
+.j-a {
+  justify-content: space-around;
+}
+.j-c {
+  justify-content: center;
+}
+.a-c {
+  align-items: center;
+}
+.column {
+  flex-direction: column;
+}
+.HYZongYiTiJ {
+  font-family: "HYZongYiTiJ" !important;
+}
+
+.flex-warp {
+  flex-wrap: wrap;
+}

src/components/HelloWorld.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br />
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
+          target="_blank"
+          rel="noopener"
+          >babel</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+          target="_blank"
+          rel="noopener"
+          >vuex</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/main.js

@@ -0,0 +1,18 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import ElementUI from "element-ui";
+import "element-ui/lib/theme-chalk/index.css";
+
+Vue.config.productionTip = false;
+Vue.use(ElementUI);
+
+const bus = new Vue();
+Vue.prototype.$bus = bus;
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");

src/router/index.js

@@ -0,0 +1,21 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/home.vue";
+
+Vue.use(VueRouter);
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: HomeView,
+  },
+];
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+});
+
+export default router;

src/store/index.js

@@ -0,0 +1,12 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {},
+  getters: {},
+  mutations: {},
+  actions: {},
+  modules: {},
+});

src/utils/localStorage.js

@@ -0,0 +1,6 @@
+function setStorage(item, value) {
+  return localStorage.setItem(item, JSON.stringify(value));
+}
+function getStorage(item) {
+  return JSON.parse(localStorage.getItem(item));
+}

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>