bigDataStudent/src/styles/common.scss

@use "./normalize.scss";
@use "./report.scss"; //分析报告相关的公共样式

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

//页面最高层容器 统一最底层背景色 #F0F4FB
.container_layout {
  width: 100%;
  height: 100%;
  background-color: #f0f4fb;

  .layout_header {
    width: 100%;
    height: 60px;
  }

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


  //页脚区域
  .layout_footer {
    width: 100%;
    height: 60px;
  }


  //内容区布局
  .user_main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;

    .user_main_left {
      width: 170px;
      height: 100%;
      display: flex;
      justify-content: center;
    }

    .user_main_right {
      width: calc(100% - 180px);
      height: 100%;
      // background-color: #fff;
      // padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      overflow-y: auto;

      

  
    }
  }

  //屏幕小于1400px
  @media screen and (max-width: 1400px) {
    .user_main {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      padding: 10px;
      box-sizing: border-box;

      .user_main_left {
        width: 150px;
        height: 100%;
        display: flex;
        justify-content: center;
      }

      .user_main_right {
        width: calc(100% - 160px);
        height: 100%;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        overflow-y: auto;
      }
    }
  }


}


.target_item
{
    width: 100%;
    height:auto;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
}



.page_target
{
  width: 100%;
  height: 100%;
  overflow:hidden;


  .target_module
  {
    width: 100%;
    height:auto;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
  }
}





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

.layoutMain {
  width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  min-height: 100%;
  margin-left: 0;
  margin-right: 0;
}

#app > div {
  height: 100%;
}

html,
body {
  overflow: hidden;
  font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC,
    Hiragino Sans GB, noto sans, Helvetica Neue, Helvetica,
    Arial, sans-serif;
}

.el-popup-parent--hidden {
  padding-right: 0px !important;
}

.LoginItem .login-form .el-input__prefix {
  .el-icon-user:before,
  .el-icon-lock:before,
  .el-icon-arrow-left:before {
    font-size: 16px !important;
  }
}

.LoginItem .el-select,
.LoginItem .el-input,
.LoginItem .el-input__inner,
.emailNoLogin .el-input,
.emailNoLogin .el-input__inner {
  height: 53px !important;
}

.el-table .caret-wrapper {
  height: 34px;
  width: 16px;
}

.el-input-group__append {
  width: 36px !important;
  height: 100%;
  padding: 0 !important;
  text-align: center;
}

// .el-input-group__append button {
//   padding: 0 !important;
// }


//隐藏滚动条样式
.hide_scrollbar
{
  // 隐藏整个滚动条轨道区域
  &::-webkit-scrollbar {
    display: none;
  }

  // 禁用 IE 和 Edge 浏览器的滚动条
  -ms-overflow-style: none;

  // 禁用 Firefox 滚动条
  scrollbar-width: none;
}



//公共导航菜单样式
.nav_menu
{
  width: calc(100% - 40px);
  border-radius: 10px;
  margin: auto;
  margin-top: 20px;

  .menu_one_item
  {
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
    font-size: 16px;
    color:#666;
    font-weight: 400;
    margin-bottom: 8px;
    padding-left: 0 !important;
    i
    {
      margin-left: 11px;
      margin-right: 8px;
      width: 16px;
      height: 16px;
      color:#666;
      font-size: 18px;
    }
    span
    {
      font-size: 16px;
    }
  }

  .menu_one_item:hover
  {
    i
    {
      margin-left: 11px;
      margin-right: 8px;
      width: 16px;
      height: 16px;
      color:#2e64fa;
      font-size: 18px;
    }
    span
    {
      color:#2e64fa;
      font-size: 16px;
    }
  }
  .menu_one_title
  {
  }

    .el-submenu .el-menu-item 
    {
      min-width: 100px;
      width: 130px;
      border-radius: 6px;
      padding-left: 39px !important;

    }
    .el-menu
    {
      border: none;
      background-color: transparent;
    }

    .el-menu-item 
    {
      font-size: 14px;
      font-weight: 400;
      width: 130px;
      height: 40px;
      color: #666666;
      display: inline-flex;
      align-items: center;
      border-radius: 6px;
      margin-bottom: 8px !important;

      
    }

    .el-menu-item:hover {
      color: #2e64fa;
      i{
        color:#2e64fa !important;
      }
    }
    .is-active
    {
      color:#2e64fa;
      span
      {
        color:#2e64fa;
      }
      i{
        color:#2e64fa !important;
      }
    }

    .el-submenu > div .el-submenu__icon-arrow {
      font-weight: 600;
      font-size: 14px;
      right: -12px;
    }

    .el-submenu__title 
    {
      height: 40px;
      line-height: 40px;
      border-radius: 6px;
      font-size: 16px;
      color:#666;
      font-weight: 400;
      padding-left: 0px !important;
      margin-bottom: 8px;
      i
      {
        margin-left: 11px;
        margin-right: 8px;
        width: 16px;
        height: 16px;
        color:#666;
        font-size: 18px;
      }
    }

    .el-submenu__title:hover
    {
      background-color: transparent !important;
      color:#2e64fa !important;
      i
      {
        color:#2e64fa !important;
      
      }
    }

    .el-menu-item.is-active 
    {
      background: #2e64fa;
      color: #fff;
      font-weight: 500px;
      font-size: 14px;

      i
      {
        color:#fff !important;
      }
      span
      {
        color:#fff !important;
      }
    }
    .el-menu-item.is-active:hover 
    {
      background: #2e64fa;
      color: #fff;
      font-weight: 500px;
      font-size: 14px;
      i
      {
        color:#fff !important;
      }
    }

}
//顶部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;
    }
  }
}


// 全局筛选下拉列表icon颜色调整
.el-select .el-input .el-select__caret
{
  color:#999999;
}
// 全局滚动条样式修改
/* 滚动条轨道区域样式 */
::-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;
  }
}

.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;

    .el-icon-caret-right {
      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;
  }
}

@media screen and (max-width: 1400px) {
  .layoutMain,
  .headerBox {
    width: 100%;
  }

  // .layoutMain,.headerBox{
  //   width:1260px;
  // }
}

@media screen and (min-width: 1401px) {

  .layoutMain
  {
    min-width: 1400px;
    overflow-x: auto;
  }
  .layoutMain,
  .headerBox {
    width: 100%;
    
  
  }
}

.layoutCon {
  flex: 1;
  overflow: hidden;
}

//ckeditor  reset css
.ck-powered-by-balloon {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-size: 14px;
  color: #303133;
  -webkit-font-smoothing: antialiased;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

//extend
.fs12 {
  font-size: 12px;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs24 {
  font-size: 24px;
}

.fs30 {
  font-size: 30px;
}

.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.lh18 {
  line-height: 18px;
}

.lh22 {
  line-height: 22px;
}

.lh24 {
  line-height: 24px;
}

.lh28 {
  line-height: 28px;
}

.lh30 {
  line-height: 30px;
}

.lh46 {
  line-height: 46px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt30 {
  margin-top: 30px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.p0 {
  padding: 0;
}

.p20 {
  padding: 20px;
}

.pl8 {
  padding-left: 8px;
}

.fbRegular {
  font-weight: normal;
}

.fb {
  font-weight: bold;
}

.fwMedium {
  font-weight: 500;
}

.fbd {
  font-weight: 700;
}

.vSpace16 {
  margin: 0 auto;
  height: 16px;
}

.colorBtnRed {
  color: #f56c6c;
}

// / 最多俩行多出...
.ellipsis2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word;
  text-align: justify;
}
.page_jg_10 {
  width: 100%;
  height: 10px;
}
//通用间隔
.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__body tr:hover > td {
    background-color: #EAF0FF !important; // 蓝色系悬浮背景
  }
  //表格竖着的边框线样式
  th.el-table__cell {
    border-right: 1px solid #e9e9e9;
  }

  th.el-table__cell:nth-last-child(2) {
    border-right: none; // 去掉最后一个单元格的右侧边框  最右边还有个滚动条的 所以要去掉倒数第二个
  }

  .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell
  {
    border-bottom: 1px solid #e9e9e9;
  }

  .el-table {
    border-radius: 8px;
    border: 1px solid #e9e9e9;
    border-right: none;
    border-bottom: 0px solid #e9e9e9;
    .el-table__body-wrapper {
      table {
        tr {
          td {
            border-right: 1px solid #e9e9e9;
          }

          td:last-child,
          th:last-child {
            border-right: 0px solid green;
          }
        }
      }
    }
    .el-table__empty-block {
      // background-color: red;
      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;
  }
  .el-loading-spinner i
  {
    font-size: 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 {
    border-radius: 8px;
  }

  //标题栏背景色
  .el-table tr th.el-table__cell {
    // background-color: #F0F2F5;
    background-color: #f4f6f8 !important;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    // padding-left: 8px;
  }
  // 表格标题行背景
  .el-table tr th.el-table__cell .cell 
  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  //  表格内容行背景
  .el-table .cell {
    padding: 0 5px !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // color:#666;
  }

  .el-table thead {
    color: #333 !important;
    font-weight: 500;
    font-size: 14px;
    height: 52px;
    .is-left
    {
      padding-left: 10px;  //靠左的标题加10边距
    }
  }

  .table_badge
  {
    .el-badge__content
    {
      z-index: 999;
    }
  }

  
  

  

  .el-table .el-table__cell {
    padding: 0;
    height: 52px;
    color:#666;
  }

  // 列表行名称
  .page_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;
    padding-left: 5px;
  }

  //表格扫描列表状态
  .table_row_scan_state {
    display: flex;
    justify-content: center;
    align-items: center;

    // 未扫描
    .state_no_scan {
      width: 5px;
      height: 5px;
      background-color: #2E64FA;
      border-radius: 50%;
      margin-right: 3px;
    }

    // 已上传
    .state_success_upload {
      width: 5px;
      height: 5px;
      background-color: #2BC644;
      border-radius: 50%;
      margin-right: 3px;
    }

    // 缺考
    .state_miss_exam {
      width: 5px;
      height: 5px;
      background-color: #FB9F34; 
      border-radius: 50%;
      margin-right: 3px;
    }
  }

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

    display: flex;
    align-items: center;
    justify-content: center;
    .content_item
    {
      width: 90px;
      height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #CCCCCC;
      text-align: center;
      line-height: 34px;
      background-color: #f3f3f3;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  //表格 标签样式层
  .tag_content 
  {

    text-align: center;
    display: flex;
    justify-content:center;
    flex-wrap: wrap;
    align-items: center;
    // background-color: red;
    padding:8px;

    gap: 8px;
    .content_teacher
    {
      min-width: 90px;
      height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #2E64FA ;
      text-align: center;
      line-height: 34px;
      background: rgba(46,100,250,0.1);
      border-radius: 4px;
      .content_teacher_item {
        display: flex;
        justify-content:space-between;
        align-items: center;
        padding:0 8px;
      }
      i
      {
        cursor: pointer;
        margin-left: 10px;
      }
      i:hover
      {
        color:red;
      }
    }
    .content_teacher:last-child
    {
      margin-bottom: 0;
    }
    .content_item
    {
      width: 90px;
      height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #CCCCCC;
      text-align: center;
      line-height: 34px;
      background-color: #f3f3f3;
      border-radius: 4px;
      cursor: pointer;
    }
    .content_text
    {
      width: 90px;
      height: 34px;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      text-align: center;
      line-height: 34px;
      background-color: #f3f3f3;
      border-radius: 4px;
      cursor: pointer;
    }
    img
    {
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
  }

  //表格 教学班样式
  .tag_teacher_content
  {
    display: flex;
    justify-content:space-between;
   
    align-items: center;
    // background-color: green;
    img
    {
      width: 12px;
      height: 12px;
      cursor: pointer;
    }
    .content_title
    {
      width: 80px;
      padding-left: 5px;
      display: flex;
      align-items: center;
      //内容超出加省略号
      overflow: hidden;
      text-overflow: ellipsis;  
      white-space: nowrap;
    }
    .content_value
    {
      width: calc(100% - 80px);
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 5px;
      padding: 5px;

      .content_teacher
      {
        min-width: 90px;
        max-width: 100px;
        height: 34px;
        font-weight: 400;
        font-size: 14px;
        color: #2E64FA ;
        text-align: center;
        line-height: 34px;
        background: rgba(46,100,250,0.1);
        border-radius: 4px;
        .content_teacher_item {
          display: flex;
          justify-content:space-between;
          align-items: center;
          padding:0 8px;
        }
        i
        {
          cursor: pointer;
          margin-left: 10px;
        }
       
        
      }
      .content_teacher:last-child
      {
        margin-bottom: 0;
      }
      .content_item
      {
        width: 90px;
        height: 34px;
        font-weight: 400;
        font-size: 14px;
        color: #CCCCCC;
        text-align: center;
        line-height: 34px;
        background-color: #f3f3f3;
        border-radius: 4px;
        cursor: pointer;
      }

      .content_text
      {
        width: 90px;
        height: 34px;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        text-align: center;
        line-height: 34px;
        background-color: #f3f3f3;
        border-radius: 4px;
        cursor: pointer;
      }

      .content_no_data
      {
        width: 90px;
        height: 34px;
        font-weight: 400;
        font-size: 14px;

        text-align: center;
        line-height: 34px;

        border-radius: 4px;
        cursor: pointer;
      }
      
    }

   

  }

  .table_header
  {
    width: calc(100% - 20px);
    margin: auto;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      .group_name
      {
          width: calc(100% - 20px);
          height: 32px !important;
          background-color: #ffffff;
          border-radius: 4px 4px 4px 4px;
          // border:1px solid #E4E7ED;
          margin-right: 2px;
      }
      .el-input__inner
      {
          padding: 0px 5px !important;
          height: 32px !important;
          text-align: center;
      }

      .el-icon-circle-close
      {
        cursor: pointer;
      }
  }

  .table_input
  {
    width: calc(100% - 20px);
    margin: auto;
    .el-input__inner
    {
        padding: 0px 5px !important;
        height: 36px !important;
        text-align: center;
    }
  }
  

  .add_icon {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 20px;
      color:black;
      display: inline-block;
      background-color: rgba(255,255,255,1);
      cursor: pointer;
  }
  .add_icon_disable {
      width: 20px;
      height: 20px;
      border-radius: 100%;
      text-align: center;
      line-height: 20px;
      color:#eeeeee;
      display: inline-block;
      background-color: gray;
      cursor: not-allowed;
  }
  
  //表格内容样式 居中
  .table_row_content
  {
    // span
    // {
    //   margin-right: 10px;
    // }
    width: calc(100% - 10px);
    margin: auto;

    //单行
    
  }

  //表格扫描列表答案
  .table_row_answer {
    width: 100%;
    cursor: pointer;

    display: block;
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    white-space: nowrap;
    /* 保持文本在一行内 单行显示 */
    text-overflow: ellipsis;

    /* 超出部分显示省略号 */
    span {
      margin-left: 2px;
    }
  }

  //系统设置输入框
  .rank_input {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    .el-input__inner {
      padding: 0px 0px;
      text-align: center;
    }
    .input_number {
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      color:#333;

      .el-input__inner {
        width: 64px;
        text-align: center;
      }
    }
    .input_symbol {
      width: 100px;
    }

    .input_text {
      padding: 0 5px;
    }

    .input_numbers
    {
      width: 159px;
      .el-input__inner
      {
        width: 159px;
        padding: 0px 5px !important;
        height: 36px !important;
        text-align: center;
      }
    }
  }

  .rate_input {
    position: relative;
    font-size: 16px;
    color:#333333;
    font-weight: 400;
    .el-select
    {

      .el-input__inner {
        padding: 0px 15px;
        text-align: left;
        // padding-bottom: 5px;
      }
    }

    .el-input__inner {
      padding: 0px 10px;
      text-align: center;
    }
    .error_message {
      position: absolute;
      bottom: 0px;
      right: 20%;
      color: red;
      font-size: 12px;
    }

    .input_error {
      .el-input__inner {
        border: 1px solid red;
      }
    }

    .symbol_rate
    {
      margin-left: 5px;
    }
  }

  .input_name {
    .el-input__inner {
      text-align: left;
    }
  }
}

.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;
    }
  }
}

//42行高
.table_row_42
{
  .el-table thead {
    color: #333 !important;
    font-weight: 500;
    font-size: 14px;
    height: 42px !important;
  }

  

  .el-table .el-table__cell {
    padding: 0;
    height: 42px !important;
  }
}
//状态
.table_row_status {
  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%;
  }
}

.table_exam_state
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  img {
    vertical-align: middle;
    margin-right: 4px; // 图片和文字之间添加一点间距
  }
}



