<template>
  <div id="showheader" class="header-warp iosStyle">
    <van-nav-bar id="nav" :title="title" left-text left-arrow>
      <template #title>
        <a class="header-title title-one" :class="isActive?'title-active':''" href="/">人事服务</a>
        <a class="header-title" :class="isActive?'':'title-active'" href="./more">更多服务</a>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
import { NavBar, Icon } from "vant";
import { common } from "../utils/common";
export default {
  components: {
    [NavBar.name]: NavBar
  },
  props: {
    title: String
  },
  data() {
    return {
      isActive: true,
      top: ""
    };
  },
  mounted() {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    this.top = isiOS;
    if (window.location.href.indexOf("more") > 0) {
      this.isActive = false;
    } else {
      this.isActive = true;
    }
  }
};
</script>

<style  lang="less" scoped>


.header-warp {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1100;
}
.header-warp /deep/ .van-nav-bar .van-icon {
  color: #fff !important;
  font-size: 16px !important;
}
.van-nav-bar {
  background: #0978e7;
}

.header-title {
  color: #8ec9fd;
  font-size: 16px;
}

.title-one {
  margin-right: 25px;
}

.title-active {
  color: #ffffff;
  font-size: 18px;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
</style>