sanitizing-machine/src/components/info/DisinfectantLiquidInfo.vue

<template>
  <div class="disinfectant_liquid_container">
    <div class="top_progress">
      <svg
        class="icon"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        fill="none"
        version="1.1"
        width="28"
        height="28.00116729736328"
        viewBox="0 0 28 28.00116729736328"
      >
        <g>
          <path
            d="M13.9994,0C6.26711,0,0,6.26827,0,14.0012C0,21.7329,6.26711,28.0012,13.9994,28.0012C21.7329,28.0012,28,21.7323,28,14.0012C28,6.26711,21.7329,0,13.9994,0ZM13.3306,2.65913L15.1107,2.65913L15.1107,6.15243L13.3306,6.15243L13.3306,2.65913ZM8.00532,9.19343L5.53538,6.72291L6.79393,5.46437L9.26387,7.93489L8.00532,9.19343ZM8.88432,3.93979L10.4945,3.18886L11.9713,6.35385L10.3594,7.10595L8.88432,3.93979ZM14.2445,24.2046C12.6966,24.2046,11.4433,22.9495,11.4433,21.4034C11.4433,20.1938,12.2088,19.1681,13.2828,18.7751L13.2828,10.7838L15.0612,10.7838L15.0612,18.7227C16.2091,19.0714,17.0462,20.139,17.0462,21.404C17.0462,22.9495,15.7923,24.2046,14.2445,24.2046ZM16.3302,6.35035L17.8071,3.1842L19.419,3.93688L17.9439,7.10304L16.3302,6.35035ZM20.2421,9.19343L18.9835,7.93489L21.4535,5.46437L22.712,6.72291L20.2421,9.19343Z"
            fill="#FFFFFF"
            fill-opacity="1"
          />
        </g>
      </svg>
      消毒液
      <div class="progress">
        <div
          class="pro"
          :style="{
            '--height': '50px',
          }"
        ></div>
      </div>
    </div>
    <div class="bottom">500 (g)</div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.disinfectant_liquid_container {
  width: 353px;
  height: 225px;
  box-sizing: border-box;
  border-radius: 17.5px;
  overflow: hidden;
  .top_progress {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: Source Han Sans CN;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #ffffff;
    width: 353px;
    height: 141px;
    box-sizing: border-box;
    .icon {
      top: 15px;
      left: 15px;
      position: absolute;
    }
    .progress {
      top: 19px;
      right: 29px;
      position: absolute;
      width: 6px;
      height: 100px;
      border-radius: 3px;
      background: #fff;
      overflow: hidden;
      .pro {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 6px;
        height: var(--height);
        background: #1f6397;
        border-radius: 3px;
      }
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1f6397;
    font-family: Source Han Sans CN;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.06em;
    color: #ffffff;
    height: 84px;
  }
}
</style>