//考试列表页面样式
.page_exam_list {
  width: 100%;
  height: calc(100% - 150px);
  //我的考试列表页
  .list_card {
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #ebeef5;

    .card_head {
      padding: 10px;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgba(46, 100, 250, 0.03);

      // border: 1px solid #DCDFE6;
      // border-bottom: 0px solid #DCDFE6;
      .exam_type {
        width: 46px;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background: #2e64fa;
        color: #fff;
        border-radius: 5px;
        font-size: 16px;
      }

      .head_info {
        width: calc(100% - 56px);

        .info_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 25px;
          line-height: 25px;

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

          .title_span {
            font-weight: 600;
            font-size: 18px;
            color: #666;
            line-height: 23px;
            text-align: left;
            font-style: normal;
            text-transform: none;
          }
          .title_Level
          {
            width: 20px;
            height: 20px;
            background-color:#F56C6C20;
            color:#F56C6C;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            border-radius: 4px;
          }
          .title_score
          {
            width: 32px;
            height: 20px;
            background-color:#2BC64420;
            color:#2BC644;
            font-size: 12px;
            text-align: center;
            line-height: 20px;
            border-radius: 4px;
          }

          .title_button {
            font-weight: 400;
            font-size: 16px;
            color: #2e64fa;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-left: 20px;
          }

          .title_icon {
            width: 50px;
            height: 100%;
            float: right;
            text-align: right;
          }
        }

        .info_other {
          display: flex;
          justify-content: space-between;
          height: 20px;
          line-height: 20px;

          .other_message {
            font-size: 14px;
            color: #909399;

            font-weight: 500;

            span {
              margin-right: 16px;
            }

            .span_tooltip {
              cursor: pointer;
            }

            .span_score {
              font-weight: 500;
              font-size: 14px;
              // color: #f56c6c; //天天改来该去的
              margin-right: 0;
            }
          }

          .other_button {
            background-attachment: red;

            .el-button--text {
              padding: 0 !important;
              font-size: 14px;
            }

            .editor_btn {
              color: #2e64fa;
            }

            .delete_btn {
              color: #f56c6c;
            }
          }
        }
      }
    }

    .card_table {
      // width:calc(100% - 2px);
      margin: auto;
      border-top: 1px solid #ebeef5;

      th.el-table__cell {
        border-right: 1px solid #ebeef5;
      }

      th.el-table__cell:nth-last-child(2) {
        border-right: none; // 去掉最后一个单元格的右侧边框  最右边还有个滚动条的 所以要去掉倒数第二个
      }

      .el-table {
        // border: none !important; // 移除表格边框
        // border-bottom: none !important; // 移除表格底部边框
        border-radius: 6px;

        .el-table__body-wrapper {
          // border: none !important; // 移除表格主体边框
          table {
            tr {
              td {
                border-right: 1px solid #ebeef5;
              }

              td:last-child,
              th:last-child {
                border-right: 0px solid green;
              }
            }
          }
        }
      }

      .el-table .cell {
        padding: 0 5px !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: transparent !important;
      }

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

      .el-table thead {
        width: 100%;
        height: 42px !important;
        background-color: #f0f2f5 !important;
        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;
        padding-left: 5px;
        padding-right: 3px;
      }

      //异常数据
      .table_row_error
      {
        color:#F56C6C;
      }

      //进度显示
      .table_row_progress 
      {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: 42px;
        align-items: center;

        .el-progress-bar__innerText
        {
          display: none !important;
        }
        .progress_percentage 
        {
          width: 15%;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .progress_bar 
        {
          width: 65%;

          .el-progress
            {
              width: auto;
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              .el-progress-bar__innerText
              {
                display: none;
              }
            }
            .el-progress-bar__inner
            {
              border-radius: 4px !important;
            }
            .el-progress-bar__inner
            {
              // left: -1px !important;
            }

            .el-progress-bar__outer
            {
              background-color: transparent !important;
              border:1px solid #2E64FA;
              // border-left: none;
              height: 8px !important;
              border-radius: 4px !important;
            }
        }

        .progress_bar_error
        {
          width: 65%;
          .el-progress
            {
              width: auto;
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              .el-progress-bar__innerText
              {
                display: none;
              }
            }
            .el-progress-bar__inner
            {
              border-radius: 3px !important;
            }
            .el-progress-bar__inner
            {
              // left: -1px !important;
            }

            .el-progress-bar__outer
            {
              background-color: transparent !important;
              border:1px solid #F56C6C;
              // border-left: none;
              height: 8px !important;
              border-radius: 10px !important;
            }
        }
        .progress_state 
        {
          width: 20%;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          .span_number 
          {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-left: 10px;
          }

          i
          {
            color: #2E64FA;
            font-size: 20px;
          }
        }

        
      }

      .table_row_exam {
        text-align: center;

        font-size: 14px;
      }

      .table_row_state {
        width: 100%;
        height: 42px;
        line-height: 42px;
        text-indent: 20px;
        // background-image: url('../assets/icon/exam_state_icon_muban.png');
        background-size: 16px 16px;
        background-position: 5px 50%;
        background-repeat: no-repeat;
      }

      .exam_state_item {
        width: 100%;
        height: 42px;
        line-height: 42px;
      }

      //各个状态  模板中
      .exam_state_1 {
        background-image: url("../assets/icon/exam_state_icon_muban.png");

        color: #ff5d5e;
      }

      //扫描中
      .exam_state_2 {
        background-image: url("../assets/icon/exam_state_icon_saomiao.png");

        color: #ffbe4e;
      }

      //阅卷中
      .exam_state_3 {
        background-image: url("../assets/icon/exam_state_icon_yuejuan.png");

        color: #5f8cfe;
      }

      //成绩中
      .exam_state_4 {
        background-image: url("../assets/icon/exam_state_icon_chengji.png");

        color: #08c2b3;
      }

      .step_content {
        width: 100%;
        height: 92px;
        display: flex;
        align-items: center;
        padding: 20px;
        .el-step__line-inner
        {
          
          border-width: 1px;
          width: 100%;
          // border-color: blue;
        }
        .el-steps--horizontal {
          width: 100%;

          //完成后的样式
          .el-step__head.is-success {
            color: #15bc83;
            border-color: #15bc83;
            .el-step__line
            {
              border-color: #15bc83;
            }
          }

          .el-step__title.is-success {
            color: #15bc83;
            font-size: 16px;
          }

          

          //进行中的样式
          .el-step__head.is-process {
            color: #2e64fa;
            border-color: #2e64fa;
            .el-step__line
            {
              border-color: #2e64fa;
            }
          }

          .el-step__title.is-process {
            color: #2e64fa;
            font-size: 16px;
          }

          //等待中的样式
          .el-step__head.is-wait {
            color: #909399;
            border-color: #909399;
            .el-step__line
            {
              border-color: #2e64fa;
            }
          }

          .el-step__title.is-wait {
            color: #909399;
            font-size: 16px;
          }
        }
      }
    }
  }
}

