index.vue

<template>
  <el-row>
    <div class="bkkk">
      <div class="layout-box">
        <el-col :span="3" class="logo">
          <div class="logo-box">
            <i>社保监管平台</i>
            <div class="en-title">
            </div>
          </div>
        </el-col>
        <el-col :span="15">
          <menus ref="menus"></menus>
        </el-col>
        <el-col :span="6" class>
          <el-col :span="13" :offset="4">
            <div class="timer">{{timer}}</div>
          </el-col>
          <el-col :span="2" class="line55">
              <el-dropdown  @command="handleClick">
              <i class="el-icon-setting quit-icon"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="dark">黑色主题</el-dropdown-item>
                <el-dropdown-item command="white">白色主题</el-dropdown-item>
              </el-dropdown-menu>
              </el-dropdown>
          </el-col>
          <el-col :span="2" class="line55">
            <div class="quitsystem-btn">

              <i class="el-icon-switch-button quit-icon"  @click="quit"></i>
            </div>
          </el-col>
        </el-col>
      </div>
      <el-row>
        <el-col :span="24" class="header-box">
          <el-tag
            class="tags"
            v-for="tag in tags"
            :key="tag.name"
            closable
            @close="handleClose(tag)"
            @click="handClack(tag)"
            :type="tag.meta?tag.meta.type:''"
          >{{tag.name}}</el-tag>
        </el-col>
      </el-row>
    </div>

    <el-col :span="24" class="view-box">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </el-col>

  </el-row>
</template>
<script>
import menus from "../Menu/menu";
import threemen from "../Menu/threedmenu/threedmenu";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      threemenu: [],
      tags: [],
      timer:''
    };
  },
  methods: {
    handleClick(val) {
      this.$store.commit('setTheme',val)
    },
    quit() {
      this.$router.push("/");
      sessionStorage.removeItem("threemenu");
      sessionStorage.removeItem("menu");
      this.$store.dispatch("GetTwoMenu", "");
      this.$store.dispatch("GetMenuRole", "");
    },
    addtag() {
      this.tags.push("");
    },
    getbodyHeight() {
      let height = document.body.clientHeight;
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
    handClack(tag) {
      this.$refs.menus.selcurIndex(tag.path);
      this.$router.push(tag.path);
    },
    changeRouter(croute) {
      if (this.tags.length < 1) {
        this.tags.push(croute);
      }
      let addstate = 0;
      for (let i = 0; i < this.tags.length; i++) {
        if (this.tags[i].path === croute.path) {
          addstate = 1;
          this.tags[i].meta.type = "success";
        } else {
          this.tags[i].meta.type = "";
        }
      }
      if (addstate == 0) {
        croute.meta.type = "success";
        this.tags.push(croute);
      }
    }
  },
  created() {
    this.getbodyHeight();
    setInterval(()=> {
      this.timer = this.timeForm(new Date())
    })
  },
  computed: {
    ...mapGetters(["three_menu"])
  },
  components: {
    menus,
    threemen
  },
  watch: {
    $route: "changeRouter"
  },
  mounted() {
  }
};
</script>
<style lang="stylus">
[class^='el-icon-fa'], [class*=' el-icon-fa'] {
  display: inline-block;
  font: normal normal normal 14px / 1 FontAwesome !important;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 16px;
}

.layout-box {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  overflow: hidden;
}

.bg {
  height: 60px;
}

.logo-box {
  height: 45px;
  width: 200px;
  margin-top: 10px;
  margin-left 20px
  font-size 1.8rem
  font-weight 600
  letter-spacing 2px
  .en-title{
    font-size 1rem
  }
  .logo {
    width: 100%;
    height: 100%;
  }
}



.header-box {
  overflow: hidden;
  top: 60px;
  height: 40px;
  background:#34495e;
  text-align: left;
  position: fixed;
}

.view-box {
  overflow-x: hidden;
  background #efefef;
}

.quit-icon {
  font-size 25px
  line-height: 55px;
  vertical-align: middle;
  padding: 0 5px;
}

.tags {
  margin: 7px 5px 0 10px;
  cursor: pointer;
}

.bkkk {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  z-index: 1000;

}
.timer{
  height 55px;
  line-height 55px
  font-size 20px
}
.line55{
  height 55px;
  line-height 55px;
}
</style>