ljclw-ui/src/views/clw/KeyCase/modules/KeyBox.vue

<template>
  <div class="cabinet">
    <div class="box">
      <div v-for="(item, index) in 30" :key="index" class="cabinet-box">
        <div>
          <div style="font-size: 36px">
            {{ index + 1 }}
          </div>
          <div style="font-size: 16px; color: #777">渝A40232</div>
        </div>
      </div>
    </div>
    <div class="rigth-cabinet">
      <img src="../../../../assets/vehicle/yjgl.png" alt="" />
      <div class="edit-box">
        <div>
          <span class="tab"></span>
          <span>钥匙在柜</span>
        </div>
        <div>
          <span class="tab" style="background: #ff9d17;"></span>
          <span>钥匙使用中</span>
        </div>
        <div>
          <span class="tab" style="background: #e66767;"></span>
          <span>维修中</span>
        </div>
        <div>
          <span class="tab" style="background: #adadad;"></span>
          <span>钥匙柜未绑定钥匙</span>
        </div>
      </div>
      <div class="imgs">
       <img src="../../../../assets/vehicle/yjkm.png" alt="">
       <img src="../../../../assets/vehicle/zdpz.png" alt="">
    </div>
    </div>
   
  </div>
</template>

<script></script>

<style lang="less" scoped>
.cabinet {
  flex: 1;
  // width: 90%;
  height: 654px;
  background: #f0f8fe;
  box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  opacity: 1;
  padding: 10px 10px;
  display: flex;
  .box {
    min-width: 750px;
    max-width: 950px;
    display: flex;
    flex-wrap: wrap;
  }
  .cabinet-box {
    width: 15%;
    height: 90px;
    background: url('../../../../assets/vehicle/cs2.png') no-repeat;
    background-size: 100% 100%;
    padding: 2px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .rigth-cabinet {
    width: 170px;
    .edit-box {
      font-family: PingFang SC;
      font-size: 12px;
      color: #4d4d4d;
      margin-top: 30px;
      margin-left: 10px;
      .tab {
      display: inline-block;
      width: 27px;
      height: 12px;
      background: #1cd855;
      border-radius: 0px;
      opacity: 1;
      margin-right: 10px;
    }
    }
    
  }
  .imgs{
   margin-top: 180px;
    img{
        display: inline-block;
        width: 113px;
        height: 113px;
    }
  }
}
</style>