ID1825-未排班页面初步完成

zhangchen

2025-07-19 150b02fb27bf7bbcf3cb3653be484f8fab5b3999

ID1825-未排班页面初步完成

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

@@ -1,22 +1,18 @@
<template>
  <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
    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>
  </el-scrollbar>
    <div class="card-main">
      <slot />
    </div>
  </div>
</template>

<script lang="ts" setup name="Card">

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

@@ -19,7 +19,9 @@
            background-color="#E5EEFF"
            class="row1-center-row1-item"
          >
            <div class=""></div>
            <div class="dialysis-mode-content">
              <span>{{ pageData.dialysisMode }}</span>
            </div>
          </Card>
          <Card
            title="治疗模式"
@@ -27,7 +29,9 @@
            background-color="#F1EEFA"
            class="row1-center-row1-item"
          >
            <div class=""></div>
            <div class="dialysis-mode-content item-2">
              <span>未签到</span>
            </div>
          </Card>
        </div>
        <Card
@@ -36,7 +40,19 @@
          background-color="#D9F0E2"
          class="row1-center-row2"
        >
          <div class=""></div>
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.pipingList"
              :key="index"
              class="list-item"
              style="color: #3ab859"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
      </div>
      <div class="row1-right">
@@ -46,7 +62,18 @@
          background-color="#F9DEDE"
          class="row1-right-item"
        >
          <div class=""></div>
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.dialyzerList"
              :key="index"
              class="list-item"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
        <Card
          title="透析液"
@@ -54,7 +81,18 @@
          background-color="#EFE5FF"
          class="row1-right-item"
        >
          <div class=""></div>
          <div class="list-box-1">
            <div
              v-for="(item, index) in pageData.dialysateList"
              :key="index"
              class="list-item"
            >
              <div class="list-item-left">
                {{ item.name }}
              </div>
              <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
            </div>
          </div>
        </Card>
      </div>
    </div>
@@ -65,7 +103,19 @@
        background-color="#FFEDD2"
        class="row-item"
      >
        <div class=""></div>
        <!-- <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.pipingList"
            :key="index"
            class="list-item"
            style="color: #3ab859"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div> -->
      </Card>
      <Card
        title="一次性使用透析护理包"
@@ -73,21 +123,18 @@
        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 class="list-box-1">
          <div
            v-for="(item, index) in pageData.carePackage"
            :key="index"
            class="list-item"
            style="color: #1D77BD"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div>
      </Card>
    </div>
@@ -98,7 +145,19 @@
        background-color="#FFEDD2"
        class="row-item"
      >
        <div class=""></div>
        <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.punctureNeedle"
            :key="index"
            class="list-item"
            style="color: #A78718"
          >
            <div class="list-item-left">
              {{ item.name }}
            </div>
            <div class="list-item-right">{{ item.数量 }}{{ item.单位 }}</div>
          </div>
        </div>
      </Card>
      <Card
        title="血管通路"
@@ -106,7 +165,16 @@
        background-color="#E5EEFF"
        class="row-item"
      >
        <div class=""></div>
        <div class="list-box-1">
          <div
            v-for="(item, index) in pageData.vascularAccess"
            :key="index"
            class="list-item"
            style="color: #1D77BD"
          >
            <div class="list-item-left">{{ item.位置 }} {{ item.类型 }}</div>
          </div>
        </div>
      </Card>
    </div>
  </div>
@@ -172,6 +240,21 @@
        gap: 4px; // 行间间距
        .row1-center-row1-item {
          flex: 1;
          .dialysis-mode-content {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 11px;
            color: #3a75b8;
            text-align: center;
            font-style: normal;
            &.item-2 {
              color: #333;
            }
          }
        }
      }
      .row1-center-row2 {
@@ -198,5 +281,24 @@
      flex: 1;
    }
  }
  .list-box-1 {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 5px;
      color: #a78718;
      line-height: 6px;
      text-align: left;
      font-style: normal;
      .list-item-left {
        flex: 1;
      }
      .list-item-right {
      }
    }
  }
}
</style>