<template>
  <div class="allBox">
      <!-- 中间球 -->
      <div class="rotatingBall"></div>
      
      <!-- 智能派单系统 -->
      <div class="intelligentDispatch">
          <div class="intelligentDispatchLeft">
            <div class="intelligentDispatchLeft_top">
              <span style="font-size:18px;font-weight:600;">{{$store.state.a.intelligentDispatch.name}}</span>
            </div>
            <div class="intelligentDispatchLeft_bottom">
              <div v-for="(item,index) in intelligentDispatchArray" :key="index">
                <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
                <span style="color:white;">{{item.name}}：</span>
                <span  style="color:#28F7FF;">{{item.num}}</span>
              </div>
            </div>
          </div>
          <div class="intelligentDispatchRight">
            <img src="../imgs/zhinengpaidan.png" style="margin-left:33px;">
            <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.intelligentDispatch.name}}</div>
            <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
          </div>
      </div>

      <!-- 环境监测 -->
      <div class="environmentalMonitoring">
          <div class="environmentalMonitoringLeft">
            <div class="environmentalMonitoringLeft_top">
              <span style="font-size:18px;font-weight:600;">{{$store.state.a.environmentalMonitoring.name}}</span>
            </div>
            <div class="environmentalMonitoringLeft_bottom">
              <div v-for="(item,index) in environmentalMonitoringArray" :key="index">
                <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;" v-show="index % 2 == 0"></span>
                <span style="color:white;">{{item.name}}:</span>
                <span  style="color:#28F7FF;">{{item.num}}</span>
              </div>
            </div>
          </div>
          <div class="environmentalMonitoringRight">
            <img src="../imgs/huanjingjiance.png" style="margin-left:33px;">
            <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.environmentalMonitoring.name}}</div>
            <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
          </div>
      </div>

      <!-- 定位系统 -->
      <div class="locationSystem">
          <div class="locationSystemLeft">
            <div class="locationSystemLeft_top">
              <span style="font-size:18px;font-weight:600;">{{$store.state.a.locationSystem.name}}</span>
            </div>
            <div class="locationSystemLeft_bottom">
              <div v-for="(item,index) in locationSystemArray" :key="index">
                <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
                <span style="color:white;">{{item.name}}：</span>
                <span  style="color:#28F7FF;">{{item.num}}</span>
              </div>
            </div>
          </div>
          <div class="locationSystemRight">
            <img src="../imgs/dingweixitong.png" style="margin-left:33px;">
            <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.locationSystem.name}}</div>
            <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
          </div>
      </div>

      <!-- 边坡在线监测 -->
      <div class="slopeMonitoring">
          <div class="slopeMonitoringRight">
            <img src="../imgs/bianpojiance.png" style="margin-left:33px;">
            <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.slopeMonitoring.name}}</div>
            <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
          </div>
          <div class="slopeMonitoringLeft">
            <div class="slopeMonitoringLeft_top">
              <span style="font-size:18px;font-weight:600;">{{$store.state.a.slopeMonitoring.name}}</span>
            </div>
            <div class="slopeMonitoringLeft_bottom">
              <div v-for="(item,index) in slopeMonitoringArray" :key="index">
                <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
                <span style="color:white;">{{item.name}}：</span>
                <span  style="color:#28F7FF;">{{item.num}}</span>
              </div>
            </div>
          </div>
      </div>

      <!-- 生产自动化 -->
      <div class="productionAutomation">
          <div class="productionAutomationRight">
            <img src="../imgs/shengchanzidonghua.png" style="margin-left:33px;">
            <div style="color:#28F7FF;font-size:28px;text-align: center;">{{$store.state.a.productionAutomation.name}}</div>
            <img src="../imgs/juxing2.png" style="margin:10px 0px 0px 80px;">
          </div>
          <div class="productionAutomationLeft">
            <div class="productionAutomationLeft_top">
              <span style="font-size:18px;font-weight:600;">{{$store.state.a.productionAutomation.name}}</span>
            </div>
            <div class="productionAutomationLeft_bottom">
              <div v-for="(item,index) in productionAutomationArray" :key="index">
                <span class="iconfont icon-dian" style="color:#28F7FF;font-size:16px;"></span>
                <span style="color:white;">{{item.name}}：</span>
                <span  style="color:#28F7FF;">{{item.num}}</span>
              </div>
            </div>
          </div>
      </div>
      
  </div>
</template>

