AIScoring/src/styles/common.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    PingFang SC,
    Hiragino Sans GB,
    noto sans,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

//页面最高层级  统一最底层背景色 #F0F4FB
.page_layout {
  position: relative;
  min-height: 100%;
  margin: 0 auto;
  // padding-bottom: 30px;
  overflow-y: hidden;
  background-color: #f0f4fb;

  .header_container {
    width: 100%;
    height: 64px;
    font-size: 22px;
    color: #fff;
    box-sizing: border-box;
    background-color: #2e64fa;
  }

  .main_container {
    padding: 20px;
    background: #f0f4fb;
    height: calc(100vh - 65px);
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
}

//考试详情页面
.page_detail {
  width: 100%;
  height: 100%;
  background-color: #f0f4fb;
  display: flex;
  justify-content: space-between;

  //左侧导航栏
  .left_aside {
    width: 160px;
    height: 100%;
    background-color: #fff;
  }

  //右侧主内容
  .right_main {
    width: calc(100% - 160px);
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
}

#app > div {
  height: 100%;
}

html,
body {
  width: 100% !important;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased; //控制字体在 WebKit 浏览器（如 Chrome、Safari）中的抗锯齿方式。antialiased 表示使用“无锯齿”的字体渲染方式，使文字更清晰平滑，尤其适用于浅色或白色背景上的深色字体。
  text-rendering: optimizeLegibility; //告诉浏览器优先考虑文字的可读性而不是渲染速度或几何精度
  background: #f0f4fb;
}

// 全局滚动条样式修改
/* 滚动条轨道区域样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  /* 设置滚动条宽度为8像素 */
  background-color: transparent;
}

/* 滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  /* 设置滑块颜色为深灰色 */
  border-radius: 4px;

  max-height: 150px; //设置手柄最大高度
  /* 设置滑块边角半径为4像素 */
}

/* 滚动条轨道内部空白区域样式 */
::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* 设置轨道背景色为浅灰色 */
}

/* 滚动条两端按钮样式 */
::-webkit-scrollbar-button {
  display: none;
  /* 不显示按钮 */
}

/* 交叉点处的区域样式 */
::-webkit-scrollbar-corner {
  background-color: transparent;
  /* 设置交叉点处的背景色为透明 */
}

/* 调整大小手柄样式 */
::-webkit-resizer {
  display: none;
  /* 不显示调整大小手柄 */
}

.vxe-table {
  // font-family: revert;
  /* 不设置 font-family，浏览器使用默认字体 */
}

//左右切换按钮样式
.right_user_tab {
  width: calc(100% - 40px);
  margin: auto;
  display: flex;
  margin-top: 20px;

  .tab_system_user {
    width: 50%;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 4px 0px 0px 4px;
    cursor: pointer;
    border: 1px solid #bbbbbb;
    font-weight: 400;
    font-size: 16px;
    color: #bbbbbb;
    cursor: pointer;
  }

  .tab_temporay_user {
    width: 50%;
    height: 34px;
    border-radius: 0px 4px 4px 0px;
    line-height: 34px;
    text-align: center;

    border: 1px solid #bbbbbb;
    font-weight: 400;
    font-size: 16px;
    color: #bbbbbb;
    cursor: pointer;
  }

  .select_cur {
    background: #2e64fa;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
    border: 1px solid #2e64fa;
  }
}

//下划线版本
.right_tab_underline {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-between;

  .tab_item {
    width: 50%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    border-bottom: 2px solid #fff;
    cursor: pointer;
  }

  .tab_item_cur {
    width: 50%;
    height: 44px;
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    border-bottom: 2px solid #2e64fa;
  }
}

.page_tree {
  width: 100%;
  border: 1px solid rgb(238, 238, 238);
  overflow-y: auto;
  border-radius: 6px;
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background: #e3eeff !important;
    color: #2e64fa !important;
    border-radius: 4px;
    padding: 5px 4px;
    height: 36px;
    // 选中时的样式
    .el-tree-node__expand-icon {
      color: #2e64fa !important;
    }
  }
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: red;
  }
  .el-tree-node .el-tree-node__content:hover {
    background-color: #f0f2f5;
    /* 悬浮时的背景色 */
    border-radius: 4px;
    padding: 5px 4px;
  }
  .el-tree-node .el-tree-node__content {
    padding: 5px 4px;
    height: 36px;
  }
}
//通用间隔
.page_jg {
  clear: both;
  height: 12px;
  width: 100%;
}
//通用间隔20px
.page_jg_20 {
  clear: both;
  height: 20px;
  width: 100%;
}
//通用间隔18px
.page_jg_18 {
  clear: both;
  height: 18px;
  width: 100%;
}
//通用间隔16px
.page_jg_16 {
  clear: both;
  height: 16px;
  width: 100%;
}
//通用间隔10px
.page_jg_10 {
  clear: both;
  height: 10px;
  width: 100%;
}
//页面表格公共样式
.page_table {
  .el-table {
    border-radius: 8px;
    border: 1px solid #f0f2f5;
    border-bottom: 0px solid #f0f2f5;
    //表格竖着的边框线样式
    th.el-table__cell {
      border-right: 1px solid #ebeef5;
    }
    .el-table__body-wrapper {
      table {
        tr {
          td {
            border-right: 1px solid #ebeef5;
          }
          td:last-child,
          th:last-child {
            border-right: 0px solid green;
          }
        }
      }
    }
    .el-table__empty-block {
      min-height: 120px;
      background-image: url("../assets/bg/table_no_data.png");
      background-size: 64px 72px;
      background-position: 50% 50%;
      background-repeat: no-repeat;

      .el-table__empty-text {
        display: none;
      }
    }
  }
  //表格加载动画字体
  .el-loading-spinner .el-loading-text {
    font-size: 14px;
    margin:0 auto;
  }
  .el-loading-spinner .circular {
    width: 20px;
    height: 20px;
    color: #2e64fa;
  }
  //表格里的输入框 选择框样式覆盖
  .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
  }
  // 下拉选择框 中间箭头上下居中
  .el-select .el-input .el-select__caret {
    height: 36px;
  }
  // 下拉选择框 中间箭头上下居中
  .el-input__icon {
    line-height: 36px;
  }
  //去掉滚动条后的表格整体宽度
  .el-table__body {
    width: 100% !important;
  }
  //标题栏背景色
  .el-table tr th.el-table__cell {
    background-color: #f4f6f8 !important;
    font-size: 16px;
    color: #333;
    font-weight: 600;
  }
  .el-table .cell {
    padding: 0 5px !important;
  }
  .el-table thead {
    color: #333 !important;
    font-weight: 500;
    font-size: 14px;
    height: 52px;
    .is-left {
      padding-left: 10px; //靠左的标题加10边距
    }
  }
  .el-table .el-table__cell {
    padding: 0;
    height: 52px;
    color: #666;
  }
}

.table_no_bg {
  .el-table__empty-block {
    // background-color: red;
    // min-height: 120px;
    min-height: auto !important;
    background-image: none !important;
    background-size: 64px 72px;
    background-position: 50% 50%;
    background-repeat: no-repeat;

    .el-table__empty-text {
      display: block !important;
    }
  }
}
//状态
.table_row_status {
  // font-family:"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "WenQuanYi Zen Hei", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  //不计入 灰色
  .not_included_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c0c4cc;
  }

  //异常的  红色
  .abnormal_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fa3a2e;
  }

  //正常的  绿色的
  .normal_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #2bc644;
    border-radius: 50%;
  }

  //分析管理  已发布
  .yes_release_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #2bc644;
    border-radius: 50%;
  }

  //分析管理  未发布 缺考
  .no_release_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #fb9f34;
    border-radius: 50%;
  }

  //分析管理  已关闭  违纪
  .ready_close_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #f56c6c;
    border-radius: 50%;
  }

  //分析管理  需汇总
  .need_summary_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #2e64fa;
    border-radius: 50%;
  }
  //分析管理  成绩中
  .score_look_icon {
    margin-left: 5px;
    width: 6px;
    height: 6px;
    background: #995fb3;
    border-radius: 50%;
  }
}

