cloundPc/src/components/Mheader.vue

<template>
  <div>
    <van-nav-bar
      :fixed="true"
      :border="false"
      class="headerSection"
      :class="isTop ? '' : 'top'"
    >
      <template #left>
        <router-link :to="{ path: '/index' }" class="logo">
          <img src="../assets/images/logoWhile.png" width="100%" alt="" />
        </router-link>
      </template>
      <template #right>
        <div class="navRight">
          <div class="bandBtn" @click="goKu">机构入驻</div>
          <img
            class="menu"
            src="../assets/images/menu.png"
            width="100%"
            alt=""
            @click="showPopup"
          />
        </div>
      </template>
    </van-nav-bar>
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-right"
      position="right"
      :style="{ width: '100%', height: '100%' }"
      get-container="#app"
    >
      <div>
        <div class="imgwrap">
          <img src="../assets/images/logo.png" width="100%" alt="" />
        </div>
        <van-cell-group>
          <van-cell  :title-class="path=='/index'?'active':''"	 title="产品服务" @click="goto('/index')" />
          <van-cell   :title-class="path=='/project'?'active':''" title="成功案例" @click="goto('/project')" />
          <van-cell  :title-class="path=='/aboutUs'?'active':''" title="关于我们" @click="goto('/aboutUs')" />
        </van-cell-group>
      </div>
    </van-popup>
    <van-popup
      class="join"
      v-model="joinIn"
      closeable
      close-icon-position="top-right"
      position="bottom"
      :style="{ height: '6.8rem' }"
      get-container="#app"
    >
      <div class="joinWrap">
        <h2 class="joinTitle">机构入驻</h2>
        <minForm @close='joinIn=false'/>
      </div>
    </van-popup>
  </div>
</template>
<script>
import minForm from "./minForm.vue";
export default {
  components: { minForm },
  data() {
    return {
      isTop: false,
      show: false,
      joinIn: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", (e) => {
      //函数体
      let scrollTop =
        document.documentElement.scrollTop | document.body.scrollTop;
      scrollTop > 0 ? (this.isTop = true) : (this.isTop = false);
    });
  },
  beforeDestroy() {
    window.removeEventListener("scroll", () => {});
  },
  methods: {
    goKu() {
      // window.open("https://kj.colexiu.com/#/login?returnUrl=%2F", "_blank");
      this.joinIn = true;
    },
    showPopup() {
      this.show = true;
    },
    goto(to) {
      this.show = false;
      this.$router.push(to);
    },
  },
  computed:{
    path(){
    return  this.$route.path
    }
  }
};
</script>
<style lang="less" scoped>
.active {
  color: #2dc7aa;
}
/deep/.van-nav-bar__right:active {
  opacity: 1;
}
/deep/.van-nav-bar__content {
  height:1rem;
  align-items: center;
}
/deep/.van-popup__close-icon--top-right {
  top:.42rem;
}
/deep/.van-nav-bar__left,
/deep/.van-nav-bar__right {
  padding: 0 0.4rem;
}
.join {
  border-radius: 20px 20px 0px 0px;
}
.logo {
  width: 1.8rem;
  height: 0.54rem;
}
.imgwrap {
  padding-left: 0.4rem;
  img {
    width: 1.8rem;
    height: 0.54rem;
  }
}
.headerSection.top {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.headerSection {
  z-index: 2000;
  background-color: #002F33;
}
.navRight {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .bandBtn {
    width: 1.56rem;
    height: 0.53rem;
    background: #2dc7aa;
    border-radius: 27px;
    line-height: 0.53rem;
    color: #fff;
    margin-right: 0.3rem;
  }
  .menu {
    width: 0.4rem;
    height: 0.3rem;
    &:hover {
      opacity: .8;
    }
  }
}
.joinWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .joinTitle {
    height: 0.64rem;
    font-size: 0.38rem;
    font-weight: 600;
    color: #000000;
    line-height: 0.64rem;
    width: 100%;
    text-align: center;
    margin: .4rem 0 0;
  }
  .joinTitle {
    color: #000;
    font-weight: bold;
  }
}
</style>