water_affairs/control/components/prodnum-MT03/modules/pilotLamp.vue

<template>
  <view class="pilotLamp">
    <view
      class="item"
      :style="{ width: itemW }"
      v-for="item in list"
      :key="item.name"
    >
      <view class="image">
        <image
          style="height: 100%"
          src="/static/img/pilot-lamp.png"
          mode="heightFix"
        />
        <view v-if="item.value" class="bg" />
      </view>
      <view class="name">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "pilotLamp",
  props: {
    itemW: {
      type: String,
      default: "20%",
    },
  },
  data() {
    return {
      list: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.pilotLamp {
  display: flex;
  flex-wrap: wrap;

  .item {
    display: flex;
    flex-direction: column;
    align-items: center;

    .image {
      position: relative;
      height: 20px;

      .bg {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #cccccc;
        position: absolute;
        top: 3px;
        left: 3px;
        animation: lampBackground 0.5s infinite alternate ease-in-out;
      }

      @keyframes lampBackground {
        from {
          background-color: #ff8f4a;
        }

        to {
          background-color: red;
        }
      }
    }

    .name {
      font-size: 12px;
      color: #fff;
      margin-top: 6px;
    }
  }

  .item:nth-of-type(n + 6) {
    margin-top: 10px;
  }
}
</style>