suzhouyingjiPC/src/layout/newyjLayout.vue

<template>
  <div class="big-container">
    <div class="left-menu">
      <nav class="menu-headers">
        <div>
          <img src="../assets/images/logo.png" alt="" />
        </div>
        <div class="nav-text">苏州市应急</div>
        <div class="nav-text">执法计划管理系统</div>
      </nav>
      <div
        v-for="(item, index) in myRouter"
        :key="index"
        @click="changePath(index, item)"
      >
        <!-- 标题分割线 -->
        <div class="subLine1" v-if="index == 0"></div>
        <div
          class="sub-item"
          :class="routerIndex == index ? 'activeColor' : ''"
        >
          <div class="activeBox" v-show="index == routerIndex"></div>
          <div
            class="item-img"
            :style="`background-image:url(${
              routerIndex == index ? item.icon2 : item.icon1
            })`"
          ></div>
          {{ item.name }}
        </div>
        <!-- 菜单分割线 -->
        <div class="subLine2"></div>
      </div>
    </div>
    <div class="right-view">
      <header>
        <el-dropdown trigger="click" @visible-change="getDrop">
          <div>
            <div class="avatar"></div>
            <div class="header-text">
              <span>苏州市应急管理局 张三 </span>
              <i class="el-icon-caret-bottom" v-if="!avatarFlag"></i>
              <i class="el-icon-caret-top" v-if="avatarFlag"></i>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </header>
      <div class="bottom-view">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routerIndex: 0,
      avatarFlag: false,
      myRouter: [
        {
          path: "/home",
          name: "首页",
          icon1: require("../assets/images/首页@2x.png"),
          icon2: require("../assets/images/首页-变@2x.png"),
        },
        {
          path: "/planManage",
          name: "计划管理",
          icon1: require("../assets/images/计划管理@2x.png"),
          icon2: require("../assets/images/计划管理-变@2x.png"),
        },
        {
          path: "/enforcing",
          name: "执法结果",
          icon1: require("../assets/images/执法结果@2x.png"),
          icon2: require("../assets/images/执法结果-变@2x.png"),
        },
        {
          path: "/enterprise",
          name: "企业名录",
          icon1: require("../assets/images/企业名录@2x.png"),
          icon2: require("../assets/images/企业名录-变@2x.png"),
        },
      ],
    };
  },
  watch: {
    $route:{
      handler(newRouter,oldRouter){
        this.routerIndex = newRouter.meta.index
      },
      immediate: true,
    }
  },
  methods: {
    changePath(e, item) {
      this.$router.push(item.path);
    },
    getDrop(e) {
      this.avatarFlag = e;
    },
    //退出登录
     logout() {
      this.$confirm("确定注销并退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            this.$router.replace("/toLogin").catch(() => {});
          });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.nav-text {
  font-size: 20px;
  font-family: "Alibaba-PuHuiTi-Medium.otf";
  font-weight: 500;
  color: #ffffff;
  line-height: 32px;
}
.big-container {
  height: 100%;
  width: 100%;
  display: flex;
  .left-menu {
    width: 210px;
    background-image: url("../assets/images/侧边栏@2x.png");
    background-size: 102% 100%;
    .menu-headers {
      height: 180px;
      div {
        text-align: center;
        img {
          margin: 12px 0 10px 0;
          height: 70px;
          width: 70px;
        }
      }
    }

    .sub-item {
      flex: 1;
      height: 50px;
      font-family: "Alibaba-PuHuiTi-Medium.otf";
      font-size: 16px;
      color: #c4dbff;
      display: flex;
      align-items: center;
      padding-left: 40px;
      position: relative;
      cursor: pointer;
      user-select: none;
      .item-img {
        height: 20px;
        width: 20px;
        background-size: 100% 100%;
        margin-right: 8px;
      }
    }
    .activeBox {
      width: 4px;
      height: 100%;
      position: absolute;
      left: 1px;
      top: 0;
      background: #fffaa8;
      border-radius: 1px;
    }
    .activeColor {
      background: linear-gradient(90deg, #fff9a7 0%);
      background: linear-gradient(
        to right,
        rgba(255, 249, 167, 0.32),
        rgb(247, 247, 247, 0)
      );
      border-radius: 1px;
      color: #fffaa8;
    }
    .subLine1 {
      height: 2px;
      background-color: #0d408d;
      margin-bottom: 1px;
    }
    .subLine2 {
      height: 3px;
      width: 100%;
      background-image: url("../assets/images/line-菜单分割线@2x.png");
      background-size: 100% 100%;
      //   margin: 1px 0;
      margin-bottom: 1px;
    }
  }
  .right-view {
    flex: 1;
    header {
      height: 50px;
      background-image: url("../assets/images/右边bg@2x.png");
      background-size: 100% 100%;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      padding-right: 20px;
      .avatar {
        height: 25px;
        width: 25px;
        background-size: 100% 100%;
        background-image: url("../assets/images/管理员icon@2x.png");
      }
      .header-text {
        font-family: "Alibaba-PuHuiTi-Medium.otf";
        span {
          margin: 0 8px;
        }
      }
    }
    .bottom-view {
      height: calc(100% - 50px);
      background: #f5f6fa;
    }
  }
}
::v-deep .el-dropdown-selfdefine {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
</style>