HTML CSS JS实现图书馆档案管理

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>档案管理系统</title>
  <style>
    body {
      font-family: 'Times New Roman', Times, serif; /* 更改为适合图书馆的字体 */
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #e0f7fa; /* 浅蓝色背景，模拟图书馆氛围 */
    }


    .room {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      padding: 20px;
      border: 2px solid #3498db; /* 深蓝色边框，模拟书架 */
      border-radius: 10px;
      background-color: #ecf0f1; /* 房间背景颜色保持 */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      width: 350px;
      margin: 10px;
    }

    .room-title {
      font-size: 1.5em;
      font-weight: bold;
      color: #2c3e50; /* 房间标题颜色保持 */
      margin-bottom: 10px;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .cabinet {
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 2px solid #5f9ea0; /* 柜子边框颜色 - 深蓝色 */
      padding: 10px;
      width: 100%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      background-color: #fff; /* 盒子背景颜色，保持白色 */ /* 柜子背景颜色 - 浅灰色 */
    }

    .shelf {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
      border-bottom: 1px solid #a9a9a9; /* 层分隔线颜色 - 深灰色 */
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .box {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      border: 1px solid #2c3e50; /* 深灰色边框，模拟书籍封面 */
      padding: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      background-color: #fff; /* 盒子背景颜色，保持白色 */
      position: relative;
      margin-bottom: 10px; /* 为盒子底部信息留出空间 */
    }

    .box-info {
      background-color: #e0f7fa; /* 浅蓝色背景，模拟图书馆氛围 */
      padding: 2px 5px;
      text-align: center;
      border-radius: 3px;
      margin-top: auto; /* 盒子信息贴在盒子底部 */
    }

    .cabinet-info {
      background-color: #fff; /* 盒子背景颜色，保持白色 */
      padding: 5px;
      text-align: center;
      border-radius: 3px;
      margin-top: 10px; /* 柜子信息在柜子内容之后 */
    }

    .file {
      padding: 2px 5px;
      margin-bottom: 2px;
      background-color: #44ad98; /* 绿色背景，模拟书签 */
      border-left: 5px solid #2c3e50; /* 深灰色左侧边框 */
      color: #fff; /* 档案文字颜色保持 */
      cursor: pointer;
      position: relative;
    }

    /* 悬浮时显示提示信息的样式 */
    .file::after {
      content: attr(data-info);
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      white-space: nowrap;
      background-color: #333;
      color: #fff;
      padding: 5px 10px;
      border-radius: 3px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s, visibility 0.3s;
      pointer-events: none;
      z-index: 2; /* 确保提示信息在最上层 */
      margin-left: 10px; /* 与盒子保持一定距离 */
    }

    .file:hover::after {
      opacity: 1;
      visibility: visible;
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 房间1 -->
  <div class="room">
    <div class="room-title">房间1</div>
    <div class="cabinet" data-info="房间1-柜子1">
      <div class="shelf" data-info="房间1-柜子1-层1">
        <div class="box" data-info="房间1-柜子1-层1-盒子1" style="width: 30%;">
          <div class="file" data-info="房间1-柜子1-层1-盒子1-档案1">档案1</div>
          <div class="file" data-info="房间1-柜子1-层1-盒子1-档案2">档案2</div>
          <!-- 添加盒子信息 -->
          <div class="box-info">盒子1</div>
        </div>
        <div class="box" data-info="房间1-柜子1-层1-盒子2" style="width: 40%;">
          <div class="file" data-info="房间1-柜子1-层1-盒子2-档案1">档案1</div>
          <div class="box-info">盒子2</div>
        </div>
        <div class="box" data-info="房间1-柜子1-层1-盒子3" style="width: 25%;">
          <div class="file" data-info="房间1-柜子1-层1-盒子3-档案1">档案1</div>
          <div class="box-info">盒子3</div>
        </div>


      </div>

      <div class="shelf" data-info="房间1-柜子1-层2">
        <div class="box" data-info="房间1-柜子1-层2-盒子1" style="width: 50%;">
          <div class="file" data-info="房间1-柜子1-层2-盒子1-档案1">档案1</div>
          <div class="box-info">盒子1</div>
        </div>
        <div class="box" data-info="房间1-柜子1-层2-盒子2" style="width: 50%;">
          <div class="file" data-info="房间1-柜子1-层2-盒子2-档案1">档案1</div>
          <div class="file" data-info="房间1-柜子1-层2-盒子2-档案2">档案2</div>
          <div class="box-info">盒子2</div>
        </div>
      </div>
      <div class="cabinet-info">柜子1</div>
    </div>

    <!-- 房间1的更多柜子 -->
    <div class="cabinet" data-info="房间1-柜子2">
      <div class="shelf" data-info="房间1-柜子2-层1">
        <div class="box" data-info="房间1-柜子2-层1-盒子1" style="width: 60%;">
          <div class="file" data-info="房间1-柜子2-层1-盒子1-档案1">档案1</div>
          <div class="box-info">盒子1</div>
        </div>
        <div class="box" data-info="房间1-柜子2-层1-盒子2" style="width: 40%;">
          <div class="file" data-info="房间1-柜子2-层1-盒子2-档案1">档案1</div>
          <div class="box-info">盒子2</div>
        </div>
      </div>
      <div class="cabinet-info">柜子2</div>
    </div>
  </div>

  <!-- 房间2 -->
  <div class="room">
    <div class="room-title">房间2</div>
    <div class="cabinet" data-info="房间2-柜子1">
      <div class="shelf" data-info="房间2-柜子1-层1">
        <div class="box" data-info="房间2-柜子1-层1-盒子1" style="width: 50%;">
          <div class="file" data-info="房间2-柜子1-层1-盒子1-档案1">档案1</div>
          <div class="box-info">盒子1</div>
        </div>
        <div class="box" data-info="房间2-柜子1-层1-盒子2" style="width: 50%;">
          <div class="file" data-info="房间2-柜子1-层1-盒子2-档案1">档案1</div>
          <div class="file" data-info="房间2-柜子1-层1-盒子2-档案2">档案2</div>
          <div class="box-info">盒子2</div>
        </div>
      </div>
      <div class="cabinet-info">柜子1</div>
    </div>
  </div>

  <!-- 添加更多房间 -->
</div>


</body>
</html>