ai优化

yxh

2026-10-03 d553a4be94d4f6ee162cc353a28b220403909cfc

 src/components/RoomBedSelect/src/RoomBedSelect.vue

@@ -49,9 +49,22 @@
</script>

<template>
  <el-card class="bed-card" shadow="hover" :body-style="{ padding: '10px' }">
  <!--
    需求：用户选择的**当前诊室**卡片要加颜色，与其他卡片区分开。
    这里给卡片加 `is-current` 类（主色边框 + 浅色底 + 阴影），
    并在卡片头右侧显示「当前诊室」角标，做到一眼可辨。
  -->
  <el-card
    class="bed-card"
    :class="{ 'is-current': isCurSeat }"
    shadow="hover"
    :body-style="{ padding: '10px' }"
  >
    <template #header>
      <div class="bed-card__title">{{ bed.roomName }}</div>
      <div class="bed-card__header">
        <span class="bed-card__title">{{ bed.roomName }}</span>
        <span v-if="isCurSeat" class="bed-card__badge">当前诊室</span>
      </div>
    </template>

    <img
@@ -84,6 +97,46 @@
</template>

<style scoped lang="scss">
/* ==========================================================================
   需求：用户选择的**当前诊室**卡片加颜色，与其他卡片区分。
   注意类名 `is-current` 与 Element Plus 自带的 `.is-*` 不冲突（卡片上没有其它 is- 类）。
   ========================================================================== */
.bed-card.is-current {
  /* 主色边框加粗 + 浅色底 + 投影，三重区分，远看也明显 */
  border: 2px solid var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  box-shadow: 0 0 8px var(--el-color-primary-light-5);

  :deep(.el-card__header) {
    background-color: var(--el-color-primary-light-8);
    border-bottom: 1px solid var(--el-color-primary-light-5);
  }

  .bed-card__title {
    color: var(--el-color-primary);
  }
}

/* 卡片头：诊室名 + 当前诊室角标 */
.bed-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bed-card__badge {
  flex: none;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
  background-color: var(--el-color-primary);
  border-radius: 3px;
  white-space: nowrap;
}

.bed-card {
  display: flex;
  flex-direction: column;