// 分页公共样式
.page_pagination {
  width: 100%;
  height: 30px;
  margin-top: 18px;
  margin-bottom: 2px;
 
  display: flex;
  justify-content: flex-end;
  align-items: center;
  &.total{
    justify-content: space-between;
  }
  .page_total{
    font-size: 14px;
    color: #666666;
  }
  .el-pagination {
    padding: 0 !important;
    display: flex;
    align-items: center;
    .el-input__suffix
    {
      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-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-pager li.active {
    background: #2f51ff;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
  }
}

//答题卡纸张页面表格样式  page_table 42px
.page_table_dtk {
  width: calc(100% - 40px);
  margin: auto;

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

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

  //表格顶部标题栏
  .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 !important;
    padding: 0 !important;
  }

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

  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cel {
    border-bottom: 0px solid red;
  }

  .el-table--border .el-table__cell {
    border-bottom: 1px solid #ebeef5 !important;
    border-right: 1px solid #ebeef5 !important;
  }
}

//右侧栏表格样式
.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 的悬浮效果 */
  // .el-table__body tr:hover > td {
  //   background-color: transparent !important;
  // }

  .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;
    }
  }

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

//答案列表表格样式
.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: 32px;
    padding: 0 !important;
  }

  // .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_item {
  width: 100%;
  background: #F0F4FB;
  display: flex;
  justify-content: center;


  //在线制卡页面
  .page_make_card
  {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    //制卡主题部分
    .mark_card_main
    {
      width: calc(100% - 400px);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .answer_sheet_main
      {
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        overflow-x: hidden;
      }
    }
    //制卡右侧
    .mark_card_right
    {
      width: 400px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
     
      .card_right_center
      {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        background-color: white;
        overflow-y: auto;
        display: flex;
        justify-content: center;
        border-radius: 10px;
      }
    }
  }

  .make_card_content {
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow: hidden;
    margin: auto;
    border-bottom: none;
    border-top: none;
    position: relative;
  }

  //右侧
  .aside_left {
    font-family: Merriweather Sans, Helvetica, Arial, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    position: relative;
    min-width: 400px;
    width: 400px;
    border-radius: 10px 10px 10px 10px;
    margin-left: 20px;
    margin-right: 20px;
    overflow-y: auto;
    // overflow-x: hidden;
  }

  .bar-title {
    margin: 0;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    background-color: blue;
    height: 44px;
    line-height: 44px;
    cursor: pointer;
  }

  .bar_title {
    margin: 0;
    padding-left: 20px;
    height: 44px;
    line-height: 44px;
    font-weight: 600;
    font-size: 16px;
    color: #303133;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .paper_button_height 
  {
    height:120px;
  }

  .paper_button 
  {
    margin: auto;
    min-height: 110px;
    width: 360px;
    position: absolute;
    bottom: 20px;
    background-color: white;
    z-index: 1999;
    border-radius: 10px;
  }
  .paper_marks {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 38px;
    line-height: 38px;
    margin-bottom: 10px;

    .dtk_label {
      width: 100px;
      margin-left: 20px;
      font-weight: 400;
      font-size: 14px;
      color: #303133;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .dtk_val_layout {
      width: calc(100% - 90px);

      .el-radio-group {
        display: flex;
        justify-content: flex-start;

        gap: 0px;
      }
      .is-checked {
        border: 1px solid #2e64fa !important;
      }
      .paper_layout {
        width: 70px;
        height: auto;
        border-radius: 4px 4px 4px 4px;

        border: 1px solid #dcdfe6;
        padding: 5px 5px;
        display: flex;
        justify-content: space-between;
        .el-radio__input {
          width: 20px;

          border: none !important;
        }
        .el-radio__label {
          width: 90px;
        }

        .layout_title {
          width: 100%;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .layout_img {
          width: 39px;
          height: 20px;
          margin-top: 5px;
          margin-right: 5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .dtk_val {
      margin-left: 10px;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      width: calc(100% - 90px);

      .el-radio-group {
        display: flex;
        justify-content: flex-start;

        gap: 10px;

        .el-radio__label {
          padding: 5px !important;
        }
      }
      .el-input__inner {
        // color:red;
        font-size: 14px;
      }
      .el-radio {
        height: 36px;
        line-height: 36px !important;
      }
    }
  }

  .mark_item_box {
    width: calc(100% - 40px);
    margin: 0px 0px 10px 20px;

    .add_btn {
      width: calc((100% - 20px) / 3);
      height: 30px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #dcdfe6;
      font-size: 14px;

      .btn_icon {
        font-size: 16px;
        margin-right: 5px;
      }
    }
  }

  .button_content {
    width: calc(100% - 40px);
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
    .btn_yulan {
      width: calc(50% - 10px);
      height: 36px;
      line-height: 36px;
      padding: 0;
      color: #2e64fa;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      background: #fafafa;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #2e64fa;
      cursor: pointer;
    }

    .btn_cancel {
      width: calc(50% - 10px);
      height: 36px;
      line-height: 36px;
      padding: 0;
      color: #666666;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      background: #fafafa;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #ebeef5;
      cursor: pointer;
    }

    .btn_save {
      width: 100%;
      border-radius: 4px 4px 4px 4px;
      height: 36px;
      background: #2e64fa;
      padding: 0;
      line-height: 36px;
    }
  }
  .button_between {
    display: flex;
    justify-content: space-between;
  }
  .mark-item-box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .el-button {
      margin-bottom: 4px;
      margin-left: 0;
    }
    .add-btn {
      width: 107px;
      border-radius: 6px;
    }
  }
  .btn-wrap {
    .el-button {
      line-height: 15px;
      margin-bottom: 10px;
    }
  }
  .dtk-val {
    margin-left: 10px;
    width: 223px;
    font-size: 16px;
  }

  .el-radio {
    margin-right: 10px;
  }

  .paperRadio {
    width: 56px;
    height: 38px;
    padding: 4px;
    border: 1px solid #fff;
    border-radius: 4px;
    &.is-checked {
      border: 1px solid #2e64fa;
    }
    .el-radio__label {
      padding-top: 20px;
    }
    &:last-child {
      margin-right: 0;
    }
  }
  .dtk-inline-div {
    display: flex;
    justify-content: space-around;
  }
  .lyItemTit {
    display: inline-block;
    line-height: 20px;
  }

  .lyItemIcon {
    // display: inline-block;
    padding-left: 25px;
    width: 37px;
    height: 20px;

    img {
      display: block;
      width: 28px;
    }
  }

  .table_question {
    width: calc(100% - 40px);
    margin: auto;
    border: 1px solid #e9e9e9;
    border-bottom: 0px solid #e9e9e9;

    tr {
      background-color: #fff;
      height: 42px;

      &:hover {
        background-color: #f6faff;
      }

      td {
        padding: 0px 8px;
        color: #666666;
        text-align: center;
        border-bottom: #ebeef5 1px solid;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        padding-right: 10px;
      }
    }
  }

  .el-form-item {
    margin-bottom: 4px;
  }
  .score {
    padding-left: 6px;
  }
  .chooseBox {
  }
  .actionIcon {
    margin-right: 6px;
    color: #666666;
    cursor: pointer;
  }
  .directionBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
  }
  .directionItem {
    margin-right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &.row {
      flex-direction: row;
      align-items: center;
      padding: 4px 5px;
      width: 68px;
      height: 16px;
      background: #f5f7fa;
    }
    &.column {
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 4px;
      width: 31px;
      height: 38px;
      background: #f5f7fa;
    }
    .d_a {
      width: 31px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      font-size: 12px;
      border: 1px solid #909399;
      background: #fff;
    }
  }
}



//个人中心页面公共样式
.page_user
{
  width: calc(100% - 40px) !important;
  margin: auto;
  .user_title
  {
    font-size: 16px;
    font-weight: 600;
    color:#000000;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
  }

  .user_module
  {
    width: 100%;
    min-height: 120px;
    border:1px solid #E4E7ED;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: auto;
    .user_img
    {
      width: 80px;
      height: 80px;
      margin-left: 20px;
      margin-right: 28px;
    }

    .user_info
    {
      width: calc(100% - 100px);
      height: auto;
      display: flex;
      justify-content: flex-start;
      align-items: stretch; /* 默认行为，确保子元素高度拉伸一致 */
      overflow: hidden;
      .info_item
      {
        width: auto;
        
        height: auto;
        font-size: 16px;
        color:#666;
        display: flex;
        flex-direction: column;
        padding-right:10px;

        .item_row
        {
          width: 100%;
          height: auto;
          margin-bottom: 10px;
          
        }

        .span_label
        {
          width: 100px;
        }

        .span_value
        {
          line-height: 20px;
        }
        .span_blue
        {
          color:#2E64FA;
          margin-left: 8px;
          cursor: pointer;
        }

      }

      .info_item:nth-child(3)
      {
        width: max-content;//根据内容自适应宽度
        min-width:0;/* 防止内容溢出 */
      }

      /* 后两列：平均分配剩余空间 */
      .info_item:nth-child(1),
      .info_item:nth-child(2) {
        width: max-content;//根据内容自适应宽度;
        min-width:0;/* 防止内容溢出 */
        margin-right: 80px;
      }

      
    }
  }

  .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;
  }
  .el-tabs
  {
    height: 100%;
  }
}

//页面筛选公共样式
.page_search {
  width: 100%;
  .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;
    }

    .content_left 
    {
      width: auto;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      overflow: hidden;
      border-radius: 0;
      .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;
      }

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

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

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

        .el-input__inner
        {
          padding: 0 12px;
        }
      }
      
      //学年
      .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;
      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;
        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;
          /* 使图标垂直居中 */
        }

        i
        {
          font-size: 16px;
          
          margin-right: 5px;
        }
      }
    
      .el-button--default {
        color: #666;
        font-weight: 400;
      }
      .el-button--primary.is-plain:hover {
        color: #2e64fa;
        background-color: #c0d1fe;
        font-size: 14px;
      } 

      .button_border
      {

      }

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

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

      .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 {

  .el-dialog
  {
    border-radius: 8px;
  }
  border-radius: 8px;
  //饿了么样式覆盖
  .el-dialog__header {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-indent: 20px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #f5f7fa;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0 !important;
    text-align: left;

    .el-dialog__title {
      font-weight: 600;
      font-size: 16px;
      color: #303133;
    }

    .el-dialog__headerbtn {
      // display: none;
      width: 100px;
      height: 24px;
      margin-top: -8px;
      background-image: url("../assets/icon/close-line.png");
      background-position: 100% 50%;
      background-repeat: no-repeat;
      background-size: 24px 24px;
      // background-color: red;
      cursor: pointer;

      i {
        display: none;
      }
    }
  }

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

  .max_height_540 {
    margin: 20px 0;
    max-height: 560px;
    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: 315px;
              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;
              }
            }
        }
    
        
    
    }
   
  }
  //绑定手机号 输入框
  .bingding_center
  {
    width: calc(100% - 40px);
    margin:20px auto;

     //绑定手机号 输入框
    .bingding_input
    {
      width: 100%;
      margin-bottom: 20px;

      .el-input__inner 
      {
        width: 100%;
        height: 48px;
        line-height: 48px;
      }

      .el-input__suffix
      {
        display: flex;
        align-items: center;
      }

      .el-input__prefix
      {
        width: 20px;
        line-height: 49px;
      }

      .get_code
      {
        cursor: pointer;
        color:#2E64FA;
      }


    }

    .bingding_button
    {
      width: 100%;
      height: 48px;
      background-color: #2E64FA;
      border-radius: 4px;
      color: #fff;
      font-size:16px;
      font-weight: 400;
      text-align: center;
      line-height: 48px;
      margin-top: 40px;
      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;
        }

        .el-button
        {
          width: auto;
          height: 36px;
          padding: 0 10px !important;

        }
        .remain_count
        {
          margin-left: 10px;
        }

      }

      .left_center
      {
        align-items: center;

        
      }

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

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

        //重新上传按钮
        .right_re_button
        {
          width: 76px;
          height: 34px;
          border-radius: 4px;
          border:1px solid #2E64FA;

          font-weight: 400;
          font-size: 14px;
          color: #2E64FA;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
        }
      }


    }


    //重新上传的图片列表
    .center_pic_list
    {
      width: 100%;
      // min-height: 562px;
      height: auto;
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      margin-top: 20px;

      .list_img_content
      {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start; /* 顶部对齐 */
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 16px;
       
        .list_img_item
        {
          /* 基础宽度 - 每行7个 */
           flex: 0 0 calc((100% - 16px * 4) / 5);
            
          /* 最小宽度 */
          min-width: 160px;
          /* 保持宽高比（可选） */
          // aspect-ratio: 1/1;
          // margin-right: 15px;
          // margin-bottom: 16px;
          /* 内容样式 */

          height: auto;
          // margin-right: 13px;
          .item_batch_name
          {
            width: 100%;
            font-size: 14px;
            color: #666666;
            text-align: left;

            display: flex;
            justify-content: space-between;
            line-height: 30px;

            .name_abnormal
            {
              color: #F56C6C;
            }
          }

          .item_batch_img
          {
            width: 100%;
            height: auto;
            
            padding:8px;
            box-sizing: border-box;
            background-color: #F0F4F8;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #EBEEF5;
            display: flex;
            justify-content: center;
            position: relative;
            img
            {
              width: 100%;
              height: auto;
              object-fit: cover;
              z-index: 9;
            }

          }
          .item_batch_img_error
          {
            border: 1px solid #F56C6C !important;
          }

          .item_batch_img:hover .button_group
          {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .button_group 
          {
            position: absolute;
           
            width: 100%;
            height: 100%;
            z-index: 10;
            top: 0px;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            display: none;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 999;
            .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;

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

            
          }

          .item_batch_progress
          {
            position: absolute;
            width:145px;
            height:40px;

            left:calc(50% - 72px);
            top:calc(50% - 20px);
            z-index: 999;
            text-align: center;
            color:#2E64FA;
            font-size: 16px;
            font-weight: 400;
          }

          .item_batch_failed
          {
            position: absolute;
            width:145px;
            height:40px;

            left:calc(50% - 72px);
            top:calc(50% - 20px);
            z-index: 999;
            text-align: center;
            color:#F56C6C;
            font-size: 16px;
            font-weight: 400;
            line-height: 40px;
          }
        }

        // @media (max-width: 1458px) {
        //     .list_img_item
        //     {
        //        flex: 0 0 calc((100% - 16px * 5) / 6);
        //     }

        // }
        // @media (max-width: 1280px) {
        //     .list_img_item
        //     {
        //        flex: 0 0 calc((100% - 16px * 4) / 5);
        //     }

        // }
        // @media (max-width: 1109px) {
        //     .list_img_item
        //     {
        //        flex: 0 0 calc((100% - 16px * 3) / 4);
        //     }

        // }
        // @media (max-width: 940px) {
        //     .list_img_item
        //     {
        //        flex: 0 0 calc((100% - 16px * 2) / 3);
        //     }

        // }
        
        
      }
    }

    //弹窗 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%; 
        min-width: 20%;
        box-sizing: border-box; /* 确保 padding 和 border 不影响宽度 */
        // padding: 5px; /* 可选：添加一些内边距 */
        margin-bottom: 23px;
        margin-right:0px;
        font-size: 16px;
        color:#333333;
        
        display: flex;
        align-items: center;
        
        
      }

      .el-checkbox__label
      {
        font-weight: 400;
        font-size: 16px;
        color:#333;
        white-space: nowrap;         /* 禁止换行 */
        overflow: hidden;            /* 隐藏超出容器的内容 */
        text-overflow: ellipsis;      /* 隐藏超出宽度的内容 */  
        width: 80%;
        // padding-left: 10px;
      }

      

      
    }

    .choose_area_box
    {
      width:100%;

      display: flex;
      justify-content: space-between;
      .box_canvas
      {
        width: calc(100% - 260px);
        height: 218px;
        background-color: #F5F7FA;
        border-radius: 10px 10px 10px 10px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;

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

          border-radius: 10px 10px 10px 10px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .box_right
      {
        width:240px;
        height: 212px;

        .right_title
        {
          font-size: 14px;
          color: #303133;
          font-weight: 500;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .el-input__inner 
          {
            width: 160px;
            height: 36px;
            line-height: 36px;
          }

        }

        .choose_number
        {
          width: 160px;
          height: 36px;
          line-height: 36px;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          text-align: left;
          padding-left:8px ;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #DCDFE6;
        }
      }
    }

    .form_item_label
    {
      font-size: 14px;
      font-weight: 400;
      color: #666;
      margin-left: 10px;
    }

    .from_item_choose_type
    {
      display:inline-block;
      margin-left:20px;
      justify-content: flex-start;
      
    }

    .center_message_title {
      text-indent: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }

    .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;
      }
    }
    .check_group_content
    {
      display: flex;
      justify-content: flex-start;
     
      flex-wrap: wrap;

      .check_box_item
      {
        margin-right: 15px;
        height: 36px;
        margin-bottom: 10px;
         // 使用 :nth-last-child() 动态匹配最后一行的所有项
        $columns: 3; // 假设最大可能每行有 3 列，请根据实际布局调整此值
        // 最后一行底部边距为0
        @for $i from 1 through $columns {
          &:nth-last-child(-n+#{$i}) {
            margin-bottom: 0;
          }
        }
      }
    }


    .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;
      }
    }
    .input_long_width
    {
      .el-input
      {
        width: 410px !important;

      }
      .el-input__inner
      {
        width: 410px !important;
      }
    }

    .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: 16px;
      }
    }

    //弹窗 el-from-item__content
    .el-form-item__content {
      display: flex;
      align-items: center;
      font-size: 16px;
      min-height: 36px;
      line-height: 36px;

      .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: 36px;
        line-height: 36px;
        
        // display: flex;
        // align-items: center;
        .radio_question_number_horizontal {
          width: auto;
          height: 36px;
          line-height: 36px;
          // 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: 36px;
      .el-form-item__label {
        line-height: 36px;
        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;
      }
    }

    .dialog_table {
      width: 100%;

      .input_error
      {
       
        .el-input__inner
        {
          border:1px solid red;
        }
      }

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

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

      .el-table__empty-block {
        // background-color: red;
        background-image: url("../assets/bg/table_no_data.png");
        background-size: 64px 72px;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        min-height: 150px;
        .el-table__empty-text {
          display: none;
        }
      }

      .el-table__body .el-table__cell {
        padding: 0 !important; //去掉弹窗表格的padding
        height: 52px;
        border-right: 1px solid #EBEEF5;

        .el-input--mini .el-input__inner {
          width: 100%;
        }

        
        .el-input-number {
          width: 100%;
          height: 38px;
        }

        .el-input__inner {
          width: 100%;
          height: 32px;
          
        }
      }

      .el-input__suffix
      {
        display: flex;
        align-items: center;
      }

      .table_row_select
      {
        position: relative;

        .select_state
        {
          position: absolute;
          width: 11px;
          // height: 10px;
          left: 45px;
          // top:12px;
          top:50%;
          transform: translateY(-50%);
          z-index: 999;
          .table_row_status{
            > div{
              margin-left: 0;
            }
          }
        }
        //表格里的输入框 选择框样式覆盖
        .el-input__inner {
          height: 36px !important;
          line-height: 36px !important;
          padding-left: 30px;
        }

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

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

        .el-input-number__decrease {
          height: 17px !important;
          line-height: 17px;
          border-bottom: 1px solid #dcdfe6;
        }

        .el-input-number__increase {
          height: 17px !important;
          line-height: 17px;
          border-top: 1px solid #dcdfe6;
        }


      }

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

      .delete_item
      {
        color:#F56C6C;
        font-size: 14px;
        cursor: pointer;
      }

      //进度显示
      .table_row_progress {
        display: flex;
        justify-content: flex-start;

        width: 100%;

        .progress_percentage {
          width: 15%;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .progress_bar {
          width: 65%;
        }

        .progress_state {
          width: 20%;

          .span_number {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-left: 10px;
          }
        }
      }
    }

    .el-table__header,
    .el-table__body,
    .el-table__foote {
      width: 100%;
    }

    .el_table {
      box-shadow: 1px 1px 1px #e4e7ed;
      border-radius: 4px;
    }

    // .el-table--border .el-table__cell {
    //   border-bottom: 1px solid #ebeef5;
    //   border-right: 0px solid #ebeef5;
    // }

    .student_detail_info {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 400;
      font-size: 16px;
      color: #303133;
      margin-bottom: 30px;
      margin-top: 30px;

      .info_title {
        width: 40%;

        text-align: right;
        font-weight: 400;
        font-size: 16px;
        color: #303133;
      }

      .info_message {
        width: 50%;
        text-align: left;
        padding-left: 2px;

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

    //弹窗通用搜索区域
    .center_search {
      width: 100%;
      margin: auto;

      padding: 0 0 15px 0;
    }

    //扫描的图片
    .dialog_scan_image {
      width: calc(100% - 40px);
      // min-height: 497px;
      height: auto;
      // background: #f0f4f8;
      padding: 20px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 20px;

      .scan_image_item {
        width: calc(25% - 15px);
        height: 139px;

        .image_item_title {
          display: flex;
          justify-content: space-between;
          line-height: 25px;

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

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

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .default_pass
    {
      font-size: 12px;
      color:#666;
    }

    .dialog_example_img
    {
      width: 100%;
      height: 178px;
      background-image: url("../assets/bg/score_add_example.webp");
      background-size: 561px 178px;
      background-repeat: no-repeat;
      background-position: 0% 50%;
    }
  }

  //消息提醒内容区
  .dialog_message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 99px;

    span {
      padding: 20px;
      line-height: 20px;
    }
  }

  //饿了么底部按钮样式覆盖
  .el-dialog__footer {
    padding: 0 !important;
    text-align: right;
    border-top: 1px solid #e6e6e6;
    height: 66px;
    line-height: 66px;
    border-radius: 0 0 8px 8px;

    .dialog_footer {
      padding: 0 !important;
      width: calc(100% - 40px);
      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;
      }
    }

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

    .el-button {
      padding: 0 !important;
      font-size: 14px;
    }

    //饿了么按钮样式覆盖
    .el-button--primary {
      width: 68px;
      height: 36px;
      margin-left: 20px;
    }

    .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: -8px;
      background-image: url("../assets/icon/close-line.png");
      background-position: 100% 50%;
      background-repeat: no-repeat;
      background-size: 24px 24px;

      .el-icon-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 4px 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;
    }
  }

  //给分规则
  .dialog_group {
    width:100%;
    margin: auto;
    padding-left: 6px;
    .radio_title {
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      // background-color: red;
      display: inline-block;
      width: 87px;
    }

    .el-radio__label
    {
      font-size: 16px;
      font-weight: 400;
    }

    .radio_group_socre {
      width: 100%;
      height: auto;
      line-height: 50px;
      font-weight: 400;
      font-size: 16px;
      color: #666666;
      padding-left: 24px;
      display: flex;
      justify-content: flex-start;
      margin-top: 16px;
      margin-bottom: 10px;
      .el-input {
        width: 52px !important;
        height: 30px !important;
        padding: 0px !important;
        // margin-left: 5px;
        margin-right: 5px;
      }

      .el-input__inner {
        width: 52px !important;
        height: 30px !important;
        padding: 0px !important;
        text-align: center;
      }

      .el-radio__input.is-checked + .el-radio__label {
        font-weight: 400;
        font-size: 16px;
        color: #666;
      }
    }

    .radio_group_long_input {
      line-height: 50px;
      color: #666;
      padding-left: 24px;
      .input_long_100
      {
        .el-input {
            width: 100% !important;
            height: 36px !important;
            padding: 0px !important;
            // margin-left: 5px;
            margin-right: 5px;
        }
      }

      .el-input {
        width: 600px !important;
        height: 36px !important;
        padding: 0px !important;
        // margin-left: 5px;
        margin-right: 5px;
      }

      .el-input__inner {
        width: 100% !important;
        height: 36px !important;
        padding: 10px !important;
        text-align: left;
      }
    }
  }

  .el-upload-list {
    display: none;
  }
}

//弹窗全屏
.page_full_dialog
{
  z-index:999999 !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: 100%;
      overflow-y: auto;
      background-color: #F0F4FB;
      font-family: 宋体, SimSun, STSong;
      //答题卡预览打印区域
      .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;
      }

     
    }
  }


}

