yudao-init/src/views/copilot/factoryData/components/ProdMonitor.vue

<template>
  <div class="prod-monitor">
    <div class="fto-box">
      <div class="icon">
        <img
          src="./../assets/images/fto.png"
          alt=""
          style="width: 2.1875vw; height: 2.2875vw"
        />
      </div>
      <div class="middle-box">
        <span class="type">玻璃类型</span>
        <span class="type-name">FTO投入</span>
      </div>
      <div class="right-box">
        <span class="type">投入数量</span>
        <span class="num">8391222</span>
      </div>
    </div>
    <div class="std-box">
      <div class="icon">
        <img
          src="./../assets/images/std.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">标准组检产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="chip-box">
      <div class="icon">
        <img
          src="./../assets/images/chip.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">芯片产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bipv-box">
      <div class="icon">
        <img
          src="./../assets/images/bipv.png"
          alt=""
          style="width: 2.1875vw; height: 2.1875vw"
        />
      </div>
      <div class="middle-box">
        <div class="separate">
          <div>
            <span class="type">玻璃类型</span>
            <span class="type-name">BIPV产量</span>
          </div>
          <div>
            <span class="type">良品数量</span>
            <span class="type-name">740</span>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="separate">
          <div>
            <span class="type">生产数量</span>
            <span class="num">783</span>
          </div>
          <div>
            <span class="type1">良品率</span>
            <span class="num">96%</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ProdMonitor",
};
</script>
<style lang="scss" scoped>
.prod-monitor {
  height: 100%;
  display: flex;
  gap: 6px;
  flex-direction: column;
  .fto-box,
  .std-box,
  .chip-box,
  .bipv-box {
    box-shadow: inset 0 0 12px 2px #fff3;
    border-radius: 4px;
    display: flex;
    align-items: center;
    .icon {
      flex: 1;
      text-align: center;
    }
    .middle-box {
      flex: 2.086;
      position: relative;
    }
    .right-box {
      flex: 2.424;
      position: relative;
    }
    .type {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.417vw;
      letter-spacing: 2px;
      width: 6.25vw;
    }
    .type1 {
      display: inline-block;
      font-size: 0.9375vw;
      color: #6db6ff;
      position: relative;
      text-align: right;
      padding-right: 0.6vw;
      width: 6.25vw;
      padding-left: 1.6vw;
      text-align: justify;
      text-align-last: justify;
    }
    .type-name {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .type-name::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
    .num {
      font-size: 1.042vw;
      color: #fff;
      position: relative;
      text-align: left;
      padding-left: 0.573vw;
    }
    .num::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.042vw;
      border: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1)
        )
        2 2;
      position: absolute;
      left: 0;
      top: 4px;
    }
  }
  .fto-box {
    flex: 1;
    .type::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 1.6146vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
  .std-box {
    flex: 1.3;
  }
  .chip-box {
    flex: 1.3;
  }
  .bipv-box {
    flex: 1.3;
  }
  .std-box,
  .chip-box,
  .bipv-box {
    .separate::before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 3.125vw;
      border: 1px solid;
      border-image: linear-gradient(
          135deg,
          rgba(0, 176, 243, 0),
          rgba(31, 143, 255, 1),
          rgba(31, 143, 255, 0)
        )
        2 2;
      position: absolute;
      left: 0;
      top: -2px;
    }
  }
}
</style>