SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>科室分布图模拟</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <!-- 每个 .room 代表一个科室方块，data-number 存编号，data-status 存状态（用于 CSS 匹配） -->
    <div class="room" data-number="01" data-status="normal">01</div>
    <div class="room" data-number="02" data-status="normal">02</div>
    <div class="room" data-number="03" data-status="normal">03</div>
    <div class="room" data-number="04" data-status="normal">04</div>
    <div class="room" data-number="05" data-status="normal">05</div>
    <div class="room" data-number="06" data-status="empty">06</div>
    <div class="room" data-number="07" data-status="normal">07</div>
    <div class="room" data-number="08" data-status="normal">08</div>
    <div class="room" data-number="09" data-status="normal">09</div>
    <div class="room" data-number="10" data-status="normal">10</div>
    <!-- 继续补充更多科室... 根据实际布局调整数量和排列 -->
    <div class="room" data-number="21" data-status="high">21</div>
    <div class="room" data-number="22" data-status="high">22</div>
    <!--... -->
  </div>
</body>
</html>

            
/* 容器用 Grid 布局，划分行列，根据实际需要调整行列数、间距等 */
.container {
  display: grid;
  /* 示例：10 列，自动平分宽度；可根据布局改成固定列宽，如 repeat(10, 80px) */
  grid-template-columns: repeat(10, 1fr); 
  grid-template-rows: repeat(5, 80px); /* 示例 5 行，可按需调整 */
  gap: 10px; /* 方块之间的间距 */
  justify-content: center; /* 让整体居中，可选 */
  padding: 20px;
  background-color: #0b1b3a; /* 模拟深色背景，接近题图风格 */
}

/* 科室方块基础样式 */
.room {
  background-color: #fff; /* 默认白色，对应“无数据”等状态，可根据需求改 */
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #333;
  position: relative;
}

/* 不同状态的背景色，对应题图里的颜色区分逻辑（示例，可根据实际需求增删状态） */
/* 无特殊状态（比如“无数据”） */
.room[data-status="normal"] {
  background-color: #ffffff;
}
/* 空床等浅色状态 */
.room[data-status="empty"] {
  background-color: #d9eaf7;
}
/* 高风险、重病状态（对应题图红色） */
.room[data-status="high"] {
  background-color: #ff3b30;
  color: #fff; /* 文字变白更醒目 */
}
/* 其他状态可继续扩展，比如黄色、蓝色等 */
.room[data-status="medium"] {
  background-color: #ffcc00;
}
.room[data-status="low"] {
  background-color: #4cd964;
}