<template>
  <div class="allBox">
      <!-- 中间球 -->
      <div></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;
}
/* 智能派单系统 */
.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>