<template>
  <div class="headerContent">
    <div class="nav-content" >
      <div class="headerLogo">
        <b-row class="text-center">
          <b-col sm="12" md="2" lg="2" xl="2" class="hideMobile pd0">
            <div class="logo">
              <router-link to="/"><img src="./../assets/logo.png" class="logoImg" /></router-link>
              </div>
            </b-col>
          <b-col sm="12" md="7" lg="7" xl="7" class="pd0">
            <div class="header-nav">
              <b-navbar style=" float: right;" toggleable="lg" type="light" variant="faded">
                <b-navbar-brand href="#" style="padding-left: 10px" class="showMobile">
                  <img style="width: 170px" src="./../assets/logo.png" class="logoImg showMobile" />
                </b-navbar-brand>
                <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
                <b-collapse id="nav-collapse" is-nav>
                  <b-navbar-nav>
                    <!-- <b-nav-item href="#"> <router-link to="/">首页</router-link></b-nav-item> -->
                    <b-nav-item href="#"> <router-link to="/">产品</router-link></b-nav-item>
                    <b-nav-item href="#"> <router-link to="/news">客户案例</router-link></b-nav-item>
                    <b-nav-item href="#"> <router-link to="/productTrials">产品试用</router-link></b-nav-item>
                    <b-nav-item href="#"> <router-link to="/about">关于我们</router-link></b-nav-item>
                  </b-navbar-nav>
                </b-collapse>
              </b-navbar>
            </div>
          </b-col>
          <b-col sm="12" md="2" lg="2" xl="2" style="height:70px;display: flex;align-items: center;justify-content: center;"  class="hideMobile pd0">
              <img src="./../assets/phone.png" style="width:29px;height:32px;">
              <span>021-22019885</span>
          </b-col>
        </b-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    homeLInk() {
      this.$router.push({
        path: '/',
      });
    },
  },
};
</script>
<style>
/* 页头 */
.headerContent {
  padding: 20px 16px 0px;
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0;
  left: 0;
  border-bottom: 2px solid #f5f5f5;
  height: 100px;
}

.headerContent .headerSearchBtn {
  padding: 0px 40px 0px 12px;
}
.headerContent .logo .logoImg {
  width: 300px;
  float: left;
  margin-top: 10px;
  cursor: pointer;
  margin-left:20px;
  
}
.headerContent .headerLogo {
  width: 100%;
}
/* 顶部搜索 */
.headerSearch {
  float: right;
  width: 144px;
  border-radius: 40px;
  overflow: hidden;
  margin-top: 4px;
}
.headerSearch .input-with-select .el-input-group__prepend,
.headerSearch .el-input-group__append,
.headerSearch .el-input__inner {
  background-color: #f5f5f5;
  border: 0;
  color: #2c3e50;
}
.headerSearch .el-input--small .el-input__inner {
  height: 38px;
  line-height: 38px;
}
.headerSearch .input-with-select .el-input-group__prepend,
.headerSearch .el-input-group__append {
  padding-right: 0;
}
.headerSearch .el-input-group__append {
  color: #004ca1;
  padding: 0;
  border: 0;
}
/* 导航 */
.header-nav {
  width: 100%;
  height: 42px;
  margin-top:16px;
}
.header-nav nav {
  font-size: 16px;
  /* float: right; */
  padding: 0;
}
.header-nav a {
  color: #2c3e50;
}
.header-nav nav .nav-link a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
  padding: 0 0 30px;
}
.header-nav nav .nav-link:last-child {
  margin-right: 0;
}
.header-nav nav .router-link-exact-active {
  color: #004ca1 !important;
  border-bottom: 3px solid #004ca1;
  padding: 0 0 30px;
}
.navbar-light .nav-item {
  padding: 0 10px;
}
.header-nav nav .nav-link a:hover {
  color: #004ca1 !important;
  border-bottom: 3px solid #004ca1;
  padding: 0 0 30px;
}
.header-nav nav .dropdown-menu .router-link-exact-active {
  color: #004ca1;
  border-bottom: 0;
  padding: 0 0 30px;
}
.headerJump {
  padding: 0 10px;
  margin-top: 8px;
  line-height: 20px;
  color: #666;
  float: right;
  /* border-left: 1px solid #eee; */
}
.headerJump .top-ico {
  float: left;
  width: 18px;
  color: #666;
  height: 16px;
  background: url('./../assets/home/zy.png');
  background-size: cover;
  margin: 2px 0;
}
.headerJump:hover .top-ico {
  background: url('./../assets/home/zyselect.png');
}
.searchTop:hover {
  color: #004ca1;
  cursor: pointer;
}
.searchContent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #004ca1;
  z-index: 999;
}
.searchContent .close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
}
</style>
<style>
.dropdowns .links {
  display: inline-block;
  padding: 0;
}
.dropdownList {
  display: inline-block;
}
.header-nav nav .dropdowns .router-link-exact-active {
  padding: 0;
  text-align: center;
}
</style>