<template>
  <div class="layer-group">
    <div>
      <div class="header">
        <span class="square"></span>
        <span>实时数据</span>
        <img src="@/assets/images/nabla.png"
             style="width:12px;height:12px">
      </div>
      <div class="content  mt10">
        <div class="content_box">
          <span class="f12 content_title">机电故障上报</span>
          <div class="center">
            <span>3</span>
            <span class="f12"
                  style="color:#94A8C6;">件</span>
          </div>
        </div>
        <div class="content_box">
          <span class="f12 content_title">通畅率</span>
          <div class="center">
            <span>85</span>
            <span>%</span>
          </div>
        </div>
        <div class="content_box">
          <span class="f12 content_title">拥堵率</span>
          <div class="center">
            <span>76</span>
            <span>%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
@import '@/styles/viewport-convert.scss';
.header {
  display: flex;
  align-items: center;
  width: 100px;
  justify-content: space-between;
  font-family: 'YouSheBiaoTiHei' !important;
}
.square {
  border: 4px solid #ffce5a;
  display: inline-block;
}
.content {
  display: flex;
}
.content_box:hover {
  background: url('@/assets/images/real_time_data_bg2.png');
}
.content_box {
  position: relative;
  width: 90px;
  height: 60px;
  margin-right: 20px;
  background: url('@/assets/images/real_time_data_bg1.png')
    no-repeat;
  background-size: 100%, 100%;
  padding-left: 3px;
}
.f12 {
  font-size: 12px;
  font-family: 'YouSheBiaoTiHei' !important;
}
.mt10 {
  margin-top: 10px;
}
.center {
  font-family: 'YouSheBiaoTiHei' !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  font-size: 20px;
  color: #fff;
}
.content_title {
  position: absolute;
  top: 0;
}
</style>
