修复时间组件

.history/src/views/index_20210803114304.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142128.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime"></div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142139.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142352.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 9 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142402.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142433.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 9 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

.history/src/views/index_20211020142446.vue

@@ -0,0 +1,399 @@
+<template>
+  <header>
+    <div id="header">
+      <!-- 主页路由菜单 开始 -->
+      <div class="router-index" v-if="!home">
+        <router-link
+          class="router-left"
+          :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+          v-for="route in router.slice(1, 5)"
+          :key="route"
+          :to="route.path"
+          v-show="route.meta.type === 'index'"
+        >
+          <span>{{ route.meta.title }}</span>
+        </router-link>
+      </div>
+      <!-- 主页路由菜单 结束 -->
+      <!-- 站点路由菜单 开始 -->
+      <div class="router-menu" v-if="home">
+        <div class="select">
+          <span>当前站点：</span>
+          <el-select
+            v-model="value"
+            @change="el_select"
+            placeholder="请选择"
+            popper-class="menu_select"
+          >
+            <el-option
+              v-for="(item, index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <div class="site_one" style="display: flex">
+          <router-link
+            class="router-left"
+            :class="title == route.meta.title ? 'router_left2' : 'router_left1'"
+            v-for="route in router.slice(5, 7)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+        <div class="site_two" style="display: flex">
+          <router-link
+            class="router-rigth"
+            :class="
+              title == route.meta.title ? 'router_rigth2' : 'router_rigth1'
+            "
+            v-for="route in router.slice(7, 9)"
+            :key="route"
+            :to="route.path"
+            v-show="route.meta.type === 'menu'"
+          >
+            <span>{{ route.meta.title }}</span>
+          </router-link>
+        </div>
+      </div>
+      <!-- 站点路由菜单 结束 -->
+
+      <div class="title">{{ name }}</div>
+      <div class="rigth">
+        <div class="showTime">{{ time }}</div>
+        <router-link class="home" to="/home" v-if="home"></router-link>
+        <div class="news">
+          <div></div>
+          <span><a>9</a></span>
+        </div>
+        <div class="admin"></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import api from "@/api/index";
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "",
+      name: "",
+      router: [],
+      home: false,
+      options: [],
+      value: 1,
+      time: null,
+    };
+  },
+  components: {},
+  mounted() {
+    setInterval(() => {
+      this.$store.commit("getTimeAll");
+      var time = this.$store.state.Time_All;
+      this.time =
+        time[0] +
+        "-" +
+        (time[1] < 9 ? "0" + (time[1] + 1) : time[1] + 1) +
+        "-" +
+        (time[2] < 10 ? "0" + time[2] : time[2]) +
+        " " +
+        (time[3] < 10 ? "0" + time[3] : time[3]) +
+        ":" +
+        (time[4] < 10 ? "0" + time[4] : time[4]) +
+        ":" +
+        (time[5] < 10 ? "0" + time[5] : time[5]);
+    }, 0);
+    this.router = this.$router.options.routes;
+    // console.log(this.router);
+  },
+  methods: {
+    el_select(val) {
+      // console.log(val);
+      for (let i in this.options) {
+        if (this.options[i].value == val) {
+          this.name = this.options[i].label;
+        }
+      }
+      localStorage.clear();
+      localStorage.setItem("Overview", [val, this.name]);
+    },
+    //下拉列表api请求
+    options_api() {
+      api.options_api().then((requset) => {
+        // console.log(requset)
+        var list = requset.data;
+        for (let i in list) {
+          this.options.push({ label: list[i].siteName, value: list[i].id });
+        }
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.$store.commit("increment", val);
+    },
+    $route: function () {
+      var type = this.$route.meta.type;
+      var title = this.$route.meta.title;
+      var name = this.$route.meta.name;
+      this.title = title;
+      this.name = name;
+
+      type === "menu"
+        ? setTimeout(() => {
+            this.options_api();
+          }, 100)
+        : "";
+      var getlocal = localStorage.getItem("Overview");
+      if (
+        getlocal != undefined &&
+        getlocal != null &&
+        getlocal != "" &&
+        type !== "index"
+      ) {
+        this.value = parseInt(getlocal.split(",")[0]);
+        this.name = getlocal.split(",")[1];
+      }
+      type === "menu" ? (this.home = true) : (this.home = false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+#header {
+  -moz-user-select: none;//设置文本不可选中
+  -webkit-user-select: none;//设置文本不可选中
+  user-select: none;//设置文本不可选中
+  .router-index {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 1rem;
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+
+  .router-menu {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+    .select {
+      display: flex;
+      span {
+        // position: absolute;
+        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        color: #00f4fd;
+        font-weight: 400;
+        font-size: 0.225rem;
+        height: 100%;
+        line-height: 0.75rem;
+      }
+    }
+    .router-left {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-left:hover {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_left1 {
+      background: url(./../assets/images/router_left1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_left2 {
+      background: url(./../assets/images/router_left2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+
+    .site_one {
+      margin-left: 1.5rem;
+    }
+    .site_two {
+      position: absolute;
+      margin-left: 14.9rem;
+    }
+
+    .router-rigth {
+      width: 1.525rem;
+      height: 0.5rem;
+      display: block;
+      text-align: center;
+      line-height: 0.5rem;
+      margin: 0.125rem;
+      font-size: 0.225rem;
+    }
+    .router-rigth:hover {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      background-size: cover;
+      color: #fac112;
+    }
+    .router_rigth1 {
+      background: url(./../assets/images/router_right1.png) no-repeat;
+      color: #00f4fd;
+      background-size: cover;
+    }
+    .router_rigth2 {
+      background: url(./../assets/images/router_right2.png) no-repeat;
+      color: #fac112;
+      background-size: cover;
+    }
+  }
+  .title {
+    font-size: 0.5rem;
+    color: #00f4fd;
+    font-family: PangMenZhengDao Regular, PangMenZhengDao Regular-Regular;
+    font-weight: 600;
+    letter-spacing: 3px;
+    text-align: center;
+    line-height: 1rem;
+    margin: 0 auto;
+    width: 6rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  .rigth {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+
+    div {
+      margin-right: 0.17rem;
+    }
+
+    .home {
+      width: 0.3125rem;
+      height: 0.25rem;
+      margin-top: 0.25rem;
+      background: url(./../assets/images/home.png) no-repeat;
+      background-size: cover;
+      margin-right: 0.3rem;
+    }
+
+    .showTime {
+      font-size: 0.25rem;
+      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+      font-weight: 400;
+      color: #00f4fd;
+      line-height: 0.75rem;
+      margin-right: 0.25rem;
+    }
+    .news {
+      font-size: 0.25rem;
+      color: #00f4fd;
+      line-height: 0.35rem;
+      cursor: pointer;
+
+      div {
+        width: 0.3rem;
+        height: 0.2375rem;
+        margin-top: 0.25rem;
+        background: url(./../assets/images/news.png) no-repeat;
+        background-size: cover;
+      }
+      span {
+        position: absolute;
+        text-align: center;
+        width: 0.2rem;
+        height: 0.2rem;
+        line-height: 0.2rem;
+        background-color: red;
+        border-radius: 100%;
+        top: 0.12rem;
+        right: 0.75rem;
+        a {
+          display: block;
+          width: 0.2rem;
+          height: 0.2rem;
+          color: #fff;
+          transform: scale(0.7, 0.7);
+        }
+      }
+    }
+    .admin {
+      width: 0.325rem;
+      height: 0.325rem;
+      margin-top: 0.2rem;
+      background: url(./../assets/images/admin.png) no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+  }
+}
+</style>
+<style lang="less">
+.menu_select .el-popper__arrow::before {
+  border-top-color: transparent !important;
+  border-left-color: transparent !important;
+  background: rgba(0, 244, 253, 1) !important;
+}
+.el-select__popper {
+  background-color: #082333 !important;
+}
+.menu_select {
+  border: 1px solid rgba(0, 244, 253, 1) !important;
+  > div {
+    border: transparent !important;
+  }
+}
+.el-select-dropdown__item.selected {
+  color: rgba(0, 244, 253, 1) !important;
+}
+.el-select-dropdown__item {
+  color: #fff !important;
+  padding: 0 20px !important;
+  text-align: center !important;
+}
+.el-select-dropdown__item:hover {
+  background: rgba(0, 244, 253, 0.2) !important;
+}
+.el-scrollbar__view {
+  background: rgba(0, 244, 253, 0) !important;
+}
+.menu_select .el-scrollbar {
+  width: 2rem;
+}
+</style>

src/views/index.vue

@@ -100,7 +100,7 @@ export default {
       this.time =
         time[0] +
         "-" +
-        (time[1] < 10 ? "0" + (time[1] + 1) : time[1] + 1) +
+        (time[1] < 9 ? "0" + (time[1] + 1) : time[1] + 1) +
         "-" +
         (time[2] < 10 ? "0" + time[2] : time[2]) +
         " " +