:root {
  --el-color-primary: #1a60ff;
}
/* 当视口宽度小于等于768px时生效 */
@media only screen and (min-width: 768px) {
  .box {
    width: 100vw;
    min-width: 1200px;
    height: 100vh;
    overflow: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
  .title-row {
    color: #101010;
    font-size: 20px;
    text-align: center;
    margin-top: 25px;
  }
  .but-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 120px 16px;
    margin-top: 16px;
    border-bottom: 2px solid #f5f5f5;
  }
  .but-row .but-row-logo {
    width: 47px;
  }
  .but-row .but-row-title {
    margin-left: 20px;
    margin-right: auto;
    color: #101010;
    font-size: 20px;
    text-align: center;
  }
  .row-1 {
    margin: 20px auto;
    overflow: hidden;
    max-width: calc(100% - 240px);
  }
  .row-1 .my-table {
    height: 100%;
  }
  .my-dialog .my-dialog-title {
    color: #1d2129;
    font-size: 16px;
    text-align: center;
  }
  .my-dialog .my-form {
    padding: 0 20px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .upload-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .upload-box .file-name {
    color: #606266;
    margin-left: 8px;
  }
  .upload-box .upload-tip {
    color: #909399;
    font-size: 12px;
  }
  .my-header-row th {
    background-color: #f5f7fa !important;
  }
  .filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .filter-box .sreach-img {
    width: 16px;
    cursor: pointer;
  }
  .my-popover .filter-but-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .row-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 10px;
  }
  .row-2 .empty-img {
    margin-top: 120px;
    width: 240px;
  }
  .row-2 .empty-text {
    font-size: 20px;
  }
  .row-2 .empty-bg {
    width: 100%;
    margin-top: auto;
  }
}
/* 当视口宽度小于等于768px时生效 */
@media only screen and (max-width: 768px) {
  .box {
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: #fff;
    display: flex;
    flex-direction: column;
  }
  .title-row {
    color: #101010;
    font-size: 0.5rem;
    text-align: center;
    margin-top: 0.3rem;
  }
  .but-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.27rem 0.43rem;
    margin-top: 0.43rem;
    border-bottom: 2px solid #f5f5f5;
  }
  .but-row .but-row-logo {
    width: 0.8rem;
  }
  .but-row .but-row-title {
    margin-left: 0.4rem;
    margin-right: auto;
    color: #101010;
    font-size: 0.43rem;
    text-align: center;
  }
  .row-1 {
    margin: 0.27rem auto;
    overflow: hidden;
    max-width: calc(100% - 0.53rem);
  }
  .row-1 .my-table {
    height: 100%;
  }
  .my-dialog .my-dialog-title {
    color: #1d2129;
    font-size: 16px;
    text-align: center;
  }
  .my-dialog .my-form {
    padding: 0 20px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .upload-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .upload-box .file-name {
    color: #606266;
    margin-left: 8px;
  }
  .upload-box .upload-tip {
    color: #909399;
    font-size: 12px;
  }
  .my-header-row th {
    background-color: #f5f7fa !important;
  }
  .filter-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .filter-box .sreach-img {
    width: 16px;
    cursor: pointer;
  }
  .my-popover .filter-but-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .row-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 0.27rem;
  }
  .row-2 .empty-img {
    margin-top: 3.2rem;
    width: 3.2rem;
  }
  .row-2 .empty-text {
    font-size: 0.4rem;
  }
  .row-2 .empty-bg {
    width: 100%;
    margin-top: auto;
  }
}