shuili_manager/jwtech-pc-page/src/components/aerialHeaderMenu.vue

<template>
  <div class="head">
    <div class="head-content">
      <!-- <div class="head-content-all">
        <div class="head-content-left">
          <img
            src="@/assets/image/logo_shuili.png"
            :style="{ width: '59px', height: '61px' }"
            alt=""
          />
          <span class="head-content-left-text"
            >广东省水利建设市场信用信息平台</span
          >
        </div>
        <div class="head-content-right">
          <img src="@/assets/image/shuiliting.png" alt="" />
          <span class="head-content-right-text">广东省水利厅</span>
        </div>
      </div> -->
    </div>

    <div class="menu-content">
      <div class="menu-wrap" ref="menuWp">
        <hk-menu
          :collapse-transition="false"
          ref="menu"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          menu-trigger="click"
          @select="handleSelect"
        >
          <template v-for="(item, index) in menus">
            <el-menu-item
              v-if="!item.children"
              :key="index"
              :index="item.path"
              :id="item.path"
            >
              <span class="span4" slot="title">{{ item.name }}</span>
            </el-menu-item>
          </template>
        </hk-menu>
      </div>
    </div>

    <!-- 通知栏 -->
    <div v-if="isNoticeShow" class="notice-tips">
      <div class="n-wrap">
        <img src="@/assets/image/icon/notice.png" alt="">
        <span>声明：平台中企业档案的信息源于企业自行填报，其真实性、有效性由企业负责。各企业对所填报的信息保密性负责，不得含有涉密内容</span>
      </div>
    </div>
  </div>
</template>

<script>
import { loginOut } from "@/api/login";
import hkMenu from "./hkMenu/index.vue";

export default {
  props: ["menu", "count"],
  components: { hkMenu },
  data() {
    return {
      input: "",
      showSubMenu: false,
      activeIndex: "",
      menus: this.$partten.menus,
      subMenus: ["hkdata", "hkknowledge", "service"],
      isHome: true,
      isNoticeShow: true
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.path == "/home") {
          this.isHome = true;
        } else {
          this.isHome = false;
        }
        this.activeIndex = val.matched[1].name;

        // 判断是否显示通知栏
        if (val.path === '/home'
            || val.path === '/summarizedInformation'
            || val.path === '/enterpriseInformation'
            || val.path === '/announcement'
            || val.path === '/policyDoc'
          ) {
            this.isNoticeShow = true
        } else {
          this.isNoticeShow = false
        }
      },
      // 深度观察监听
      deep: true,
      immediate: true
    }
  },
  created() {
    this.activeIndex = this.$route.matched[1].name;
  },
  mounted() {
    // this.changeStyle();
    let menuWp = this.$refs.menuWp;
    if (menuWp) {
      menuWp.addEventListener("mouseleave", this.handleMenuClose);
    }
  },
  destroyed() {
    let menuWp = this.$refs.menuWp;
    if (menuWp) {
      menuWp.removeEventListener("mouseleave", this.handleMenuClose);
    }
  },
  methods: {
    searchEnterpriseName() {
      if (this.input) {
        this.$router.push({
          path: "/enterpriseInformation",
          query: {
            enterpriseName: this.input
          }
        });
      }
    },
    handleMenuClose(e) {
      this.handleClose();
    },
    handleClose() {
      if (!this.showSubMenu) {
        return;
      }
      this.showSubMenu = false;
      this.subMenus.forEach(path => this.$refs.menu.closeMenu(path));
    },
    //修改首页头部导航二级菜单的位置
    changeStyle: function() {
      this.$refs.clearFix[0].popperElm.style.marginLeft = "40px";
      this.$refs.clearFix[1].popperElm.style.marginLeft = "40px";
      this.$refs.clearFix[2].popperElm.style.marginLeft = "40px";
    },
    handleSelect(key, keyPath) {
      if (key == "https://www.zg-learn.com") {
        window.open(key, "_black");
        this.handleClose();
      } else {
        this.$router.push("/" + key);
        this.$store.commit("SET_QUERY_PARAMS", "");
        this.handleClose();
      }
    },
    handleLoginOut() {
      loginOut().then(() => {
        this.$store.commit("setToken", "");
        this.$store.commit("setUserInfo", "");
        this.$router.push("/");
      });
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 12) {
        return value.slice(0, 12) + "...";
      }
      return value;
    }
  }
};
</script>

