<template>
  <div class="navbars">
    <div>
      <nav class="navbar navbar-default navbar-fixed-top app" :class="{ 'scroll': scrolled }">
        <div class="container-fluid con">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed">
              <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
            </button>

            <a class="navbar-brand" href="/">
              <div alt="Brand" class="logo"></div>
            </a>
          </div>

          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li class="a">
                <a href="/">首页</a>
              </li>
              <!-- class="case" class-active="" -->
              <li class="a">
                <a href="/case" :class="{linkactive:'/case'==routepath}">案例</a>
              </li>
              <li class="a">
                <a href="/Share" :class="{linkactive:'/Share'==routepath}">动态</a>
              </li>
              <li class="a">
                <a href="/about" :class="{linkactive:'/about'==routepath}">关于</a>
              </li>
              <li class="a">
                <a href="/contact" :class="{linkactive:'/contact'==routepath}">联系</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>

    <el-drawer :visible.sync="navdrawer" :show-close="true" size="80%">
      <div>
        <el-row style="text-align: center;">
          <el-col :span="24">
            <img src="../assets/image/mobile/Sidemenulogo.png" width="46%" class="logoimg" />
          </el-col>
          <el-col class="line"></el-col>
          <div>
            <el-col :span="24" class="a">
              <a href="/" class="btn1" :class="{moblinkactive:'/'==routepath}">01 回到首页</a>
            </el-col>

            <el-col :span="24" class="a">
              <a href="/case" class="btn1" :class="{moblinkactive:'/case'==routepath}">02 案例展示</a>
            </el-col>

            <el-col :span="24" class="a">
              <a href="/Share" class="btn1" :class="{moblinkactive:'/Share'==routepath}">03 动态分享</a>
            </el-col>

            <el-col :span="24" class="a">
              <a href="/about" class="btn1" :class="{moblinkactive:'/about'==routepath}">04 关于福予</a>
            </el-col>

            <el-col :span="24" class="a">
              <a href="/contact" class="btn1" :class="{moblinkactive:'/contact'==routepath}">05 联系我们</a>
            </el-col>

            <el-col :span="24" class="a">
              <button type="button" class="btn btn-default rebtn" @click="navdrawer = flase" style="color:black;font-size: 24px;">继续浏览</button>
            </el-col>
          </div>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>


export default {
  data () {
    return {
      scrolled: false,


      navdrawer: false,
      direction: 'rtl',

      routepath: '',
    }
  },
  mounted () {
    this.routepath = this.$route.path;
    console.log(this.routepath);
  },





}
</script>

<style>
.messageBox-Contace {
  width: 80% !important;
}
</style>
<style scoped>
p {
  margin: 0 50px;
}
</style>

<style scoped>
.icon-caidan .coll {
  display: none;
}
.navbar-toggle {
  margin: 0 10px 0 0;
  /* padding: 0; */
  border: none;
  /* padding-top: 6px; */
}
.navbar-default .navbar-toggle:hover {
  background-color: none;
}

/* .navbar-toggle：hover{
background-color: none;
padding-bottom: 0px
} */
.iconfont {
  border: none;
  font-size: 24px;
  color: #595757;
}
.iconfont:hover {
  color: #e03723;
}

@media (min-width: 768px) and (max-width: 992px) {
  .con {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
  .logo {
    margin-top: 0 !important;
  }
  .nav li {
    margin-left: 0 !important;
  }
  .a {
    font-size: 2.4rem !important;
    margin-top: 0.5rem !important;
    color: #000;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
@media (min-width: 992px) {
  .coll {
    display: block;
  }
  .con {
    padding-left: 9%;
    padding-right: 9%;
  }

  .page-footer {
    height: 120px;
  }
  .footer-p {
    line-height: 120px;
    font-size: 20px;
    margin: 0;
  }
  .main {
    padding-bottom: 9.4rem;
  }
}

.rtl #drawer__title {
  margin: 0;
}
#hide {
  display: none;
}

@media (max-width: 992px) {
  .navbar-default .navbar-toggle:hover {
    background: none;
  }
  .navbar {
    height: 47.8px;
    background-color: #fff;
  }
  .navbar-brand {
    padding: 0;
  }
  .logo {
    margin-top: 11px;
    margin-left: 20px;
    width: 150px;
    height: 30px;
    background-size: 100% 100% !important;
    background: url('../assets/logo1.png');
  }
  .logoimg {
    margin: -20px auto 0px;
  }
  .a {
    height: 11vh;
    font-size: 2.4rem;
    /* margin-top: 2rem; */
    color: #000;
  }
  .a a {
    color: #000;
  }
  .main {
    padding-bottom: 3rem;
  }

  .line {
    height: 2px;
    width: 80vw;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #aaa, rgba(255, 255, 255, 0));
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #aaa, rgba(255, 255, 255, 0));
    margin-bottom: 30px;
  }
  .btn1 {
    font-size: 24px !important;
    color: black !important;
    border: none !important;
  }
  .btn1:hover {
    color: #e03723 !important;
    text-decoration: none;
  }
  .btn1:active {
    color: #e03723 !important;
    text-decoration: none;
  }
}
</style>


<style lang="less" scoped>
@media (min-width: 768px) {
  .navbar {
    padding: 30px 0;
    // background-color: transparent;
    border: none;
    padding: 30px 0;
    z-index: 50;
    height: 116px;
    margin: 0;
    -moz-box-shadow: 0px 2px 5px #888888; /* 老的 Firefox */
    box-shadow: 0px 2px 5px #888888;

    .navbar-brand {
      padding: 0;

      img {
        height: 100%;
      }
    }

    .nav {
      font-size: 2.6rem;
      margin-top: 5px;
      li {
        margin-left: 2vw;
        a {
          color: #000;
          padding-left: 5px;
          padding-right: 5px;
          margin: 0 10px;
          &:hover {
            border-bottom: 3px solid #000;
          }
        }
      }
    }

    .logo {
      width: 300px;
      height: 60px;
      background: url('../assets/logo1.png');
    }
  }
}
.linkactive {
  border-bottom: 3px solid #000;
}
.moblinkactive {
  color: #e03723 !important;
}
.rebtn {
  border-radius: 0px;
}
.rebtn:hover {
  color: #e03723 !important;
  border: 1px solid #e03723;
  background: #fff;
}
</style>