<template>
  <div class="box">
    <div>
      <div class="contener" v-if=" orgType == 2 || orgType == 3 || !userid">


        <transition name="slide">
          <div v-show="windowsHidden" style="font-size: 14px">
            <div class="new-floating" style="z-index: 9999;">
              <img src="./img/head.png" alt="">
              <div class="cloud-contact-us " @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
                <!--                <span class="cloud-contact-us-i"></span>-->
                <span> 售</span>
                <span> 前</span>
                <span> 咨</span>
                <span> 询</span>
              </div>
              <!--              <div class="cart-entry-wrapper" @click="tryUse">-->
              <!--                <el-tooltip class="item" effect="light" content="申请试用" placement="left">-->
              <!--                  <div class="cart-entry">-->
              <!--                    <span class="cart-icon"></span>-->
              <!--                  </div>-->
              <!--                </el-tooltip>-->

              <!--              </div>-->
              <div @click="open2"

                   style="position:absolute;bottom:-40px;display: flex;justify-content: center;align-items: center;cursor: pointer">
                <el-tooltip     v-if="getHomePath()!=='/ncmatchHome/index'" class="item" effect="light" content="联系销售" placement="left">
                                             <span class="el-icon-video-camera"
                                                   style="font-weight: 550;font-size: 22px;"></span>
                </el-tooltip>

                <!--              </div>-->
                <!--              <div class="cart-entry-wrapper" style="visibility: visible;">-->
                <!--                <div class="cart-entry" data-track-category="购物车浮层" data-track-name="入口点击"-->
                <!--                     data-track-action="click"><span class="cart-icon"></span></div>-->
                <!--                <span class="cart-icon"></span>-->
              </div>

            </div>

            <!--            <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
            <!--                 style="cursor: default;">-->
            <!--              <span>联系我们</span>-->
            <!--            </div>-->
            <!--            <div class="floating-box1" @click="tryUse">-->

            <!--              <span>申请试用</span>-->
            <!--            </div>-->
          </div>
        </transition>


        <!--        <transition name="slide">-->
        <!--          <div v-show="windowsHidden">-->
        <!--            <div class="floating-box" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave"-->
        <!--                 style="cursor: default;">-->
        <!--              <i class="el-icon-s-comment"></i>-->
        <!--              <span>联系我们</span>-->
        <!--            </div>-->
        <!--            <div class="floating-box1" @click="tryUse">-->
        <!--              <i class="el-icon-s-order"></i>-->
        <!--              <span>申请试用</span>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </transition>-->

        <div v-if="false" @click="windowsHidden=!windowsHidden" class="floating-box1 hiddenBtn"
             style="width: 50px;height: 50px;border-radius:50%;bottom: 30px;background-color: #f1e9e9;color: blue">
          <i class="el-icon-arrow-right" style="color: blue" v-show="windowsHidden"></i>
          <i class="el-icon-arrow-left" style="color: blue" v-show="!windowsHidden"></i>
        </div>


        <transition name="el-zoom-in-top">
          <!--isShow&&windowsHidden -->
          <div v-show="isShow&&windowsHidden" class="cloud-contact-us-spread-container" style="z-index: 9">
            <ul class="cloud-contact-us-spread" style="padding-left: 15px;">
              <li class="cloud-contact-us-tel" style="height: 90px;">
                <div style="display: flex;justify-content: center;align-items: center;padding-top: 15px">
                  <div data-track-action="click" data-track-category="右侧公共悬浮区" data-track-name="售前咨询"
                       data-agl-cvt="5"
                       style="height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
                    <div
                      style="margin-left: -50px;width: 100px;height: 30px;display: flex;justify-content: center;align-items: center">
                      <span style="margin-right: 5px;margin-top: 17px;height: 35px;"
                            class="cloud-contact-us-icon"></span>
                      <p class="cloud-contact-us-tit" style="font-size: 14px;">售前咨询</p>
                    </div>
                    <div style="display: flex;justify-content: center;align-items: center;"
                    >
                      <div v-if="!phone"
                           style="width: 80px;height: 25px;display: flex!important;justify-content: center;align-items: center">
                        <el-skeleton
                          style="width: 100%;padding: 0;margin: 0;height: 100%;margin-top: -25px"
                          rows="1"
                          animated/>
                      </div>
                      <p v-else class="cloud-contact-us-con" style="font-size: 12px;height: 20px;margin-top: 5px">
                        {{ phone }}</p></div>
                  </div>
                  <div v-if="false" style="width: 90px;height: 90px;">
                    <div class="img"
                         style="width: 90px;height: 90px; display: flex;justify-content: center;align-items: center"
                    >
                      <el-skeleton style="width: 80px;height: 80px;" :loading="loading" animated
                                   v-if="isShowPicLoading">
                        <template slot="template">
                          <el-skeleton-item
                            variant="image"
                            style="width: 80px; height:80px ;"
                          />
                        </template>
                      </el-skeleton>
                      <img style="width: 80px;height: 80px;" v-else @load="onImageLoad" :src="src" alt="">
                    </div>
                  </div>
                </div>
              </li>

            </ul>
          </div>


          <!--          <div class="dialog" v-if="false"-->
          <!--               style="display: flex;justify-content: space-around;">-->
          <!--            <div class="phone">-->
          <!--              <span class="sonOne">业务咨询</span>-->
          <!--              <span class="sonTwo">生态合作总监</span>-->
          <!--              <span class="sonThree" style="display: flex;">-->
          <!--                          电话:-->
          <!--                     <el-skeleton style="width: 120px" animated v-if="isShowPicLoading">-->
          <!--              <template slot="template">-->
          <!--                <el-skeleton-item variant="image" style="width: 70px; height: 20px;"/>-->
          <!--              </template>-->
          <!--            </el-skeleton>-->
          <!--                                          <span v-else>{{ phone }}</span>-->

          <!--                        </span>-->
          <!--            </div>-->
          <!--            <div class="img" style="display: flex;justify-content: center;align-items: center"-->
          <!--            >-->
          <!--              <el-skeleton style="width: 100%" :loading="loading" animated v-if="isShowPicLoading">-->
          <!--                <template slot="template">-->
          <!--                  <el-skeleton-item-->
          <!--                    variant="image"-->
          <!--                    style="width: 100px; height:100px ;"-->
          <!--                  />-->
          <!--                </template>-->
          <!--              </el-skeleton>-->
          <!--              <img v-else @load="onImageLoad" :src="src" alt="">-->
          <!--            </div>-->
          <!--          </div>-->
        </transition>


      </div>

      <!-- 申请试用弹窗 -->
      <el-dialog title="申请试用产品" :visible.sync="dialogVisible" width="35%" :before-close="handleClose"
                 custom-class="apply-use">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules" style="width: 80%">
          <el-form-item label="姓名:" prop="customer">
            <el-input v-model="form.customer" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系方式:" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
          </el-form-item>
          <el-form-item label="公司:" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="数量:">
            <el-input disabled v-model="form.product_num" placeholder="请输入资源数量"></el-input>
          </el-form-item>
          <el-form-item label="需求型号:" prop="resources">
            <!--            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.resources" placeholder="请输入资源需求"></el-input>-->
            <el-checkbox-group v-model="form.resources" style="display: flex;flex-wrap: wrap;">
              <el-checkbox label="H800" style="width: 50%;"></el-checkbox>
              <el-checkbox label="H100" style="width: 50%;"></el-checkbox>
              <el-checkbox label="A800" style="width: 50%;"></el-checkbox>
              <el-checkbox label="A100" style="width: 50%;"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button size="small" type="primary" @click="onSubmit()">确 定</el-button>
        </span>
      </el-dialog>
      <!--     选择视频类型-->
      <!--      v-if="isShowChangeChat"-->
      <div v-if="isShowChangeChat " class="changeChat" style="">
        <span style="margin-bottom: 5px;display: block">请选择聊天方式</span>
        <el-checkbox-group :min="1" style="margin-bottom: 5px" v-model="checkType">
          <el-checkbox label="文字"></el-checkbox>
          <el-checkbox label="视频"></el-checkbox>
          <el-checkbox label="音频"></el-checkbox>
        </el-checkbox-group>
        <div style="display: flex;justify-content: flex-end">
          <el-button size="mini" @click="closeWindow">关闭</el-button>
          <el-button type="primary" size="mini" @click="goVedioPage">立即沟通</el-button>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import {contantAPI, applyAPI} from "../../api/floatingWindow/index";