<style lang="less" scoped>
.head {
  .head-content {
    // padding: 0 375px 0 385px;
    // box-sizing: border-box;
    // background: url("../assets/image/banner.png");
    // background-size: 100% 100%;
    // position: relative;
    // opacity: 0.3;

    // height: 137px;
    // background: linear-gradient(
    //   180deg,
    //   rgba(99, 183, 255, 0.3) 0%,
    //   rgba(255, 255, 255, 0.3) 100%
    // );
    height: 219px;
    // height: 160px;
    background: url("~@/assets/image/header/banner.png");
    background-size: 100% 100%;

    .head-content-all {
      height: 137px;
      max-width: 1200px;
      padding: 0 15px 0 25px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
    .head-content-left {
      opacity: 1;
      margin: 33px 0 43px 0;
      display: flex;
      align-items: center;
      .head-content-left-text {
        font-size: 38px;
        color: #045adf;
        margin-left: 10px;
        font-weight: bold;
        // height: 54px;
        // line-height: 54px;
      }
    }
    .head-content-right {
      opacity: 1;
      margin: 43px 0 51px 0;
      display: flex;
      align-items: center;
      .head-content-right-text {
        font-size: 28px;
        color: #f50000;
        margin-left: 6px;
        font-weight: bold;
        // height: 54px;
        // line-height: 54px;
      }
    }

    .bottom-img {
      position: absolute;
      display: block;
      width: 100%;
      height: 50px;
      bottom: 0;
      left: 0;
    }

    .content-wrap {
      width: 1200px;
      height: 100%;
      margin: 0 auto;

      .incorrect-wrap {
        float: right;
        display: flex;
        margin-top: 20px;

        .incorrect-item {
          display: flex;
          align-items: center;
          margin-left: 30px;
          cursor: pointer;

          img {
            display: block;
            width: 16px;
            height: 16px;
          }

          span {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #005eb7;
            margin-left: 5px;
          }
        }
      }

      #clear {
        clear: both;
      }

      .title-search {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title-content {
          display: flex;
          flex-direction: column;
          align-items: center;

          img {
            display: block;
          }
        }

        .search-content {
          margin-top: 10px;

          .search-input {
            width: 600px;
            height: 50px;

            /deep/.el-input {
              height: 50px;
              border-radius: 8px;

              .el-input__inner {
                height: 50px;
                border-radius: 8px 0 0 8px;
                border: 1px solid #aad8fb;
              }

              .el-input__inner::placeholder {
                color: #999999;
                font-size: 16px;
              }

              .el-input-group__append {
                background: #0059a5;
                color: #ffffff;
                border-radius: 0 8px 8px 0;

                .el-button {
                  display: flex;
                  align-items: center;
                  padding-left: 15px;
                  padding-right: 15px;

                  .el-icon-search {
                    font-size: 20px;
                  }

                  span {
                    display: block;
                    font-size: 16px;
                  }
                }
              }
            }
          }

          .search-word {
            display: flex;
            margin-top: 15px;

            .img-tip {
              display: flex;
              align-items: center;

              img {
                display: block;
              }

              span {
                display: block;
                font-size: 16px;
                color: #333333;
                margin-left: 5px;
              }
            }

            .word-wrap {
              display: flex;

              span {
                display: block;
                font-size: 16px;
                cursor: pointer;
                margin-right: 30px;
              }

              span:nth-child(1) {
                color: #de0000;
              }
            }
          }
        }
      }
    }
  }

  .head-content2 {
    height: 80px;
    background: linear-gradient(180deg, #63b7ff 0%, #ffffff 100%);

    .content2-wrap {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content2-right {
        display: flex;

        .incorrect-item {
          display: flex;
          align-items: center;
          margin-left: 30px;
          cursor: pointer;

          img {
            display: block;
            width: 16px;
            height: 16px;
          }

          span {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #005eb7;
            margin-left: 5px;
          }
        }
      }
    }
  }

  .menu-content {
    width: 100%;
    height: 80px;
    background: #005EB7;
    // padding-top: 15px;
    // background: linear-gradient(
    //   270deg,
    //   #1b68e1 0%,
    //   #2f8dec 26%,
    //   #3aa2f2 53%,
    //   #2180e9 80%,
    //   #045adf 100%
    // );
    // background: #0055a6;
    // border-bottom: 1px solid #FFFFFF;

    .menu-wrap {
      width: 1200px;
      height: 100%;
      margin: 0 auto;

      & > .el-menu-demo {
        height: 100%;
        background-color: inherit;
        border-bottom: 0;

        & > .el-menu-item:not(.is-disabled):focus,
        .el-menu-item:not(.is-disabled):hover,
        .el-submenu .el-submenu__title:hover {
          background-color: inherit;
        }

        & > .el-menu-item {
          width: 160px;
          height: 100%;
          line-height: 72px;
          text-align: center;
          font-weight: 400;
          // color: rgba(255, 255, 255, 0.89);
          color: #fff;
          letter-spacing: 0px;
          font-size: 24px;
          padding: 0;
          // margin: 0 55px;
          margin-right: 50px;
          padding-bottom: 60px;
        }

        & > .el-menu-item:first-child {
          margin-left: 0;
        }

        .span4 {
          font-weight: 500;
          // color: rgba(255, 255, 255, 0.89);
          letter-spacing: 0px;
          font-size: 24px;
          padding: 0;
          font-family: PingFang SC, MicrosoftYaHei;
        }

        & > .el-menu-item.is-active {
          border-bottom: 0;
          position: relative;
          font-weight: 600;
          background: #0055A6;
          .span4 {
            font-weight: 600;
          }
        }

        & > .el-submenu {
          // height: 51px;
          // line-height: 40px;
        }

        & > .el-submenu.is-active {
          .el-submenu__title {
            //border-bottom: none;
            position: relative;

            &::after {
              content: "";
              position: absolute;
              display: inline-block;
              width: 16px;
              height: 3px;
              background: #ffffff;
              border-radius: 2px;
              left: 50%;
              margin-left: -8px;
              bottom: 0;
            }
          }
        }

        & > .el-menu-item.is-active::after {
          content: "";
          position: absolute;
          width: 30px;
          height: 5px;
          background: #ffffff;
          border-radius: 3px;
          left: 50%;
          margin-left: -16px;
          bottom: 0;
        }

        & > .el-menu-item.is-active {
          // background-color: transparent !important;
          background-color: #0055A6 !important;
        }

        & > .el-menu-item:hover {
          // background-color: transparent !important;
          background-color: #0055A6 !important;
        }

        & > .el-submenu /deep/ .el-submenu__title:hover {
          // background-color: transparent !important;
          background-color: #0055A6 !important;
          // background-color: #41a3fb !important;
        }

        /deep/ .el-menu-item,
        /deep/ .el-submenu__title {
          //height: 45px !important;
          //line-height: 45px !important;
          // height: 40px !important;
          // line-height: 40px !important;
          //border-bottom: 2px solid #5ee6f8;
          border-bottom: none;
        }

        /deep/ .el-submenu__title {
          margin: 0 55px;
          padding: 0px;
        }

        /deep/ .el-submenu .el-submenu__icon-arrow {
          display: none;
        }
      }
    }

    & > img {
      cursor: pointer;
      width: 18px;
      margin-left: 30px;
    }
  }

  & > div {
    /deep/ .el-badge__content {
      border: none;
      background: #f53502;
    }

    /deep/ .el-badge__content.is-fixed {
      right: 5px !important;
    }

    .username {
      height: 20px;
      line-height: 20px;

      & > span {
        color: #b0adad;
        font-size: 14px;
        position: relative;
        cursor: pointer;
        font-weight: 500;
        font-family: MicrosoftYaHei;

        & > span {
          position: absolute;
          background-color: #f53502;
          letter-spacing: 0px;
          border-radius: 50%;
          line-height: 15px;
          height: 15px;
          width: 15px;
          text-align: center;
          color: #ffffff;
          font-size: 12px;
          top: -3px;
          right: -8px;
        }
      }
    }

    & > img {
      margin-left: 37px;
      width: 20px;
      cursor: pointer;
    }
  }

  .notice-tips {
    width: 100%;
    height: 40px;
    background: #FFF5EF;
    .n-wrap {
      width: 1200px;
      height: 100%;
      display: flex;
      align-items: center;
      margin: 0 auto;
      img {
        // height: 16px;
      }
      span {
        font-size: 16px;
        line-height: 14px;
        color: #FF6200;
        margin-left: 10px;
      }
    }
  }
}
</style>