@media (min-width: 768px) {
  .box {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    .banner {
      // 头部标题
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        // 左侧
        .left {
          display: flex;
          align-items: center;
          margin-left: -3rem;
          // 左侧logo
          .logo {
            width: 108px;
            img {
              width: 9rem;
              height: 100px;
              object-fit: contain;
            }
          }
          // 左侧标题
          .text {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            h2 {
              margin: 0;
            }
            p {
              font-size: 16px;
              margin: 0;
              margin-top: 10px;
            }
            span {
              color: #3571ff;
              font-size: 14px;
            }
          }
        }
      }
      // 右侧登录
      .right {
        display: flex;
        align-items: center;
        .el-icon {
          font-size: 20px;
        }
        span {
          margin-left: 9.5px;
        }
        // 下拉菜单
        .el-dropdown {
          margin-left: 10px;
          .el-dropdown-link {
            cursor: pointer;
            .menu-button {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }

  // 上传和清空发送

  .main {
    display: flex;
    justify-content: space-between; /* 左右分布 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px;
    .left-buttons {
      display: flex;

      .el-button {
        width: 120px;
        height: 40px;
        margin-right: 10px;
      }
    }

    .right-buttons {
      .el-button {
        width: 120px;
        height: 40px;
        margin-right: 10px;
      }
    }
  }

  //  输入主题
  .input {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 20px;

    .label {
      margin-right: 15px;
      white-space: nowrap;
      font-size: 14px;
    }

    .subject {
      flex: 1;
      padding: 5px 0;
      font-size: 14px;
    }
  }

  //表格
  .table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;

    .el-table__header {
      background-color: #f4f4f4;
      color: #333;
      font-weight: bold;
    }

    .el-table__body {
      background-color: #fff;
    }

    .el-table__row {
      transition: background-color 0.3s;
    }

    .el-table__row:hover {
      background-color: #f5f5f5;
    }

    .state_bt {
      margin: 0 5px;
    }

    .el-table__cell {
      padding: 10px 15px;
      text-align: center;
      font-size: 14px;
    }

    .operation {
      display: flex;
      justify-content: center;
      align-items: center;

      .el-button {
        margin: 0 5px;
        border-radius: 4px;
      }

      .add-row-btn {
        background-color: #3370ff;
        color: white;
      }

      .el-button--danger {
        background-color: #f56c6c;
        color: white;
      }

      .el-button--primary {
        background-color: #409eff;
        color: white;
      }
    }

    .el-input {
      width: 100%;
      padding: 5px;
      font-size: 14px;
      border-radius: 4px;
    }

    .el-dialog {
      padding: 20px;
    }

    .el-table__column .cell {
      word-wrap: break-word;
      white-space: normal;
    }
  }

  // 底部版权
  .footer {
    padding: 20px 0;
    margin: -8px;
    background-color: #f8f8f8;
    text-align: center;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #ddd;
    a {
      color: #3370ff;
      text-decoration: none;
      font-weight: bold;

      &:hover {
        text-decoration: underline;
      }
    }

    p {
      margin: 0;
      padding: 0;
    }
  }

  //说明按钮
  .explain {
    position: fixed; /* 使用 fixed 定位，保持按钮在视口中的固定位置 */
    right: 3%;
    top: 85%;
    z-index: 9999;
    .explain_button {
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin-top: 10px;
      margin-right: 10px;
      font-weight: bold;
      font-size: 20px;
    }
  }

  .el-dropdown-menu {
    .el-button {
      padding: 1rem;
      margin: 0.6rem 1rem !important;
    }
  }

  .control-group {
    background-color: #ffffff !important;
  }

  .el-table_1_column_1 {
    .el-button {
      margin: 0;
    }
  }

  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条的宽度 */
    height: 12px; /* 水平滚动条的高度 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道背景色 */
    border-radius: 6px; /* 圆角 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: #888; /* 滑块颜色 */
    border-radius: 6px; /* 圆角 */
    border: 3px solid #f1f1f1; /* 滑块边框 */
  }

  /* 滚动条滑块悬停效果 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* 悬停时滑块颜色 */
  }
}

@media (max-width: 768px) {
  .box {
    width: 90%;
    height: 100%;
    margin: 0 auto;
    padding-bottom: 20px; /* 增加底部空间 */
    .banner {
      // 头部标题
      .header {
        display: flex;
        flex-direction: column; /* 从横向改为纵向排列 */
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;

        .left {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%; /* 确保左侧内容居中 */
          margin-bottom: 20px;

          .logo {
            width: 90px;
            img {
              width: 80px;
              height: 80px;
              object-fit: contain;
            }
          }

          .text {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;

            h2 {
              font-size: 18px; /* 调整标题大小 */
              margin: 0;
            }

            p {
              font-size: 14px;
              margin: 5px 0;
            }

            span {
              color: #3571ff;
              font-size: 12px;
            }
          }
        }

        .right {
          display: flex;
          justify-content: center;
          width: 100%;
          margin-top: 20px;
          .el-icon {
            font-size: 20px;
          }
          span {
            margin-left: 5px;
            font-size: 14px;
          }

          .el-dropdown {
            margin-left: 10px;
            .el-dropdown-link {
              cursor: pointer;
              .menu-button {
                display: flex;
                align-items: center;
              }
            }
          }
        }
      }
    }

    // 上传和清空发送
    .main {
      display: flex;
      flex-direction: column; /* 改为纵向布局 */
      align-items: center;
      margin-bottom: 20px;
      .left-buttons,
      .right-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
        .el-button {
          width: 120px;
          height: 40px;
          margin-right: 10px;
        }
      }
    }

    // 输入主题
    .input {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 20px;

      .label {
        margin-right: 15px;
        font-size: 14px;
        white-space: nowrap;
      }

      .subject {
        flex: 1;
        padding: 5px 0;
        font-size: 14px;
      }
    }

    // 表格
    .table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;

      .el-table__header {
        background-color: #f4f4f4;
        color: #333;
        font-weight: bold;
        text-align: center;
      }

      .el-table__body {
        background-color: #fff;
      }

      .el-table__row {
        transition: background-color 0.3s;
      }

      .el-table__row:hover {
        background-color: #f5f5f5;
      }

      .state_bt {
        margin: 0 5px;
      }

      .el-table__cell {
        padding: 10px 15px;
        text-align: center;
        font-size: 14px;
      }

      .el-button--small{
        width: 2.4rem;
        height: 2rem;
      }

      .operation {
        display: flex;
        justify-content: center;
        align-items: center;

        .el-button {
          margin: 0 5px;
          border-radius: 4px;
        }

        .add-row-btn {
          background-color: #3370ff;
          color: white;
        }

        .el-button--danger {
          background-color: #f56c6c;
          color: white;
        }

        .el-button--primary {
          background-color: #409eff;
          color: white;
        }
      }

      .el-input {
        width: 100%;
        padding: 5px;
        font-size: 14px;
        border-radius: 4px;
      }

      .el-dialog {
        padding: 20px;
      }

      .el-table__column .cell {
        word-wrap: break-word;
        white-space: normal;
      }
    }

    // 底部版权
    .footer {
      padding: 20px 0;
      margin: -8px;
      background-color: #f8f8f8;
      text-align: center;
      font-size: 14px;
      color: #666;
      border-top: 1px solid #ddd;

      a {
        color: #3370ff;
        text-decoration: none;
        font-weight: bold;

        &:hover {
          text-decoration: underline;
        }
      }

      p {
        margin: 0;
        padding: 0;
      }
    }

    // 说明按钮
    .explain {
      position: fixed;
      right: 5%;
      bottom: 20px;
      z-index: 9999;
      .explain_button {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        font-weight: bold;
        font-size: 20px;
        color: white;
      }
    }

    .el-dropdown-menu {
      .el-button {
        padding: 1rem;
        margin: 0.6rem 1rem !important;
      }
    }

    .control-group {
      background-color: #ffffff !important;
    }

    .el-table_1_column_1 {
      .el-button {
        margin: 0;
      }
    }

    /* 整个滚动条 */
    ::-webkit-scrollbar {
      width: 8px; /* 垂直滚动条的宽度 */
      height: 12px; /* 水平滚动条的高度 */
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
      background: #f1f1f1; /* 轨道背景色 */
      border-radius: 6px; /* 圆角 */
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      background: #888; /* 滑块颜色 */
      border-radius: 6px; /* 圆角 */
      border: 3px solid #f1f1f1; /* 滑块边框 */
    }

    /* 滚动条滑块悬停效果 */
    ::-webkit-scrollbar-thumb:hover {
      background: #555; /* 悬停时滑块颜色 */
    }
  }
}
