ele-usky/src/views/index.vue

<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, 2)"
          :key="route"
          :to="route.path"
          v-show="route.meta.type === 'index'"
        >
          <span>{{ route.meta.title }}</span>
        </router-link>
        <a
          :href="'https://wx.ewoogi.com/manage/#/'"
          class="router-left router_left1"
          >后台管理</a
        > -->

        <!-- <a
          :href="'http://localhost:9999/#/login?userName=admin'"
          target="_blank"
          class="router-left router_left1"
          >后台管理</a
        > -->


      </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"
            filterable
          >
            <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(2, 4)"
            :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(4, 6)"
            :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";
import { getToken } from "@/utils/auth";
export default {
  name: "App",
  data() {
    return {
      title: "",
      name: "",
      router: [],
      home: false,
      options: [],
      value: 1,
      time: null,
      assToken: "",
      username: "",
      password: "",
    };
  },
  components: {},
  mounted() {
    this.assToken = getToken();

    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.removeItem("Overview")
      localStorage.setItem("Overview", [val, this.name]);
    },
    //下拉列表api请求
    options_api() {
      api.options_api().then((requset) => {
         this.options=[]
        // 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: #fff;
      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: #fff;
        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: #fff;
      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: #fff;
      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: #fff;
    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: #fff;
      line-height: 0.75rem;
      margin-right: 0.25rem;
    }
    .news {
      font-size: 0.25rem;
      color: #fff;
      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>