<template>
  <!--右边固定联系-->
  <div class="mainBox w100">
    <zgh-header :title="$route.name"></zgh-header>
    <div class="fixRight mianBox">
      <div class="common-top h100">
        <div class="zgh-cont" :class="active ? 'active':''">
          <div class="cartoon" @click="active=!active"></div>
          <div class="guessFAQ">
            <h4>猜你想问：</h4>
            <div @click="openWin=true">
              <a class="faq" href="javascript:void(0)">环保产品跟正常产品的区别是什么？</a>
              <a class="faq" href="javascript:void(0)">拍下什么时候发货？</a>
            </div>
          </div>
          <div class="FAQ func" @click="active=!active">
            <img class="middle" src="static/img/zgh_questionSmall.png"/><span
            class="middle txt">常见问题</span><em></em>
            <div class="sanjiao_zgh"></div>
          </div>
          <div class="serviceQQ  func hover_func">
            <img class="middle" src="static/img/zgh_QQ.png"/><span class="middle txt">在线客服</span><em></em>


          </div>
          <div class="FAQ_contR" v-if="openWin">
            <div class="top">
              <h3>常见问题</h3>
              <a class="put" href="javascript:void(0)" @click="active=false,openWin=false"></a>
            </div>
          </div>
          <div class="backTop"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        active: false,
        openWin: false
      }
    },
    computed: {},
    mounted() {

    },
    methods: {}
  }
</script>