//我的考试 扫描学生页面公共样式
.page_scan {
    width: 100%;
    height: 100%;
   
    padding: 20px;
    box-sizing: border-box;
    background-color:#ffffff;
    border-radius: 10px 10px 10px 10px;
    .scan_button_header
    {
        width:100%;
        margin: auto;
        .el-button
        {
            width: 100px;
            height: 36px;
            padding: 0 !important;
        }
    }

    .scan_center
    {
        position: relative;
        display: flex;
        justify-content: space-between;
        .center_left
        {
            width: calc(100% - 320px - 20px);//多减去20是为了留出右边边距
            height: 100%;
        }

        .center_right
        {
            background-color: #21B8C6;
            width: 320px;
            background: #FFFFFF;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #e9e9e9;

            .right_top
            {
                width: 100%;
                height: 48px;
                background: #FFFFFF;
                border-radius: 10px 10px 0px 0px;
                border-bottom: 1px solid #e9e9e9;

                display: flex;
                justify-content: space-between;
                align-items: center;
                .scan_title
                {
                    font-weight: 500;
                    font-size: 16px;
                    color: #666666;
                    margin-left: 20px;
                }

                .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:50px 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);
                
                /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
                @media (max-height: 768px) 
                {
                    //高度小于768px
                    // min-height: 455px;
                    .scan_button
                    {
                        width: calc(100% - 40px);
                        min-height:250px;
                        margin: auto;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        position: relative;
                    }
                }
                /* 屏幕高度在767-到1440之间时 常见分辨率：1600x900, 1920x1080*/
                @media (min-height: 767px) and (max-height: 1440px) 
                {
                    .scan_button
                    {
                        width: calc(100% - 40px);
                        min-height:320px;
                        margin: auto;
                        text-align: center;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        cursor: pointer;
                        position: relative;
                    }
                    .scan_list
                    {
                        margin-top: 20px;
                    }


                }
                /* 当屏幕高度至少为1440px时应用的样式  常见分辨率：2560x1440*/
                @media screen and (min-height: 1440px){
                
                }
            
                .scan_button
                {
                    width: calc(100% - 40px);
                    height: auto;
                    margin: auto;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    position: relative;
                }
            
                .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: 20px;;
                        height: 80px;
                        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: 80px;
                           
                            
                       
                            .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_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_scan_save
            {
                width: 100%;
                height: 80px;
                border-top: 1px solid #EBEEF5;
                display: flex;
                align-items: center;
                .scan_save_button
                {
                    width: calc(100% - 40px);
                    margin: auto;
                    height: 40px;
                    font-weight: 500;
                    font-size: 14px;
                    color: #FFFFFF;
 
                    text-align: center;
                    padding: 0 !important;
                }
            }
        }
    }

    .image_list
    {
      width: 100%;
      overflow: auto;

      .list_img_content
      {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start; /* 顶部对齐 */
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 16px;
        .list_img_item
        {
          /* 基础宽度 - 每行7个 */
           flex: 0 0 calc((100% - 16px * 6) / 7);
            
          /* 最小宽度 */
          min-width: 160px;
          /* 保持宽高比（可选） */
          // aspect-ratio: 1/1;
          // margin-right: 15px;
          // margin-bottom: 16px;
          /* 内容样式 */

          height: auto;
          // margin-right: 13px;
          .item_batch_name
          {
            width: 100%;
            font-size: 14px;
            color: #666666;
            text-align: left;

            display: flex;
            justify-content: space-between;
            line-height: 30px;

            .name_abnormal
            {
              color: #F56C6C;
            }
          }

          .item_batch_img
          {
            width: 100%;
            height: auto;
            padding:8px;
            box-sizing: border-box;
            background-color: #F0F4F8;
            border-radius: 6px 6px 6px 6px;
            border: 1px solid #EBEEF5;
            display: flex;
            justify-content: center;
            position: relative;
            img
            {
              width: 100%;
              height: auto;
              object-fit: cover;
              z-index: 9;
            }

          }
          .item_batch_img_error
          {
            border: 1px solid #F56C6C !important;
          }

          .item_batch_img:hover .button_group
          {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .button_group 
          {
            position: absolute;
           
            width: 100%;
            height: 100%;
            z-index: 10;
            top: 0px;
            left: 0;
            background: rgba(0, 0, 0, 0.4);
            display: none;
            align-items: center;
            justify-content: center;
            gap: 16px;
            z-index: 999;
            .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;

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

            
          }
        }

        @media (max-width: 1458px) {
            .list_img_item
            {
               flex: 0 0 calc((100% - 16px * 5) / 6);
            }

        }
        @media (max-width: 1280px) {
            .list_img_item
            {
               flex: 0 0 calc((100% - 16px * 4) / 5);
            }

        }
        @media (max-width: 1109px) {
            .list_img_item
            {
               flex: 0 0 calc((100% - 16px * 3) / 4);
            }

        }
        @media (max-width: 940px) {
            .list_img_item
            {
               flex: 0 0 calc((100% - 16px * 2) / 3);
            }

        }
        
        
      }
      
      
      
      
    }
}

//预览弹窗公共样式 背景透明
.preview_dialog
{
    //饿了么样式覆盖
  .el-dialog__header {
    display: none;
  }
  .el-dialog
  {
    border-radius: 0;
    background-color: transparent;
  }
  //饿了么内容样式覆盖
  .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;
      }
    }

    
  }
}

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

