<template>
  <div>
    <!--每月话务统计-->
    <service-statistics  class="border servicestatistics"></service-statistics>
    <!--客服-->
    <service-center  class="border servicecenter"></service-center>
    <!--咨询原因top5-->
    <reason-consultation  class="border consultation"></reason-consultation>
    <!--维修统计-->
    <service-fix  class="border servicefix"></service-fix>
    <!--每周话务员接入统计-->
    <traffic-statistics class="border traffic"></traffic-statistics>
    <!--异常情况汇报-->
    <excep-collect class="border excep"></excep-collect>
    <!--客户满意度统计-->
    <contentment  class="border contentment"></contentment>
    <!--投诉原因top5-->
    <reason-complaint  class="border complaint"></reason-complaint>
  </div>
</template>

<script>
  export default {
    name: "ServiceHome",
  }
</script>

<style scoped>
  .border {
    padding-top: 0.4%;
    background: linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) left top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) right top,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) left bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom,
    linear-gradient(#6fd9d0, #6fd9d0) right bottom;
    background-repeat: no-repeat;
    background-size: 1px 11px, 11px 1px;
    background-color: rgba(1, 207, 242, 0.05);
  }
  .servicestatistics{
    position: absolute;
    top: 5%;
    left: 2%;
    width: 23.45%;
    height:45%;
  }
  .servicecenter{
    position: absolute;
    top: 5%;
    left: 26%;
    width: 23.45%;
    height: 37%;
  }
  .consultation{
    position: absolute;
    top: 5%;
    left: 50%;
    width: 23.4%;
    height: 37%;
  }
  .servicefix{
    position: absolute;
    top: 5%;
    left: 74%;
    width: 23.45%;
    height:45%;
  }
  .traffic{
    position: absolute;
    top: 52%;
    left: 2%;
    width: 23.45%;
    height: 37.8%;
  }
  .excep{
    position: absolute;
    top: 44%;
    left: 26%;
    width: 23.45%;
    height: 45.8%;
  }
  .contentment{
    position: absolute;
    top: 44%;
    left: 50%;
    width: 23.4%;
    height: 45.8%;
  }
  .complaint{
    position: absolute;
    top: 52%;
    left: 74%;
    width: 23.45%;
    height: 37.8%;
  }

</style>
