From 7c37eb24f9864d9949e2052abf393d30817c26ed Mon Sep 17 00:00:00 2001
From: zhangchen <1652267879@qq.com>
Date: 星期六, 19 七月 2025 14:54:07 +0800
Subject: [PATCH] ID1825-优化card组件
---
src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue | 195 ++++++++++++++++++++++++++++++++++++++++++++++++
src/views/mobile/bedsideAuxiliaryScreen/index.vue | 2
src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue | 35 +++++---
3 files changed, 217 insertions(+), 15 deletions(-)
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
index 5d26fa9..fd08a56 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/Card.vue
@@ -1,17 +1,21 @@
<template>
- <el-scrollbar
- class="bedside-auxiliary-screen-card"
- :style="{
- '--bg-color': props.backgroundColor,
- }"
- >
- <div class="card-header">
- <img :src="props.icon" class="card-icon" alt="" srcset="" />
- <span class="card-title">{{ props.title }}</span>
+ <el-scrollbar>
+ <div
+ class="bedside-auxiliary-screen-card"
+ :style="{
+ '--bg-color': props.backgroundColor,
+ }"
+ >
+ <div class="card-header">
+ <img :src="props.icon" class="card-icon" alt="" srcset="" />
+ <span class="card-title">{{ props.title }}</span>
+ </div>
+ <div class="card-main">
+ <el-scrollbar class="card-main">
+ <slot />
+ </el-scrollbar>
+ </div>
</div>
- <el-scrollbar class="card-main">
- <slot />
- </el-scrollbar>
</el-scrollbar>
</template>
@@ -38,6 +42,7 @@
background-color: var(--bg-color, #70a3dd);
overflow: hidden;
overflow-y: auto;
+ height: 100%;
.card-header {
flex: 0 0 6px;
@@ -76,4 +81,10 @@
overflow: hidden;
}
}
+:deep(.el-scrollbar__view) {
+ min-height: 0;
+ height: 100%;
+ overflow: hidden;
+ overflow-y: auto;
+}
</style>
\ No newline at end of file
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue b/src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue
index 12a51f8..115872b 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/components/NotSignedIn.vue
@@ -1,11 +1,202 @@
<template>
- <div class="not_signed_in_container"></div>
+ <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>
+<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>
\ No newline at end of file
diff --git a/src/views/mobile/bedsideAuxiliaryScreen/index.vue b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
index 406d945..3aecc92 100644
--- a/src/views/mobile/bedsideAuxiliaryScreen/index.vue
+++ b/src/views/mobile/bedsideAuxiliaryScreen/index.vue
@@ -1,6 +1,6 @@
<template>
<div class="bedside-auxiliary-screen-container">
- <Header :type="0" device-no="03" />
+ <Header />
<div class="bedside-auxiliary-screen-content">
<div class="content-position"></div>
<!-- <UnplannedSchedule v-if="cotentHeight > 0" :height="cotentHeight" /> -->
--
Gitblit v1.8.0