<template>
  <div id="app">
    <div class="main">
      <router-view />
    </div>
    <div id="hide">
      <div class="coll">
        <div>
          <div v-if="!current1" class="btn btn-default back-top1" role="button" @mouseenter="enter1()">
            <img src="./assets/image/联系我们.jpg" class="back-top1" />
          </div>
          <div v-if="current1" class="btn btn-default back-top1 back-top1s" role="button" @click="open" @mouseenter.stop="enter1() " @mouseleave="leave1()">
            <img src="./assets/image/联系我们触发.png" @mouseleave="leave1()" class="back-top1 back-top1s" />
          </div>
        </div>
      </div>
      <div class="coll">
        <div>
          <a class="back-top2" href="#" v-if="!current2" role="button" @mouseenter="enter2()">
            <img src="./assets/image/返回顶层.jpg" class="back-top2" />
          </a>
        </div>
        <div>
          <a class="back-top2" href="#" v-if="current2" role="button" @mouseenter.stop="enter2()" @mouseleave="leave2()">
            <img src="./assets/image/返回顶层触发.jpg" class="back-top2 back-top2s" />
          </a>
        </div>
      </div>
    </div>
    <div class="page-footer" style="background-color:#1b1b1b">
      <p class="footer-p" style="color:rgb(255,255,255)">Copyright © 2020 FOYO All rights reserved. 苏ICP备19049305号-1</p>
    </div>
  </div>
</template>


<script>
import ClickContact from "@/components/ClickContact.vue";
import { isMobilePhone } from '../utils'

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

  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.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;
  height: 80vh !important;
}

.btn:hover {
  color: #e03723;
  border: 1px solid #e03723;
  outline: none;
}
.btn:active {
  color: #e03723;
  border: 1px solid #e03723;
  background-color: #fff;
  box-shadow: none;
}

.btn-default:active:focus {
  color: #e03723;
  background-color: #fff;
  border: 1px solid #e03723;
  outline: none;
}
.btn:active:focus {
  color: #e03723;
  border: 1px solid #e03723;
}
@media (max-width: 992px) {
  .top {
    width: 100%;
    height: 47.8px;
  }
}
</style>


<style scoped>
p {
  margin: 0 50px;
}
</style>

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

.coll {
  display: none;
}
.navbar-toggle {
  margin: 0 10px 0 0;
  /* padding: 0; */
  border: none;
}
a:focus,
a:hover {
  /* color: #23527c; */
  text-decoration: none;
}
@media (min-width: 992px) {
   .el-message-box__headerbtn {

    position: absolute;
    top: 15px;
    right: 15px;
    padding: 0;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 38px !important;
    cursor: pointer;
color: #aaa !important;
}

.el-message-box__headerbtn:hover .el-message-box__close {
color: #e03723 !important;

}

  .coll {
    display: block;
  }
  .con {
    padding-left: 9%;
    padding-right: 9%;
  }

  .back-top1 {
    position: fixed;
    right: 0;
    bottom: 256px;
    margin: 0;
    padding: 0;
  }
  
  .back-top2 {
    position: fixed;
    right: 0;
    bottom: 200px;
    margin: 0;
    padding: 0;
  }

  .page-footer {
    height: 6.3vw;
  }
  .footer-p {
    line-height: 6.3vw;
    font-size: 2rem;
    margin: 0;
  }
  .main {
    padding-bottom: 9.4rem;
  }
}

.rtl #drawer__title {
  margin: 0;
}
#hide {
  display: none;
}
</style>


<style lang="less" scoped>
@media (max-width: 992px) {
  .top {
    width: 100%;
    height: 47.8px;
  }

  // .main {
  //   // padding-bottom: 3rem;
  // }

  .page-footer {
    height: 9.8vw;
  }
  .footer-p {
    line-height: 9.8vw;
    font-size: 3vw;
    margin: 0;
  }
}
@media (min-width: 768px) {
}
@media (min-width: 992px) and (max-width: 1550px) {
  .back-top1 {
    position: fixed;
    right: 0;
    bottom: 150px !important;
    margin: 0;
    padding: 0;
    z-index: 3;
    width: 50px;
  }
  .back-top2 {
    width: 50px;
    position: fixed;
    right: 0;
    bottom: 100px !important;
    margin: 0;
    padding: 0;
    z-index: 3;
  }
  .footer-p {
    font-size: 1.5rem;
  }
  .back-top2s, .back-top1s {
    width: 163.6px !important;
  }
}
</style>
