disinfector_vue/src/components/home/HomeFormula.vue

<script lang="ts" setup>
import { useFormulaStore } from '@/stores/formulaStore'
// import homeRound from 'assets/images/home/home-round.svg'
import { ref, watchEffect } from 'vue'

const formulaStore = useFormulaStore()
const formulaInfo = ref()
watchEffect(() => {
  formulaInfo.value = formulaStore.selectedFormulaInfo || formulaStore.currentSelectedFormulaInfo
})
</script>

<template>
  <div class="home-right-title">
    <div>
      <div v-if="formulaInfo && formulaInfo.name" class="title-formula">
        <el-icon style="color: #31cb7a; font-size: 1.5rem">
          <SuccessFilled />
        </el-icon>
        <div>{{ formulaInfo.name }}</div>
      </div>
    </div>
    <div v-if="formulaInfo && formulaInfo.injection_pump_speed" class="title-spend">
      <span>速率</span>
      <span style="color: #31CB7A">{{ formulaInfo.injection_pump_speed }}</span>g/分钟
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-right-title{
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: 1.5rem;
  .title-formula{
    display: flex;
    justify-self: start;
    align-items: center;
    gap: 5px;
    padding: 10px;
    font-size: 1.5rem;
  }
  .title-spend{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    font-size: 1.5rem;
  }
}
</style>