industry-database/src/components/RoadWarnings.vue

<template>
  <div class="right_two">
    <CommonTitle title="道路预警" />
    <div class="content" v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
      <div class="item" v-for="item in arr" :key="item.id">
        <div :class="`top center_center ${item.className1}`">
          {{item.LFXS_NAME}}
        </div>
        <div :class="`bottom ${item.className2}`">
          <div class="bottom_top center_center">
            {{item.WARNING_DLZC}}
          </div>
          <div class="bottom_bottom center_center">
            公里
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  nextTick
} from 'vue'
import {
  getQueryRoadWarning
} from '../service/http.js'
import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
let arr = ref([]);
const isLoading = ref(false);
onMounted(() => {
  isLoading.value = true;
  getQueryRoadWarning().then(res => {
    isLoading.value = false;
    let arr1 = [];
    for(let i in res.data.data.Rows[0]) {
      arr1.push (res.data.data.Rows[0][i])
    }
    arr.value = arr1.filter(item=>{
      return item.LFXS_NAME != "其它"

    })
    arr.value.forEach(item=>{
      if(item.LFXS_NAME == "一幅路"){
        item["className1"] = "top_one"
        item["className2"] = "bottom_one"
      }else if(item.LFXS_NAME == "两幅路"){
        item["className1"] = "top_two"
        item["className2"] = "bottom_two"
      }else if(item.LFXS_NAME == "三幅路"){
        item["className1"] = "top_three"
        item["className2"] = "bottom_three"
      }else if(item.LFXS_NAME == "四幅路"){
        item["className1"] = "top_four"
        item["className2"] = "bottom_four"
      }else{
        item["className1"] = "top_five"
        item["className2"] = "bottom_five"
      }
    })
  })
})

</script>
<style scoped lang="scss">
.center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.center_center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.right_two{
  height: 17%;
  padding-top: 10px;
  box-sizing: border-box;
  .content {
    height: 85%;
    margin: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item{
      width: 72px;
      height: 83px;

      .top_one{
        background: #0058B2;
        border: 1px solid #007EFF;
      }
      .bottom_one{
        background: rgba(0,126,255,0.3);
      }
      .top_two{
        background: #00B285;
        border: 1px solid #00E6AC;

      }
      .bottom_two{
        background: rgba(45,179,145,0.3);
      }
      .top_three{
        background: #0094B2;
        border: 1px solid #00D5FF;
      }
      .bottom_three{
        background: rgba(0,148,178,0.3);
      }
      .top_four{
        background: rgba(203,203,0,0.5);
        border: 1px solid #BFBF00;
      }
      .bottom_four{
        background: rgba(255,255,0,0.3);

      }
      .top_five{
        background: rgba(217,126,0,0.5);
        border: 1px solid #D97E00;

      }
      .bottom_five{
        background: rgba(217,126,0,0.3);
      }

      .top{
        width: 72px;
        height: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 13px;
        color: #FFFFFF;
        box-sizing: border-box;
      }
      .bottom{
        width: 72px;
        height: 63px;


        .bottom_top{
          height: 50%;
          font-family: YouSheBiaoTiHei;
          font-weight: bold;
          font-size: 16px;
          color: #FFFFFF;
        }
        .bottom_bottom{
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 12px;
          color: #FFFFFF;
        }
      }

    }
  }
}
</style>