FE_huoran_client/src/layouts/header/index.vue

<template>
  <div :class="['header', { estate: isEstate, iasf: isIasf }]">
    <a class="logo"
       @click="toIndex">
      <template v-if="GTA">
        <img src="@/assets/images/logo2.png"
             alt="">
        产业学院平台
      </template>

      <img v-else
           src="@/assets/images/logo.png"
           alt="">
    </a>
    <!-- pc端 -->
    <template v-if="$store.getters.getModelType">
      <navbar v-if="navShow"
              ref="nav"
              :isHome.sync="isHome"
              :isEstate.sync="isEstate"
              :isIasf.sync="isIasf"
              @showMoreBtns="updateBtnsType"></navbar>
      <div class="tools">
        <div class="login"
             @click="toLogin">
          <img src="@/assets/images/user.png"
               alt="">
          <span>注册登录</span>
        </div>
      </div>
    </template>
    <!-- 手机端 -->
    <div v-else
         class="mobile-tools">
      <i class="login el-icon-user-solid"
         @click="toLogin"></i>
      <i class="menu-icon"
         :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
         @click.stop="updateModelType"></i>
      <div class="contentBox"
           v-show="modelType">
        <navbar ref="nav"
                :isHome.sync="isHome"
                @updateModelType="updateType"></navbar>
      </div>
    </div>

    <occuQrcode :visible.sync="qrcodeVisible" />
  </div>
</template>
<script>
import Util from '@/libs/util'
import { mapMutations } from 'vuex'
import navbar from '../navbar'
import occuQrcode from '@/components/occuQrcode'
export default {
  data () {
    return {
      Util,
      isHome: true,
      isEstate: false,
      isIasf: false,
      showSearch: false,
      height: 907,
      title: '',
      searchTimer: null,
      modelType: false,
      navShow: true,
      qrcodeVisible: false,
    };
  },
  components: {
    navbar,
    occuQrcode
  },
  computed: {
    isSfel () {
      return this.$route.path === '/sfel'
    },
    site () {
      return this.$route.query.siteId || this.$store.state.content.site
    },
  },
  watch: {
    '$route.path': {
      handler () {
        this.isHome = Util.isIndex()
        this.isEstate = this.$route.path === '/estate/index'
        this.isIasf = this.$route.path === '/iasf'
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.setKeyword('')
    window.addEventListener('scroll', this.handleScroll) // 监听页面滚动
    document.body.addEventListener('click', e => {
      e.stopPropagation()
      this.modelType = false
    })
  },
  methods: {
    ...mapMutations('content', [
      'setKeyword'
    ]),
    toIndex () {
      this.$refs.nav.jump()
    },
    stop () {

    },
    /**
     * pc端下,当导航栏条目大于10的情况下,显示更多按钮
     * type : true显示,false隐藏
     */
    updateBtnsType (type) {
      this.showMoreBtns = type
    },
    // 获取页面滚动距离(home长页专用)
    handleScroll () {
      if (Util.isIndex()) {
        const h = this.height
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if (this.isHome == scrollTop > h) {
          if (this.isHome != !(scrollTop > h)) this.navShow = false
          this.isHome = !(scrollTop > h)
          this.isEstate = !(scrollTop > h) && this.$route.path === '/estate/index'
          this.$nextTick(() => {
            this.navShow = true
          })
        }
      }
    },
    // 切换显示搜索
    toggleSearch () {
      this.showSearch = !this.showSearch
      this.$nextTick(() => {
        this.$refs.search.focus()
      })
    },
    // mail点击
    toMail () {
      window.open('https://qiye.aliyun.com/alimail/auth/login?custom_login_flag=1&reurl=%2Falimail%2F')
    },
    // oa点击
    toOa () {
      window.open('http://oa.iasf.ac.cn/sys/portal/page.jsp')
    },
    // 切换语言
    toggleLang () {
      let id = +(this.$route.query.siteId || this.$store.state.content.site)
      // 中英文站点的id是相邻的，有6个站点，1/2 3/4 5/6
      id % 2 ? id++ : id--
      location.href = this.$router.resolve(`/column?siteId=${id}`).href
      location.reload()
    },
    // 注册登录
    toLogin () {
      if (this.GTA) {
        window.open('https://izhixinyun.com/#/login')
      } else {
        this.qrcodeVisible = true
      }
    },
    // 全局搜索
    handleSearch () {
      this.setKeyword(this.title)
      this.modelType = !this.modelType
      if (this.title) {
        this.showSearch = false
        this.$router.push(`/column/result`)
      }
    },
    // 更改右侧盒子样式
    updateModelType () {
      this.modelType = !this.modelType
    },
    updateType (type) {
      this.modelType = type
    }
  }
};
</script>
<style scoped lang="scss">
$height: 90px;
.header {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: $height;
    padding: 0 5% 0 5%;
    &:not(.channel) {
        background-color: #fff;
        border-bottom: 1px solid #f7f7f7;
    }
    &.estate {
        background-color: rgba(0, 0, 0, 0.15);
    }
    .logo {
        display: inline-flex;
        align-items: center;
        font-size: 20px;
        font-weight: 600;
        color: #333;
        cursor: pointer;
        img {
            width: 150px;
        }
    }
    .tools {
        .login {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
            &:hover {
                opacity: 0.9;
            }
            span {
                margin-left: 5px;
                color: #666;
                font-size: 14px;
            }
        }
    }
    .search {
        margin-right: 43px;
    }
    .mobile-tools {
        display: inline-flex;
        align-items: center;
        .login {
            font-size: 1.5rem;
            color: #c1c1c1;
            cursor: pointer;
        }
    }
    .menu-icon {
        margin-left: 10px;
        font-size: 1.8rem;
        color: #c1c1c1;
        cursor: pointer;
    }
}
.search-wrap {
    position: absolute;
    top: 67px;
    right: 89px;
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 10px;
    background-color: #fff;
    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
    input {
        width: 300px;
        height: 40px;
        padding: 0 40px 0 15px;
        font-size: 1.14rem;
        color: #333;
        line-height: 46px;
        border: 0;
        border-radius: 4px;
        outline: none;
    }
    .search-icon {
        padding-right: 15px;
        margin: 0 15px;
        cursor: pointer;
        border-right: 1px solid #ccc;
    }
    .close-icon {
        font-size: 2rem;
        cursor: pointer;
    }
}
.menu-child {
    /deep/ .el-submenu__title {
        font-size: 1rem;
    }
}
.contentBox {
    width: 100%;
    position: absolute;
    top: 90px;
    left: 0;
    background-color: white;
    z-index: 9999;
    max-height: 30rem;
    overflow-y: scroll;
}
@media (max-width: 1660px) {
    .header {
        .logo {
            left: 10px;
        }
        .search {
            margin-right: 20px !important;
        }
        .tools {
            right: 30px;
        }
    }
}

@media (max-width: 1200px) {
    .header {
        color: black !important;
        background-color: #fff;
    }
    .search-wrap {
        right: 10px;
        top: 0;
        width: 70%;
        input {
            width: 15rem;
            padding: 0 0.5rem 0 0.1rem;
        }
    }
}
</style>