/* 样式调整根据需要自定义 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    th, td {
      padding: 10px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2;
    }

    input[type="text"],
    select {
      width: 100%;
      padding: 5px;
    }

    button {
      padding: 10px 20px;
    }

    @media screen and (max-width: 600px) {
      /* 在小屏幕上调整样式 */
      table {
        font-size: 20px;
      }

      th, td {
        padding: 5px;
      }

      input[type="text"],
      select {
        width: 80%;
      }

      button {
        padding: 5px 10px;
      }
    }
    
    .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
    width: 800px; /* 设置宽度 */
    height: 400px; /* 设置高度 */
}
@media only screen and (max-width: 600px) {
    .modal {
        width: 90%; /* 设置宽度为屏幕宽度的90% */
        height: 50vh; /* 设置高度为屏幕高度的50% */
        padding: 10px;
    }
}
.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    background: white;
    padding: 20px;
    border: 1px solid #ccc;
}