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

<template>
  <div class="head">
    <div class="head-content" v-if="isHome">
      <div class="bottom-img">
        <img src="@/assets/image/img_huxing.png" alt="" />
      </div>
      <div class="content-wrap">
        <div class="incorrect-wrap">
          <div class="incorrect-item">
            <img src="@/assets/image/icon_zhuguan.png" alt="" />
            <span>主管部门填报</span>
          </div>
          <div class="incorrect-item">
            <img src="@/assets/image/icon_qiye.png" alt="" />
            <span>企业填报</span>
          </div>
        </div>
        <div id="clear"></div>
        <div class="title-search">
          <div class="title-content">
            <img src="@/assets/image/logo.png" alt="" />
            <img
              src="@/assets/image/广东省水利建设市场信用信息平台.png"
              alt=""
            />
          </div>
          <div class="search-content">
            <div class="search-input">
              <el-input placeholder="请输入要搜索的企业" v-model="input">
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchEnterpriseName"
                  >搜索</el-button
                >
              </el-input>
            </div>
            <div class="search-word">
              <div class="img-tip">
                <img src="@/assets/image/icon_resou.png" alt="" />
                <span>热搜词：</span>
              </div>
              <div class="word-wrap">
                <span>行政许可</span>
                <span>政策优惠</span>
                <span>投标</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="head-content2" v-else>
      <div class="content2-wrap">
        <div class="content2-left">
          <img src="@/assets/image/logo2.png" alt="" />
        </div>
        <div class="content2-right">
          <div class="incorrect-item">
            <img src="@/assets/image/icon_zhuguan.png" alt="" />
            <span>主管部门填报</span>
          </div>
          <div class="incorrect-item">
            <img src="@/assets/image/icon_qiye.png" alt="" />
            <span>企业填报</span>
          </div>
        </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>
</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
    };
  },
  watch: {
    $route: {
      handler(val, oldval) {
        if (val.path == "/home") {
          this.isHome = true;
        } else {
          this.isHome = false;
        }
        this.activeIndex = val.matched[1].name;
      },
      // 深度观察监听
      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 {
    height: 500px;
    background: url("../assets/image/banner.png");
    background-size: 100% 100%;
    position: relative;

    .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;
    padding-top: 15px;
    background: #0055a6;
    // border-bottom: 1px solid #FFFFFF;

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

      & > .el-menu-demo {
        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 {
          font-weight: 400;
          color: rgba(255, 255, 255, 0.89);
          letter-spacing: 0px;
          font-size: 18px;
          padding: 0;
          margin: 0 55px;
          padding-bottom: 60px;
        }

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

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

        & > .el-menu-item.is-active {
          border-bottom: 0;
          position: relative;
          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: 25px;
          height: 5px;
          background: #ffffff;
          border-radius: 2px;
          left: 50%;
          margin-left: -13px;
          bottom: 0;
        }

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

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

        & > .el-submenu /deep/ .el-submenu__title:hover {
          background-color: transparent !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;
    }
  }
}
</style>