//悬浮层公共样式  成绩单表头设置使用
.page_popover
{

  width: auto;
  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: 308px;
      // min-width: 388px;
      // max-width: 776px;
      overflow-x: auto;
      .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;
    }

    .end_button:hover
    {
      background: #f56c6c10;
    }
  }

  .w173 {
    width: 231px;
  }
}



//答题卡标题
.answer_card_title {
  width: 80%;

  .el-input__inner {
    text-align: center;
    border: none;
    font-weight: bold;
    overflow: hidden;
    resize: none;
    font-size: 5.8mm;
    color: black;
  }
}
//解答题标题
.answer_title_input {
  width: 100%;
  height: 50px;
  .el-input__inner {
    text-align: left;
    border: none;
    font-weight: 500;
    overflow: hidden;
    resize: none;
    font-size: 3.5mm;
    color: black;
    padding: 0 !important;
  }
}

//答题卡作文任选提示
.multi_choose_area_tishi {
  .el-input__inner {
    text-align: center;
    border: none;
    overflow: hidden;
    resize: none;
    font-size: 3.5mm;
    color: black;
    background-color: transparent;
  }
}

/* 小屏幕笔记本的样式 常见分辨率：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) {
}

//考试模块公共样式
.exam_aside {
  min-width: 160px;
  width: 160px;
  height: 100%;
  background-color: #ffffff;

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

    .exam_title {
      font-weight: 500;
      color: #ffffff;
      text-align: center;
      background-color: #2e64fa;
      padding: 5px 5px;

      .exam_page_title {
        font-size: 16px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;//默认显示2行
        -webkit-box-orient: vertical;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        text-align: justify;
        text-align: center;
        cursor: pointer;
      }

      .exam_number {
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
      }
    }

    .exam_back {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: center;

      .back_button {
        width: calc(100% - 24px);
        margin: auto;
        height: 36px;
        line-height: 36px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dcdfe6;
        text-align: center;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        color: #666666;
        display: flex;
        justify-content: center;

        .back_icon {
          width: 60px;
          height: 36px;

          background-image: url("../assets//icon/exam_back.png");
          background-size: 20px 20px;
          background-repeat: no-repeat;
          background-position: 0 50%;
          text-align: left;
          text-indent: 25px;
        }
      }
    }

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

//考试答题卡模板界面公共样式
// 主页面布局层
.make_template_main {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

//答题卡canvas模板区
.canvas_exam_template {
  width: 100%;
  height: 100%;
  position: relative;

  overflow: hidden;
  flex: 1;
  cursor: pointer;

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

    height: calc(100% - 2px);
    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;
    }
  }

  .no_paper_url {
    background-image: url("../assets/bg/no_content_bg.png");

    background-repeat: no-repeat;
    background-size: 360px auto;
    background-position: 50% 30%;
    color: #666666;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
  }

 

  .template_top_header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    z-index: 999;
    right: 20px;
  }

  .camvas_header_tool {
    width: 280px;
    height: auto;
    z-index: 999;
    position: absolute;

    right: 20px;

    color: rgba(96, 98, 102, 1);


    .tool_content
    {
      display: flex;
      justify-content: space-around;
      align-items: center;
      align-self: flex-end;
      color: rgba(96, 98, 102, 1);
      gap: 10px;
    }
    .tool_item 
    {
      display: inline-flex;
      align-items: center;
      justify-content: center;

      width: auto;
      height: 30px;
      min-width: fit-content; /* 确保最小宽度适配内容 */
      background-color: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dcdfe6;
      padding-left: 8px;
      padding-right: 8px;
      box-sizing: border-box;
      gap: 5px;

    }

    .tool_item:hover
    {
      border: 1px solid #2e64fa;
      color: #2e64fa;
    }

    .sx {
      width: 1px;
      height: 22px;
      background-color: rgba(220, 223, 230, 1);
    }

    div {
      cursor: pointer;
    }
  }
}