<script>
export default {
  data(){
    return{
      intelligentDispatchArray:this.$store.state.a.intelligentDispatch.context,
      environmentalMonitoringArray:this.$store.state.a.environmentalMonitoring.context,
      locationSystemArray:this.$store.state.a.locationSystem.context,
      slopeMonitoringArray:this.$store.state.a.slopeMonitoring.context,
      productionAutomationArray:this.$store.state.a.productionAutomation.context,
    }
  },
}
</script>

<style scoped>

*{
  margin: 0;
  padding: 0;
}
.allBox{
  background-image: url("../imgs/BK1.png");
  width: 100%;
  height: 100%;
  position: relative;
}
.rotatingBall{
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-55%);
  width: 300px;
  height: 300px;
  background-image: url('../imgs/qiuxuliezhen/00_00000.png');
  background-size: 100% 100%;
  animation: turn 3s linear infinite;
}
@keyframes turn {
  0% { background-image: url('../imgs/qiuxuliezhen/00_00000.png');}
  1% { background-image: url('../imgs/qiuxuliezhen/00_00001.png');}
  2% { background-image: url('../imgs/qiuxuliezhen/00_00004.png');}
  3% { background-image: url('../imgs/qiuxuliezhen/00_00006.png');}
  4% { background-image: url('../imgs/qiuxuliezhen/00_00007.png');}
  5% { background-image: url('../imgs/qiuxuliezhen/00_00008.png');}
  6% { background-image: url('../imgs/qiuxuliezhen/00_00009.png');}
  7% { background-image: url('../imgs/qiuxuliezhen/00_00011.png');}
  8% { background-image: url('../imgs/qiuxuliezhen/00_00012.png');}
  9% { background-image: url('../imgs/qiuxuliezhen/00_00014.png');}
  10% { background-image: url('../imgs/qiuxuliezhen/00_00016.png');}
  11% { background-image: url('../imgs/qiuxuliezhen/00_00018.png');}
  12% { background-image: url('../imgs/qiuxuliezhen/00_00020.png');}
  13% { background-image: url('../imgs/qiuxuliezhen/00_00021.png');}
  14% { background-image: url('../imgs/qiuxuliezhen/00_00022.png');}
  15% { background-image: url('../imgs/qiuxuliezhen/00_00023.png');}
  16% { background-image: url('../imgs/qiuxuliezhen/00_00024.png');}
  17% { background-image: url('../imgs/qiuxuliezhen/00_00025.png');}
  18% { background-image: url('../imgs/qiuxuliezhen/00_00026.png');}
  19% { background-image: url('../imgs/qiuxuliezhen/00_00027.png');}
  20% { background-image: url('../imgs/qiuxuliezhen/00_00028.png');}
  21% { background-image: url('../imgs/qiuxuliezhen/00_00029.png');}
  22% { background-image: url('../imgs/qiuxuliezhen/00_00030.png');}
  23% { background-image: url('../imgs/qiuxuliezhen/00_00031.png');}
  24% { background-image: url('../imgs/qiuxuliezhen/00_00032.png');}
  25% { background-image: url('../imgs/qiuxuliezhen/00_00034.png');}
  26% { background-image: url('../imgs/qiuxuliezhen/00_00036.png');}
  27% { background-image: url('../imgs/qiuxuliezhen/00_00038.png');}
  28% { background-image: url('../imgs/qiuxuliezhen/00_00039.png');}
  29% { background-image: url('../imgs/qiuxuliezhen/00_00040.png');}
  30% { background-image: url('../imgs/qiuxuliezhen/00_00042.png');}
  31% { background-image: url('../imgs/qiuxuliezhen/00_00043.png');}
  32% { background-image: url('../imgs/qiuxuliezhen/00_00044.png');}
  33% { background-image: url('../imgs/qiuxuliezhen/00_00045.png');}
  34% { background-image: url('../imgs/qiuxuliezhen/00_00046.png');}
  35% { background-image: url('../imgs/qiuxuliezhen/00_00047.png');}
  36% { background-image: url('../imgs/qiuxuliezhen/00_00048.png');}
  37% { background-image: url('../imgs/qiuxuliezhen/00_00049.png');}
  38% { background-image: url('../imgs/qiuxuliezhen/00_00050.png');}
  39% { background-image: url('../imgs/qiuxuliezhen/00_00051.png');}
  40% { background-image: url('../imgs/qiuxuliezhen/00_00052.png');}
  41% { background-image: url('../imgs/qiuxuliezhen/00_00053.png');}
  42% { background-image: url('../imgs/qiuxuliezhen/00_00054.png');}
  43% { background-image: url('../imgs/qiuxuliezhen/00_00055.png');}
  44% { background-image: url('../imgs/qiuxuliezhen/00_00056.png');}
  45% { background-image: url('../imgs/qiuxuliezhen/00_00057.png');}
  46% { background-image: url('../imgs/qiuxuliezhen/00_00058.png');}
  47% { background-image: url('../imgs/qiuxuliezhen/00_00059.png');}
  48% { background-image: url('../imgs/qiuxuliezhen/00_00060.png');}
  49% { background-image: url('../imgs/qiuxuliezhen/00_00061.png');}
  50% { background-image: url('../imgs/qiuxuliezhen/00_00062.png');}
  51% { background-image: url('../imgs/qiuxuliezhen/00_00063.png');}
  52% { background-image: url('../imgs/qiuxuliezhen/00_00064.png');}
  53% { background-image: url('../imgs/qiuxuliezhen/00_00066.png');}
  54% { background-image: url('../imgs/qiuxuliezhen/00_00068.png');}
  55% { background-image: url('../imgs/qiuxuliezhen/00_00070.png');}
  56% { background-image: url('../imgs/qiuxuliezhen/00_00071.png');}
  57% { background-image: url('../imgs/qiuxuliezhen/00_00072.png');}
  58% { background-image: url('../imgs/qiuxuliezhen/00_00074.png');}
  59% { background-image: url('../imgs/qiuxuliezhen/00_00076.png');}
  60% { background-image: url('../imgs/qiuxuliezhen/00_00077.png');}
  61% { background-image: url('../imgs/qiuxuliezhen/00_00078.png');}
  62% { background-image: url('../imgs/qiuxuliezhen/00_00079.png');}
  63% { background-image: url('../imgs/qiuxuliezhen/00_00080.png');}
  64% { background-image: url('../imgs/qiuxuliezhen/00_00081.png');}
  65% { background-image: url('../imgs/qiuxuliezhen/00_00082.png');}
  66% { background-image: url('../imgs/qiuxuliezhen/00_00083.png');}
  67% { background-image: url('../imgs/qiuxuliezhen/00_00084.png');}
  68% { background-image: url('../imgs/qiuxuliezhen/00_00085.png');}
  69% { background-image: url('../imgs/qiuxuliezhen/00_00086.png');}
  70% { background-image: url('../imgs/qiuxuliezhen/00_00087.png');}
  71% { background-image: url('../imgs/qiuxuliezhen/00_00088.png');}
  72% { background-image: url('../imgs/qiuxuliezhen/00_00089.png');}
  73% { background-image: url('../imgs/qiuxuliezhen/00_00090.png');}
  74% { background-image: url('../imgs/qiuxuliezhen/00_00091.png');}
  75% { background-image: url('../imgs/qiuxuliezhen/00_00092.png');}
  76% { background-image: url('../imgs/qiuxuliezhen/00_00093.png');}
  77% { background-image: url('../imgs/qiuxuliezhen/00_00094.png');}
  78% { background-image: url('../imgs/qiuxuliezhen/00_00095.png');}
  79% { background-image: url('../imgs/qiuxuliezhen/00_00096.png');}
  80% { background-image: url('../imgs/qiuxuliezhen/00_00097.png');}
  81% { background-image: url('../imgs/qiuxuliezhen/00_00098.png');}
  82% { background-image: url('../imgs/qiuxuliezhen/00_00099.png');}
  83% { background-image: url('../imgs/qiuxuliezhen/00_00100.png');}
  84% { background-image: url('../imgs/qiuxuliezhen/00_00101.png');}
  85% { background-image: url('../imgs/qiuxuliezhen/00_00102.png');}
  86% { background-image: url('../imgs/qiuxuliezhen/00_00103.png');}
  87% { background-image: url('../imgs/qiuxuliezhen/00_00104.png');}
  88% { background-image: url('../imgs/qiuxuliezhen/00_00106.png');}
  89% { background-image: url('../imgs/qiuxuliezhen/00_00108.png');}
  90% { background-image: url('../imgs/qiuxuliezhen/00_00110.png');}
  91% { background-image: url('../imgs/qiuxuliezhen/00_00112.png');}
  92% { background-image: url('../imgs/qiuxuliezhen/00_00114.png');}
  93% { background-image: url('../imgs/qiuxuliezhen/00_00116.png');}
  94% { background-image: url('../imgs/qiuxuliezhen/00_00117.png');}
  95% { background-image: url('../imgs/qiuxuliezhen/00_00118.png');}
  96% { background-image: url('../imgs/qiuxuliezhen/00_00119.png');}
  97% { background-image: url('../imgs/qiuxuliezhen/00_00120.png');}
  98% { background-image: url('../imgs/qiuxuliezhen/00_00122.png');}
  99% { background-image: url('../imgs/qiuxuliezhen/00_00123.png');}
  100% { background-image: url('../imgs/qiuxuliezhen/00_00124.png');}
}
/* 智能派单系统 */
.intelligentDispatch{
  top: 35%;
  left: 2%;
  position: absolute;
  display: flex;
}
.intelligentDispatchLeft{
  background-image: url("../imgs/zoubiaknuangh.png");
  height: 170px;
  width: 270px;
}
.intelligentDispatchLeft_top{
  padding: 23px 25px 10px;
  box-sizing: border-box;
  color: rgb(0,242,251);
  display:flex;
  justify-content: space-between;
}
.intelligentDispatchLeft_bottom{
  padding: 5px 22px 0px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.intelligentDispatchLeft_bottom span{
  display: inline-block;
  vertical-align: text-top;
  height: 30px;
  line-height: 30px;
}
.intelligentDispatchRight{
  width: 170px;
}
/* 环境监测 */
.environmentalMonitoring{
  top: 60%;
  left: 6%;
  position: absolute;
  display: flex;
}
.environmentalMonitoringLeft{
  background-image: url("../imgs/zoubiaknuangh.png");
  height: 170px;
  width: 270px;
}
.environmentalMonitoringLeft_top{
  padding: 23px 25px 10px;
  box-sizing: border-box;
  color: rgb(0,242,251);
  display:flex;
  justify-content: space-between;
}
.environmentalMonitoringLeft_bottom{
  width: 100%;
  padding: 5px 22px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.environmentalMonitoringLeft_bottom span{
  display: inline-block;
  vertical-align: text-top;
  height: 30px;
  line-height: 30px;
}
.environmentalMonitoringLeft_bottom>div{
  width: 50%;
}
.environmentalMonitoringRight{
  width: 170px;
}
/* 定位系统 */
.locationSystem{
  top: 53%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}
.locationSystemLeft{
  background-image: url("../imgs/kuang4.png");
  height: 170px;
  width: 270px;
}
.locationSystemLeft_top{
  padding: 23px 25px 10px;
  box-sizing: border-box;
  color: rgb(0,242,251);
  display:flex;
  justify-content: space-between;
}
.locationSystemLeft_bottom{
  width: 100%;
  padding: 5px 22px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.locationSystemLeft_bottom span{
  display: inline-block;
  vertical-align: text-top;
  height: 30px;
  line-height: 30px;
}
.locationSystemRight{
  margin-left: 45px;
  width: 170px;
}
/* 边坡在线监测 */
.slopeMonitoring{
  top: 60%;
  right: 6%;
  position: absolute;
  display: flex;
}
.slopeMonitoringLeft{
  background-image: url("../imgs/youbiankuang.png");
  height: 170px;
  width: 270px;
}
.slopeMonitoringLeft_top{
  padding: 23px 25px 10px;
  box-sizing: border-box;
  color: rgb(0,242,251);
  display:flex;
  justify-content: space-between;
}
.slopeMonitoringLeft_bottom{
  width: 100%;
  padding: 5px 22px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.slopeMonitoringLeft_bottom span{
  display: inline-block;
  vertical-align: text-top;
  height: 30px;
  line-height: 30px;
}
.slopeMonitoringRight{
  width: 170px;
}
/* 生产自动化 */
.productionAutomation{
  top: 35%;
  right: 2%;
  position: absolute;
  display: flex;
}
.productionAutomationLeft{
  background-image: url("../imgs/youbiankuang.png");
  height: 170px;
  width: 270px;
}
.productionAutomationLeft_top{
  padding: 23px 25px 10px;
  box-sizing: border-box;
  color: rgb(0,242,251);
  display:flex;
  justify-content: space-between;
}
.productionAutomationLeft_bottom{
  padding: 5px 22px 0px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
}
.productionAutomationLeft_bottom span{
  display: inline-block;
  vertical-align: text-top;
  height: 30px;
  line-height: 30px;
}
.productionAutomationRight{
  width: 170px;
}
</style>