<template>
  <div class="stepsViewScroll">
    <div class="recordBox" v-for="item in 7">
      <!-- <div class="">
        <div class="msgHeader">
          <div class="titleText">外围尺寸</div>
        </div>
        <div class="msgFooter">
          <div class="describeText">单位：cm</div>
        </div>
      </div> -->
      <div class="headerText titleText">高低温试验箱</div>
      <div class="describeBox">
        <div class="describeText">精度要求</div>
        <div class="describeText" style="color: black">
          高温：50~100℃ 低温：-5~-10℃ ±1℃
        </div>
      </div>
      <!-- 变量控制样式 -->
      <div class="footerBtn">
        <el-button v-if="true" class="bottomBtn" style="background-color: #0a59f7">点击扫描设备</el-button>
        <div v-else class="infoBox">
          <div class="info">
            <div>
              <div class="describeText" style="text-align: left">
                高低温试验箱001
              </div>
              <div class="describeText" style="text-align: left">
                sds12313213213213231
              </div>
            </div>
          </div>
          <div class="info">
            <div>
              <div class="describeText" style="text-align: right">
                检定有效期
              </div>
              <div class="describeText" style="text-align: right">
                2026-11-11
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: "Shebeijilu" });
</script>

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

.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;
  flex-direction: column;
  justify-content: space-between;

  .headerText {}

  .describeBox {}

  //按钮样式
  .footerBtn {
    width: 100%;
    height: 70px;
    background-color: #00000015;
    border-radius: 16px;
    overflow: hidden;

    .bottomBtn {
      width: 100%;
      height: 100%;
      font-size: $f24;
      color: white;
    }
  }

  //描述样式
  .footerInfo {
    width: 100%;
    height: 70px;
    background-color: #00000015;
    border-radius: 16px;
    overflow: hidden;

    .infoBox {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 100%;
      padding: 0 $p10;

      .info {
        height: 100%;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
