<template>
  <div id="app" :class="{ isGray: isGray }">
    <AppHeader></AppHeader>
    <div class="heightHeader"></div>
    <div class="contents">
      <router-view />
    </div>
    <AppFooter></AppFooter>
    <section class="serveBox">
      <router-link to="/productTrials">
        <div class="experientialBox" ></div>
      </router-link>
      <div class="telephonecounseling">
        <div class="telBox">
          <!-- <img src="./assets/tel.png" alt=""> 
          <div>
            <span>全国热线</span>
            <div>021-22019615</div>
          </div> -->
        </div>
      </div>
      
    </section>
    <el-backtop :bottom="20">
      <div
        style="
           {
            height: 100%;
            width: 100%;
            background-color: #fff;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
            text-align: center;
            line-height: 44px;
            color: #004ca1 !important;
            border-radius: 8px;
            font-size: 14px;
            width: 50px;
            height: 44px;
          }
        "
      >
        TOP
      </div>
    </el-backtop>
  </div>
</template>

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

export default {
  name: "HomeView",
  components: {
    AppFooter,
    AppHeader,
  },
  data() {
    return {
      isGray: false,
    };
  },
  created() {},
};
</script>
<style lang="scss">
#app {
  font-family: "思源黑体","Microsoft YaHei", "微软雅黑", STXihei, "华文细黑", Heiti, "黑体",
    SimSun, "宋体", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  font-size: 14px;
  line-height: 26px;
  margin: 0 auto;
}
.el-tabs--left .el-tabs__item.is-left {
  text-align: left !important;
}
.serveBox{
  position: fixed;
  bottom:80px;
  right:20px;
  z-index:99;
}

.experientialBox {
  background: url("./assets/experiential.png")  no-repeat;
}
.telephonecounseling {
  background: url("./assets/telephonecounseling.png")  no-repeat;
}
.experientialBox,.telephonecounseling {
  position: relative;
  width: 80px;
  height: 99.2px;
  background-size: 100% 100%;
}
.telephonecounseling:hover{
  cursor: pointer;
}
.telephonecounseling:hover .telBox{
  visibility:visible ;
}
.telBox{
  visibility: hidden;
  width:220px;
  height:104.7px;
  background: url('./assets/tel.png') no-repeat;
  background-size:100% 100%;
   position: absolute;
  top:4px;
  right:95px;
  // background: #fff;
  // border-radius: 4px;
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // box-shadow: 0px 0px 4px 1px #ccc;
 
  // >img{
  //   width:40px;
  //   height:auto;
  //   margin-right:10px;
  // }
  // span{
  //   color:#034385;
  // }
}
</style>
