身份证正反面调整

odc.xiaohui

2023-03-08 d24c9dde20cba23b96082b4db81b5223c75e4ea9

 src/views/layout/components/Menu/index.vue

@@ -2,19 +2,22 @@
  <div>
    <!-- 侧边导航栏 -->
    <el-aside width="200px">
      <h2 class="siderbar-title">遂昌执法平台</h2>
      <h2 class="siderbar-title" @click="toHome()">遂昌执法平台</h2>
      <el-scrollbar>
        <!-- 路由 -->
        <el-menu router class="el-menu-vertical" :default-active="$route.path">
        <el-menu router
                 class="el-menu-vertical"
                 :default-active="$route.path.name"
                 @select="handleSelect">
          <el-submenu
            :index="menu.url ? menu.url : menu.id.toString()"
            :index="String(menu.id)"
            v-for="menu in menuList"
            :key="menu.id"
            class="firstMenu"
          >
            <template slot="title">
              <span slot="prefix" class="icon-padding fisrtSpan">
                <svg-icon :icon-class="menu.icon"></svg-icon>
                <svg-icon class="icon-title" :icon-class="menu.icon"></svg-icon>
              </span>
              <span class="fisrtSpan">{{ menu.title }}</span>
            </template>
@@ -23,10 +26,9 @@
                <el-submenu
                  :key="secondMenu.id"
                  v-if="secondMenu.menuVoArrayList.length > 0"
                  :index="
                    secondMenu.url ? secondMenu.url : secondMenu.id.toString()
                  "
                  :index="secondMenu.url ? secondMenu.url : secondMenu.id.toString()"
                  class="secondMenu"
                  :class="secondMenu.menuVoArrayList.length > 0?'is-Active':'none-Active'"
                >
                  <template slot="title">
                    <span class="secondSpan">{{ secondMenu.title }}</span>
@@ -36,19 +38,20 @@
                    :key="thirdMenu.id"
                    :index="`${thirdMenu.id}`"
                    :route="{ name: thirdMenu.url }"
                    >{{ thirdMenu.title }}</el-menu-item
                    v-if="thirdMenu.id!='65'"
                    >
                    <template>
                      {{thirdMenu.title }}
                    </template></el-menu-item
                  >
                </el-submenu>

                <el-menu-item
                  v-else
                  :index="`${secondMenu.id}`"
                  :route="{ name: secondMenu.url }"
                  >{{ secondMenu.title }}</el-menu-item
                >
                  >{{ secondMenu.title }}</el-menu-item>
              </template>
            </template>

            <el-menu-item
              v-else
              :key="menu.id"
@@ -64,45 +67,43 @@
</template>

<script>
let timer = null;
import users from "@/api/users";
import router from "@/router";

export default {
  data() {
    return {
      menuList: [],
      isActive:''
    };
  },
  created() {
    // this.getMenuList();
    this.loadMenu();
  },
  watch: {
    $route(){
      this.handleSelect(this.$route.fullPath)
      console.log(this.$route)
    }
  },
  methods: {
    handleSelect(path){
      this.isActive = path
    },
    loadMenu() {
      const info = JSON.parse(sessionStorage.getItem("user"));

      if (info && info.menus) {
        console.log("timer--", timer);
        window.clearInterval(timer);
        this.menuList = info.menus;
        console.log(this.menuList);
      } else {
        if (!timer) {
          timer = window.setInterval(() => {
            this.loadMenu();
          }, 1000);
          console.log("timer++", timer);
        }
      }
      const userName = sessionStorage.getItem('name');
      users.getMenu({ name: userName })
          .then(res => {
            // console.log(res)
            // debugger
            this.menuList = res.menus;
            sessionStorage.setItem('user', JSON.stringify(res));
          })
          .catch(err => this.$message.error(err))
    },
    // 获取菜单列表
    getMenuList() {
      let arr;
      this.$axios({
        method: "get",
        url: "sccg/system/portal/menu/search_myself",
      }).then((res) => {
        console.log(res);
      });
    },
    toHome(){
      router.push("/home")
    }
  },
};
</script>
@@ -110,15 +111,17 @@
<style lang="scss" scpoed>
.icon-padding {
  padding-right: 10px;
  .icon-title{
    width: 36px;
    height: 36px;
  }
}

.el-aside {
  background: #07162e;
  background: #313350;
  color: #e9eef3;
  text-align: center;
  box-sizing: border-box;
  position: relative;

  //    固定标题
  .siderbar-title {
    position: fixed;
@@ -130,60 +133,89 @@
    top: 0;
    left: 0;
    z-index: 999;
    cursor: pointer;
  }

  .el-scrollbar {
    height: calc(100vh - 66px);
    margin-top: 66px;
    box-sizing: border-box;

    .el-menu {
      background: linear-gradient(#07162e, #0f2b56);
      background: linear-gradient(#313350, #0f2b56);
      border: 0;

      font-size: 16px;
      .is-opened{
        .fisrtSpan{
          color: #22d3eb;
        }
      }
      .firstMenu {
        background: #07162e;
        background: #313350;
        text-align: left;

        //border-bottom:1px solid #ccc ;
        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }

        &:hover .fisrtSpan {
          color: #22d3eb;
        }

        span,
        span {
          color: #e9eef3;
          font-size: 16px;
        }

        .el-menu{
          .is-active {
            background-color: #409EFF;
            color: #fff;
          }
          .is-Active{
            background-color: #092c4a;
            color: #fff;
          }
        }
        .el-menu-item {
          color: #e9eef3;
          background-color: #07162e;
          background-color: #313350;
          font-size: 16px;
          // border-bottom: 0.5px solid #7c7979;
        }

        .el-menu-item:hover {
          background-color: #092c4a;
          background-color: #409EFF;
          color: #22d3eb;
        }

        .is-active {
          background-color: #07162e;
          color: #22d3eb;
        .is-opened{
          .secondSpan{
            color: #22d3eb;
          }
        }
        .secondMenu{
          //border-bottom:1px solid #ccc ;
          .is-active {
            background-color: #409EFF;
            color: #22d3eb;
          }
        }
      }

      .secondMenu {

        &:hover > .el-submenu__title {
          background-color: #092c4a;
        }

          .secondSpan{
          }
        &:hover .secondSpan {
          color: #22d3eb;
        }
        .is-opened{
          .el-submenu__title{
            background-color: #fff;
          }
        }
        .is-active {
          background-color: #409EFF;
          color: #fff;
        }
      }

      .thirdMenu {
        &:hover > .el-submenu__title {
          background-color: #092c4a;
@@ -198,10 +230,9 @@
        background-color: #092c4a;
      }
    }

    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
</style>
</style>