css绘制多行多列的按钮不同状态渲染

css绘制多行多列的按钮不同状态渲染

ui给的图

最终实现效果

废话少说，直接上代码

<template>
  <div class="status-containt">
    <div class="title">
      <ul v-for="num in 2" :key="num">
        <li v-for="(item,index) in titleList" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
    <div class="status">
      <div v-for="(item) in dataArr" :key="item.name" class="status-bar">
        <ul :class="{'bartype':true,'green':item.status === 1, 'red':item.status === 2,'yellow':item.status === 3,'light-yellow':item.status === 4}">
          <li
            v-for="count in 4"
            :key="count"
          />
        </ul>
        <span>{{ item.stationName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DaHealthChart',
  props: {
    options: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      dataArr: [{ stationName: '01', status: 2 }, { stationName: '02', status: 2 }, { stationName: '03', status: 1 }, { stationName: '04', status: 4 }, { stationName: '05', status: 3 }, { stationName: '06', status: 2 }, { stationName: '07', status: 3 }, { stationName: '08', status: 3 }, { stationName: '09', status: 3 }, { stationName: '10', status: 3 }, { stationName: '11', status: 2 }, { stationName: '12', status: 1 }, { stationName: '13', status: 1 }, { stationName: '14', status: 3 }, { stationName: '15', status: 4 }, { stationName: '16', status: 3 }, { stationName: '17', status: 1 }, { stationName: '18', status: 2 }, { stationName: '19', status: 1 }, { stationName: '20', status: 3 }, { stationName: '21', status: 3 }, { stationName: '22', status: 2 }],
      titleList: ['正常', '较差', '差', '恶劣', '管段']
    }
  }
}
</script>

.status-containt {
    width: 100%;
    height: 50%;
    display: flex;
    flex-flow: row nowrap;
    padding-left: 16px;
    overflow: hidden;
    .title {
    height: 100%;
    width: 10%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-around;
    ul {
        height: 30%;
        li{
        height: 26px;
        line-height: 34px;
        text-align: right;
        font-size: 12px;
            &:nth-child(1){
                color: #06FF00;
            }
            &:nth-child(2){
                color: #DDE674;
            }
            &:nth-child(3){
                color: #FAAD52;
            }
            &:nth-child(4){
                color: #FF4444;
            }
            &:nth-child(5){
                color: #AEBFC8;
            }
        }
    }
    }
    .status {
        height: 100%;
        width: 80%;
        display: flex;
        padding: 5px;
        flex-flow: row wrap;
        justify-content: space-around;
        align-items: center;
        .status-bar {
            width: 7%;
            height: 30%;
            margin: 2px;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            &:hover,&:active {
              color: #28FFFC;
            }
            .bartype {
                width: 100%;
                height: 100%;
                display: flex;
                flex-flow: column nowrap;
                align-items: center;
                justify-content: space-around;
                background: url(/station/initbg.png) no-repeat;
                background-size: cover;
                &:hover,&:active{
                    background: url(/station/activebg.png) no-repeat;
                    background-size: contain;
                }
            }
            li{
                  width: 10px;
                  height: 10px;
                  border-radius: 50%;
                  background-color: rgba(255,255,255,0.3);
            }
            .green{
                li:nth-child(1){
                  background-color:#06FF00;
                  box-shadow: 0 0 5px #06FF00;
                }
            }
            .red{
                li:nth-child(4){
                  background-color:#FF5353;
                  box-shadow: 0 0 5px #FF5353;
                }
            }
            .yellow {
                li:nth-child(3){
                  background-color:#FAAD52;
                  box-shadow: 0 0 5px #FAAD52;
                }
            }
            .light-yellow{
                li:nth-child(2){
                  background-color:#F0FF52;
                  box-shadow: 0 0 5px #F0FF52;
                }
            }
        }
    }
}

重点标注

在每个竖条的ul标签上条件判断类，状态1就是第1个li背景绿色，其余的li背景灰色