// 分页公共样式
.page_pagination {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  margin-bottom: 2px;

  display: flex;
  justify-content: flex-end;
  align-items: center;

  .el-pagination .el-select {
    width: 120px;
  }
  .el-pagination {
    padding: 0 !important;
    display: flex;
    align-items: center;
  }
  .el-input--mini .el-input__inner {
    height: 30px !important;
    line-height: 30 !important;
  }
  // 上一页
  .el-pagination .btn-prev {
    width: 30px !important;
    height: 30px;
    padding: 0 !important;
    background: #f3f3f3;
    border-radius: 4px 4px 4px 4px;
  }

  // 下一页
  .el-pagination .btn-next {
    width: 30px !important;
    height: 30px;
    padding: 0 !important;
    background: #f3f3f3;
    border-radius: 4px 4px 4px 4px;
    margin-left: 8px;
  }

  .el-pagination span:not([class*="suffix"]),
  .el-pagination button {
    min-width: 30px;
  }

  .el-pagination .el-pager li {
    min-width: 30px;
    height: 30px;
    width: 30px;
    line-height: 30px;
    background: #f3f3f3;
    border-radius: 4px 4px 4px 4px;
    padding: 0 !important;
    margin-left: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #666;
  }
  .el-pagination button.is-active, .el-pagination button:hover {
  color: #2f51ff !important;
}
  .el-pagination .el-pager li.is-active {
    background: #2f51ff !important;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}

//页面公共样式
.page_item {
  // width: 80%;

  min-width: 1200px;
  margin: auto;
  min-height: 100%;

  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.page_module {
  width: 100%;
  padding: 20px;
  height: auto;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
}
.page_tag {
  width: calc(100% - 20px);
  height: 100%;
  border-radius: 0px 4px 4px 0px;
  .el-radio-button__inner {
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    color: #666666;
  }
  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    color: #fff !important;
  }
  .tab_item {
    font-weight: 400;
    font-size: 14px;
    color: #999999;
  }
  .tag_item {
    max-width: 100px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出部分显示省略号 */
  }
}

.page_content {
  width: 100%;
  height: calc(100% - 56px);
  display: flex;
  justify-content: space-between;
  .content_table {
    width: calc(100% - 340px);
    height: 100%;
    .table_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .header_left {
        .scan_button_header {
          .el-button {
            padding: 8px 10px;
            i {
              margin-right: 5px;
            }
          }
        }
      }
      .header_right {
        font-weight: 400;
        font-size: 16px;
        color: #333333;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .content_right {
    width: 320px;
    height: 100%;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #ebeef5;

    position: relative;
    .right_header {
      width: 100%;
      height: 48px;
      line-height: 48px;
      padding: 0 0px;
      box-sizing: border-box;
      border-bottom: 1px solid #ebeef5;

      display: flex;
      justify-content: space-between;

      .scan_set 
      {
          width: 100px;
          height: 48px;
          line-height: 48px;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          margin-right: 20px;
          background-image: url('../assets/icon/scan_set_icon.png');
          background-size: 16px 16px;
          background-repeat: no-repeat;
          background-position: 5px 50%;
          text-align: right;
          cursor: pointer;
      }

      .scan_set_scan_code {
        width: calc(100% - 100px);
        height: 48px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;
        color: #666666;

        .el-input__icon {
          line-height: 36px;
        }

        .el-input__inner {
          line-height: 36px;
          height: 36px;
        }

      }
    }
    .right_center {
      width: 100%;
      height: calc(100% - 48px - 80px);

      .scan_buttons {
        width: calc(100% - 40px);
        margin: auto;
        cursor: pointer;
        position: relative;
        border-radius: 10px 10px 10px 10px;
        // border: 1px solid #EBEEF5;
      }

      /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
      @media (max-height: 600px) {
        .scan_list {
          width: calc(100% - 20px);
          margin-left: 20px;
          // height:calc(100% - 250px);
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;

          .list_item {
            width: calc(50% - 22px);
            margin-right: 20px;
            margin-bottom: 30px;
            height: 50px;
            font-weight: 500;
            font-size: 14px;
            // color: #333333;
            text-align: center;

            border-radius: 10px 10px 10px 10px;
            border: 1px solid #ebeef5;
            cursor: pointer;
            background-position: calc(100% - 10px) 10px;
            background-repeat: no-repeat;
            background-size: 32px 32px;
            margin-top: -20px;

            .list_item_info {
              width: calc(100% - 20px);
              margin: auto;
              height: 40px;

              .item_info_title {
                font-weight: 600;
                font-size: 14px;
                color: #333333;
                padding-top: 5px;

                text-align: left;
              }

              .item_info_number {
                width: 100%;

                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 30px;
                // line-height: 60px;

                // 未扫描
                .number_no_scan {
                  font-weight: 600;
                  font-size: 16px;
                  color: #2e64fa;
                }

                //缺考
                .number_no_exam {
                  font-weight: 600;
                  font-size: 16px;
                  color: #fb9f34;
                }

                //已上传
                .number_uploaded {
                  font-weight: 600;
                  font-size: 16px;
                  color: #2bc644;
                }

                //异常
                .number_abnormal {
                  font-weight: 600;
                  font-size: 16px;
                  color: #f56c6c;
                }

                .number_no_icon {
                  width: 32px;
                  height: 32px;
                  display: flex;
                  justify-content: flex-start;
                  margin-left: 20px;
                  // background-color: red;
                  margin-top: 5px;
                }
              }
            }
          }

          .no_scan {
            background-image: url("../assets/icon/no_scan_icon.png");
            border: 1px solid #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_hover {
            pointer-events: none; // 这会禁用所有鼠标事件
          }

          .no_scan:hover {
            background-color: rgba(46, 100, 250, 0.1);
            background-image: url("../assets/icon/no_scan_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2e64fa;
            box-shadow: 4px 2px 10px #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_exam {
            background-image: url("../assets/icon/miss_exam.png");
            border: 1px solid #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .no_exam:hover {
            background-color: rgba(251, 159, 52, 0.1);
            background-image: url("../assets/icon/miss_exam_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #fb9f34;
            box-shadow: 4px 2px 10px #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .annormal_icon {
            background-image: url("../assets/icon/abnormal_icon.png");
            border: 1px solid #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .annormal_icon:hover {
            background-color: rgba(245, 108, 108, 0.1);
            background-image: url("../assets/icon/abnormal_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #f56c6c;
            box-shadow: 4px 2px 10px #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .sucess_upload {
            background-image: url("../assets/icon/sucess_upload.png");
            border: 1px solid #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }

          .sucess_upload:hover {
            background-color: rgba(43, 198, 68, 0.1);
            background-image: url("../assets/icon/sucess_upload_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2bc644;
            box-shadow: 4px 2px 10px #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }
        }
      }

      /* 屏幕高度在767-到1440之间时 常见分辨率：1600x900, 1920x1080*/
      @media (min-height: 600px) and (max-height: 900px) {
        .scan_list {
          width: calc(100% - 20px);
          margin-left: 20px;
          // height:calc(100% - 250px)
          // background-color: red;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-top: 20px;

          .list_item {
            width: calc(50% - 22px);
            margin-right: 20px;
            margin-bottom: 20px;
            height: 70px;
            font-weight: 500;
            font-size: 16px;
            // color: #333333;
            text-align: center;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #ebeef5;
            cursor: pointer;
            background-position: calc(100% - 10px) 10px;
            background-repeat: no-repeat;
            background-size: 32px 32px;

            .list_item_info {
              width: calc(100% - 20px);
              margin: auto;
              height: 70px;

              .item_info_title {
                font-weight: 600;
                font-size: 16px;
                color: #333333;
                padding-top: 10px;

                text-align: left;
              }

              .item_info_number {
                width: 100%;

                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                // line-height: 60px;

                // 未扫描
                .number_no_scan {
                  font-weight: 600;
                  font-size: 20px;
                  color: #2e64fa;
                }

                //缺考
                .number_no_exam {
                  font-weight: 600;
                  font-size: 20px;
                  color: #fb9f34;
                }

                //已上传
                .number_uploaded {
                  font-weight: 600;
                  font-size: 20px;
                  color: #2bc644;
                }

                //异常
                .number_abnormal {
                  font-weight: 600;
                  font-size: 20px;
                  color: #f56c6c;
                }

                .number_no_icon {
                  width: 32px;
                  height: 32px;
                  display: flex;
                  justify-content: flex-start;
                  margin-left: 20px;
                  // background-color: red;
                  margin-top: 5px;
                }
              }
            }
          }

          .no_hover {
            pointer-events: none; // 这会禁用所有鼠标事件
          }

          .no_scan {
            background-image: url("../assets/icon/no_scan_icon.png");
            border: 1px solid #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_scan:hover {
            background-color: rgba(46, 100, 250, 0.1);
            background-image: url("../assets/icon/no_scan_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2e64fa;
            box-shadow: 4px 2px 10px #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_exam {
            background-image: url("../assets/icon/miss_exam.png");
            border: 1px solid #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .no_exam:hover {
            background-color: rgba(251, 159, 52, 0.1);
            background-image: url("../assets/icon/miss_exam_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #fb9f34;
            box-shadow: 4px 2px 10px #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .annormal_icon {
            background-image: url("../assets/icon/abnormal_icon.png");
            border: 1px solid #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .annormal_icon:hover {
            background-color: rgba(245, 108, 108, 0.1);
            background-image: url("../assets/icon/abnormal_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #f56c6c;
            box-shadow: 4px 2px 10px #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .sucess_upload {
            background-image: url("../assets/icon/sucess_upload.png");
            border: 1px solid #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }

          .sucess_upload:hover {
            background-color: rgba(43, 198, 68, 0.1);
            background-image: url("../assets/icon/sucess_upload_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2bc644;
            box-shadow: 4px 2px 10px #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }
        }
      }

      /* 当屏幕高度至少为1440px时应用的样式  常见分辨率：2560x1440*/
      @media screen and (min-height: 900px) {
        .scan_list {
          width: calc(100% - 20px);
          margin-left: 20px;
          // height:calc(100% - 250px)

          margin-top: 40px;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;

          .list_item {
            width: calc(50% - 22px);
            margin-right: 20px;
            margin-bottom: 20px;
            height: 70px;
            font-weight: 500;
            font-size: 16px;
            // color: #333333;
            text-align: center;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #ebeef5;
            cursor: pointer;
            background-position: calc(100% - 10px) 10px;
            background-repeat: no-repeat;
            background-size: 32px 32px;

            .list_item_info {
              width: calc(100% - 20px);
              margin: auto;
              height: 70px;

              .item_info_title {
                font-weight: 600;
                font-size: 16px;
                color: #333333;
                padding-top: 10px;

                text-align: left;
              }

              .item_info_number {
                width: 100%;

                position: relative;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // height: 50px;
                // line-height: 60px;

                // 未扫描
                .number_no_scan {
                  font-weight: 600;
                  font-size: 20px;
                  color: #2e64fa;
                }

                //缺考
                .number_no_exam {
                  font-weight: 600;
                  font-size: 20px;
                  color: #fb9f34;
                }

                //已上传
                .number_uploaded {
                  font-weight: 600;
                  font-size: 20px;
                  color: #2bc644;
                }

                //异常
                .number_abnormal {
                  font-weight: 600;
                  font-size: 20px;
                  color: #f56c6c;
                }

                .number_no_icon {
                  width: 32px;
                  height: 32px;
                  display: flex;
                  justify-content: flex-start;
                  margin-left: 20px;
                  // background-color: red;
                  margin-top: 5px;
                }
              }
            }
          }

          .no_hover {
            pointer-events: none; // 这会禁用所有鼠标事件
          }

          .no_scan {
            background-image: url("../assets/icon/no_scan_icon.png");
            border: 1px solid #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_scan:hover {
            background-color: rgba(46, 100, 250, 0.1);
            background-image: url("../assets/icon/no_scan_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2e64fa;
            box-shadow: 4px 2px 10px #2e64fa;

            .item_info_title {
              color: #2e64fa !important;
            }
          }

          .no_exam {
            background-image: url("../assets/icon/miss_exam.png");
            border: 1px solid #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .no_exam:hover {
            background-color: rgba(251, 159, 52, 0.1);
            background-image: url("../assets/icon/miss_exam_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #fb9f34;
            box-shadow: 4px 2px 10px #fb9f34;

            .item_info_title {
              color: #fb9f34 !important;
            }
          }

          .annormal_icon {
            background-image: url("../assets/icon/abnormal_icon.png");
            border: 1px solid #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .annormal_icon:hover {
            background-color: rgba(245, 108, 108, 0.1);
            background-image: url("../assets/icon/abnormal_icon_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #f56c6c;
            box-shadow: 4px 2px 10px #f56c6c;

            .item_info_title {
              color: #f56c6c !important;
            }
          }

          .sucess_upload {
            background-image: url("../assets/icon/sucess_upload.png");
            border: 1px solid #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }

          .sucess_upload:hover {
            background-color: rgba(43, 198, 68, 0.1);
            background-image: url("../assets/icon/sucess_upload_hover.png");
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #2bc644;
            box-shadow: 4px 2px 10px #2bc644;

            .item_info_title {
              color: #2bc644 !important;
            }
          }
        }
      }
    }

    .right_button {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 80px;
      border-top: 1px solid #ebeef5;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

//页面底部公共样式
.page_bottom {
  width: 100%;

  height: 20px;
  font-weight: 400;
  font-size: 14px;
  color: #666;
  display: flex;
  justify-content: space-between;

  .span_red {
    font-weight: 500;
    font-size: 16px;
    color: #f56c6c;
  }

  .bottom_left {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
  }

  .bottom_right {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
  }
}

//页面表格列表 以及筛选公共样式
.page_list {
  margin: auto;
  .search_content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el_button_item {
      width: auto;
      height: 36px !important;
      line-height: 36px;
      padding: 0 10px;
      margin-left: 20px;
      font-size: 14px !important;
    }
    .el-select {
      width: 120px;
    }
    .el-input {
      width: 200px;
    }
    .content_left {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      width: auto;
      // height: 36px;
      line-height: 36px;
      .tab_button {
        width: auto;
        height: 36px !important;
        line-height: 36px;
        padding: 0 10px;
        // margin-right: 20px;
        font-size: 14px !important;
      }
      .select_cur {
        background: #2e64fa;
        color: #fff;
        border: 1px solid #2e64fa;
      }
      .left_title {
        width: 42px;
        font-weight: 600;
        font-size: 14px;
        color: #333333;
        margin-right: 8px;
      }

      .grade_title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        margin-right: 10px;
      }
      // 通用select
      .select_width {
        width: 120px;
      }
      //通用input
      // .input_width
      // {
      //   width: 230px;
      // }

      //学年
      .select_year {
        width: 160px;
        margin-right: 10px;
      }

      .search_item {
        display: inline-block;
        margin-right: 10px;
        text-align: left;
        color: #333;
        .el-button {
          margin-left: 0px;
          min-width: 72px;
          height: 36px;
          line-height: 34px;
          padding: 0 10px;

          span {
            display: inline-flex;
            align-items: center;
            padding: 0;
          }

          img {
            width: 16px;
            height: 16px;
            margin-right: 4px;
            vertical-align: middle;
            /* 使图标垂直居中 */
          }
        }
      }
    }

    .content_right {
      width: auto;
      height: 36px;
      line-height: 36px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      // .el-button
      // {
      //   height: 36px !important;
      //   line-height: 36px;
      //   padding: 0 10px;
      //   font-size: 14px !important;
      //   margin: 0 !important;
      // }

      .el-button {
        margin-left: 0px;

        height: 36px;
        line-height: 36px;
        padding: 0 10px;

        span {
          display: inline-flex;
          align-items: center;
          padding: 0;
        }

        img {
          width: 16px;
          height: 16px;
          margin-right: 4px;
          vertical-align: middle;
          /* 使图标垂直居中 */
        }
      }

      .el-button--default {
        color: #666;
        font-weight: 400;
      }

      .button_border {
      }

      .add_button {
        border: 1px solid #2e64fa;
        background-color: #fff;
        color: #2e64fa;
      }

      .add_button:hover {
        color: #2e64fa;
        background-color: #c0d1fe;
      }

      .el_bttton_72 {
        width: 72px;
        height: 36px;
      }
    }
  }

  // .is-active
  // {
  //   color:#2e64fa !important;
  // }

  .el-tabs__item {
    font-size: 16px;
    font-weight: 600;
    color: #666;
  }
  .el-tabs__header {
    margin: 0 0 16px;
  }

  .el-tabs__nav-wrap::after {
    height: 1px !important;
  }
}

.dialog_warning {
  .el-dialog__header {
    // background-color: red !important;
    background-image: url("../assets/icon/warning_icon.png");
    background-size: 20px 20px;
    background-position: 20px 50%;
    background-repeat: no-repeat;
    text-indent: 50px !important;
  }

  .center_align {
    text-align: center;
  }

  .warning_footer {
    width: calc(100% - 30px);
    margin: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    // background-color: red;
    height: 100%;
  }
}

//弹窗公共样式
.page_dialog {
  border-radius: 8px;
  padding: 0 !important;
  //饿了么样式覆盖
  .el-dialog {
    padding: 0;
  }
  .el-dialog__headerbtn:focus .el-dialog__close,
  .el-dialog__headerbtn:hover .el-dialog__close {
    color: #999;
  }
  //头部样式覆盖
  .el-dialog__header {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-indent: 20px;
    border-bottom: 1px solid #f5f7fa;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0 !important;
    text-align: left;
    background: #f5f7fa;
    .el-dialog__title {
      font-weight: 600;
      font-size: 16px;
      color: #333;
    }
    button:focus,
    button:focus-visible {
      outline: none;
    }
    .el-dialog__headerbtn {
      color: #909399;
      font-size: 22px;
    }
  }

  //饿了么内容样式覆盖
  .el-dialog__body {
    font-weight: 400;
    font-size: 16px;
    color: #666666;
    padding: 20px;
    width: 100%;
    margin: auto;
    // min-height: 99px;
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;
    .el-date-editor.el-input,
    .el-date-editor.el-input__wrapper {
      width: 140px;
    }
    .el-form .el-form-item:last-child {
      margin-bottom: 0;
    }
    .el-form-item__label {
      font-size: 16px;
      color: #666666;
    }
  }

  .max_height_540 {
    margin: 20px 0;
    max-height: 540px;
    overflow-y: auto;
  }

  .max_height_650 {
    overflow-y: auto;
    /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
    @media (max-height: 768px) {
      max-height: 480px;
    }

    /* 中等屏幕笔记本的样式(14-15英寸) 常见分辨率：1600x900, 1920x1080*/
    @media (min-height: 767px) {
      max-height: 650px;
    }
  }

  .padding_20 {
    // width: calc(100% - 40px);
    padding: 20px 20px;
  }

  //个人中心 年级科目弹窗
  .content_course_tree {
    width: calc(100% - 40px);
    margin: auto;
    display: flex;
    justify-content: space-around;
    .tree_item {
      width: 30%;
      height: auto;

      .header_title {
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 30px;
      }

      .item_content {
        margin-top: 10px;
        width: 100%;
        height: 350px;
        border-radius: 6px;
        border: 1px solid #eeeeee;
        .check_all {
          width: 100%;
          margin: auto;
          height: 34px;
          border-bottom: 1px solid #eeeeee;
          line-height: 34px;
          text-indent: 4px;
        }

        .check_content {
          width: 100%;
          height: 350px;
          overflow: auto;

          .el-checkbox-group {
            margin-top: 10px;
            .el-checkbox {
              width: 80%;
              text-indent: 6px;
              margin-bottom: 10px;
            }
          }
        }

        .page_tree {
          border: none !important;
          margin-top: 0px !important;
        }

        .select_item {
          width: calc(100% - 40px);
          margin: auto;
          line-height: 20px;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          align-items: center;

          i {
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
    }
  }

  //通用内容区域
  .dialog_center {
    // width: calc(100% - 40px);
    margin: auto;

    .center_header {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      .header_left {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .left_name {
          width: 120px;
          font-size: 16px;
          color: #666;
          font-weight: 400;
        }
        .el-input__inner {
          width: 216px;
          height: 36px;
          line-height: 36px;
        }
      }

      .left_center {
        align-items: center;
      }

      .left_count {
        color: #333;
        font-size: 16px;
        font-weight: 600;
      }

      .header_right {
        display: flex;
        justify-content: flex-end;
      }
    }

    //弹窗 check选择框公共样式
    .select_check_content {
      width: calc(100% - 40px);
      margin: auto;
      height: auto;
      // align-items: center;

      .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;
        height: auto;
      }
      .el-checkbox {
        width: 20%;
        box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
        // padding: 5px; /* 可选：添加一些内边距 */
        margin-bottom: 23px;
        margin-right: 0px;

        font-size: 16px;
        color: #333333;
      }

      .el-checkbox__label {
        font-weight: 400;
        font-size: 16px;
        color: #333;
      }
    }

    .center_message_title {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
      margin-bottom: 10px;
    }

    .center_message_content {
      width: calc(100% - 40px);
      margin: auto;

      display: flex;
      justify-content: space-between;

      .content_lable {
        width: 70px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 16px;
        text-align: right;

        padding-top: 20px;
      }

      .content_radio {
        width: calc(100% - 70px);

        padding-top: 20px;

        .radio_item {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: flex-start;
          margin-bottom: 15px;

          .item_radio {
          }

          .item_right {
            .right_title {
              font-weight: 500;
              font-size: 16px;
              color: #666666;
            }

            .right_message {
              font-weight: 400;
              font-size: 14px;
              color: #999999;
              margin-top: 10px;

              .input_number {
                width: 80px;
                height: 32px;
                margin-left: 5px;
                margin-right: 5px;
              }
            }
          }
        }
      }
    }

    .center_message_tishi {
      width: calc(100% - 40px);

      margin: auto;
      margin-top: 20px;
      font-weight: 500;
      font-size: 16px;
      line-height: 25px;
      color: #333333;
    }

    //导入文件 提示信息
    .import_message {
      font-size: 12px;
      color: #999;
      line-height: 20px;
      margin-top: 10px;
    }

    .center_message_input {
      width: calc(100% - 40px);
      margin: auto;
      margin-top: 20px;
      margin-bottom: 20px;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .el-icon-view {
        margin-top: 4px;
        cursor: pointer;
      }

      .el-input--small .el-input__icon {
        height: 36px;
        line-height: 36px;
      }

      .el-input--small .el-input__inner {
        width: 244px;
        height: 36px;
        line-height: 36px;
      }

      .el-input__suffix {
        top: 8px;
      }
    }

    .center_message {
      font-size: 16px;
      color: #333;
      padding: 15px 0;

      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      text-align: left;
    }

    .score_input {
      width: 74px !important;
      margin-left: 8px;

      .el-input__inner {
        width: 48px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 14px;
        padding: 0 5px;
        text-align: center;
      }
    }

    .select_width_160 {
      .el-input {
        width: 160px !important;
      }
      .el-input__inner {
        width: 160px !important;
      }
    }

    .span_center {
      margin-left: 5px;
      margin-right: 5px;
    }
    .input_91 {
      width: 91px !important;

      .el-input__inner {
        width: 91px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 14px;
        padding: 0 0px;
        text-align: center;
      }
    }

    .list_content {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 16px;

      .select_item {
        width: auto;
        display: flex;
        justify-content: flex-start;

        .el-checkbox__label {
          padding: 0 0 0 5px;
        }
        .el-input {
          width: 120px;
          margin-left: 5px;
        }
        .el-input__inner {
          width: 120px;
          padding: 0 0 0 8px !important;
        }
      }
    }

    .tab_item {
      // min-width:80px;
      padding: 0 10px;
      height: 34px;
      border: 1px solid #dcdfe6;
      line-height: 34px;
      text-align: center;
      border-radius: 4px;
      font-size: 14px;
      color: #666;
      margin-right: 10px;
      cursor: pointer;
    }

    .tab_active {
      background-color: #2e64fa;
      color: #fff;
    }

    .table_info {
      font-weight: 600;
      font-size: 16px;
      color: #303133;
      line-height: 24px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
    }

    .el-form {
      width: 100% !important;

      .el-form-item {
        margin-bottom: 20px;
      }
    }
    //弹窗 el-from-item__content
    .el-form-item__content {
      display: flex;
      align-items: center;
      font-size: 16px;
      min-height: 40px;

      .upload_file_name {
        margin-left: 10px;
        line-height: 20px;
      }

      .el-input.is-disabled .el-input__inner {
        color: #333;
      }
      .score {
        padding-left: 5px;
      }

      // 下拉选择框 中间箭头上下居中
      .el-select .el-input .el-select__caret {
        height: 36px;
      }

      // 下拉选择框 中间箭头上下居中
      .el-input__icon {
        line-height: 36px;
      }

      .el-button--small {
        height: 36px !important;
        font-size: 14px;
      }

      .el-input {
        width: 240px;
      }

      .check_select {
        .el-input {
          width: 87px !important;
        }
      }

      .el-input__inner {
        width: 240px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
      }

      .el-input--mini {
        width: 240px;
      }

      .el-input-number {
        width: 240px;
      }

      // 数字输入框
      .el-input-number--mini {
        line-height: 34px;
      }

      // 开关
      .el-switch {
        height: 40px;
      }

      .radio_box {
        width: 180px;
        height: 40px;
      }

      .radio_number_horizontal {
        background-image: url("../assets/icon/question_number_horizontal.png");
        background-size: 78px 30px;
        background-repeat: no-repeat;
        background-position: 60px 50%;
      }

      .radio_number_vertical {
        background-image: url("../assets/icon/question_number_vertical.png");
        background-size: 40px 40px;
        background-repeat: no-repeat;
        background-position: 60px 50%;
      }

      .radio_answer_horizontal {
        background-image: url("../assets/icon/answer_direction_horizontal.png");
        background-size: 78px 30px;
        background-repeat: no-repeat;
        background-position: 60px 50%;
      }

      .radio_answer_vertical {
        background-image: url("../assets/icon/answer_direction_vertical.png");
        background-size: 40px 40px;
        background-repeat: no-repeat;
        background-position: 60px 50%;
      }

      // 组
      .el-radio-group {
        font-size: 14px;
        min-height: 40px;
        line-height: 40px;

        // display: flex;
        // align-items: center;
        .radio_question_number_horizontal {
          width: auto;
          height: 40px;
          line-height: 40px;
          // background-image: url('../assets/icon/question_number_horizontal.png');
          // background-size: 100% 100%;
          // background-repeat: no-repeat;
          // background-position: 0 0;

          img {
            width: 78px;
            height: 30px;
          }
        }
        .el-radio__label {
          padding-left: 5px !important;
          font-size: 16px !important;
        }

        .el-radio {
          margin-right: 20px !important;
        }
      }

      .group_item {
        line-height: 40px;
      }

      .el-input-group__append {
        width: 26px !important;
      }

      .el-checkbox__label {
        line-height: 36px;
      }
    }

    .el-form-item {
      // margin-bottom: 15px !important;
      min-height: 40px;
      .el-form-item__label {
        font-size: 16px !important;
        padding: 0 !important;
        color: #666666;
      }

      .el-checkbox__label {
        color: #666;
        font-size: 16px;
      }
    }

    .label_left {
      margin-left: 20px;
    }

    .dialog_search {
      width: 100%;
      height: auto;

      .search_title_info {
        font-weight: 600;
        font-size: 14px;
        color: #303133;

        span {
          margin-right: 20px;
        }
      }

      .search_input {
        .el-input-group {
          width: auto !important;
        }
      }

      .search_filter {
        margin-top: 8px;
        margin-bottom: 8px;
      }
    }

    .el-table__header,
    .el-table__body,
    .el-table__foote {
      width: 100%;
    }
    .el_table {
      box-shadow: 1px 1px 1px #e4e7ed;
      border-radius: 4px;
    }
    .default_pass {
      font-size: 12px;
      color: #666;
    }
  }
  //饿了么底部按钮样式覆盖
  .el-dialog__footer {
    padding: 0 20px;
    text-align: right;
    border-top: 1px solid #e6e6e6;
    height: 64px;
    line-height: 64px;
    border-radius: 0 0 8px 8px;
    .dialog_footer {
      padding: 0 !important;
      margin: auto;
      height: 64px;
      display: flex;
      justify-content: space-between;
      .footer_left {
        width: auto;
        height: 64px;
      }
      .footer_right {
        width: auto;
        height: 64px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    .el-button {
      width: 68px;
      height: 36px;
      padding: 0 !important;
      font-size: 14px;
    }
    //饿了么按钮样式覆盖
    .el-button--primary {
      width: 68px;
      height: 36px;
      margin-left: 15px;
    }
    .el-button--default {
      width: 68px;
      height: 36px;
    }
    // 自定义特殊按钮样式
    .no_save_button {
      width: 82px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;
    }
    .save_button {
      width: 68px;
      height: 36px;
      margin-left: 20px;
    }
    .cancel_button {
      width: 68px;
      height: 36px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;
      margin-left: 20px;
    }
  }
  //消息提醒弹窗
  .el-message-box__header {
    padding: 0 !important;
    height: 48px;
    line-height: 48px;
    background-color: #f5f7fa;
    .el-message-box__title {
      height: 48px;
      line-height: 48px;
      font-weight: 500;
      font-size: 16px;
      color: #333;
      text-indent: 50px;
      background-image: url("../assets/icon/warning_icon.png");
      background-size: 20px 20px;
      background-position: 20px 50%;
      background-repeat: no-repeat;
    }
    .el-message-box__headerbtn {
      width: 36px;
      height: 36px;
      margin-top: 6px;
      margin-right: 10px;
      background-image: url("../assets/icon/close_line.png");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: 24px 24px;
      .el-message-box__close {
        display: none;
      }
    }
  }
  .el-message-box__content {
    min-height: 55px;
    padding: 0px 0px !important;
    display: flex;
    justify-content: left;
    align-items: center;
    .el-message-box__message {
      padding: 20px 10px 20px 20px !important;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      line-height: 25px;
      max-height: 250px;
      overflow-y: auto;
      white-space: normal;
      word-break: break-all;
    }
  }
  .el-message-box__status {
    display: none !important;
  }
  .el-message-box__btns {
    padding: 13px 20px 13px 20px;
    border-top: 1px solid #e4e7ed;
    .el-button {
      width: 68px;
      height: 36px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;
      font-size: 14px;
    }
  }
  .el-upload-list {
    display: none;
  }
}

//预览弹窗公共样式 背景透明
.preview_dialog {
   background: transparent !important;
  //饿了么样式覆盖
  .el-dialog__header {
    display: none;
  }

  .el-dialog {
    border-radius: 0;
  }

  //饿了么内容样式覆盖
  .el-dialog__body {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    margin: auto;
    // min-height: 99px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  .preview_tool {
    position: absolute;
    width: 446px;
    left: calc(50% - 223px);
    height: 66px;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #E4E7ED;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: space-around;
    bottom: 12px;
    padding-left: 10px;
    padding-right: 10px;

    .tool_item {
      width: auto;
      height: 46px;

      color: #666666;
      cursor: pointer;
      text-align: center;

      .item_icon {
        font-weight: 400;
        font-size: 25px;
        color: #666666;

        .iconfont {
          font-size: 24px !important;
        }
      }

      .item_title {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }

    .tool_item:hover {
      .item_icon {
        font-weight: 400;
        font-size: 25px;
        color: #2E64FA;

        .iconfont {
          font-size: 24px !important;
        }
      }

      .item_title {
        font-weight: 400;
        font-size: 14px;
        color: #2E64FA;
      }
    }
  }

  .preview_image {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    position: relative;

    img {
      height: 100%;
      object-fit: contain;
    }

    //关闭图片按钮
    .preview_close {
      position: absolute;
      width: 48px;
      height: 48px;
      display: flex;
      border-radius: 50%;
      top: 0;
      right: 60px;
      // background-color: #000000;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      i {
        font-size: 30px;
        color: #fff;

      }
    }

    //上一个
    .preview_last {
      position: absolute;
      width: 48px;
      height: 48px;
      top: 50%;
      display: flex;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      left: 60px;

      i {
        font-size: 30px;
        color: #fff;

      }
    }

    //下一个
    .preview_next {
      position: absolute;
      width: 48px;
      height: 48px;
      top: 50%;

      right: 60px;
      display: flex;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4);
      text-align: center;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      i {
        font-size: 30px;
        color: #fff;

      }
    }

    .button_diasble {
      i {
        color: gray !important;
      }
    }


  }
}

//选择模板公关样式
.page_container {
  background: #fff;
  border-radius: 10px;
  width: 100%;
  margin: auto;
  height: 100%;
  background-color: #ffffff;

  // padding: 40px;

  .container_content {
    width: calc(100% - 60px);
    margin: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 20px;
    position: relative;

    .select_school {
      position: absolute;
      left: 30px;
      top: 30px;
    }

    .content_list {
      width: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
    }
  }

  .container_item {
    width: calc(33% - 20px); //计算方式  总宽度 减去两边的间距 40+40  再减去中间2个间隔的20  再除以3  100% - 120
    max-width: 358px;
    height: auto;

    /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
    @media (max-width: 1366px) {
      margin-right: 40px;
    }

    /* 中等屏幕笔记本的样式(14-15英寸) 常见分辨率：1600x900, 1920x1080*/
    @media (min-width: 1367px) and (max-width: 1920px) {
      margin-right: 100px;
    }

    /* 大屏幕笔记本的样式(17-20英寸) 常见分辨率：2560x1440*/
    @media screen and (min-width: 1920px) {
      margin-right: 100px;
    }

    /* 高分辨率设备的样式 */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-resolution: 192dpi),
    only screen and (min-resolution: 2dppx) {
      margin-right: 120px;
    }

    .item_title {
      font-weight: 500;
      font-size: 16px;
      color: #909399;
      width: 100%;
      line-height: 32px;
      margin-bottom: 10px;
    }

    .item_card {
      width: 100%;
      min-width: 300px;
      height: auto;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #e9e9e9;
      cursor: pointer;

      .card_title {
        width: 100%;
        height: 54px;
        line-height: 54px;

        font-weight: 500;
        font-size: 16px;
        color: #303133;
        text-align: left;
        text-indent: 16px;
      }

      .card_center {
        width: calc(100% - 32px);
        margin: auto;
        // padding-top: 17.22%; /* 16:9 的宽高比，即 9/16 * 100% */
        // padding-bottom: 17.23%;
        height: calc((100% - 32px) * 0.3445);
        background-repeat: no-repeat;
        /* 设置背景图片不重复 */
        background-size: 100% auto;
        /* 设置背景图片的尺寸为包含整个元素 */
        background-position: center center;
        /* 设置背景图片居中显示 */
        position: relative;

        .span_name {
          position: absolute;
          left: 6px;
          top: 30px;
          margin-left: 5px;
          font-size: 41px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.6);
        }

        img {
          width: 100%;
          height: auto;
        }
      }

      .card_desc {
        width: calc(100% - 32px);
        margin: auto;
        margin-top: 10px;
        height: 50px;

        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 14px;
        text-align: left;
        line-height: 18px;
        // display: block;
        // overflow: hidden; /* 隐藏超出容器的内容 */
        // white-space: nowrap; /* 保持文本在一行内 单行显示 */
        // text-overflow: ellipsis; /* 超出部分显示省略号 */
      }

      .card_button {
        width: calc(100% - 32px);
        margin: auto;
        text-align: right;
        margin-bottom: 16px;

        .el-button {
          padding: 0 !important;
          width: 88px;
          height: 36px;
          line-height: 36px;
          margin-left: 16px;
        }
      }
    }
  }

  .container_item:last-child {
    margin-right: 0px;
  }

  .container_item:hover {
    .item_title {
      color: #2e64fa;
    }

    .item_card {
      border: 1px solid #2e64fa;
      box-shadow: 0 0 20px #2e64fa;
    }
  }
}

//弹窗全屏
.page_full_dialog {
  // z-index: 2055 !important;
  //饿了么样式覆盖
  .el-dialog__header {
    display: none;
  }

  .el-dialog {
    border-radius: 0;
    background-color: #f0f4fb;
  }

  //饿了么内容样式覆盖
  .el-dialog__body {
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding: 0 !important;
    width: 100%;
    height: 100%;
    margin: auto;
    // min-height: 99px;
    // display: flex;
    // justify-content: flex-start;
    // align-items: center;
  }

  .header_container {
    width: 100%;
    height: 65px;
    background-color: #2e64fa;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

    .header_back {
      position: absolute;
      left: 20px;
      top: 15px;
      width: 80px;
      height: 34px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;

      line-height: 34px;

      font-weight: 500;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
      text-align: center;

      i {
        margin-right: 5px;
        font-size: 14px;
      }
    }

    .header_title {
      font-size: 24px;
      color: #fff;
      font-weight: 600;
      width: auto;
    }
  }

  .content_main {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;

    .content_preview {
      width: calc(100% - 180px);
      height: calc(100% - 20px);
      margin-top: 10px;
      margin-left: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
      box-sizing: border-box;
      overflow-y: auto;
      background-color: #f0f4fb;
      font-family: 宋体, SimSun, STSong;
      padding-right: 16px;
      // background-color: red;

      // justify-content: center;

      //答题卡预览打印区域
      .preview_print {
        .make_card_content_main {
          border: none !important;
        }

        .answer_sheet_content {
          border: none !important;
        }
      }
    }

    .content_right {
      width: 180px;
      height: 100%;

      .right_back {
        width: 140px;
        height: 42px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        background-color: #fff;
        line-height: 42px;
        margin-left: 20px;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;

        i {
          margin-right: 10px;
        }
      }

      .right_print {
        width: 140px;
        height: 42px;
        line-height: 42px;
        border: 1px solid #2e64fa;
        border-radius: 4px;
        background-color: #2e64fa;
        margin-left: 20px;
        margin-top: 20px;

        color: #fff;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }

      .right_use {
        width: 140px;
        height: 42px;
        border: 1px solid #2e64fa;
        border-radius: 4px;
        background-color: #2e64fa;
        margin-left: 20px;
        margin-top: 20px;

        color: #fff;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }

      .right_download {
        width: 140px;
        height: 42px;
        line-height: 42px;
        border: 1px solid #2e64fa;
        border-radius: 4px;
        background-color: transparent;

        margin-left: 20px;
        margin-top: 20px;

        color: #2e64fa;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }

      .card_message {
        position: absolute;
        right: 10px;
        top: 220px;
        color: red;
        line-height: 25px;
        width: 160px;
      }
    }
  }
}
//顶部header 菜单样式
.page_header {
  width: 100%;
  height: 65px;
  background: #2e64fa;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .back_button {
    width: 68px;
    height: 36px;
    position: absolute;
    left: 50px;
    border-radius: 4px;
    border: 2px solid #fff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }

  .header_title {
    width: calc(100% - 200px);
    margin: auto;
    font-weight: 700;
    font-size: 24px;
    color: #fff;
    text-align: center;

    .header_title_tip {
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      margin-left: 10px;
    }
  }
}
//考试模块右侧表格公共样式
.area_table {
  width: 100%;

  .el-table__body {
    width: 100% !important;
  }

  //暂无数据
  .el-table__empty-block {
    // min-height: 140px;
    // background-image: url("../assets/bg/table_no_data.png");
    // background-size: 64px 72px;
    // background-position: 50% 50%;
    // background-repeat: no-repeat;

    // .el-table__empty-text {
    //   display: none;
    // }
  }

  // .el-table__body-wrapper {
  //   overflow: hidden !important;

  // }

  // /* 鼠标悬停时显示滚动条 */
  // .el-table__body-wrapper:hover {
  //   overflow: auto !important;
  // }

  .el-table {
    border-radius: 5px;
    border: 1px solid #e9e9e9;
    border-bottom: 0px solid #e9e9e9;
  }

  .el-table .cell {
    padding: 0 !important;
    font-size: 14px;
    height: 42px;
    line-height: 42px;
  }

  .el-table tr th.el-table__cell {
    background: #f0f2f5;
    height: 42px;
  }

  .el-table th.el-table__cell > .cell {
    padding: 0 !important;
  }

  .el-table .el-table__cell {
    padding: 0 5px !important;

    line-height: 42px;
    border-right: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
  }

  // 确保每行最后一个单元格无右边框
  .el-table .el-table__body .el-table__cell:last-child {
    border-right: 0 !important;
  }

  .el-table thead {
    color: #303133;
    font-weight: 600;
    font-size: 14px;
    height: 42px;
    padding: 0 !important;
  }

  .table_option_editor {
    color: #2e64fa;
    font-size: 14px;
    font-weight: 400;
  }

  .table_option_delete {
    color: #f56c6c;
    font-size: 14px;
    font-weight: 400;
  }

  // 列表行名称
  .table_row_name {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    display: block;
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    white-space: nowrap;
    /* 保持文本在一行内 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    cursor: pointer;
    padding-right: 5px;
  }

  //列表行设置
  .table_row_set {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .option_add {
      color: #f56c6c;
      font-size: 14px;
      font-weight: 400;
      cursor: pointer;
    }

    .option_disabled {
      font-weight: 400;
      font-size: 14px;
      color: #f56c6c;
    }
  }
}
.el-popover {
  border-radius: 4px;
}

//悬浮层公共样式  成绩单表头设置使用
.page_popover {
  width: 100%;
  height: auto;
  .popover_content {
    width: auto;
    height: calc(100% - 46px);
    .vertical_checkbox_group {
      width: auto;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      // overflow-y: auto;
      height: 300px;
      .el-checkbox {
        width: auto;
        // box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
        // padding: 5px 0px; /* 可选：添加一些内边距 */
        margin-bottom: 10px;
        // margin-right: 20px;
        font-weight: 400;
        font-size: 14px;
        color: #666;
      }
    }

    .el-checkbox__input.is-disabled + span.el-checkbox__label {
      color: #666;
    }
  }

  .popover_button {
    width: 100%;
    height: 36px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    .el-button {
      margin-left: 0px;
      min-width: 68px;
      height: 36px;

      padding: 0;

      font-weight: 500;
      font-size: 14px;
      color: #666666;
    }
    .el-button--primary {
      color: #ffffff;
    }
  }
}
.el-time-panel {
  width: 130px !important;
}
//抽屉弹窗公共样式
.page_drawer {
  //日期选择弹窗组件样式覆盖
  .el-date-picker {
    background-color: red;
    width: 200px !important;

    .el-picker-panel__body {
      width: 200px !important;
    }

    .el-time-panel {
      width: 130px !important;
    }
  }
  .el-drawer__header {
    display: none;
  }

  .drawer_content {
    width: 100%;

    .set_search_title {
      width: 100%;
      height: 56px;
      line-height: 56px;
      text-indent: 20px;

      font-weight: 600;
      font-size: 16px;
      color: #303133;
    }
  }

  .drawer_footer {
    width: 360px;
    position: fixed;
    bottom: 0;
    right: 0;
  }

  .drawer_title {
    font-size: 16px;
    color: #fff;

    width: 100%;
    height: 48px;
    line-height: 48px;
    text-indent: 20px;

    font-weight: 600;
    font-size: 16px;
    color: #303133;

    border-bottom: 1px solid #14191f25;
    border-radius: 0px 0px 0px 0px;

    // background-image: url("@/assets/markDetailScore/close_drawer.png");
    // background-repeat: no-repeat;
    // background-size: 24px 24px;
    // background-position: calc(100% - 20px) 50%;
    cursor: pointer;
  }

  .sel_item {
    width: calc(100% - 40px);
    margin: auto;
    margin-bottom: 16px;

    .selItem_title {
      line-height: 28px;
      font-weight: 400;
      font-size: 16px;
      color: #303133;
    }

    .selValItem_line {
      margin: 0 9px;
    }
  }

  .button_content {
    width: 100%;
    height: auto;

    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .drawer_button {
    width: calc(100% - 40px);
    margin: auto;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    height: 36px;
  }

  .end_content {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(25, 31, 37, 0.08);

    .end_button {
      width: calc(100% - 40px);
      height: 36px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f56c6c;

      font-weight: 500;
      font-size: 14px;
      color: #f56c6c;
    }
  }

  .w173 {
    width: 231px;
  }
}

/* 小屏幕笔记本的样式 常见分辨率：1366x768 */
@media (max-width: 1366px) {
  .exam_aside {
    width: 206px;
  }
}

/* 中等屏幕笔记本的样式(14-15英寸) 常见分辨率：1600x900, 1920x1080*/
@media (min-width: 1367px) and (max-width: 1920px) {
  .exam_aside {
    width: 15%;
  }
}

/* 大屏幕笔记本的样式(17-20英寸) 常见分辨率：2560x1440*/
@media screen and (min-width: 1920px) {
  .exam_aside {
    width: 19%;
  }
}

/* 高分辨率设备的样式 */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi),
  only screen and (min-resolution: 2dppx) {
}

// 应用滚动条样式到三个类下的 .el-table__body-wrapper
.page_table,
.dialog_table,
.area_table,
.right_table,
.card_table {
  .el-table__body-wrapper {
    // 滚动条样式修改
    /* 滚动条轨道区域样式 */
    &::-webkit-scrollbar {
      width: 8px;
      /* 设置滚动条宽度为8像素 */
      height: 8px;
      /* 设置滚动条高度为8像素 */
      background-color: transparent;
    }

    /* 滑块样式 */
    &::-webkit-scrollbar-thumb {
      background-color: #b8b8b8;
      /* 设置滑块颜色为深灰色 */
      border-radius: 4px;
      /* 设置滑块边角半径为4像素 */
      min-height: 60px; //设置手柄最小高度
    }

    /* 滚动条轨道内部空白区域样式 */
    &::-webkit-scrollbar-track {
      background-color: #f0f0f0;
      /* 设置轨道背景色为浅灰色 */
    }

    /* 滚动条两端按钮样式 */
    &::-webkit-scrollbar-button {
      display: none;
      /* 不显示按钮 */
    }

    /* 交叉点处的区域样式 */
    &::-webkit-scrollbar-corner {
      background-color: transparent;
      /* 设置交叉点处的背景色为透明 */
    }

    /* 调整大小手柄样式 */
    &::-webkit-resizer {
      display: none;
      /* 不显示调整大小手柄 */
    }
  }

  // 表格列表标题栏滚动条
  .el-table th.gutter {
    // display: none !important;
    width: 8px !important;
  }

  // 表格滚动条列宽
  .el-table colgroup col[name="gutter"] {
    // display: ;
    width: 8px;
  }
}

.el-message-box__btns {
  .el-button + .el-button {
    margin-left: 10px !important;
  }
  .el-button {
    &:hover {
      background: none;
      color: #606266;
    }
    &.active {
      background: none;
      color: #606266;
    }
    .el-button:focus-visible {
      background: inherit;
      border: none;
    }
    &.fouce {
      background: inherit;
      border: none;
    }
  }
  .el-button--primary {
    background: #2e64fa;
    &:hover {
      background: #2e64fa;
      color: #fff;
    }
    &.active {
      background: #2e64fa;
      color: #fff;
    }
  }
}
//列表行操作
.table_row_option {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;

  .move_icon {
    width: 36px;
    height: 36px;
    background-image: url("../assets/icon/move_icon_hover.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    cursor: move;
  }

  .sort_move {
    width: 36px;
    height: 36px;
    background-image: url("../assets/icon/sort_move.webp");
    background-size: 20px 21px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    cursor: move;
  }

  .editor_icon {
    width: 36px;
    height: 36px;
    background-image: url("../assets/icon/editor_icon_hover.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    cursor: pointer;
  }

  .delete_icon {
    width: 36px;
    height: 36px;
    background-image: url("../assets/icon/delete_icon.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 0% 50%;
    cursor: pointer;
  }

  .el_button_editor {
    width: 30px;
    height: 36px !important;
    line-height: 36px;

    font-size: 14px;
    color: #2e64fa;
    cursor: pointer;
  }

  .option_button_editor {
    width: auto;
    height: 36px !important;
    line-height: 36px;

    font-size: 14px;
    color: #2e64fa;
    cursor: pointer;
  }

  .editor_disable {
    color: #bbbbbb !important;
    cursor: not-allowed !important;
  }

  .el_button_delete {
    width: 30px;
    height: 36px !important;
    line-height: 36px;
    font-size: 14px;
    color: #f56c6c;
    cursor: pointer;
  }

  .button_editor {
    width: auto;
    height: 36px;
    line-height: 36px;
    margin-right: 5px;
    font-size: 14px;
    color: #2e64fa;
    cursor: pointer;
  }

  .button_delete {
    width: auto;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #f56c6c;
    cursor: pointer;
  }

  .option_delete {
    color: #f56c6c;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }

  .option_editor {
    color: #2e64fa;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
  }

  .option_add {
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    cursor: pointer;
  }
  .option_disabled {
    font-weight: 400;
    font-size: 14px;
    color: #c0c4cc;
  }
}

// 表格滚动条样式通用
.el-table__body-wrapper {
  // 滚动条样式修改
  /* 滚动条轨道区域样式 */
  &::-webkit-scrollbar {
    width: 10px;
    /* 设置滚动条宽度为8像素 */
    background-color: transparent;
  }

  /* 滑块样式 */
  &::-webkit-scrollbar-thumb {
    background-color: #b8b8b8;
    /* 设置滑块颜色为深灰色 */
    border-radius: 4px;
    /* 设置滑块边角半径为4像素 */
    min-height: 60px; //设置手柄最小高度
  }

  /* 滚动条轨道内部空白区域样式 */
  &::-webkit-scrollbar-track {
    background-color: #f0f0f0;
    /* 设置轨道背景色为浅灰色 */
  }

  /* 滚动条两端按钮样式 */
  &::-webkit-scrollbar-button {
    display: none;
    /* 不显示按钮 */
  }

  /* 交叉点处的区域样式 */
  &::-webkit-scrollbar-corner {
    background-color: transparent;
    /* 设置交叉点处的背景色为透明 */
  }

  /* 调整大小手柄样式 */
  &::-webkit-resizer {
    display: none;
    /* 不显示调整大小手柄 */
  }
}

// 表格列表标题栏滚动条
.el-table th.gutter {
  // display: none !important;
  width: 8px !important;
}

// 表格滚动条列宽
.el-table colgroup col[name="gutter"] {
  display: none;
  width: 8px;
}

// 使用element-ui按钮后的 公共按钮样式  导入 导出  其他等等可追加

.el_button {
  .el-button .is-disabled {
    background-color: #f5f7fa;
    border-color: #dcdfe6;
    color: #c0c4cc;
    cursor: not-allowed;
    background-color: red !important;
  }

  .ratio_input {
    height: 34px !important;
    line-height: 34px !important;
  }

  .el-button {
    min-width: 78px;
    width: auto;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10 !important;
    font-weight: 400;

    .icon_shuaxin {
      margin-right: 5px;
    }
  }

  //导出
  .export_btn {
    width: auto;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-indent: 10px;

    background-image: url("../assets/icon/exam_exports.png");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 12px 50%;
    cursor: pointer;
  }

  .export_btn:hover {
    color: #2e64fa;
    background-image: url("../assets/icon/exam_export.png");
  }

  //导入
  .import_btn {
    width: auto;
    height: 36px !important;
    line-height: 36px;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    margin-left: 10px;
    text-indent: 10px;
    background-image: url("../assets/icon/exam_imports.png");
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 12px 50%;
    cursor: pointer;
  }

  .import_btn:hover {
    color: #2e64fa;
    background-image: url("../assets/icon/exam_import.png");
  }

  //返回扫描
  .back_scan_button {
    width: 120px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-indent: 20px;

    background-image: url("../assets/icon/exam_back.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 17px 50%;
    cursor: pointer;
  }

  //刷新
  .refresh_btn {
    width: 68px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    line-height: 34px;
    padding: 0 !important;

    cursor: pointer;
  }

  //适合屏幕
  .fit_screen_btn {
    width: 96px;
    height: 36px;

    font-weight: 400;
    font-size: 14px;
    color: #666666;

    text-align: center;
    background-image: url("../assets/icon/fit_screen_default.png");
    background-size: 16px 16px;
    background-position: 8px 50%;
    background-repeat: no-repeat;
    text-indent: 20px;
    margin-left: 10px;
    margin-right: 0px;
  }

  // 删除
  .delete_btn {
    width: 76px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
  }

  .delete_btn_disable {
    width: 76px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #ffffff;
    border-color: #ebeef5;
  }

  // 编辑
  .editor_btn {
    width: 96px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
    margin-left: 20px;
  }

  //标记为正常
  .marke_normal_btn {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
  }

  //标记为正常 禁用
  .marke_normal_btn_disable {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #ffffff;
    border-color: #ebeef5;
  }

  //标记为异常
  .marke_anomaly_btn {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
  }

  //标记为正常 禁用
  .marke_anomaly_btn_disable {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #c0c4cc;
    cursor: not-allowed;
    background-image: none;
    background-color: #ffffff;
    border-color: #ebeef5;
  }

  // 标记为缺考
  .marke_miss_exam_btn {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
  }

  .marke_miss_exam_btn_gray {
    width: 90px;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #c0c4cc;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #ebeef5;
    cursor: pointer;
  }

  //重新切割
  .re_cut_btn_100 {
    width: 100%;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
  }

  //重新切割
  .re_cut_btn {
    width: calc(50% - 10px);
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
  }

  //灰色按钮
  .abnormal_other_btn {
    width: calc(50% - 10px);
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    text-align: center;
    border: 1px solid #e9e9e9;
    cursor: pointer;
  }

  //删除试卷
  .delete_paper_btn {
    width: calc(50% - 10px);
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
  }

  .delete_paper_btn:hover {
    background-color: #f56c6c30;
  }

  .delete_paper_btn_100 {
    width: calc(100% - 40px);
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
    margin: auto;
  }

  .delete_paper_btn_100:hover {
    background-color: #f56c6c30;
  }

  // 回收站
  .recycle_bin_btn {
    width: calc(100% - 40px);
    margin: auto;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #dcdfe6;
    text-align: center;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    margin-left: 20px;
  }

  //结束批阅
  .end_review {
    width: 96px;
    height: 36px;
    background: #f56c6c;
    border-radius: 4px 4px 4px 4px;
    border: 0px solid #f56c6c;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
  }

  //处理异常卷
  .review_abnormal {
    width: 110px !important;
    height: 36px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #f56c6c;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
  }

  .other_button_review {
    width: 68px;
    height: 36px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
  }

  //重新导入名单
  .other_btn {
    // width: 120px !important;
    width: auto;
    height: 36px !important;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #dcdfe6;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    padding: 0 10px !important;
  }

  //通用蓝色无背景编辑按钮
  .editor_item {
    width: auto;
    height: 36px !important;
    line-height: 36px;
    font-weight: 400;
    font-size: 14px;
    color: #2e64fa;
    text-align: center;
    border: 1px solid #2e64fa;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0px 10px;
    border-radius: 4px;
  }

  .editor_item:hover {
    background: rgba(46, 100, 250, 0.1);
    color: #2e64fa;
    border: 1px solid #2e64fa;
  }

  //通用灰色无背景按钮
  .normal_item {
    width: auto;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #666;
    text-align: center;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0px 10px;
  }

  .normal_item:hover {
    background: #dcdfe620;
    color: #333;
    border: 1px solid #dcdfe6;
  }

  // 通用红色无背景删除
  .delete_item {
    width: auto;
    // max-width: 78px;
    height: 36px !important;
    line-height: 36px;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0px 10px;
    border-radius: 4px;
  }

  .delete_item:hover {
    background: rgba(245, 108, 108, 0.1);
    color: #f56c6c;
    border: 1px solid #f56c6c;
  }
}

.pic_item_list {
  width: 100%;

  padding-top: 10px;
  // overflow-x: auto;
  // height: 160px;
  display: flex;
  justify-content: flex-start;

  .draggable_move {
    display: flex;

    span {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .pic_item_img_detail {
    width: 181px;
    height: auto;
    position: relative;
    margin-right: 10px;

    .pic_item_img_title {
      font-weight: 500;
      font-size: 14px;
      color: #303133;
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;

      .title_left {
        font-weight: 500;
        font-size: 14px;
        color: #303133;
      }

      .title_right {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }
    }

    .pic_item_img_content {
      width: 181px;
      height: 128px;

      // background-color: red;
      img {
        width: 100%;
        height: 100%;

        cursor: pointer;
        border-radius: 5px;
        object-fit: contain;
      }
    }

    .button_group {
      position: absolute;
      display: flex;
      display: none;
      width: 181px;
      height: 128px;
      z-index: 10;
      top: 20px;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
      align-items: center;
      justify-content: center;
      gap: 16px;

      .pic_button_view {
        width: 68px;
        height: 34px;
        text-align: center;
        line-height: 34px;

        cursor: pointer;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(220, 223, 230, 1);
        border-radius: 4px;
        color: #666666;

        text-indent: 15px;
        background-image: url("../assets/icon/pic_show_view.png");
        background-size: 16px 16px;
        background-position: 10px 50%;
        background-repeat: no-repeat;
        font-size: 14px;
      }

      .pic_button_delete {
        width: 68px;
        height: 34px;
        text-align: center;
        line-height: 34px;

        cursor: pointer;
        background-color: rgba(255, 255, 255, 1);
        border: 1px solid rgba(220, 223, 230, 1);
        border-radius: 4px;

        text-indent: 10px;
        background-image: url("../assets/icon/pic_show_delete.png");
        background-size: 16px 16px;
        background-position: 10px 50%;
        background-repeat: no-repeat;
        color: #f56c6c;
        font-size: 14px;
      }
    }
  }

  .pic_item_img_detail:hover .button_group {
    display: flex;
  }
}

// 42行高表格公共样式
.table_42 {
  width: 100%;
  padding-bottom: 10px;

  .el-table {
    width: 100%;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    border-radius: 4px;

    // 关键修改：确保内部单元格有右边框
    // 注意：Element UI 的 border 属性通常会自动处理，但如果被覆盖，需手动指定
    th.el-table__cell,
    td.el-table__cell {
      border-right: 1px solid #e9e9e9 !important; // 强制添加竖线颜色
    }

    // 如果不想让最后一列显示右边框（通常做法），可以加上这个
    // 如果希望所有列都有竖线，包括最后一列与表框之间，则注释掉下面这块
    th.el-table__cell:last-child,
    td.el-table__cell:last-child {
      border-right: none !important;
    }
  }

  .el-table--border .no-border {
    border-right: none !important; // 移除右边框
  }

  .el-table--border .no-border + .el-table__cell {
    border-left: none !important; // 移除左边框
  }

  .el-table .cell {
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .el-table .el-table__cell {
    padding: 0 !important;
    height: 42px;
  }

  .el-table tr th.el-table__cell {
    background-color: #f0f2f5 !important;
  }

  .el-table th.el-table__cell > .cell {
    padding: 0 !important;
  }

  .el-table thead {
    width: 100%;
    height: 42px !important;
    background-color: #f0f2f5 !important;

    font-weight: 500;
    font-size: 16px;
    color: #333;
  }

  .el-table .el-table__body tr {
    height: 42px;
    font-size: 14px;
  }

  .table_row_title {
    width: 100%;
    display: inline-block;
    // display: block;
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    white-space: nowrap;
    /* 保持文本在一行内 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    cursor: pointer;
  }

  .full_mark_input {
    width: 88px;
    margin: auto;
  }

  //表格内 通用输入框
  .input_width {
    width: calc(100% - 32px);
    margin: auto;
  }
}

//无数据显示
.no_content_data {
  min-height: 500px;
  background-image: url("../assets/bg/no_content_bg.png");
  background-repeat: no-repeat;
  background-size: 360px auto;
  background-position: 50% 30%;
  color: #999999;
  justify-content: center;
  display: flex;
  align-items: center;
}

//按钮公共样式
.ele_button {
  .btn_delete {
    width: auto;
    font-weight: 500;
    font-size: 14px;
    color: #f56c6c;
    cursor: pointer;
  }

  .btn_editor {
    width: auto;
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    cursor: pointer;
  }

  .btn_disabled {
    width: auto;
    font-weight: 500;
    font-size: 14px;
    color: #c0c4cc;
    cursor: not-allowed;
  }
}

//表格内操作按钮
.table_row_button {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;

  .el-icon-loading {
    color: #2e64fa;
  }
}

// 异常详情页样式
.abnormal_detail {
  width: 100%;
  height: 100%;
  background-color: #f0f4fb;
  .detail_header {
    width: 100%;
    height: 80px;
    background-color: #fff;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .go_back {
      width: 120px;
      height: 36px;
      background-color: #fff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;

      text-align: center;
      line-height: 36px;
      font-size: 14px;
      font-weight: 500;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      cursor: pointer;
    }

    //未扫描
    .scan_button_unscanned {
      width: 210px;
      height: 100%;
      height: 56px;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid #e4e7ed;
    }

    .scan_button_list {
      width: auto;
      height: 100%;
      margin-left: 40px;
      display: flex;
      align-items: center;

      .button_item {
        min-width: 230px;
        height: 56px;
        margin-right: 20px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #e4e7ed;

        background-size: 40px 40px;
        background-position: 12px 50%;
        background-repeat: no-repeat;

        font-weight: 400;
        font-size: 20px;
        color: #999999;
        line-height: 56px;
        text-indent: 64px;
        cursor: pointer;
        white-space: nowrap; // 添加这一行防止换行
      }

      .item_no_scan {
        background-image: url("../assets/icon/no_scan_icon.png");
        border: 1px solid #2e64fa;
        color: #2e64fa;
      }

      .item_no_scan_active {
        background-color: rgba(46, 100, 250, 0.1);
        background-image: url("../assets/icon/no_scan_icon_hover.png");
        color: #2e64fa;
        box-shadow: 4px 2px 10px #2e64fa;
        border: 1px solid #2e64fa;
        font-weight: 600;
      }

      .item_miss_exam {
        background-image: url("../assets/icon/miss_exam.png");
        border: 1px solid #fb9f34;
        color: #fb9f34;
      }

      .item_miss_exam_active {
        background-color: rgba(251, 159, 52, 0.1);
        background-image: url("../assets/icon/miss_exam_hover.png");
        color: #fb9f34;
        box-shadow: 4px 2px 10px #fb9f34;
        border: 1px solid #fb9f34;
        font-weight: 600;
      }

      .item_abnormal {
        background-image: url("../assets/icon/abnormal_icon.png");
        border: 1px solid #f56c6c;
        color: #f56c6c;
      }

      .item_abnormal_active {
        background-color: rgba(245, 108, 108, 0.1);
        background-image: url("../assets/icon/abnormal_icon_hover.png");
        color: #f56c6c;
        border: 1px solid #f56c6c;
        box-shadow: 4px 2px 10px #f56c6c;
        font-weight: 600;
      }

      .item_sucess_upload {
        background-image: url("../assets/icon/sucess_upload.png");
        border: 1px solid #2bc644;
        color: #2bc644;
      }

      .item_sucess_upload_active {
        background-color: rgba(43, 198, 68, 0.1);
        background-image: url("../assets/icon/sucess_upload_hover.png");
        border: 1px solid #2bc644;
        box-shadow: 4px 2px 10px #2bc644;
        font-weight: 600;
      }
    }
  }

  .detail_content {
    width: calc(100% - 40px);
    margin: auto;
    height: calc(100vh - 80px);
    background-color: transparent;
    margin: auto;

    .content_main {
      width: 100%;
      height: calc(100% - 40px);
      padding: 20px 0;
      display: flex;
      justify-content: space-between;

      .scan_content_left {
        width: 200px;
        height: 100%;
        background-color: #ffffff;
        border-radius: 10px;

        .left_tree {
          width: calc(100% - 40px);
          height: calc(100% - 96px);
          margin: auto;

          .kc_list {
            height: auto;
            text-align: center;

            .kc_list_item {
              width: 100%;
              height: 36px;
              line-height: 36px;
              border-radius: 4px 4px 4px 4px;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              cursor: pointer;
            }

            .kc_list_item:hover {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              background: #f0f2f5;
              border-radius: 4px 4px 4px 4px;
            }

            .select_kc {
              font-weight: 400;
              font-size: 14px;
              color: #2e64fa;
              background: #eaf0ff;
              border-radius: 4px 4px 4px 4px;
            }
          }
        }
      }

      .scan_content_right {
        width: calc(100% - 200px - 20px);
        height: 100%;
        background-color: #ffffff;
        border-radius: 10px;

        .right_search {
          width: calc(100% - 40px);
          margin: auto;
          height: 76px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .search_input {
            width: auto;
          }

          .search_button {
            width: auto;
            display: flex;
            justify-content: flex-end;
            // gap: 10px;
          }
        }

        .right_table {
          width: calc(100% - 40px);
          margin: auto;
        }
      }

      .scan_content_rights {
        width: calc(100% - 200px - 20px);
        height: 100%;

        border-radius: 10px;
        display: flex;
        justify-content: space-between;

        .rights_center {
          width: calc(100% - 380px);
          height: 100%;

          .main_container {
            width: 100%;
            height: 100%;

            .no_paper_url {
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .center_image {
            width: 100%;
            height: calc(100% - 180px);
            margin-bottom: 20px;
          }

          .center_images {
            width: 100%;
            height: calc(100% - 100px);
            margin-bottom: 20px;
          }

          .center_search {
            width: 100%;
            height: 60px;
            background: #ffffff;
            border-radius: 10px 10px 10px 10px;
            padding: 0 16px;
            box-sizing: border-box;
          }

          .center_list {
            width: 100%;
            height: calc(100% - 120px);
            overflow-y: auto;
          }
        }

        .rights_right {
          width: 360px;
          height: 100%;
          background-color: #ffffff;
          border-radius: 10px;
          position: relative;
        }

        .right_title {
          width: 100%;
          height: 50px;
          line-height: 60px;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          display: flex;
          justify-content: space-between;
        }

        .right_button {
          width: 100%;
          height: 76px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          display: flex;
          justify-content: center;
          align-items: center;

          .bottom_button_item {
            width: calc(100% - 40px);
            margin: auto;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            height: 36px;
          }
        }
      }

      .abnormal_left {
        width: calc(100% - 360px - 20px);
        height: 100%;
        background-color: transparent;

        .left_nav {
          width: 100%;
          height: 60px;
          border-radius: 10px;
          background-color: #ffffff;
          display: flex;
          justify-content: space-between;
          align-items: center;

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

            .nav_item {
              width: 111px;
              height: 36px;
              line-height: 36px;
              text-align: center;
              background: #ffffff;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #dcdfe6;

              font-weight: 400;
              font-size: 16px;
              color: #666666;
              margin-left: 20px;
              cursor: pointer;
              position: relative;

              .nav_number {
                position: absolute;
                right: -10px;
                top: -10px;
                width: 25px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                border-radius: 50%;
                background: #f56c6c;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
                white-space: nowrap; // 添加这一行防止换行
              }
            }

            .item_active {
              background: #2e64fa;
              border-radius: 4px 4px 4px 4px;
              font-weight: 500;
              font-size: 16px;
              color: #ffffff;
              border: 1px solid #2e64fa;
            }
          }

          .nav_button {
            display: flex;
            justify-content: flex-end;
            margin-right: 20px;

            .el-button {
              margin-left: 20px;
            }

            .is_draw_data {
              width: 80px;
              height: 34px;
              font-size: 14px;
              color: #333333;
              border: 1px solid #dcdfe6;
              line-height: 34px;
              text-align: center;
              border-radius: 4px;
              cursor: pointer;
            }

            .is_draw_active {
              width: 80px;
              height: 34px;
              font-size: 14px;
              color: #333333;
              border: 1px solid #dcdfe6;
              line-height: 34px;
              text-align: center;
              border-radius: 4px;
              cursor: pointer;
              background-color: #2e64fa;
              color: #fff;
            }

            .el-input__inner {
              width: 100%;
              height: 36px !important;
            }
          }
        }

        .left_image {
          width: 100%;
          height: calc(100% - 60px - 80px - 10px);

          .img_canvas_content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            height: 100%;
            // background-color: red;
          }

          //定位异常区
          .position_abnormal_content {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;

            //标准模板区域
            .template_content {
              width: calc(50% - 20px);
              height: 100%;
            }

            .paper_content {
              width: calc(50% - 20px);
              height: 100%;
            }

            .content_header {
              width: 100%;
              height: 44px;
              line-height: 44px;
              display: flex;
              justify-content: space-between;

              .header_left {
                width: auto;
                color: #666;
                font-size: 16px;
                line-height: 44px;
              }

              .header_right {
                width: auto;
                display: flex;
                justify-content: flex-end;
                align-content: center;
                align-items: center;
                gap: 20px;

                .page_num_item {
                  width: 40px;
                  height: 24px;
                  background: #fff;
                  text-align: center;
                  line-height: 24px;
                  font-size: 14px;
                  color: #666;
                  border-radius: 4px;
                  cursor: pointer;
                }

                .page_num_active {
                  width: 40px;
                  height: 24px;
                  background: #2e64fa;
                  text-align: center;
                  line-height: 24px;
                  font-size: 14px;
                  color: #fff;
                  border-radius: 4px;
                  cursor: pointer;
                }

                i {
                  font-size: 30px;
                  color: #666;
                  cursor: pointer;
                }

                i:hover {
                  color: #2e64fa;
                }
              }
            }

            .content_canvas {
              width: 100%;
              height: calc(100% - 54px);
              background-color: #e6eaf2;
              border-radius: 10px;
            }
          }

          .img_canvas_center {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: calc(100% - 10px);

            position: relative;
            overflow: hidden;
            /* 超出部分隐藏 */
            background-color: #e6eaf2;
            // background-color: red;
            border-radius: 10px;

            .main_container {
              width: calc(100% - 20px);

              height: calc(100% - 10px);
              position: relative;
              background: transparent;
              user-select: none;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              // border:1px solid red;

              .paper_template {
                position: absolute;
              }
            }
          }

          .mark_list_center {
            width: 100%;
            height: calc(100% - 10px);

            .mark_list {
              width: 100%;
              height: 100%;
              overflow-y: auto;
            }
          }

          //标准模板区域
          .img_template {
            width: 50%;
            height: 100%;
            // background-color: #08C2B3;

            .template_name {
              width: 100%;
              font-weight: 500;
              font-size: 16px;
              color: #666666;
              line-height: 25px;
              margin-top: 15px;
              text-align: center;
            }

            .template_container {
              width: 100%;
              margin: auto;
              height: calc(100% - 40px);
              border-radius: 4px;
              position: relative;
              overflow: hidden;
              // background-color: red;
            }
          }

          //切飞试卷区域
          .img_paper {
            width: 50%;
            height: 100%;

            .paper_name {
              width: 100%;
              font-weight: 500;
              font-size: 16px;
              color: #666666;
              line-height: 25px;
              margin-top: 15px;
              text-align: center;
            }

            .paper_container {
              width: 100%;
              margin: auto;
              height: calc(100% - 40px);
              border-radius: 4px;
              position: relative;
              overflow: hidden;
            }
          }
        }

        .left_image_height_1 {
          height: calc(100% - 60px - 80px - 10px);
        }

        .left_image_height_2 {
          height: calc(100% - 60px);
        }
      }

      .abnormal_right {
        width: 360px;
        border-radius: 10px;
        height: 100%;
        background-color: #ffffff;
        position: relative;

        .height_132 {
          height: 132px;
        }

        .height_76 {
          height: 76px;
        }

        .right_bottom_button {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 100%;

          z-index: 999;

          .bottom_button_item {
            width: 100%;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            height: 56px;
          }

          .bottom_button_two {
            width: calc(100% - 40px);
            margin: auto;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
          }
        }

        .right_title {
          width: 100%;
          height: 50px;
          line-height: 60px;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          display: flex;
          justify-content: space-between;
        }

        .right_search {
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .left_bottom {
        width: 100%;
        height: 80px;
        display: flex;
        justify-content: space-between;

        .draggable_width_100 {
          width: 100%;
        }

        .draggable_width_auto {
          width: calc(100% - 256px - 20px);
        }

        .bottom_draggable {
          background: rgba(9, 9, 9, 0.1);
          border-radius: 10px 10px 10px 10px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 20px;

          .bottom_img_item {
            width: auto;
            height: 70px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            object-fit: cover; //保持图片比例;
            max-width: 120px; //设置图片最大宽度

            .bottom_img_item_number {
              position: absolute;
              left: 45%;
              top: 40%;
              font-weight: 400;
              font-size: 24px;
              color: #666666;
              line-height: 22px;
            }
          }

          .img_item_cur {
            background: rgba(46, 100, 250, 0.2);
            border-radius: 4px 4px 4px 4px;
            border: 2px solid #2e64fa;
          }

          .move_container {
            width: 100%;

            background-color: red;

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            width: 100%;
            height: 80px;
            background-color: rgba(9, 9, 9, 0.1);
            border-radius: 10px;
          }
        }

        .bottom_tool {
          width: 256px;
          height: 80px;

          background: #ffffff;
          border-radius: 10px 10px 10px 10px;
          border: 1px solid #e4e7ed;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .tool_btn_item {
            width: auto;
            height: auto;

            cursor: pointer;

            // 逆时针旋转
            .counterclockwise_icon {
              width: 100%;
              height: 30px;
              background-image: url("../assets/icon/counterclockwise_icon.png");
              background-position: 50% 50%;
              background-size: 22px 20px;
              background-repeat: no-repeat;
            }

            // 顺时针旋转
            .clockwise_icon {
              width: 100%;
              height: 30px;
              background-image: url("../assets/icon/clockwise_icon.png");
              background-position: 50% 50%;
              background-size: 22px 20px;
              background-repeat: no-repeat;
            }

            // 放大
            .enlarge_icon {
              width: 100%;
              height: 30px;
              background-image: url("../assets/icon/enlarge_icon.png");
              background-position: 50% 50%;
              background-size: 22px 20px;
              background-repeat: no-repeat;
            }

            // 缩小
            .shrink_icon {
              width: 100%;
              height: 30px;
              background-image: url("../assets/icon/shrink_icon.png");
              background-position: 50% 50%;
              background-size: 22px 20px;
              background-repeat: no-repeat;
            }

            .btn_text {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-align: center;
            }
          }
        }
      }
    }

    .left_question {
      width: calc(100% - 40px);
      margin: auto;
      height: calc(100% - 80px);
      overflow-y: auto;
    }

    .question_item {
      width: 100%;
      height: 30px;
      line-height: 30px;

      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666666;
      padding: 0px 16px;
      box-sizing: border-box;
      cursor: pointer;
      margin-bottom: 3px;
    }

    .question_item:hover {
      background: #f0f2f5;
      border-radius: 4px 4px 4px 4px;
    }

    .question_item_cur {
      background: rgba(46, 100, 250, 0.1);
      border-radius: 4px 4px 4px 4px;
      color: #2e64fa;
    }
  }
}

// 右侧表格
.right_table {
  width: calc(100% - 40px);
  margin: auto;

  .el-table {
    border-radius: 4px;
  }

  .el-table .el-table__header {
    height: 40px;
  }

  //表格顶部标题栏
  .el-table tr th.el-table__cell {
    background-color: #f0f2f5;
    font-size: 16px;
    color: #303133;
    font-weight: 600;
  }

  .el-table__body tr {
    cursor: pointer;
  }

  //行的悬浮样式设置
  .el-table__body tr:hover > td {
    // background-color: transparent !important;
  }

  //行的悬浮样式设置
  .el-table__body .el-table .selected_row tr:hover > td {
    background-color: transparent !important;
  }

  //选中行的背景色和字体颜色
  .el-table .selected_row {
    // background-color: #d5e0fe;
    /* 选中行的背景色 */
    color: #2e64fa;
  }

  .el-table .cell {
    padding: 0 !important;
  }

  .el-table .el-table__cell {
    height: 40px;
    padding: 0 !important;
  }

  .table_row_title {
    width: 100%;
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    white-space: nowrap;
    /* 保持文本在一行内 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    cursor: pointer;
  }

  .table_row_value {
    width: 100%;
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    white-space: nowrap;
    /* 保持文本在一行内 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
    cursor: pointer;
  }

  .row_scan_status {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    gap: 5px;

    .no_scan_btn {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      text-align: center;
    }

    .yes_scan_btn {
      width: 54px;
      height: 24px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #2bc644;
      font-weight: 400;
      font-size: 14px;
      color: #2bc644;
      line-height: 24px;
    }

    //重号
    .repeat_scan_btn {
      width: 54px;
      height: 24px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f56c6c;
      font-weight: 400;
      font-size: 14px;
      color: #f56c6c;
      line-height: 24px;
    }

    //灰色查看
    .disable_view_btn {
      width: auto;
      height: 24px;
      border-radius: 4px 4px 4px 4px;
      // border: 1px solid #2e64fa;
      font-weight: 400;
      font-size: 14px;
      color: #c0c4cc;
      line-height: 24px;
    }

    //认领
    .claim_scan_btn {
      width: auto;
      height: 24px;
      border-radius: 4px 4px 4px 4px;
      // border: 1px solid #2e64fa;
      font-weight: 400;
      font-size: 14px;
      color: #2e64fa;
      line-height: 24px;
    }
  }
}

//客观题答案处理表格
.answer_table {
  width: calc(100% - 40px);
  margin: auto;

  .el-table {
    border-radius: 4px;
  }

  .el-table .el-table__header {
    height: 36px;
  }

  //表格顶部标题栏
  .el-table tr th.el-table__cell {
    background-color: #f0f2f5;
    font-size: 16px;
    color: #303133;
    font-weight: 600;
  }

  .el-table .el-table__cell {
    height: 42px;
    padding: 0 !important;
  }

  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }

  .input_error {
    .el-input__inner {
      color: red;
    }
  }

  // .el-table--striped
  //   .el-table__body
  //   tr.el-table__row--striped
  //   td.el-table__cell {
  //   background-color: transparent;
  // }

  .table_row_answer_choose {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 12px;

    .answer_item {
      width: 36px;
      height: 20px;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      border: 1px solid #909399;
      line-height: 18px;
      text-align: center;
      cursor: pointer;
    }

    .choose {
      border: 1px solid #2e64fa;
      background: #2e64fa;
      color: #fff;
    }

    .input_error {
      border: 1px solid red;
      border-radius: 4px;
    }

    .el-input {
      height: 32px;
      line-height: 32px;
    }

    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .score_count_append {
      width: 44px;
      height: 20px;
      line-height: 20px;
      color: #c0c4cc;
    }
  }

  .answer_cur_row_bg {
    background-color: rgba(245, 108, 108, 0.2);

    .el-table--border .el-table__cell:first-child .cell {
      background-color: rgba(245, 108, 108, 0.2);
    }
  }

  //成绩纠错 表格 题目名称样式
  .table_row_question_name {
    font-size: 14px;
    color: #666;
  }

  //成绩纠错 表格 修改后样式
  .table_row_question_update {
    font-size: 14px;
    color: #f56c6c;
  }

  //选中行的背景色和字体颜色
  .el-table .selected_row {
    background-color: #f56c6c20 !important;
    /* 选中行的背景色 */
    color: #f56c6c;
    /* 选中行的文字颜色 */
  }
}
// 成绩查询
.page_report_main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .page_filter {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 10px;
    .filters_group {
      .group_item {
        margin-bottom: 0;
        gap: 10px;
        &:nth-child(1) {
          margin-top: 0;
        }
        .group_title {
          width: auto;
          margin-right: 10px;
        }
        .list_item {
          padding-left: 10px;
          padding-right: 10px;
          border-radius: 4px;
        }
      }
    }
  }
  .report_content {
    margin-top: 10px;
    width: 100%;
    flex: 1;
    overflow: auto;
  }
}
//分析报告统计浮窗公共样式
.tooltip_content {
  // max-width: 500px;//设置浮窗的最大宽度
  max-height: 300px; //设置浮窗的最大高度
  overflow: auto; //宽高超出的内容滚动
  padding: 6px 10px;
  width: auto;
  //浮窗里的标题
  .tooltip_title {
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    text-align: left;
  }

  //浮窗里的学生姓名
  .tooltip_student {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 20px;
    display: flex;
    // align-items: center;
    margin-bottom: 5px;
    justify-content: flex-start;
    width: 100%;
    // white-space: nowrap; /* 防止文本换行 使用后整个就一行了*/

    .tooltip_student_name {
      width: calc(100% - 15px);
      // margin-left: 20px;
      line-height: 18px;
      text-align: left;
      //  white-space: nowrap; /* 防止文本换行 使用后整个就一行了*/
    }
  }

  .tooltip_zw {
    width: 10px;
    height: auto;
  }

  //其他样式可在下面追加
  //矩形图标
  .tooltip_rect_icon {
    width: 10px;
    height: 10px;
    background: #848bdc;
    margin-right: 5px;
    display: block;
    margin-top: 5px;
  }

  //横线图标
  .tooltip_line_icon {
    width: 16px;
    height: 2px;
    background: #848bdc;
    margin-right: 5px;
    display: block;
    margin-top: 8px;
  }
}
//图表外层公共样式
.echart_content {
  position: relative;
  width: 100%;
  margin: auto;
  min-height: 360px;
  height: auto;
  // overflow-x: auto;
  .is_show_all {
    position: absolute;
    top: 0;
    left: 5px;
  }

  .chart_box {
    width: 100%;
    height: 400px;
  }

  .echart_type {
    width: 200px;
    height: auto;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 7;
  }
}

//弹窗悬浮层样式更改
.echart_content::-webkit-scrollbar {
  width: 100%;
  height: 8px;
  /* 设置滚动条宽度为8像素 */
  background-color: transparent;
}

/* 滑块样式 */
.echart_content::-webkit-scrollbar-thumb {
  background-color: #b8b8b8;
  /* 设置滑块颜色为深灰色 */
  border-radius: 4px;
  /* 设置滑块边角半径为4像素 */
  min-height: 40px; //设置手柄最小高度
}

/* 滚动条轨道内部空白区域样式 */
.echart_content::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  /* 设置轨道背景色为浅灰色 */
}

/* 滚动条两端按钮样式 */
.echart_content::-webkit-scrollbar-button {
  display: none;
  /* 不显示按钮 */
}

/* 交叉点处的区域样式 */
.echart_content::-webkit-scrollbar-corner {
  background-color: transparent;
  /* 设置交叉点处的背景色为透明 */
}

/* 调整大小手柄样式 */
.echart_content::-webkit-resizer {
  display: none;
  /* 不显示调整大小手柄 */
}
//所有可点击打开的表格行样式
.table_row_blue {
  color: #2e64fa;
  cursor: pointer;
}