sanitizing-machine-new/src/components/Progress.vue

<template>
  <div class="progress_container">
    <div class="header_wrap">
      <div class="left_progress">
        <div class="left_time_tag">剩余时间</div>
        <p class="time">1000:00:00</p>
        <div class="progress_bg"></div>
      </div>
      <div class="right_btns">
        <div class="btn active">暂停消毒</div>
        <div class="btn ml">继续消毒</div>
      </div>
    </div>
    <div class="echarts_wrap">
      <div class="single_wrap">
        <p class="title">设备温度/湿度/过氧化氢浓度</p>
        <div class="echarts_box"></div>
      </div>
      <div class="single_wrap">
        <p class="title">环境1/湿度/过氧化氢浓度</p>
        <div class="echarts_box"></div>
      </div>
      <div class="single_wrap">
        <p class="title">环境2/湿度/过氧化氢浓度</p>
        <div class="echarts_box"></div>
      </div>
    </div>
    <div class="detail_wrap">
      <div class="detail">详情</div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.progress_container {
  margin-bottom: 30px;
  height: 580px;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  padding-bottom: 30px;
  .header_wrap {
    display: flex;
    align-items: center;
    margin-bottom: 49px;
    .left_progress {
      width: 860px;
      height: 80px;
      border-radius: 14px;
      background: #f6f6f6;
      box-sizing: border-box;
      padding: 0 23px;
      display: flex;
      align-items: center;
      .left_time_tag {
        width: 158.66px;
        height: 45px;
        border-radius: 23px;
        opacity: 1;
        background: #06518b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.1em;
        color: #ffffff;
        margin-right: 73px;
      }
      .time {
        width: 90px;
        height: 20px;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #000000;
        margin-right: 85px;
        display: flex;
        align-items: center;
      }
      .progress_bg {
        width: 396px;
        height: 14px;
        border-radius: 7px;
        background: #ffffff;
      }
    }
    .right_btns {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin-left: 20px;
      .btn {
        width: 140px;
        height: 45px;
        border-radius: 23px;
        background: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0.1em;
        color: #d8d8d8;
      }
      .active {
        color: #ffffff;
        background: #06518b;
      }
      .ml {
        margin-left: 20px;
      }
    }
  }
  .echarts_wrap {
    height: 351px;
    display: flex;
    align-items: center;
    margin-bottom: 19px;
    .single_wrap {
      flex: 1;
      height: 351px;
      .title {
        font-family: Source Han Sans CN;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: #000000;
        margin-bottom: 24px;
        padding-left: 11px;
      }
      .echarts_box {
        width: 380px;
        height: 308px;
      }
    }
  }
  .detail_wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 16px;
    .detail {
      width: 105px;
      height: 31px;
      border-radius: 16px;
      background: #06518b;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN;
      font-size: 12px;
      font-weight: normal;
      letter-spacing: 0.1em;
      color: #ffffff;
    }
  }
}
</style>