import axios from "axios";
import {mapState} from "vuex";
import {getCustomerOfSaleUserId} from "@/api/customer/vedio";
import { getHomePath } from "@/views/setting/tools";

export default {
  // 组件的逻辑代码
  data() {
    return {
      socket: null,
      checkType: ['文字'],
      isShowChangeChat: false,//控制选择沟通方式弹窗
      loading: true,
      currentDate: '2021-06-01',
      isShowPicLoading: true,//图片loading展示
      isSend: true,
      windowsHidden: true,
      // 获取用户代理字P串
      userAgent: window.navigator.userAgent,
      // 判断是否为移动设备
      isMobile: false,
      url: window.location.href,
      orgType: "",
      isShow: false,
      userid: sessionStorage.getItem('userId'),
      src: null,
      phone: null,
      title: '',
      dialogVisible: false,
      form: {
        customer: '',
        phone: '',
        unit: '',
        product_num: '1（台）',
        resources: ['H800']
      },
      rules: {
        customer: [
          {required: true, message: "请输入姓名", trigger: "change"},
        ],
        phone: [{pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: "请输入有效的手机号"},
          {required: true, trigger: "blur", message: "请输入手机号"}],
        unit: [
          {required: true, message: "请输入单位", trigger: 'change'},
        ],
        product: [
          {required: true, message: "请输入资源名称", trigger: 'change'},
        ],
        resources: [
          {required: true, message: "请输入资源需求", trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);

  },
  watch: {
    '$route': { // $route可以用引号，也可以不用引号
      handler(to, from) {
        this.orgType = sessionStorage.getItem('org_type') ? sessionStorage.getItem('org_type') : "";
        this.userid = sessionStorage.getItem('userId') ? sessionStorage.getItem('userId') : "";
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  mounted() {
    // debugger
    // console.log("路由展示~~~",location.href)
    // console.log("路由展示~~~",this.$route)

  },
  computed: {},
  methods: {
    // 让模板中可以直接调用 getHomePath()
    getHomePath,
    openTip() {
      this.$notify({
        title: '提示',
        message: '当前还未登录，请先登录~',
        type: 'warning'
      });
    },

    goVedioPage() {
      if (!sessionStorage.getItem('userId')) {
        console.log("未登录，请重新登录")
        this.openTip()
      } else {
        let ploady = {
          audioIsOn: 0,
          vedioIsOn: 0,
          chatIsOn: 0,
          userId: this.userid,
          toUserId: 0,
          customerName: sessionStorage.getItem('username'),
        }
        for (let i = 0; i < this.checkType.length; i++) {
          if (this.checkType[i] === '文字') {
            ploady.chatIsOn = 1
          } else if (this.checkType[i] === '视频') {
            ploady.vedioIsOn = 1
          } else if (this.checkType[i] === '音频') {
            ploady.audioIsOn = 1
          }
        }


        getCustomerOfSaleUserId({userid: this.userid}).then(res => {
          let routeData = {
            chatIsOn: ploady.chatIsOn,
            vedioIsOn: ploady.vedioIsOn,
            audioIsOn: ploady.audioIsOn,
            value: 'customer'
          }
          if (res.status) {
            this.$router.push({
              path: '/customer/chat',
              query: {
                chatIsOn: ploady.chatIsOn,
                vedioIsOn: ploady.vedioIsOn,
                audioIsOn: ploady.audioIsOn,
                room: res.data,
                name: sessionStorage.getItem('username')
              }
            })
            this.isShowChangeChat = false
            // let webSocketUrl = 'wss://www.opencomputing.cn/dev/wss/pub/rtcc.ws'
            let webSocketUrl = 'wss://www.opencomputing.cn/pub/rtcc.ws'
            this.socket = new WebSocket(webSocketUrl)
            let ploadyed = {
              type: 'send',
              from: sessionStorage.getItem('userId'),
              uuid: res.data,
              content: JSON.stringify(routeData)
            }
            // let ploadyed = {
            //   type: 'send',
            //   from: "user1",
            //   uuid: "asdsad",
            //   content: {}
            // }
            this.socket.onopen = (event) => {
              console.log("客户创建成功了@@@@@")
              console.log("发送的信息是", ploadyed)
              this.socket.send(JSON.stringify(ploadyed));
            };

            this.socket.onmessage = (event) => {
              console.log('接收到消息@@@@：', event.data);
            };

            this.socket.onclose = (event) => {
              console.log('WebSocket连接已关闭');
            };
          } else {
            console.log("zouleels")
          }
        })


      }

    },
    open2() {
      this.isShowChangeChat = true
    },
    //关闭弹窗
    closeWindow() {
      this.isShowChangeChat = false
    },
    onImageLoad() {
      this.isShowPicLoading = false
      console.log()
    },
    handleMouseEnter() {//鼠标移入事件
      this.isShow = true
      if (this.isSend) {
        this.contant()
      }
      // this.contant()
    },
    handleMouseLeave() {//鼠标移出事件
      this.isSend = true
      this.src = ''
      this.phone = ''
      this.title = ''
      this.isShow = false
      this.isShowPicLoading = true
    },
    contant() {//联系我们
      let params = {
        // userid: sessionStorage.getItem("userId")
      }
      if (this.url.indexOf('www') != -1) {
        params.domain = 'www'
      }
      contantAPI(params).then(res => {
        this.isSend = false

        this.isShowPicLoading = false
        if (res.status) {

          this.src = res.picture_url
          this.phone = res.contactor_phone
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    onSubmit() {//点击确认申请试用
      this.$refs.form.validate((valid) => {
        if (valid) {
          let pamars = {
            customer: this.form.customer,
            phone: this.form.phone,
            unit: this.form.unit,
            resources: this.form.resources,
            userid: sessionStorage.getItem("userId")
          }
          applyAPI(pamars).then(res => {
            if (res.status) {
              this.dialogVisible = false
              this.$message({
                message: "成功申请试用",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })
        }
      })
    },
    tryUse() {//申请试用

      if (sessionStorage.getItem("userId")) {
        this.dialogVisible = true
      } else {
        // window.open('https://www.opencomputing.cn/#/floatingBox')
        this.$router.push('/floatingBox')
      }

    },
    handleClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false
    },
    //是否展示悬浮窗
    isShowFloating() {


      return false
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  .contener {
    .dialog {
      width: 400px;
      height: 150px;
      background-color: #fff;
      z-index: 100 !important;
      position: fixed;
      right: 80px;
      bottom: 150px;
      display: flex;
      flex-direction: row;
      border-radius: 5px 5px 5px 5px;

      .phone {
        display: flex;
        flex-direction: column;

        .sonOne {
          font-size: 24px;
          color: #1e92f8;
          margin-bottom: 14px;
          margin-top: 26px;
          margin-left: 20px;
          font-weight: 600;
        }

        .sonTwo {
          font-size: 18px;
          margin-bottom: 14px;
          margin-left: 20px;
        }

        .sonThree {
          font-size: 18px;
          margin-left: 20px;
        }
      }

      .img {

        .nameCard {
          font-size: 20px;
          line-height: 150px;
        }

        img {
          width: 90px;
          height: 90px;
        }
      }
    }

    .floating-box {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 170px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box1 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }

      /* 其他样式 */
    }
  }

  .contenerMobile {
    .dialog {
      width: 200px;
      height: 100px;
      background-color: #fff;
      z-index: 100 !important;
      position: fixed;
      right: 80px;
      bottom: 150px;
      display: flex;
      flex-direction: row;
      border-radius: 5px 5px 5px 5px;

      .phone {
        display: flex;
        flex-direction: column;

        .sonOne {
          font-size: 14px;
          color: #1e92f8;
          margin-bottom: 14px;
          margin-top: 16px;
          margin-left: 10px;
          font-weight: 600;
        }

        .sonTwo {
          font-size: 12px;
          margin-bottom: 14px;
          margin-left: 10px;
        }

        .sonThree {
          font-size: 12px;
          margin-left: 10px;
        }
      }

      .img {
        padding-left: 20px;
        padding-top: 20px;

        .nameCard {
          font-size: 20px;
          line-height: 150px;
        }

        img {
          width: 50px;
          height: 50px;
        }
      }
    }

    .floating-box {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      width: 60px;
      height: 60px;
      position: fixed;
      bottom: 170px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 20px;
      }

      span {
        font-size: 8px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box1 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 60px;
      height: 60px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 20px;
      }

      span {
        font-size: 8px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box2 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }
    }
  }
}

.hiddenBtn:hover {
  background-color: #1890ff !important;

  i {
    color: white !important;
  }
}

.slide-enter-active {
  animation: slide-in 0.8s;
}

.slide-leave-active {
  animation: slide-out 0.8s;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.new-floating {
  img {
    position: absolute;
    top: -28px;
    width: 40px;
    height: 40px;
    z-index: 9999;
  }

  position: relative;
  background: #fff;
  border-radius: 4px;
  width: 40px;
  height: 100px;
  z-index: 2;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 250px;
  right: 10px;
  //overflow: hidden;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 20px 0px rgba(185, 208, 210, 0.15);
  border-radius: 50px 50px 50px 50px;
  background: linear-gradient(180deg, #275AFF 0%, #2EBDFA 100%);
  border-radius: 50px 50px 50px 50px;
}

.cloud-contact-us-i {
  background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
  background-position: -125px 0;
  background-size: 300px 20px;
  height: 20px;
  width: 20px;
}

.cloud-contact-us {
  align-items: center;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  color: white;
  margin: 0;
  padding: 0;
  position: relative;
  width: 40px;
  flex-direction: column;


  &:hover {
    .cloud-contact-us-i {
      background-position: -100px 0
    }


    //.active {
    //  border: 5px solid red;
    //  background-color: white !important;
    //  color: blue !important;
    //}
  }
}

//.cloud-contact-us-i {
//  background-position: -100px 0
//}

.cloud-contact-us.active {
  background-color: #fff;
  box-shadow: none
}

.cloud-contact-us:after {
  background: rgba(34, 34, 34, .08);
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 10px;
  position: absolute;
  width: 22px;
}

.cart-entry-wrapper:after {
  background: rgba(34, 34, 34, .08);
  bottom: 34px;
  content: "";
  display: block;
  height: 1px;
  left: 10px;
  position: absolute;
  width: 22px;
}

.cart-entry {
  background: #fff;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  height: 40px;
  padding: 10px;
  position: relative;
  width: 40px;

  &:hover {
    .cart-icon {
      background-position: 0 0;
    }
  }

}

.cart-icon {
  background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
  background-position: -25px 0;
  background-size: 300px 20px;
  height: 20px;
  width: 20px;
  position: relative;
  display: block;
}

.cart-entry-wrapper {
  border-radius: 4px;
  bottom: 190px !important;
  right: 12px;
}

//侧边栏
.cloud-contact-us-spread-container {
  position: fixed;
  z-index: 999999 !important;
  animation: spreadContrast .3s ease-out;
  top: 250px;
  right: 40px

}

.cloud-contact-us-spread {
  width: 280px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(34, 34, 34, .08);
  height: 90px;
  margin-right: 20px;
  position: relative;
}

.cloud-contact-us-tel {
  animation: spreadLineOpacity .3s ease-out forwards, spreadLine1 .3s ease-out .02s forwards;
  opacity: 1;
  top: 24px;
}

* {
  list-style: none;
}

.cloud-contact-us-tit {
  color: #222;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.cloud-contact-us-con {
  color: #2468f2;
}

.cloud-contact-us-icon {
  background: url(https://bce.bdstatic.com/p3m/common-service/uploads/custom_6390d23.png) no-repeat;
  background-size: 295px 20px;
  float: left;
  height: 20px;
  margin-top: 2px;
  width: 20px;
  background-position: -100px 0;

  &:hover {

  }
}

.el-icon-video-camera {
  padding: 5px 0;

  &:hover {
    color: blue;
    cursor: pointer;
  }
}

.changeChat {
  width: 250px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 10px;
  animation: slideInRight 0.5s forwards;
  background-color: white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 11;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.changeChat-fade-leave-active {
  transition: opacity 0.5s;
}

.changeChat-fade-leave-to {
  opacity: 0;
}


</style>
<style>
.apply-use {
  margin-top: 8vh !important;
  width: 500px !important;
}

@media screen and (max-width: 760px) {
  .apply-use {
    width: 90% !important;
  }

}

</style>
