<template>
  <div id="app">
    <div>
      <nav class="navbar navbar-default navbar-fixed-top app" :class="{ 'scroll': scrolled }">
        <div class="container-fluid con">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed">
              <span class="iconfont icon-caidan" @click="navdrawer = true"></span>
            </button>
            <!-- <el-button class="btn-link" @click="navdrawer = true" type="button" style="margin-left: 16px;"><span class="iconfont icon-caidan"></span></el-button> -->
            <a class="navbar-brand" href="#">
              <!-- <img alt="Brand" src="./assets/logo1.png" /> -->
              <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">
              <!-- <router-link to="/">首页</router-link> 
                        <router-link to="/case" class="a"  style="color:#000000;">案例</router-link>
                        <router-link to="/dynamic" class="a" style="color:#000000;">动态</router-link>
                        <router-link to="/about" class="a" style="color:#000000;">关于</router-link>
              <router-link to="/contact" class="a" style="color:#000000;">联系</router-link>-->
              <li class="a">
                <a href="/">首页</a>
              </li>
              <li class="a">
                <a href="/case">案例</a>
              </li>
              <li class="a">
                <a href="/dynamic">动态</a>
              </li>
              <li class="a">
                <a href="/about">关于</a>
              </li>
              <li class="a">
                <a href="/contact">联系</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </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>
          <el-col :span="24" class="a">
            <a href="/" class="btn1">01 回到首页</a>
          </el-col>

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

          <el-col :span="24" class="a">
            <a href="/dynamic" class="btn1">03 动态分享</a>
          </el-col>

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

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

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

    <div class="main">
      <router-view />
    </div>
    <div id="hide">
      <div class="coll">
        <div>
          <div v-if="!current1" class="btn btn-default" role="button" @mouseenter="enter1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;">
            <img src="./assets/image/联系我们.jpg" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 3;" />
          </div>
          <div v-if="current1" class="btn btn-default" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()" style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;">
            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" alt style="position:fixed;right:0;bottom:306px;margin:0;padding:0;z-index: 4;" />
          </div>
        </div>
      </div>
      <div class="coll">
        <div>
          <a href="#" v-if="!current2" role="button" @mouseenter="enter2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;">
            <img src="./assets/image/返回顶层.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 3;" />
          </a>
        </div>
        <div>
          <a class="back-top" href="#" v-if="current2" role="button" @mouseenter.stop="enter2()" @mouseleave="leave2()" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;">
            <img src="./assets/image/返回顶层触发.jpg" style="position:fixed;right:0;bottom:250px;margin:0;padding:0;z-index: 4;" />
          </a>
        </div>
      </div>
    </div>
    <div class="page-footer" style="background-color:#1b1b1b">
      <p class="footer-p" style="color:rgb(255,255,255)">© 2019 All rights reserved.</p>
    </div>
  </div>
</template>


<script>
import ClickContact from "@/components/ClickContact.vue";

export default {
  data () {
    return {
      scrolled: false,
      current1: false,
      current2: false,
      key: 1,
      navdrawer: false,
      direction: 'rtl',
    }
  },

  methods: {
    enter1 () {

      this.current1 = true;
      this.current2 = false;
    },
    leave1 () {

      this.current1 = false;
    },

    enter2 () {
      this.current2 = true;
      this.current1 = false;
    },
    leave2 () {

      this.current2 = false;
    },

    open () {
      const h = this.$createElement;
      this.$msgbox({
        title: '',
        message: h(ClickContact, { key: this.key++ }),
        showClose: true,
        showCancelButton: false,
        center: true,
        showConfirmButton: false,
        customClass: 'messageBox-Contace',



      })
    }

  },

  mounted () {
    window.addEventListener('scroll', () => {
      this.scrolled = (document.documentElement.scrollTop || document.body.scrollTop) > 200
    })

    window.onscroll = function () {
      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop != 0) {
        document.getElementById("hide").style.display = "block";

      } else { document.getElementById("hide").style.display = "none"; }
    }


  }





}
</script>

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

<style>
#app {
  
  font-family: "Microsoft Yahei Light","Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  /* background-color: fafafa; */
  color: #2c3e50;
  margin-top: px;
  width: auto;
  margin: 0;
}
.app{

  font-family: "Microsoft Yahei","Helvetica Neue","Helvetica","Arial",sans-serif;
}

.coll {
  display: none;
}
.navbar-toggle {
  margin: 0 10px 0 0;
  /* padding: 0; */
  border: none;
}
.iconfont {
  border: none;
  font-size: 30px;
}
.iconfont:hover {
  color: red;
}



@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: 10%;
    padding-right: 10%;
  }

  .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 {
    height: 60px;
  }
  .navbar-brand {
    padding: 0;
  }
  .logo {
    margin-top: 15px;
    margin-left: 20px;
    width: 150px;
    height: 30px;
    background-size: 100% 100% !important;
    background: url("./assets/logo1.png");
  }
  .logoimg {
    margin: -20px auto 0px;
  }
  .a {
    font-size: 2.4rem;
    margin-top: 2rem;
    color: #000;
  }
  .a a {
    color: #000;
  }
  .main {
    padding-bottom: 3rem;
  }

  .line {
    height: 2px;
    width: 300px;
    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: red !important;
    text-decoration: none;
  }
  .btn1:active {
    color: red !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;

    .navbar-brand {
      padding: 0;

      img {
        height: 100%;
      }
    }

    .nav {
      font-size: 2.6rem;
      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");
    }

    // &.scroll {
    //   transition: all 0.5s;
    //   background: #fff;

    //   .nav {
    //     li {
    //       a {
    //         color: #000;

    //         &:hover {
    //           border-bottom: 3px solid #000;
    //         }
    //       }
    //     }
    //   }

    //   .logo {
    //     background: url("./assets/logo1.png");
    //   }
    // }
  }
}
</style>