//右侧栏区
.aside_right {
  width: 360px;
  height: auto;
  background: #fff;
  // display: flex;
  // flex-direction: column;
  border-radius: 10px 10px 10px 10px;
  // overflow: hidden;

  //制卡页右侧区
  .paper_mark 
  {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    height: 36px;
    line-height: 36px;
    margin-bottom: 5px;
    height: auto;

    .mark_label 
    {
      width: 80px;
      font-weight: 400;
      font-size: 14px;
      color: #333;
      line-height: 28px;
      min-height: 28px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .mark_value 
    {
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      width: calc(100% - 80px);
      gap: 10px;

      height: 100%;
      align-items: center;
      .input_50
      {
        width: calc(50% - 5px);
      }

      .input_100
      {
        width: 100%;
      }

      //表格里的输入框 选择框样式覆盖
      .el-input__inner 
      {
          height: 28px !important;
          line-height: 28px !important;
      }

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

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

    .mark_value_radio 
    {
      width: calc(100% - 90px);
      .el-radio-group {
        display: flex;
        justify-content: flex-start;

        gap: 0px;
      }
      .is-checked {
        border: 1px solid #2e64fa !important;
      }
      .paper_layout {
        width: 62px;
        height: auto;
        border-radius: 4px 4px 4px 4px;

        border: 1px solid #dcdfe6;
        padding: 5px 5px;
        display: flex;
        justify-content: space-between;
        .el-radio__input {
          width: 20px;

          border: none !important;
        }
        .el-radio__label {
          width: 90px;
        }

        .layout_title {
          width: 100%;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }

        .layout_img {
          width: 39px;
          height: 20px;
          margin-top: 5px;
          margin-right: 5px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

  }

  //添加试题按钮区
  .add_area_btn
  {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    .btn_item
    {
      width: calc(100% / 3 - 8px);
      height: 30px;
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #DCDFE6;
      box-sizing: border-box;
      line-height: 30px;
      text-align: center;
      color:#666;
      cursor: pointer;
    }
    .btn_item:hover
    {
      border: 1px solid #2e64fa;
      color: #2e64fa;
      i{
        color:#2E64FA;
      }
    }
  }

  .area_title {
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    text-align: left;
    padding: 20px 0 10px 0;
    cursor: pointer;

    .area_title_select {
      color: #666666;
      font-size: 14px;
    }
  }

  .paper_type {
    width: 100%;
    height: 54px;
    border-bottom: 1px solid rgba(25, 31, 37, 0.08);

    .type_title {
      font-weight: 600;
      font-size: 16px;
      color: #333333;
    }

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

    .type_choose {
      width: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .el-input__inner {
        width: 110px;
        height: 36px;
        margin-left: 10px;
      }
    }
  }

  .right_center {
    width: calc(100% - 40px);
    margin: auto;
    flex: 1;
    height: auto;
    //选择试卷页
    .choose_paper {
      width: 100%;
      height: 46px;
      display: flex;
      justify-content: flex-start;

      .paper_number {
        width: 58px;
        height: 36px;
        line-height: 36px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dcdfe6;
        text-align: center;
        font-weight: 400;
        font-size: 18px;
        color: #666666;
        text-align: center;
        margin-right: 10px;
        cursor: pointer;
      }

      .paper_item {
      }

      .paper_item:hover {
        color: #2e64fa;
        border: 1px solid #2e64fa;
        box-shadow: 0 0 2px #2e64fa;
      }

      .paper_number_choose {
        background: #2e64fa;
        border-radius: 4px 4px 4px 4px;

        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
      }
    }

    //选择批阅块
    .choose_approval {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      overflow-x: hidden;
      padding-top: 10px;
      padding-right: 10px;
      max-height: 350px;
      .el-badge__content {
        width: 20px;
        height: 20px;
        line-height: 20px;
        padding: 0 !important;
        border:none;
        font-size: 12px;
      }

      .el-badge__content.is-fixed {
        right: 15px;
      }

      .badge_item {
        width: calc(33% - 8px);
        height: 30px;
        margin-left: 0px !important;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
        // overflow: hidden; /* 隐藏超出容器的内容 */
        white-space: nowrap;
        /* 保持文本在一行内 单行显示 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .badge_item:nth-child(3n) {
        margin-right: 0 !important;
      }

      .approval_item {
        width: 100%;
        text-align: center;
        height: 30px;
        line-height: 30px;
        padding: 0 0px !important;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dcdfe6;
        text-indent: 5px;
        text-align: center;
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        white-space: nowrap;
        /* 保持文本在一行内 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        cursor: pointer;
        position: relative;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
      }

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

    .approval_percent {
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      color: #303133;
      line-height: 16px;
    }

    //添加块区
    .add_area {
      width: 100%;

      .el-badge__content.is-fixed {
        right: 15px;
      }

      .area_box_list {
        width: 100%;

        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 10px;
      }

      .area_item {
        width: calc(33% - 6px);

        .el-badge {
          width: 100%;

          .el-badge__content {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            padding: 0 !important;
            background: #f56c6c;
          }
        }

        .item_button {
          width: 100%;
          height: 30px;
          border-radius: 4px 4px 4px 4px;
          border: 1px solid #dcdfe6;
          padding: 0 !important;
        }
      }
    }

    //编辑块区
    .area_table {
      .area_option {
        // display: flex;
        // justify-content: center;
        height: 42px;
        line-height: 42px;
        // padding-right:8px;
      }

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

      .area_set_info {
        .el-form-item {
          margin-bottom: 5px;
        }

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



  .right_button {
    width: 360px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    height: 90px;
    background-color: #fff;
    z-index: 500;
    border-radius: 10px;

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

      .button_upload {
        height: 18px;

        font-weight: 400;
        font-size: 12px;
        color: #2e64fa;
      }
      .button_disabled {
        height: 18px;

        font-weight: 400;
        font-size: 12px;
        color: #999999;
      }
      .button_clear {
        height: 18px;

        font-weight: 400;
        font-size: 12px;
        color: #f56c6c;
      }
    }

    .button_enter {
      width: calc(100% - 40px);
      margin: auto;
      background-color: #2e64fa;
      height: 36px;
      color: #fff;
      border-radius: 4px;

      .enter_submit {
        width: 100%;
        height: 100%;
        font-size: 14px;
      }
    }
  }

  //话批阅块底部固定悬浮按钮层
  .right_button_content {
    width: 360px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    // height: 178px;
    height: auto;
    background-color: #fff;
    z-index: 500;
    border-radius: 10px;

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

      .delete_all {
        font-size: 14px;
        color: #f56c6c;
        // background-image: url("../assets/icon/question.png");
        // background-size: 12px 12px;
        // background-repeat: no-repeat;
        // background-position: 100% 50%;
        // padding-right: 15px;
        cursor: pointer;
      }

      .editor_defalut {
        font-size: 12px;
        color: #2e64fa;
        background-image: url("../assets/icon/question_l.png");
        background-size: 12px 12px;
        background-repeat: no-repeat;
        background-position: 100% 50%;
        padding-right: 15px;
        cursor: pointer;
      }
    }

    .add_button_2 {
      width: calc(100% - 40px);
      margin-left: 20px;
      height: 62px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .button_add {
        width: calc(50% - 8px);
        height: 36px;
        font-weight: 400;
        font-size: 14px;
        color: #2e64fa;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #2e64fa;
        padding: 0 !important;
      }

      .button_enter_save
      {
        width: calc(50% - 8px);
        height: 36px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        padding: 0 !important;
      }
    }

    .save_button {
      width: 100%;
      height: 76px;
      border-top: 1px solid #e9e9e9;

      .button_enter_save {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-top: 20px;
        height: 36px;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        padding: 0 !important;
      }
    }
  }
}


// 应用滚动条样式到三个类下的 .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;
  }
}
.custom-table-containe
{
  position: relative;
  width: 100%;

  // 悬浮滚动条样式
  .custom-scrollbar-track {
    position: absolute;
    right: 8px;
    top: 0;
    height: 100%;
    width: 8px;
    background-color: transparent;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
  }

  .custom-scrollbar-thumb {
    position: absolute;
    left: 0;
    width: 8px;
    background-color: #b8b8b8;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
  }

  // 鼠标进入时显示滚动条
  .custom-table-container:hover .custom-scrollbar-thumb,
  .custom-table-container.mouse-hover .custom-scrollbar-thumb {
    opacity: 1;
  }

  // 滚动条容器样式
  .area_table .el-table__body-wrapper {
    overflow: hidden !important;

    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .area_table .el-table__body-wrapper:hover {
    overflow: auto !important;
  }
}


//考试模块右侧表格公共样式
.area_table {
  width: 100%;

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

  //暂无数据
  .el-table__empty-block {
    // background-color: red;
    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 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;
  }
}

//列表行操作
.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;
    // width: auto;
    // height: 36px;
    // line-height: 36px;
  }

  .el_button_delete {
    width: 30px;
    height: 36px !important;
    line-height: 36px;
    font-size: 14px;
    color: #ff5d5e;
    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: #ff5d5e;
    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;
  }
}

//选择模板公关样式
.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;

    .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;
    }
  }
}

// 表格滚动条样式通用
.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;
  }


  .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 {
    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: 100%;
    height: 36px !important;
    font-weight: 400;
    font-size: 14px;
    color: #f56c6c;
    text-align: center;
    border: 1px solid #f56c6c;
    cursor: pointer;
  }

  .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;
  }
}

// 扫描异常页面样式
.abnormal_detail {
  width: 100%;
  background: #f0f4fb;

  .detail_header {
    width: 100%;
    height: 80px;
    background-color: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .back_go {
      margin-left: 20px;
    }

    //未扫描
    .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 
      {
        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;
      }

      .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;
        }
      }

      .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: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 50%;
                background: #f56c6c;
                font-weight: 400;
                font-size: 12px;
                color: #ffffff;
              }
            }

            .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;
            }
          }
        }

        .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: #D9DCE3;
              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: #e8eaef;
            // background-color: red;
            border-radius: 4px;

            .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;
              }
            }
          }

          //标准模板区域
          .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_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;//保持图片比例;
              .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;
              }
            }
          }
        }
      }

      .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;
        }
      }
    }
  }
}

//阅卷试卷区
.paper_main_container 
{
  position: relative;
  width: 100%;
  height: 100%;
  // overflow: hidden;
  overflow-y: auto;
  overflow-x: hidden;//横向不要滚动条
  border-radius: 10px;
  // 阅卷给分板
  .scoring_board {
    width: 100%;

    height: auto;
    position: absolute;
    // min-height: 400px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px 10px 10px 10px;
    border: 4px solid #f5f5f5;

    .board_header {
      width: 100%;
      height: 48px;
      line-height: 48px;
      background: #2e64fa;
      border-radius: 10px 10px 0px 0px;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      font-style: normal;

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

    .board_title {
      width: calc(100% - 24px);
      height: 38px;
      line-height: 38px;
      background: #f0f2f5;
      display: flex;
      justify-content: space-between;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      padding: 0px 12px;
    }

    .row_name {
      width: 100px;
      height: 100%;
      // margin-left: 10px;
      text-align: left;
      line-height: 38px;
      overflow: hidden;
      /* 隐藏超出容器的内容 */
      white-space: nowrap;
      /* 保持文本在一行内 单行显示 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */
    }

    .row_score {
      width: calc(100% - 100px);
      height: 100%;
      text-align: center;
    }

    .name_header {
      // padding-left: 10px;
    }

    .score_header {
      width: 100%;
      text-align: center !important;
    }

    .board_content_transverse {
      padding: 12px 12px 12px 12px;
      cursor: pointer;
      // min-width: 200px;
      display: flex;
      justify-content: center;
    }

    .board_content_vertical {
      padding: 12px 12px 0px 12px;
      cursor: pointer;
    }

    //横向
    .score_list_transverse {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      text-align: center;
      gap: 10px;
      align-items: center;
      justify-items: center;
    }

    //竖向
    .score_list_vertical {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      text-align: center;
      width: auto;

      .score_item {
        // margin-bottom: 10px;

        text-align: center;
      }
    }

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

      display: flex;
      gap: 10px;
      text-align: center;
    }

    .key_board_score {
      width: 100%;
      height: 52px;
      text-align: center;

      .key_board_mark_score {
        width: 100%;
        height: 40px;
        background: #f3f3f3;
        border-radius: 4px 4px 4px 4px;
        line-height: 40px;
        font-weight: 600;
        font-size: 18px;
        color: #eb2b20;
        overflow: hidden;
      }
    }

    .key_board_button {
      width: 100%;
      height: 40px;
      margin-top: 12px;
      display: flex;
      justify-content: flex-start;
      gap: 12px;

      .key_button_delete {
        width: 48px;
        height: 38px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #cccccc;

        line-height: 40px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: red;

        background-image: url("../assets/icon/key_board_delete.png");
        background-position: 50% 50%;
        background-size: 22px 22px;
        background-repeat: no-repeat;
      }

      .key_button_enter {
        width: calc(100% - 48px - 16px);
        height: 40px;
        background: #2e64fa;
        border-radius: 4px 4px 4px 4px;

        line-height: 40px;
        text-align: center;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
      }

      .key_button_enter:hover {
        background-color: #5883fb;
      }
    }

    // 键盘
    .key_board_list_content {
      width: 100%;
      height: auto;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;

      .key_board_item {
        width: 48px;
        height: 32px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #cccccc;
        line-height: 32px;
        text-align: center;

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

      .key_board_item:hover {
        border: 1px solid #2e64fa;
      }

      //选择中
      .key_board_select {
        width: 48px;
        height: 32px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #2e64fa;
        line-height: 32px;
        text-align: center;

        font-weight: 400;
        font-size: 16px;
        color: #2e64fa;
      }

      //满分
      .key_board_full_mark {
        width: 48px;
        height: 32px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #15bc83;
        background: #15bc83;
        line-height: 32px;
        text-align: center;

        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
      }
    }

    .score_item {
      // margin-right: 10px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #cccccc;
      text-align: center;
    }

    .score_item:hover {
      color: #2e64fa;
      // box-shadow:1px 1px 0px 2px red;
      border: 1px solid #2e64fa;
    }

    .score_select {
      background: #2e64fa;
      border-radius: 4px 4px 4px 4px;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
    }

    .score_select:hover {
      background: #2e64fa;
      border-radius: 4px 4px 4px 4px;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff !important;
    }

    .score_list {
      display: flex;
      // justify-content: flex-end;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      

    }

    .board_content {
      cursor: pointer;
      padding: 12px;
    }

    .board_button_vertical {
      min-width: 84px;
      margin: auto;
      height: auto;
      border-top: 1px solid #f3f3f3;
      padding: 0px 0 12px 0px;
      cursor: pointer;

      .button_item {
        width: 100%;
        height: auto;
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 12px;
        margin-left: 1px;
      }

      //其余全对
      .button_other_yes {
        width: calc(100% - 12px);
        margin: auto;
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #15BC83;
        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background: #15BC83;

        // background-image: url("../assets/icon/icon_yes.png");
        // background-size: 16px 16px;
        // background-repeat: no-repeat;
        // background-position: 13px 50%;
        // text-indent: 20px;
      }

      .button_other_yes_select {
        width: calc(50% - 8px);
        height: 36px;
        border-radius: 4px 4px 4px 4px;

        line-height: 36px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background-color: #2e64fa;

        background-image: url("../assets/icon/icon_yes_select.png");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 13px 50%;
        text-indent: 20px;
      }

      //其余全错
      .button_other_no {
        width: calc(100% - 12px);
        margin: auto;
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        // border: 1px solid #f56c6c;
        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        background: #F56C6C;
        // background-image: url("../assets/icon/icon_no.png");
        // background-size: 16px 16px;
        // background-repeat: no-repeat;
        // background-position: 13px 50%;
        // text-indent: 20px;
      }

      .button_other_no_select {
        width: calc(50% - 8px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;

        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background-color: #f56c6c;
        background-image: url("../assets/icon/icon_no_select.png");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 13px 50%;
        text-indent: 20px;
      }

      //典型错误
      .button_typical_error {
        width: calc(100% - 12px);
        margin: auto;
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f56c6c;
        line-height: 34px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #f56c6c;

        background-image: url("../assets/icon/button_error_item.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //典型错误
      .button_typical_error_select {
        width: calc(100% - 12px);
        margin: auto;
        border-radius: 4px 4px 4px 4px;
        // border: 1px solid #F56C6C;
        line-height: 36px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #f56c6c;
        background-color: #ffe3e3;
        background-image: url("../assets/icon/button_error_bg.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //优秀答案
      .button_excellent_answer {
        width: calc(100% - 12px);
        margin: auto;
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #2e64fa;
        line-height: 34px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;

        color: #2e64fa;
        background-image: url("../assets/icon/button_answer_item.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //优秀答案
      .button_excellent_answer_select {
        width: calc(100% - 12px);
        height: 36px;
        margin: auto;
        border-radius: 4px 4px 4px 4px;
        //  border: 1px solid #2E64FA;
        line-height: 36px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;

        color: #2e64fa;
        background-color: #d0dcff;
        background-image: url("../assets/icon/button_answer_bg.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }
    }

    .board_button {
      width: auto;
      margin: auto;
      height: auto;
      border-top: 1px solid #f3f3f3;
      padding: 0 12px 12px 12px;
      cursor: pointer;

      .button_item {
        width: 100%;
        height: auto;
        margin-top: 12px;
        display: flex;
        justify-content: flex-start;
        gap: 12px;
        margin-left: 1px;
      }

      //其余全对
      .button_other_yes {
        width: calc(50% - 10px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #15BC83;
        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background: #15BC83;
        // background-image: url("../assets/icon/icon_yes.png");
        // background-size: 16px 16px;
        // background-repeat: no-repeat;
        // background-position: 13px 50%;
        // text-indent: 20px;
      }

      .button_other_yes_select {
        width: calc(50% - 8px);
        height: 36px;
        border-radius: 4px 4px 4px 4px;

        line-height: 36px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background: #15BC83;


        // background-image: url("../assets/icon/icon_yes_select.png");
        // background-size: 16px 16px;
        // background-repeat: no-repeat;
        // background-position: 13px 50%;
        text-indent: 20px;
      }

      //其余全错
      .button_other_no {
        width: calc(50% - 10px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f56c6c;
        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #fff;
        background: #F56C6C;

        // background-image: url("../assets/icon/icon_no.png");
        // background-size: 16px 16px;
        // background-repeat: no-repeat;
        // background-position: 13px 50%;
        // text-indent: 20px;
      }

      .button_other_no_select {
        width: calc(50% - 8px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;

        line-height: 34px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        background-color: #f56c6c;
        background-image: url("../assets/icon/icon_no_select.png");
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: 13px 50%;
        text-indent: 20px;
      }

      //典型错误
      .button_typical_error {
        width: calc(50% - 10px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f56c6c;
        line-height: 34px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #f56c6c;

        background-image: url("../assets/icon/button_error_item.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //典型错误
      .button_typical_error_select {
        width: calc(50% - 8px);
        height: 36px;
        border-radius: 4px 4px 4px 4px;
        // border: 1px solid #F56C6C;
        line-height: 36px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #f56c6c;
        background-color: #ffe3e3;
        background-image: url("../assets/icon/button_error_bg.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //优秀答案
      .button_excellent_answer {
        width: calc(50% - 10px);
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #2e64fa;
        line-height: 34px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;

        color: #2e64fa;
        background-image: url("../assets/icon/button_answer_item.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }

      //优秀答案
      .button_excellent_answer_select {
        width: calc(50% - 8px);
        height: 36px;
        border-radius: 4px 4px 4px 4px;
        //  border: 1px solid #2E64FA;
        line-height: 36px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;

        color: #2e64fa;
        background-color: #d0dcff;
        background-image: url("../assets/icon/button_answer_bg.png");
        background-size: 40px 36px;
        background-repeat: no-repeat;
        background-position: 0 50%;
      }
    }

    .row_item {
      width: 100%;
      // text-indent: 5px;
      align-items: center;
      display: flex;
      justify-content: space-between;

      margin-top: 10px;
      font-size: 16px;

      .row_name 
      {
        width: 100px;
        height: 100%;
        // margin-left: 10px;
        text-align: left;
        line-height: 38px;
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        white-space: nowrap;
        /* 保持文本在一行内 单行显示 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
      }

      .row_score 
      {
        width: calc(100% - 100px);
        height: 100%;
        text-align: center;

      }
    }

    .is_current {
      .row_name {
        color: #2e64fa;
        font-weight: 600;
        font-size: 16px;
      }
    }
  }

  .width_300 {
    width: 300px;
  }

  .width_200 {
    max-width: 200px !important;
    width: 200px;
  }

  .scoring_board:hover {
    opacity: 1 !important;
  }

  //绘画板
  .draw_canvas {
    border: 1px solid red;
    cursor: pointer;
  }
}

//预览图片组件
.dialog_preview_img {
  .el-dialog {
    background-color: transparent;
    padding: 0 !important;
  }

  //饿了么样式覆盖
  .el-dialog__header {
    width: 100%;
    height: 0;
    line-height: 48px;
    text-indent: 20px;
    // background-color: #F5F7FA;
    border-bottom: 1px solid #f5f7fa;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0 !important;
    text-align: left;

    .el-dialog__title {
      font-weight: 600;
      font-size: 16px;
      color: #303133;
    }

    .el-dialog__headerbtn {
      // display: none;
      width: 100px;
      height: 24px;
      background-image: url("../assets/icon/close-line.png");
      background-position: 100% 50%;
      background-repeat: no-repeat;
      background-size: 24px 24px;
      cursor: pointer;

      i {
        display: none;
      }
    }
  }

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

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

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

  .show_image_container {
    height: auto;
    width: auto;
    margin: auto;
    background-color: #fff;
    // border:1px solid red;1
    text-align: center;
    // padding: 27px 25px;
    position: relative;
     //关闭图片按钮
    .preview_close
    {
      position: absolute;
      width: 48px;
      height: 48px;
      display: flex;
      border-radius: 50%;
      top:0;
      right:-70px;
      // 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: -100px;
      i
      {
        font-size: 30px;
        color:#fff;
        
      }
    }
    //下一个
    .preview_next
    {
      position: absolute;
      width: 48px;
      height: 48px;
      top:50%; 
      
      right: -100px;
      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;
        
      }
    }
  }
}

//分析报告成绩分析公共样式
.page_score_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  position: relative;

  .score_title {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;

    .left_title {
      font-size: 16px;
      font-weight: 600;
      line-height: 22.4px;
      text-align: left;
    }

    .right_title {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

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

      .set_title_info {
        margin-right: 40px;

        .title_set {
          color: #333;
          font-size: 14px;
          font-weight: 400;
        }

        .input_style {
          width: 60px;

          .el-input__inner {
            color: #2e64fa;
            font-size: 14px;
            font-weight: 600;
          }
        }
      }

      span.score_range {
        margin-right: 20px;
        font-size: 14px;
        font-weight: 400;
        line-height: 22.4px;
        text-align: center;
        cursor: pointer;
      }

      span.active {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: 0px -2px 0px 0px #2e64fa inset;
        font-weight: 600;
        color: #2e64fa;
      }

      .el-radio-group {
        margin-right: 10px;
      }
    }
  }

  .score_footer {
    padding-top: 10px;
    // padding: 10px 10px 0px 10px;
    color: #999;
    font-size: 14px;
    line-height: 24px;
  }

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

    .center_title {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(
        89.92deg,
        #d9e7ff 0.01%,
        #eff5ff 64.54%,
        #f1f6ff 99.99%
      );
      border: 1px solid rgba(46, 100, 250, 0.2);
      border-radius: 10px;
      padding: 10px 20px;
      gap: 20px;
    }

    .oneandtwo,
    .thirdandfour,
    .thirdandfour1 {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      padding: 10px 20px;

      .one {
        font-size: 14px;
        font-weight: 400;
      }

      .two {
        font-weight: 600;
        font-size: 20px;
      }
    }

    .oneandtwo {
      color: #fff;
      background: #2e64fa;
    }

    .thirdandfour {
      color: #ee6666;
      background: rgba(252, 224, 224, 1);
    }

    .thirdandfour1 {
      color: #3ba272;
      background: rgba(216, 236, 227, 1);
    }
  }

  .chart_height {
    height: 400px;
  }
  //无数据占位符样式
  .el-table__empty-text {
    display: block;
    width: 100%;
    height: 440px;
    text-align: center;
    // background:url('@/assets/icon/empty.png') no-repeat;
    // color: #909399;
    box-sizing: border-box;
  }
}

.page_score_margin_top {
  margin-top: 0px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

  .score_title_margin {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .score_title {
      display: inline-flex;
      justify-content: space-between;
      align-items: center;

      .left_title {
        font-size: 16px;
        font-weight: 600;
        line-height: 22.4px;
        text-align: left;
      }
    }
  }

  .search_right {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: right;

    button.el-button span,
    button.el-button {
      display: inline-flex;
      align-items: center;
    }

    button.el-button {
      height: 36px;
      margin-bottom: 10px;
      padding: 12px 10px;
    }
    
    .iconfont
    {
      margin-right: 5px;
    }
    
   
  }

  .el-table .el-table__header-wrapper thead th {
    background: #f4f6f8;
    padding: 9px 0;
    font-size: 14px;
    color: #303133;
    font-weight: 600;
  }

  .el-table .el-table__body-wrapper tbody .el-table__row .el-table__cell,
  .el-table .el-table__fixed-body-wrapper tbody .el-table__row .el-table__cell {
    padding: 8px 0;
  }

  .el-table__body-wrapper::-webkit-scrollbar {
    height: 8px;
  }
}

// //表格表头背景色
// .el-table tr th.el-table__cell {
//   background: #f4f6f8 !important;
// }

// // 表格表体颜色
// .el-table tbody td,
// .vxe-table--body tbody tr td div {
//   color: #666 !important;
// }

//阅卷监控相关公共样式
.page_monitor {
  width: 100%;
  height: 100vh;
  background: #f0f4fb;



  .page_monitor_header {
    width: calc(100% - 20px);
    margin: auto;
    height: 48px;
    background-color: #ffffff;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: flex-start;

    .header_back 
    {
      width: 180px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;
      .back_button 
      {
        width: 80px;
        height: 34px;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #dcdfe6;
        // background-image: url("../assets/back_icon_bg.png");
        // background-size: 20px 20px;
        // background-repeat: no-repeat;
        // background-position: 11px 50%;
        line-height: 34px;
        // text-indent: 34px;
        text-align: center;

        font-weight: 500;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
      }
    }

    .header_title 
    {
      width: calc(100% - 360px);
      font-weight: 600;
      font-size: 20px;
      color: #2e64fa;
      line-height: 48px;
    }

    .header_button
    {
      width: 180px;
      height:48px;
      line-height: 48px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;

      padding-right: 20px;
      align-items: center;

    }
  }

  .page_monitor_content {
    width: calc(100% - 20px);
    margin: auto;
    height: calc(100vh - 48px - 30px);

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

    .content_aside 
    {
      width: 130px;
      height: 90px;
      background: #ffffff;
      border-radius: 10px 10px 10px 10px;
      // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08); ui不要投影
      padding: 20px;

      .aside_item {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #fff;
        border-radius: 4px 4px 4px 4px;

        font-weight: 400;
        font-size: 16px;
        color: #666666;
        margin-bottom: 10px;

        cursor: pointer;
      }

      .aside_item:hover {
        background: rgba(71, 113, 203, 0.1);
        color: #2e64fa;
      }

      .aside_item_cur {
        width: 100%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        background: #2e64fa;
        color: #ffffff;
        border-radius: 4px 4px 4px 4px;

        font-weight: 400;
        font-size: 16px;
        margin-bottom: 10px;

        cursor: pointer;
      }
    }

    .content_main {
      width: calc(100% - 170px - 10px);
      height: 100%;
      overflow-y: auto;

      .main_item {
        width: 100%;
        // height: 540px;
        height: auto;
        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        margin-bottom: 10px;

        .main_item_title {
          width: calc(100% - 40px);
          height: 62px;
          line-height: 62px;
          margin: auto;
          font-weight: 600;
          font-size: 16px;
          color: #333333;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .title_left
          {
            display: flex;
            justify-content: flex-start;
            gap: 5px;
          }

          .title_right
          {
            
            span
            {
              font-size: 14px;
              color:#666 !important;
            }
          }

          span {
            font-weight: 400;
            font-size: 16px;
            color: #999999;
          }

          .el-checkbox {
            margin-left: 20px;

            .el-checkbox__label {
              font-weight: 400;
              font-size: 14px;
              color: #000000;
            }
          }
        }

        .main_item_chart {
          width: 100%;
          margin: auto;
          height: auto;
        }

        .main_item_message {
          width: calc(100% - 40px);
          margin: auto;
          min-height: 50px;
          line-height: 20px;
          font-weight: 400;
          font-size: 14px;
          color: #909399;
          display: flex;
          align-items: center;
        }

        .main_item_table {
          width: calc(100% - 20px);
          margin: auto;
        }
      }
    }
  }
}

//阅卷界面公共样式
.page_marking
{
  width: 100%;
  height: 100vh;
  // background-color: #F0F4FB;

  .el-header
  {
    padding: 0 20px 0px 10px;
  }

  .marking_header
  {
    width: 100%;
    height: 64px;
    background-color: #FFF;

    display: flex;
    justify-content: space-between;
    
    .header_info
    {
      width: auto;
      height: 58px;
      border-radius: 0px 0px 5px 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info_title
      {

        width: 165px;
        height: 48px;
        font-weight: 500;
        font-size: 20px;
        color: #2E64FA;
        margin-right: 20px;
        line-height: 48px;
        // background: rgba(46,100,250,0.1);
        border-radius: 10px 10px 10px 10px;
        text-align: center;
        padding: 0px 20px;
        overflow: hidden;
        /* 隐藏超出容器的内容 */
        white-space: nowrap;
        /* 保持文本在一行内 单行显示 */
        text-overflow: ellipsis;
        cursor: pointer;
        span
        {
          font-weight: 500;
          font-size: 20px;
          // color: #2E64FA;
        }
      }
      .info_progress
      {
        margin-right: 20px;
        .progress_item
        {
          height: 24px;

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

          .progress_left
          {
            width: auto;
            // max-width: 200px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
          }

          .progress_right
          {
            width: auto;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }

          .progress_bar
          {
            width: auto;
            .el-progress
            {
              width: 200px;
              margin-right: 10px;
              display: flex;
              justify-content: center;
              align-items: center;
              .el-progress-bar__innerText
              {
                display: none;
              }
            }
            .el-progress-bar__inner
            {
              border-radius: 3px !important;
            }
            .el-progress-bar__inner
            {
              // left: -1px !important;
            }

            .el-progress-bar__outer
            {
              background-color: transparent !important;
              border:1px solid #2E64FA;
              // border-left: none;
              height: 8px !important;
              border-radius: 10px !important;
            }
          }

          
          .progress_text
          {
            width: 60px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            text-align: right;
          }
          
          .progress_percent
          {
            width: 40px;
            font-weight: 600;
            font-size: 14px;
            color: #2E64FA;
          }
          .progress_number
          {
            width: 90px;
            font-weight: 600;
            font-size: 14px;
            color: #333333;
            margin-left: 5px;
            margin-right: 10px;
          }
        }
      }

      .info_message
      {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        margin-left: 20px;
        padding-right: 20px;
        height: 100%;
        cursor:default;
        .span_other
        {
          font-weight: 600;
          font-size: 14px;
          color: #333333;
        }
        

        .span_page_current
        {
          width: auto;
          height: 58px;
          display: flex;
          align-items: center;
          .page_img_last
          {
            width: 38px;
            height: 38px;
            // background-image: url('@/assets/icon/right_last.png');
            // background-repeat: no-repeat;
            // background-size: 16px 16px;
            // background-position: 50% 50%;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
            color:#333;
          }
          .page_img_next
          {
            width: 38px;
            height: 38px;
            // background-image: url('@/assets/icon/left_next.png');
            // background-repeat: no-repeat;
            // background-size: 16px 16px;
            // background-position: 50% 50%;
            line-height: 38px;
            text-align: center;
            cursor: pointer;
          }

          .page_img_disabled
          {
            width: 38px;
            height: 38px;
            line-height: 38px;
            text-align: center;
            color:#999;
          }
        }
      }
    }

    .header_count_down
    {
      width: 120px;
      // background-color: red;
      color: #F56C6C;
      font-weight: 400;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 3px;
    }

    //正评
    .background_normal
    {
      background: rgba(46,100,250,0.1);

    }
    // 回评
    .background_review
    {
      background: #2BC6441A;
      color: #2BC644 !important;
    }
    //异常
    .background_abnormal
    {
      background: rgba(245,108,108,0.1);
      color: #F56C6C !important;
    }

    //抽查 复查
    .background_check
    {
      background: #FB9F341A;
      color: #FB9F34 !important;
    }

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

      .el-button
      {
        border-radius: 4px !important;
      }

      .el-button--danger.is-plain
      {
        border-color: #F56C6C;
      }


      .el-button.is-plain{
        background:rgba(0,0,0,0) !important;
        
      }
      .el-button--primary.is-plain
      {
        border-color: #2e64fa;
      }
      .el-button--primary.is-plain:hover, .el-button--primary.is-plain:focus{
        color:#2e64fa !important;
        background-color: #2e64fa10 !important;
        border: 1px solid #2e64fa;
      }
      .el-button--danger.is-plain:hover, .el-button--danger.is-plain:focus{
        color:#F56C6C !important;
        background-color: #F56C6C10 !important;
        border: 1px solid #F56C6C;
      }
      .el-button--danger:focus{
        color: #fff !important;
      }
      button.imgIcon span{
        display:inline-flex;
        align-items: center;
      }
      button.imgIcon span img{
        margin-right:5px;
      }
      .tool_eye
      {
        margin-right: 20px;
      }
      img
       {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 7px;
        left: 8px;
        
       }
      .tool_score_type
      {
        width: 96px;
        height: 32px;
        padding: 0 !important;
        line-height: 30px;
        position: relative;
        text-indent: 13px;

        // background-image: url('@/assets/markDetailScore/back_zp.png');
        // background-size: 16px 16px;
        // background-position: 0% 50%;
        // background-repeat: no-repeat;
       
      }
      .tool_review_check
      {
        width: 68px;
        height: 32px;
        padding: 0 !important;
        line-height: 30px;
        position: relative;
        text-indent: 15px;
       
      }
      // 结束批阅
      .tool_end_review
      {
        width: 96px;
        height: 32px;
        padding: 0 !important;
        line-height: 30px;
        position: relative;
        text-indent: 13px;

        img
        {
          width: 16px;
          height: 16px;
          position: absolute;
          top: 7px;
          left: 8px;
        }
     
      }
    }

  }

  .marking_content
  {
    width: 100%;
    height: calc(100vh - 64px);
    .main_content
    {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-self: center;
      .content_canvas
      {
        width: calc(100% - 40px);
        margin: auto;
        height: calc(100% - 40px);
        background-color: #E8EAEF;
        border-radius: 6px;
        position: relative;

        .footer_container
        {
          position: absolute;
          bottom: 0;
          right: 0;

          .footer_tool
          {
            // background-color: red;
            display: flex;
            justify-content: flex-end;
            gap:10px;
            .mark_abnormal
            {
              width: 136px;
              height: 36px;
              background: #F56C6C;
              border-radius: 4px 4px 4px 4px;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
              font-style: normal;
              text-transform: none;
              line-height: 36px;
              text-align: center;
              cursor: pointer;
            }

            .mark_item
            {
              width: 76px;
              height: 36px;
              background: #FFFFFF;
              border-radius: 4px 4px 4px 4px;
              border: 1px solid #DCDFE6;
              line-height: 36px;
              text-align: center;
              color:#666;
              cursor: pointer;
            }
          }
        }
      }

    }
  }
}



.pic_item_list {
  width: 100%;

  // padding-top: 10px;
  // overflow-x: auto;
  // height: 160px;
  min-height: 418px;
  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:200px;
    height: auto;
    position: relative;


    .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: 200px;
      height: 160px;
      padding: 8px;
      box-sizing: border-box;
      border-radius: 6px;
      background-color: #F0F4F8;
      img {
        width: 100%;
        height: 100%;

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

    .button_group {
      position: absolute;
      display: flex;
      display: none;
      width: 200px;
      height: 160px;
      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: 15px;
        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;
  }

  .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;
  }

  .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;
  }
}


/* switch按钮样式 */
.switch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff !important;
}

/*打开时文字位置设置*/
.switch .el-switch__label--right {
  z-index: 1;
}

/* 调整打开时文字的显示位子 */
.switch .el-switch__label--right span {
  margin-left: 8px;
}

/*关闭时文字位置设置*/
.switch .el-switch__label--left {
  z-index: 1;
}

/* 调整关闭时文字的显示位子 */
.switch .el-switch__label--left span {
  margin-left: 26px;
  color: #666;
}

/*显示文字*/
.switch .el-switch__label.is-active {
  display: block;
}

/* 调整按钮的宽度 */
.switch.el-switch .el-switch__core,
.switch.el-switch .el-switch__label {
  width: 48px !important;
  height: 24px;
  margin: 0;
  border-radius: 16px;
}

.switch.el-switch .el-switch__core:after {
  width: 20px;
  height: 20px;
}

.switch.el-switch.is-checked .el-switch__core::after {
  margin-left: -22px;
}

.switch.el-switch .el-switch__label {
  line-height: 22.4px;
}

//表格溢出
.ellipsis-tooltip {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-tooltip__popper {
  font-size: 14px;
  max-width: 400px;
}

//无数据显示
.no_content_data
{
  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;
}

.mm_btn {
  display: block;
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: #606266;
  border: none;
  cursor: pointer;
  border-radius: 4px;

  &.active {
      background-color: #2E64FA ;
      color: #ffffff;
  }
}


.easy {
    color: #90CB75;
}

.medium_easy {
    color: #FAC858;
}

.medium {
    color: #5470C6;
}

.medium_hard {
    color: #EA7ACB;
}

.hard {
    color: #EE6666;
}

.mr_10 {
    margin-right: 10px;
}


.mm_dialog {
  * {
        box-sizing: border-box;
  }
  .el-dialog {
    border-radius: 10px;
    overflow: hidden;
  }

  .el-dialog__body {
    padding: 40px 20px;
  }

  .el-dialog__header {
    height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    background-color: #F5F7FA;
  }

  .el-dialog__footer {
    padding: 20px;
    border: 1px solid #E9E9E9;
  }
}

.mr_30 {
  margin-right: 30px;
}

.ml_30 {
  margin-left: 30px;
}


.line_height_20 {
  line-height: 2.0;
}