JG-CLIENT-TEMP/src/views/pro-steps/components/wuliaocaiji.vue

<template>
  <div class="scanCode">
    <ScanCodeInput />
  </div>

  <div class="showCodeBody" v-if="false">
    <div class="codeBox">
      <img src="@/assets/icons/shaoma.svg" style="width: 134px; height: 134px" />
      <div class="codeText">扫码物料码添加物料</div>
    </div>
  </div>
  <div class="materialInfoBody">
    <div class="infoMsg">
      <div class="leftMsg">
        <div class="nameMsg">PCBA-ASSSD电路板</div>
        <div class="describe">100*100</div>
        <div class="describe">需求：12112</div>
      </div>
      <div class="rightMsg">
        <div class="sum">50</div>
        <div class="describe">还需采集</div>
      </div>
      <svg-icon icon-class="jiaobiao" size="25" class="svgStyle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import ScanCodeInput from "@/components/ScanCodeInput/index.vue";
defineOptions({
  name: "Wuliaocaiji",
});

const input = ref("");
</script>

<style lang="scss" scoped>
.scanCode {
  width: 40%;
  margin-top: $p5;
}

.materialInfoBody {
  width: calc((100vw / 6 * 5) - 50px);
  margin-top: $p10;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;

  .infoMsgImg {
    background-image: url("@/assets/images/caijiwancheng.png");
    background-position: right top;
    background-repeat: no-repeat;
  }

  .infoMsg {
    width: 600px;
    height: 190px;
    background-color: white;
    border-radius: 16px;
    display: flex;
    padding: $p20;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .svgStyle {
      position: absolute;
      bottom: 0;
      right: 0;
    }

    .describe {
      font-size: $f20;
      color: $font-default-60;
      line-height: 20px;
    }

    .leftMsg {
      .nameMsg {
        font-size: $f24;
        font-weight: $Medium;
      }
    }

    .rightMsg {
      .sum {
        font-size: $f38;
        font-weight: bold;
        line-height: 38px;
        text-align: right;
      }
    }
  }
}

.showCodeBody {
  width: calc((100vw / 6 * 5) - 50px);
  height: calc((100vh - 240px));
  @include flex;

  .codeBox {
    width: 180px;
    display: flex;
    flex-direction: column;

    img {
      margin: 0 auto;
    }

    .codeText {
      text-align: center;
      font-size: $f20;
      color: #00000030;
    }
  }
}
</style>