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

<template>
  <div class="stepsViewScroll">
    <div class="recordBox">
      <div class="leftMsg">
        <div class="msgHeader">
          <div class="titleText">外围尺寸</div>
          <div class="describeText">单位：cm</div>
        </div>
        <div class="msgFooter">
          <div class="describeText">单位：cm</div>
          <div class="describeText">单位：cm</div>
          <div class="describeText">单位：cm</div>
        </div>
      </div>
      <div class="rightOperate">
        <div></div>
        <div class="operate">
          <div class="describeText operateText">实际值</div>
          <NumberInput v-model="input" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "Jiluxiang",
});
const input = ref<number>(18);
const jianDisabled = ref(true);
const jiaDisabled = ref(false);
</script>

<style lang="scss" scoped>
.titleText {
  font-size: $f24;
  font-weight: $Medium;
}

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

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

  .leftMsg {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
  }

  .rightOperate {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .operate {
      .operateText {
        margin-bottom: $p5;
      }

      .operateBox {
        width: 290px;
        height: 70px;
        border: 2px solid black;
        border-radius: 16px;
        display: flex;
        justify-content: space-between;

        .leftBox {
          width: 70px;
          height: 70px;
          @include flex;
        }

        .showSum {
          flex: 1;
          @include flex;
          border: 2px solid black;
          border-top: 0px;
          border-bottom: 0px;
          font-weight: bold;
          font-size: $f38;
        }

        .rightBox {
          width: 70px;
          height: 70px;
          @include flex;
        }
      }
    }
  }
}
</style>