<template>
|
<div class="under-treatment-container" :style="{ '--height': height + 'px' }">
|
<div class="left-box">
|
<div class="left-row1">
|
<div class="left-row1-col1">
|
<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="left-row1-col2"></div>
|
<div class="left-row1-col3"></div>
|
</div>
|
<div class="left-row2"></div>
|
<div class="left-row3"></div>
|
<div class="left-row4"></div>
|
</div>
|
<div class="right-box"></div>
|
</div>
|
</template>
|
<script lang="ts" setup name="UnderTreatment">
|
import { computed } from "vue";
|
// @ts-ignore
|
import Card from "../components/Card.vue";
|
import { useBedsideAuxiliaryScreenStore } from "@/store/bedsideAuxiliaryScreen";
|
|
interface Props {
|
height: number;
|
}
|
const props = defineProps<Props>();
|
|
const bedsideAuxiliaryScreenStore = useBedsideAuxiliaryScreenStore();
|
|
const pageData = computed(() => {
|
return Object.assign(bedsideAuxiliaryScreenStore.deviceData.underTreatment, {
|
patientPhone: bedsideAuxiliaryScreenStore.deviceData.patientPhone,
|
});
|
});
|
</script>
|
|
<style lang="less" scoped>
|
* {
|
box-sizing: border-box;
|
}
|
|
.under-treatment-container {
|
display: flex;
|
align-items: flex-start;
|
height: var(--height);
|
gap: 4px;
|
padding-bottom: 2px;
|
overflow: hidden;
|
.left-box {
|
flex: 0 0 58.25%;
|
height: calc(100% - 12px);
|
display: flex;
|
align-items: flex-start;
|
flex-direction: column;
|
gap: 4px;
|
div {
|
width: 100%;
|
}
|
.left-row1 {
|
flex: 0 0 41.99%;
|
// width: calc(100% - 8px);
|
gap: 4px;
|
display: flex;
|
background: blue;
|
.left-row1-col1 {
|
flex: 0 0 26.94%;
|
}
|
.left-row1-col2 {
|
flex: 0 0 26.42%;
|
}
|
.left-row1-col3 {
|
flex: 0 0 46.63%;
|
}
|
}
|
.left-row2 {
|
flex: 0 0 22.65%;
|
background: yellow;
|
}
|
.left-row3 {
|
flex: 0 0 22.65%;
|
background: orange;
|
}
|
.left-row4 {
|
flex: 0 0 12.71%;
|
background: purple;
|
}
|
}
|
.right-box {
|
flex: 0 0 41.75%;
|
height: 100%;
|
background: green;
|
}
|
}
|
</style>
|
