ID1825-暂存

zhangchen

2025-07-08 4981c1f1ef22523cb2dc027c7c8126dfb924c5af

 src/views/mobile/bedsideAuxiliaryScreen/components/UnplannedSchedule.vue

@@ -1,19 +1,112 @@
<template>
  <div class="unplanned-schedule-container"></div>
  <div
    class="unplanned-schedule-container"
    :style="{ '--height': props.height + 'px' }"
  >
    <div class="row1-container">
      <Card
        title="抗凝剂"
        :icon="tslImg"
        background-color="#FFEDD2"
        class="row1-left"
      >
      <div class=""></div>
      </Card>
      <div class="row1-content">
        <Card
          title="透析模式"
          :icon="tslImg"
          background-color="#E5EEFF"
          class="row1-content-card"
        />
        <Card
          title="一次性血液透析体外循环管路"
          :icon="tslImg"
          background-color="#D9F0E2"
          class="row1-content-card"
        />
        <Card
          title="一次性使用透析护理包"
          :icon="tslImg"
          background-color="#F9DEDE"
          class="row1-content-card"
        />
      </div>
      <Card
        title="一次性使用内瘘穿刺针"
        :icon="tslImg"
        background-color="#EFE5FF"
        class="row1-right"
      />
    </div>
    <div class="row2-container">
      <Card
        title="血液透析器"
        :icon="tslImg"
        background-color="#D9F0E2"
        class="row2-card"
      />
      <Card
        title="血液透析滤过器"
        :icon="tslImg"
        background-color="#D9F0E2"
        class="row2-card"
      />
    </div>
  </div>
</template>

<script lang="ts" setup name="UnplannedSchedule">
// @ts-ignore
import Card from "./Card.vue";
import tslImg from "@/img/tsl.png";

interface Props {
    height: number;
  height: number;
}
const props = defineProps<Props>();

// @ts-ignore
import Card from './Card.vue';
</script>

<style lang="less" scoped>
.unplanned-schedule-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: var(--height);
  .row1-container {
    flex: 1;
    margin-bottom: 4px;
    display: flex;
    width: 100%;
    gap: 4px;

    > .row1-left,
    .row1-right {
      width: 103px;
      flex-shrink: 0;
    }

    .row1-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      // 卡片高度平均分（3个）
      > .row1-content-card {
        flex: 1;
      }
    }
  }
  .row2-container {
    flex: 1;
    margin-bottom: 4px;
    display: flex;
    width: 100%;
    gap: 4px;
    > .row2-card {
      flex: 1;
    }
  }
}
</style>