<style lang="less" scoped>
  @import url("../../assets/config.less");

  .fixRight {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 222;
    color: #000;
    .zgh-cont {
      position: absolute;
      right: 0;
      top: 0;
      width: 60px;
      height: auto;
      margin-top: -120px;
      transition: all .2s;
      &.active {
        width: 150px;
        margin-top: -200px;
        .cartoon {
          background: url('./zgh_sit.gif') no-repeat center bottom;
          height: 110px !important;
          text-align: center;
          margin-bottom: -18px;
          z-index: 1;
          position: relative;
          &:after {
            right: 78px;
            /*background:url('./images/zgh_click_put.png') no-repeat right 34px;*/
            width: 100%;
          }
        }
        .guessFAQ {
          display: block;
        }
      }
      .cartoon {
        background: url('./zghStand.png') no-repeat center bottom;
        height: 75px !important;
        cursor: pointer;
        &:hover {
          &:after {
            opacity: 1;
          }
        }
        &:after {
          content: '';
          position: absolute;
          bottom: 97%;
          right: 40px;
          display: block;
          width: 200%;
          height: 100px;
          text-align: center;
          line-height: 100px;
          color: #db2227;
          z-index: 2;
          opacity: 0;
          transition: opacity .5s;
          /*background:url('./images/zgh_click_open.png') no-repeat right bottom;*/
        }
      }
      .guessFAQ {
        text-align: left;
        padding: 10px;
        border: 2px solid #bf060b;
        border-bottom: none;
        box-sizing: border-box;
        display: none;
        background: #fff;
        h4 {
          color: #bf060b;
        }
        .faq {
          display: block;
          padding: 8px 0;
          border-bottom: 1px dashed #999;
          font-size: 12px;
          &:last-child {
            border: none;
          }
        }
      }
    }
    .func {
      position: relative;
      height: 60px;
      background-color: #db2227;
      line-height: 60px;
      text-align: center;
      .txt {
        display: none;
        color: #fff;
        padding-left: 5px;
      }
      &:before,
      .sanjiao_zgh {
        content: '';
        position: absolute;
        left: 0px;
        top: 50%;
        display: block;
        width: 0;
        height: 0;
        margin-top: -8px;
        border: 8px solid;
        border-color: transparent transparent transparent #fff;
        z-index: 2;
        opacity: 0;
      }
      &:after {
        content: '在线客服';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 0;
        height: 100%;
        text-align: left;
        text-indent: 20px;
        white-space: nowrap;
        line-height: 60px;
        background: #bf060b;
        color: #fff;
        transition: all .5s;
        opacity: 0;
        z-index: -1;
      }
    }
    .active .func .txt {
      display: inline-block;
    }
    .FAQ {
      cursor: pointer;
      border-bottom: 1px solid #bf060b;
      box-sizing: border-box;
    }
    .FAQ:after {
      content: '常见问题';
    }
    .func:hover {
      background-color: #bf060b;
    }
    .func:hover:after {
      left: -100px;
      width: 100px;
      opacity: 1;
    }
    .func:hover iframe {
      width: 260% !important;
    }
    .active .func:hover:after {
      display: none;
    }
    .serviceQQ iframe {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100% !important;
      text-align: center;
      line-height: 75px;
      opacity: 0;
      padding-top: 20px;
      box-sizing: border-box;
    }

    /* 左侧常见问题 */
    .FAQ_contR {
      @W: 500px;
      @H: 400px;
      position: absolute;
      top: 70%;
      left: -@W + 2px;
      width: @W;
      height: @H;
      margin-top: -@H/2;
      border: 2px solid #db2227;

      box-sizing: border-box;
      z-index: 555;
      .top {
        @h: 40px;
        width: 100%;
        height: @h;
        line-height: @h;
        background-color: #db2227;
        color: #fff;
        h3 {
          line-height: @h;
          float: left;
          padding-left: 48px;
          font-weight: normal;
          font-size: 14px;
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5OTZBQTYxNEUzQzFFNjExQkMyQUQ4MzE4MzVBRDg4NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NjIwQUJBQUMxRTQxMUU2ODA3RUMzRDhFMzdDM0ZDNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NjIwQUJBOUMxRTQxMUU2ODA3RUMzRDhFMzdDM0ZDNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk5NkFBNjE0RTNDMUU2MTFCQzJBRDgzMTgzNUFEODg1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjk5NkFBNjE0RTNDMUU2MTFCQzJBRDgzMTgzNUFEODg1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+AA03zAAAAxtJREFUeNrMmFtIVEEYx92rtnSBFrKsBWWjAivWIpRQiCgqQYiKLi/iQ0UP9RJRvfXeSxcKKzQIISoCIehCUBBG0MWiFjMzMFlJagk3C1pZ9fQ/9S2chnPmcmaW+uDHcmbn++Z/5sw3t4BlWWX/s4U1fOeAdaAe1IIkqKKY30AGDIBXoId+1c3uQUWWgfNgzFKz56BNtT2VyhXglKVvfWCzaYFrwZBl1i6aErjbKp09AiFe+wFBFu8E10ucqHbyrPL6kyfQduqVaGAE3AJvwGcwCWaDatAAWiRi3AXNqln8VfB5JsFBEBUMkeWgS+JzH1EZg2cFwcapYZVZ4LiEyAUyAqskAtW5+AVBE2gB9R4i2wVxr8kIvCQI0uHis8FlGnoJql3qjgri1/AEzqCx5WXTYDHjU8Opn3EZo2cEAk846weZnNkIQpxsGwUfmLKTnPqLwGqmrF+Q0bt4m4VGgfNc8IymkwyxSeAzxjwHBfWX8ATWCpwrwBqFSfgyeMeUNQh8fvLmwQGDy9gFlwSpBHmJKcxzDFYaWr6OgQMu5XdAuc6GNWpAnD3Ib7iU3+OtuV7G9uC4pri9LuJi4IFEMkkJHNYQZ/dQJ1O2kDYR6/0GZQW+1xDYzjzPA6/prKJiUZ7AXg2Bg8zzORD3EafAE3hfQyC7QqR8xnnIy+K3dFRc6iNwGy2FRZvlU+AV0Y56D7j6j87pX8B8e/0QbflHKANV7DD45Hg+TY2pWCvoktnyN/pY2iJMjD5F/343LV47i8egQ/Htk5qrUrPMPOi0feCJQgPDvOlCYNvAkJ/LoybwAtRJNLIVfLTHtWIWHwLdOpdH9mGou0Q3CztMXh4dNSjsKVhh+narePXWqSFsEOxXaVN0N/P3PQkMP5F0Or0ykUhsj8ViW8LhcFJw/ziRz+d7stns7VQqdTOXyxUogQqWRONcgX/0/LYIDfpyRxLomt3wBPhOYstUpxmnxenAFDC4rAUoZtxUD86kHgwaEjhNPfiD14OyAp1vHSFCNI+GSHTAQfETFrHFTNHV3FRxDDo3BaYElsy8dPwSYABhWj054K4opQAAAABJRU5ErkJggg== ') no-repeat 20px center;
          background-size: 18px;
        }
        a {
          float: right;
          width: 80px;
          height: 100%;
          background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMzE3N0E3RUU0QzFFNjExQkMyQUQ4MzE4MzVBRDg4NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MjdEMEJEREMxRTUxMUU2ODQ5RjlEREQ0QjUyNDM3RiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MjdEMEJEQ0MxRTUxMUU2ODQ5RjlEREQ0QjUyNDM3RiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzMTc3QTdFRTRDMUU2MTFCQzJBRDgzMTgzNUFEODg1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzMTc3QTdFRTRDMUU2MTFCQzJBRDgzMTgzNUFEODg1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k1Ob9AAAAWJJREFUeNrsls8rRFEYht2hxCgLC8qWLGykJCJZyMbWwspKyspKKUryoygplCz8CzZTUiOUJMrGZhYWLIQVhZTkek+dqafTle5XNnLqqZnvmfN+954758xEcRyX/PaI/pukGZmEWuzpC+pZ8eLdVKou7k4COHpQz4pruImEuYkkFVvFB8I64SrEJdy4tYmjHUGfoi24owL8mLWJowtB76IFrlpcwY9Ymzh6EfQmmuFqxA38sLWJox9Bz6IJrlbcwg9ZmzgGEPQkGuDqxQP8oLVJcenufNCr6ICrE6doNMq5mRRb6kA8+teVohHuXhTwvvunzZhEqTjHlU4GfhNux38+9XJxKaYDtwaXsz74Y4TMBm4Fbs/6FT5EyELgluD2rZsxj5DlwM3DHVmPlV2ErAZuBu7EekDmELKBepmYgzsTkbVJcWwF9Sq4C9/U/HuyKNa/meDOpm1RnuKk+EN/JL4EGAANpHuhDebqJgAAAABJRU5ErkJggg==') no-repeat center;
        }
      }
    }
    /*header */
    .FAQ_contR .top a:hover {
      background-color: #bf060b;
    }
  }
</style>
