<template>
|
<div class="not-signed-in-container" :style="{ '--height': height + 'px' }">
|
<div class="row1-container">
|
<div class="row1-left">
|
<el-image
|
:src="pageData.patientPhone"
|
style="width: 100%; height: 100%"
|
>
|
<template #placeholder>
|
<div class="image-slot">加载中<span class="dot">...</span></div>
|
</template>
|
</el-image>
|
</div>
|
<div class="row1-center">
|
<div class="row1-center-row1">
|
<Card
|
title="透析模式"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row1-center-row1-item"
|
>
|
<div class=""></div>
|
</Card>
|
<Card
|
title="治疗模式"
|
:icon="tslImg"
|
background-color="#F1EEFA"
|
class="row1-center-row1-item"
|
>
|
<div class=""></div>
|
</Card>
|
</div>
|
<Card
|
title="一次性使用管路"
|
:icon="tslImg"
|
background-color="#D9F0E2"
|
class="row1-center-row2"
|
>
|
<div class=""></div>
|
</Card>
|
</div>
|
<div class="row1-right">
|
<Card
|
title="透析器"
|
:icon="tslImg"
|
background-color="#F9DEDE"
|
class="row1-right-item"
|
>
|
<div class=""></div>
|
</Card>
|
<Card
|
title="透析液"
|
:icon="tslImg"
|
background-color="#EFE5FF"
|
class="row1-right-item"
|
>
|
<div class=""></div>
|
</Card>
|
</div>
|
</div>
|
<div class="row2-container">
|
<Card
|
title="抗凝剂"
|
:icon="tslImg"
|
background-color="#FFEDD2"
|
class="row-item"
|
>
|
<div class=""></div>
|
</Card>
|
<Card
|
title="一次性使用透析护理包"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row-item"
|
>
|
<div class="">
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
<p>999</p>
|
|
</div>
|
</Card>
|
</div>
|
<div class="row3-container">
|
<Card
|
title="穿刺针"
|
:icon="tslImg"
|
background-color="#FFEDD2"
|
class="row-item"
|
>
|
<div class=""></div>
|
</Card>
|
<Card
|
title="血管通路"
|
:icon="tslImg"
|
background-color="#E5EEFF"
|
class="row-item"
|
>
|
<div class=""></div>
|
</Card>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup name="NotSignedIn">
|
import { computed } from "vue";
|
// @ts-ignore
|
import Card from "./Card.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
import tslImg from "@/img/tsl.png";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.notSignedIn, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.not-signed-in-container {
|
display: flex;
|
flex-direction: column;
|
height: var(--height);
|
gap: 4px; // 行间间距
|
overflow: hidden;
|
padding-bottom: 2px;
|
|
.row1-container {
|
display: flex;
|
flex: 59.3; // 59.3%
|
min-height: 0;
|
gap: 4px; // 行间间距
|
|
.row1-left {
|
width: 75px;
|
border-radius: 2px;
|
overflow: hidden;
|
}
|
.row1-center,
|
.row1-right {
|
flex: 1;
|
}
|
.row1-center {
|
display: flex;
|
flex-direction: column;
|
gap: 4px; // 行间间距
|
|
.row1-center-row1 {
|
flex: 1;
|
display: flex;
|
gap: 4px; // 行间间距
|
.row1-center-row1-item {
|
flex: 1;
|
}
|
}
|
.row1-center-row2 {
|
flex: 1;
|
}
|
}
|
.row1-right {
|
display: flex;
|
flex-direction: column;
|
gap: 4px;
|
.row1-right-item {
|
flex: 1;
|
}
|
}
|
}
|
|
.row2-container,
|
.row3-container {
|
flex: 20.35;
|
min-height: 0;
|
display: flex;
|
gap: 4px;
|
.row-item {
|
flex: 1;
|
}
|
}
|
}
|
</style>
|
