<template>
|
<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;
|
}
|
const props = defineProps<Props>();
|
</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>
|
