bigDataStudent/src/styles/report.scss

//分析报告 公共样式 文件

.app_main {
  padding-top: 60px;
  height: calc(100% - 60px);
  overflow: auto;
}
.button-icon {
  width: 16px;
  /* 根据需要调整图标的大小 */
  height: 16px;
  /* 根据需要调整图标的大小 */
  margin-right: 0;
  /* 在图标与文本之间添加间距 */
  vertical-align: -3px;
  /* 使图标垂直居中 */
}
.el-popover.custom-popover {
  margin-right: 20px !important;
}

//分析报告总页面样式
.analysis_main
{
  width: 100%;
  min-width: 1200px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  .main_header {
    // width: calc(100% - 20px);
    width: 80%;
    margin: 10px 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:space-between;
    &.full_screen{
      margin: 10px;
    }
    .header_left 
    {
      width: auto;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      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-align: center;

        font-weight: 500;
        font-size: 14px;
        color: #666666;
        cursor: pointer;
        i{
          color:#666;
          font-size: 14px;
          margin-right: 5px;
        }
      }

      
    }
    .header_title 
    {
    
      font-weight: 600;
      font-size: 20px;
      color: #2e64fa;
      line-height: 48px;
      margin-left: 80px;
    }
    .header_right
    {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 20px;
      font-weight: 600;
      .select_list
      {
        margin-right:0px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        .el-input__inner
        {
          height: 36px;
        }
        .el-input__icon
        {
          line-height: 36px;
        }
      }
    }
  }

  .main_content
  {
    // width: calc(100% - 20px);
    width: 100%;
    margin: auto;
    height: calc(100% - 78px);
    display: flex;
    justify-content: space-between;
    .content_left
    {
      width: 170px;
      background-color: #fff;
      border-radius: 10px;
      overflow-y: auto;
    }

    .content_right 
    {
      width: 100%;
      height: 100%;
      overflow: auto;
      .content_right_scroll{
        width: 80%;
        margin: 0 auto;
        &.full_screen{
          width: 100%;
          padding:0 10px;
          box-sizing: border-box;
        }
      }
    }
    
  }
}

//分析报告 筛选样式
.page_filter
{
  width: calc(100% - 40px);
  padding: 2px 20px;

  height: auto;
  // height: 188px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}

//分析报告页面外层公共样式
.page_report {
  width: 100%;

  .tag_content 
  {
    width: 100%;
  }
  //分析报告模块区域公共样式 （背景白色区域）
  .report_module {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 10px 10px 10px 10px;

    &:last-child {
      margin-bottom: 0; //移除最后一个模块的下边距
    }

    //分析报告顶部按钮 筛选等公共样式
    .module_header 
    {
      width: calc(100% - 40px);
      margin: auto;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .module_tag
      {
        width: auto !important;
        padding: 16px 0px !important;
        .tag_item
        {
          max-width: 100px;
          white-space: nowrap;     /* 禁止换行 */
          overflow: hidden;        /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 溢出部分显示省略号 */
        }
      }

      .module_input
      {
        height: 68px;
        display: flex;
        align-items: center;
        margin-left: 10px;
      }

      .el-input__inner {
        height: 36px;
      }

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

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

      }
      .header_right
      {
        width: auto;
        display: flex;
        .exam_name
        {
          line-height: 36px;
         

        }
      }
      .count_info
      {
        font-size: 16px;
        color:#333333;
       

        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        .count_item
        {
          font-size: 16px;
          color: #333333;
        }
        .count_blue
        {
          font-size: 16px;
          color: #2E64FA;
          cursor: pointer;
        }

        .count_quekao
        {
          font-size: 16px;
          color: #FB9F34;
          cursor: pointer;
        }
        .count_weiji
        {
          font-size: 16px;
          color: #F56C6C;
          cursor: pointer;
        }

        .count_bujiru
        {
          font-size: 16px;
          color: #2E64FA;
          cursor: pointer;
        }

      }

      
      
    }

    // 分析报告模块标签公共样式
    .module_tag 
    {
      width: calc(100% - 20px);
      height: 100%;
      padding: 10px;
      border-radius: 0px 4px 4px 0px;

      .el-radio-button__inner {
        padding: 0 10px;
        height: 36px;
        line-height: 36px;
        color: #666666;
      }
      .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        color: #fff !important;
      }
      // .is-active .el-radio-button__inner {
      //   color: #fff !important;
      //   line-height: 34px;
      //   color: #bbbbbb;
      // }

      .tab_item
      {
        font-weight: 400;
        font-size: 14px;
        color:#999999;
      }
      .tag_item
      {
        max-width: 100px;
        white-space: nowrap;     /* 禁止换行 */
        overflow: hidden;        /* 隐藏溢出内容 */
        text-overflow: ellipsis; /* 溢出部分显示省略号 */
      }
    }

    // tab标签切换 下划线方式
    .module_tab
    {
      width: calc(100% - 20px);
      height: 100%;
      padding: 10px;
      display: flex;
      justify-content: flex-start;
      gap: 20px;
      position: relative;
      .tab_item
      {
        font-weight: 400;
        font-size: 14px;
        color: #999999;
        cursor: pointer;
        padding-bottom: 6px;
      }

      .tab_active
      {
        font-weight: 600;
        font-size: 14px;
        color: #2E64FA;
        cursor: pointer;
        
        border-bottom: 2px solid #2E64FA;
      }

      .right_check
      {
        position: absolute;
        right:20px;
        
      }
    }

    //tab标签切换 下划线样式
    .module_tag_line
    {
      width: 100%;
      height: 48px;
      background-color: #ffffff;
      border-radius: 10px;
      display: flex;
        .content_tab_top_item{
            position: relative;
            font-size: 14px;
            line-height: 20px;
            border: 1xp solid red;
            margin-right: 20px;
            padding: 10px 0px 18px 0px;
            cursor: pointer;
        }
        .content_tab_top_item:first-child{
            margin-left: 10px;
        }
        .content_tab_top_item_active{
            color: #2E64FA;
        }
        .content_tab_top_item_active_line{
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #2E64FA;
            bottom: 8px;
        }
    }

    //成绩单 tab 20边距 16内距
    .module_tag_40
    {
      width: calc(100% - 40px) !important;
      margin: auto;
      padding: 16px;
    }

    // 分析报告模块标题公共样式
    .module_title {
      width: calc(100% - 40px);
      margin: auto;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      text-align: left;
      line-height: 50px;
      padding-top: 10px;
      padding-bottom: 10px;
      display: flex;
      justify-content: space-between;

      .span_item {
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        padding-right: 5px;
      }

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

        gap: 10px;
        .el-input__inner {
          height: 36px;
        }

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

        .right_item
        {
          font-size: 14px;
          color:#999;
          font-weight: 400;
          cursor: pointer;
          height: 30px;
          line-height: 32px;
          margin-right: 5px;
          border-bottom: 2px solid #ffffff;
        }

        .item_active
        {
          
          font-size: 14px;
          color: #2E64FA;
          font-weight: 500;
          cursor: pointer;
          border-bottom: 2px solid #2E64FA;
        }

        .right_set
        {
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          span
          {
            margin-right: 2px;
          }
          .el-input__inner
          {
            // color:#2E64FA;
            text-align: center;
            padding: 0 5px;
          }
          
        }

        .right_radio
        {
          // margin-left: 20px;
        }
      }
    }

    //
    .module_toolbar
    {
        display: flex;
      
        justify-content: flex-start;
        padding-left: 20px;
        margin-bottom: 20px;

        
        .el-checkbox__label
        {
          font-size: 14px;

          font-weight: 500;

        }

        .toolbar_checkAll
        {
          width: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-right: 20px;

          .el-checkbox__input.is-checked + .el-checkbox__label
          {
            font-size: 14px !important;
            color:#2e64fa;
            font-weight: 500;
          }

        }
        .toolbar_checkbox
        {
          width: calc(100% - 100px);
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 10px;
          .el-checkbox__input.is-checked + .el-checkbox__label
          {
            font-size: 12px !important;

          }
          .el-checkbox
          {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 5px;
            margin-right: 0px;
          }

          .el-checkbox__label 
          {
              display: flex;
              align-items: center;
              padding-left: 0px !important;
              font-size: 12px;
             
          }

          .el-checkbox__input
          {
            display: none;
          }
          .legend_color 
          {
              display: inline-block;
              width: 20px;
              height: 10px;
              margin-right: 4px;
              border-radius: 2px 2px 2px 2px;
              margin-left: 4px;
          }
        }
        
    }

    //分析报告模块图表外层公共样式
    .module_chart {

      width: calc(100% - 40px);
      margin: auto;
      min-height: 360px;
      .symmetric_bar_echart
      {
        // width: calc(100% - 40px) !important;
        position: relative;
        .echart_type {
          width: 200px;
          height: auto;
          position: absolute;
          right: 0px;
          top: 5px;
          z-index: 7;
        }
        
      }
      .postion_type
      {
        position: absolute;
        // right: 10px;
        right: 0;
        top: 3px;
        z-index: 7;
      }
    }
    .no_content_data
    {
      span
      {
        margin-top: 80px;
      }
    }

    //分析报告模块非图表非表格的其他内容外层公共样式
    .module_content {
      width: calc(100% - 40px);
      margin: auto;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      .content_left {
        width: calc(100% - 220px);
        height: auto;
      }

      .content_right {
        width: 200px;
        height: 100%;
        display: flex;
        align-items: center;
        margin-right: 0;

        .el-button {
          padding: 0;
        }
      }
    }

    //分析报告模块描述说明公共样式
    .module_describe {
      width: calc(100% - 40px);
      margin: auto;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      line-height: 24px;
      text-align: left;
      padding-bottom: 14px;
      padding-top: 14px;

      // 最大值颜色
      .max_color
      {
        color:#3BA272;
      }
    
      // 最小值颜色
      .min_color
      {
        color:#EE6666;
      }
      // 最小值颜色
      .normal_color
      {
        color:#2E64FA;
      }
    
    }

    .postion_relative
    {
      position:relative;
    }

    .postion_absolute
    {
      position:absolute;
    }
  }

  .report_bottom
  {
    width: 100%;
    height: auto;
    // background-color: red;
    .bottom_no_more
    {
      font-size: 14px;
      color:#666;
      text-align: center;
      margin-top: 32px;
      margin-bottom: 20px;
      span
      {
        font-size: 14px;
        color:#2E64FA;
        font-weight: 500;
        cursor: pointer;
      }
    }

    .bottom_button
    {
      width: 80px;
      height: 32px;
      border:1px solid #2E64FA;
      border-radius: 4px;
      color:#2E64FA;
      font-size: 12px;
      font-weight: 400;
      line-height: 32px;
      text-align: center;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 16px;
      cursor: pointer;
    }
  }
}

//分析报告表格模块公共样式
.module_table {
  width: calc(100% - 40px);
  margin: auto;
  border-collapse: collapse;

  .hide_expand_icon{
    .el-table__placeholder{
      display: none;
    }
    .el-table__row{
      .el-table__expand-icon{
        display: none;
        /* &::before{
          content: '';
        } */
      }
    }
  }
  // .el-table th.el-table__cell > .cell
  // {
  //   padding: 0px;
  // }
  //转pdf丢失边框线的问题
  // th.el-table__cell:nth-last-child(2) {
  //   border-right: 0px solid #EBEEF5; // 去掉最后一个单元格的右侧边框  最右边还有个滚动条的 所以要去掉倒数第二个
  // }

  .el-table {
    border-radius: 6px;
    border: 1px solid #EBEEF5;
    border-right: 0px solid #EBEEF5;
    border-bottom: 0px solid #EBEEF5;
    .el-table__body-wrapper {
      table {
        tr {
          td {
            border-right: 1px solid #EBEEF5;
            border-bottom: 1px solid #EBEEF5;
          }
          td:nth-last-child(2)
          {
            border-right: 1px solid #EBEEF5;
          }

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

    thead {
      color: #333333 !important;
      font-weight: 500;
      font-size: 14px;
      height: 40px;
    }
  
    .cell {
      font-size: 14px;
      line-height: normal !important;
    }
  
    .el-table__cell {
      padding: 0;
      height: 40px;
    }
  }
  .el-table {

    .cell
    {
      // padding: 0 !important;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏溢出的文本 */
      text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
    }

    .el-table__header {
      th {
        background-color: #f4f6f8; // 修改表头背景颜色
        color: #333333; // 修改表头字体颜色
        font-weight: 600; // 修改表头字体粗细
        font-size: 14px; //表头字体大小

      }
    }

    .module_table th, .module_table td {
      padding: 0px;
      text-align: left;
    }
    
    .el-table__row {
      td {
        color: #666666; // 修改表格行字体颜色
        font-size: 14px;
        font-weight: 400;
      }
    }
    .el-table__cell {
      padding: 0px 0 !important;
    }

    //表格无数据样式
    .el-table__empty-block {
      background-image: url("@/assets/bg/table_no_data.png");
      background-size: 64px 72px;
      background-position: 50% 50%;
      background-repeat: no-repeat;
      min-height: 200px;
      .el-table__empty-text {
        display: none;
      }
    }

    // 滚动条样式修改
    /* 滚动条轨道区域样式 */
    ::-webkit-scrollbar {
      height: 8px;
      width: 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;
      /* 设置交叉点处的背景色为透明 */
    }
  }

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

  //自定义表头的样式
  .table_header
  {
    width: calc(100% - 16px);
    margin: auto;
    // background-color: red;
    white-space: nowrap;     /* 禁止换行 */
    overflow: hidden;        /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 溢出部分显示省略号 */
  }

  //排名
  .rank_status
  {
    
    display: flex;
    justify-content: center;
    align-items: center;

    .status_icon
    {
      width: 20px;
      height: auto;
      display: flex;
      align-items: center;
      img
      {
        width: 16px;
        height: 16px;
      }


    }
    .status_number
    {
      width: 30px;
      height: auto;
      text-align: left;
      display: flex;
      align-items: center;
    }
    

  }

  .page_pagination
  {
    margin-top: 10px;
    padding-bottom: 10px;
  }
  //所有可点击打开的表格行样式
  .table_row_blue
  {
    color:#2E64FA;
    cursor: pointer;
  }

  //自定义表格的样式
  .table_custom_row
  {
    width: 100%;
    // height: 40px;
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #EBEEF5;
    align-items: center;
  }
}
//只显示一级标头
.one_tabel_header {
  //影藏子级表头
  .is-group tr:nth-child(2) {
    display: none;
  }
}

//分析报告按钮公共样式
.report_button {

  display: flex;
  gap: 10px;
  .el-input-group__append {
    .el-button {
      width: 100%;
      justify-content: center;
    }
  }

  .el-icon-loading
  {
    color:#666;
  }
  .el-button {
    margin-left: 0px;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;

    span {
      // padding: 0px 10px; 
      display: flex;
      align-items: center;
    }

    img {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }

    
  }

  .el-button--default {
    color: #666;
    font-weight: 400;
    &.is-disabled{
        color: #BBBBBB;
        border-color: #BBBBBB;
    }
  }
  .el-button--primary.is-plain:hover {
    color: #2e64fa;
    background-color: #c0d1fe;
    font-size: 14px;
  }

  //导出excel按钮
  .export_excel {
    width: 103px;
    height: 36px;
    padding: 0;
  }

  //其他按钮可在下面追加
  //对标任务选择按钮
  .button_task_select {
    // padding: 0;

    // 去掉按钮点击后的样式
    &:active,
    &:focus {
      outline: none; // 去掉点击后的轮廓
      box-shadow: none; // 去掉点击后的阴影
      background-color: inherit; // 保持背景颜色不变
      color: #666666; // 保持文字颜色不变
      border: 1px solid #DCDFE6;
    }
  }

  .button_task_select:hover {
    // color: #2E64FA;
    background-color: #f9f9f9;
    border: 1px solid #DCDFE6;
    color:#666;
  }

  .button_ai
  {
    width: 81px;
    height: 36px;
    background: linear-gradient( 90deg, #2E64FA 0%, #9646FF 100%);
    border-radius: 4px 4px 4px 4px;
    font-size: 14px;
    color: #FFFFFF;
  }

  .button_delete
  {
    font-size: 14px;
    color: #F56C6C;
    border: 1px solid #F56C6C;
  }

  .button_delete:hover
  {
    
    background-color: #F56C6C10;
  }

  .button_editor
  {
    font-size: 14px;
    color: #2E64FA;
    border: 1px solid #2E64FA;
    padding: 0px 10px !important;
  }

   
}

//分析报告统计浮窗公共样式
.tooltip_content {
  // max-width: 500px;//设置浮窗的最大宽度
  max-height: 300px; //设置浮窗的最大高度
  overflow: auto; //宽高超出的内容滚动
  padding: 6px 10px;
  width: auto;
  //浮窗里的标题
  .tooltip_title {
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    text-align: left;
  }

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

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


    }
  }

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

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

  //横线图标
  .tooltip_line_icon {
    width: 16px;
    height: 2px;
    background: #848bdc;
    margin-right: 5px;
    display: block;
    margin-top: 8px;
  }
}

//对称条形图浮窗样式
.tooltip_contents {
  max-height: 300px; //设置浮窗的最大高度
  overflow: auto; //宽高超出的内容滚动

  // padding: 0px !important;
  padding: 6px 10px;
  //浮窗里的标题
  .tooltip_title {
    font-weight: 600;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    text-align: left;
    margin-top: 5px;
    margin-bottom: -10px;
  }

  //浮窗里的学生姓名
  .tooltip_student {
    font-weight: 400;
    font-size: 12px;
    color: #666666;
    line-height: 20px;
    display: flex;
    margin-bottom: 5px;
  }
}
// 对称条形图弹窗悬浮层样式更改
.tooltip_contents::-webkit-scrollbar {
  width: 4px;
  /* 设置滚动条宽度为8像素 */
  background-color: transparent;
}
//弹窗悬浮层样式更改
.tooltip_content::-webkit-scrollbar {
  width: 4px;
  /* 设置滚动条宽度为8像素 */
  background-color: transparent;
}

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

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

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

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

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

//图标外层公共样式
.echart_content {
  position: relative;
  width: 100%;
  margin: auto;
  min-height: 360px;
  height: auto;
  // overflow-x: auto;
  .is_show_all {
    position: absolute;
    top: 2px;
    left: 5px;

    // .el-checkbox__label
    // {

    //   color:#333;
    // }
  }

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

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

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

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

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

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

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

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

//echart 图标类型公共样式
.echart_type {
  width: auto;
  height: auto;

  // background-color: red;
  display: flex;
  justify-content: flex-end;
  gap: 12px;

  .chart_icon_item {
    font-weight: 400;
    font-size: 14px;
    color: #909399;
    line-height: 16px;
    // min-width: 70px;

    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 0 50%;
    text-indent: 20px;
    cursor: pointer;
  }

  // 堆叠图
  .stacked_chart {
    background-image: url("@/assets/chart/stacked_chart.webp");
  }
  .stacked_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/stacked_chart_cur.webp");
  }
  // 水平条形图 （横向柱状图)
  .horizontal_bar {
    background-image: url("@/assets/chart/horizontal_bar.webp");
  }
  .horizontal_bar_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/horizontal_bar_cur.webp");
  }

  //垂直条形图 （竖向柱状图)
  .vertical_bar {
    background-image: url("@/assets/chart/vertical_bar.webp");
  }
  .vertical_bar_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/vertical_bar_cur.webp");
  }

  //率差图
  .difference_chart {
    background-image: url("@/assets/chart/difference_chart.webp");
  }
  .difference_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/difference_chart_cur.webp");
  }

  //雷达图
  .radar_chart {
    background-image: url("@/assets/chart/radar_chart.webp");
  }
  .radar_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/radar_chart_cur.webp");
  }

  //折线图
  .line_chart {
    background-image: url("@/assets/chart/line_chart.webp");
  }
  .line_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/line_chart_cur.webp");
  }

  //折线柱状组合图
  .line_bar_chart {
    background-image: url("@/assets/chart/line_bar_chart.webp");
  }
  .line_bar_chart_cur {
    font-weight: 500;
    font-size: 14px;
    color: #2e64fa;
    background-image: url("@/assets/chart/line_bar_chart_cur.webp");
  }
}

//统计图里的学生试卷外层样式
.student_paper {
  width: 100%;
  height: 400px;
  background: #f5f5f5;
  border-radius: 10px 10px 10px 10px;
}

//暂无试卷数据样式
.no_paper_data {
  width: 100%;
  height: 100%;

  background-image: url("@/assets/bg/no_paper_data.webp");
  background-repeat: no-repeat;
  background-size: 320px 214px;
  background-position: 50% 50%;
  position: relative;
  .no_paper_title {
    width: 100%;
    position: absolute;
    top: 70%;
    font-weight: 400;
    font-size: 14px;
    color: #999999;
    text-align: center;
  }
}

//分析报告页面样式
.report_page
{
  width: 100%;
  height: 100%;
  position: relative;
  //目录样式
  .report_catalogue
  {
    width: 210px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    position: absolute;
    top:0;
    right: 0px;
    padding: 10px;
    .catalogue_title
    {
      font-weight: 600;
      font-size: 16px;
      color: #000000;
      line-height: 40px;
    }

    .catalogue_content
    {
      width: 100%;
      background-color: red;

      .menu_catalogue
      {
        // background-color: #2e64fa;
        padding: 0;

        .el-submenu__icon-arrow
        {
          font-size: 17px;
        }
        .el-menu
        {
          border-right: none;
        }

        .el-submenu__title
        {
          padding: 0px !important;
          height: 36px;
          line-height: 36px;
          font-weight: 500;
          font-size: 14px;
          color: #333333;
        }

        .el-submenu .el-menu-item
        {
          height: 36px;
          line-height: 36px;
          padding: 0px !important;

        }
        //一级菜单
        .one_menu
        {
          color:#2E64FA;
          font-weight: 600;
          border-left: 3px solid #2E64FA;
          padding-left: 8px;

        }

        //二级菜单
        .tow_menu
        {
          color:#666666;
          padding-left: 8px;
          font-weight: 600;
        }

        //三级菜单
        .three_menu
        {
          color:#999999;
          text-indent:8px;
        }
      }

      
    }
  }

  // .report_catalogue {
    
  //   transition: top 0.3s ease;
  // }
  
  .report_catalogue.fixed {
    width: 210px;
    height: auto;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    position: fixed;
    top:125px;
    right: 20px;
    z-index: 1000; // 确保在其他内容之上
  }

  //报告内容区域
  .report_content
  {
    width: 100%;
    // height: 100%;
    // overflow-y: auto;
    // // display: flex;
    // // justify-content: center;
    // background-color: red;
  }
}


//页面打印区域
.print_area
{
  width: calc(100% - 220px);
  // margin-left:calc((100% - 220px - 908px)/2);
  // background-color: red;
  height: auto;
  text-align: center;
  .area_page
  {
    width:908px;
    margin: auto;
    height:1285px;
    background-color: #fff;
    padding:40px;
    box-shadow: 8px 8px 8px rgba(155, 155, 155, 0.1);
    margin-bottom: 20px;
    box-sizing: border-box; // 设置盒模型为 border-box  使内部div100%的高度自动减去边距和边框
    position: relative;
    overflow: hidden;
    .area_title
    {

      font-weight: 600;
      font-size: 24px;
      color: #000000;
      line-height: 30px;
      text-align: center;
    }

    .area_module
    {
      width: 100%;
      height: auto;
      .area_module_title
      {
        font-weight: 600;
        font-size: 16px;
        color: #000000;
        margin-bottom: 10px;
        line-height: 40px;
        text-align: left;
      }
      .area_module_describe
      {
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        line-height: 20px;
        text-align: left;
      }
      .area_module_table
      {
        margin-bottom: 20px;
        width: 100% !important; // 确保表格宽度为 100%
        // 添加 overflow 属性以处理内容溢出

        overflow: auto;
        .table_container
        {
          border-radius: 6px;
          overflow: hidden;
        }

        table
        {
          width: 100%; 
          border-collapse: collapse;
          border-radius: 8px;
          border:1px solid #EBEEF5;

          .header_title
          {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top:0;
            max-width: 60px;
            z-index: 3;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          // 设置表头样式
          th {
              background-color: #F4F6F8; /* 背景颜色 */
              color: #333333; /* 文字颜色 */
              padding:0px; /* 内边距 */
              font-weight: 600;
              font-size: 12px;
              line-height: 100%;
              letter-spacing: 0%;
              text-align: center;
              border-bottom: 0px solid #ddd; /* 底部边框 */
              height: 40px;
             
          }
          /* 设置表格内容样式 */
          td {
              padding: 0px; /* 内边距 */
              text-align: center; /* 文字对齐方式 */
              border-bottom: 0px solid #EBEEF5; /* 底部边框 */
          }
          /* 设置表格行的悬停效果 */
          tr:hover {
            background-color: #f5f5f5; /* 悬停时的背景颜色 */
          }
      
          /* 设置表格的斑马线效果 */
          tr:nth-child(even) {
              background-color: #FAFAFA; /* 偶数行的背景颜色 */
          }
        }
        th.table_cell {
          border-right: 1px solid #EBEEF5;
          border-bottom: 1px solid #EBEEF5;
          background-color: #f4f6f8;
          color: #333333;
          font-weight: 600;
          font-size: 14px;
          height: 40px;
          text-align: center;
          position: relative;
        }
      
        td.table_cell {
          border-right: 1px solid #EBEEF5;
          border-bottom: 1px solid #EBEEF5;
          color: #666666;
          font-size: 14px;
          font-weight: 400;
          text-align: center;
          height: 40px;
        }
      
        tr:last-child td.table_cell {
          border-bottom: 0px solid #EBEEF5;
        }
      
        tr td.table_cell:last-child {
          border-right: 0px solid #EBEEF5;
        }
      
        // 二级表头样式
        thead tr:nth-child(2) th.table_cell {
          background-color: #f4f6f8;
          color: #333333;
          font-weight: 600;
          font-size: 14px;
          height: 40px;
          text-align: center;
        }
        .title_blue
        {
          width: 52px;
          height: 25px;
          margin: auto;
          border-radius: 42px;
          text-align: center;
          line-height: 25px;
          font-weight: 400;
          font-size: 12px;
          letter-spacing: 0%;
          text-align: center;
          background-color: #5470C6;
          color:#fff;
        }

        .title_green
        {
          width: 52px;
          height: 25px;
          margin: auto;
          border-radius: 42px;
          text-align: center;
          line-height: 25px;
          font-weight: 400;
          font-size: 12px;
          letter-spacing: 0%;
          text-align: center;
          background-color: #3BA272;
          color:#fff;
        }
      }

      .area_module_chart
      {
        width: 100%;
        height: auto;
        .echart_content
        {
          width: 100% !important;
          min-height: 300px !important;
        }
      }
    }
    .area_header
    {
      width: 100%;
      margin: auto;
      height: 48px;
      background: rgba(238,102,102,0.1);
      border-radius: 8px;
      border:1px solid rgba(245,108,108,0.5);
      font-weight: 600;
      font-size: 20px;
      color: #EE6666;
      text-align: center;
      line-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      .header_icon_left
      {
        width: 24px;
        height: 24px;
        margin-right: 20px;
      }

      .header_icon_right
      {
        width: 24px;
        height: 24px;
        margin-left: 20px;
      }
      
    }
    //考试总览数据
    .area_info
    {
      width: 100%;
      height: 88px;
      display: flex;
      justify-content: space-between;
      .info_item
      {
        width: calc(33% - 7px);
        
        border-radius: 4px;
        display: flex;
        align-items: center;
        .item_number
        {
          width: 25%;
          height: auto;
          text-align: center;

          .number_title
          {
            font-weight: 400;
            font-size: 12px;
            
            line-height: 20px;
          }
          .number_value
          { 
            font-weight: bold;
            font-size: 18px;
          
            line-height:30px;
          }
 
          
        }
      }
      .bg_0
      {
        background: linear-gradient( 135deg, #B4D2FF 0%, #F1F7FF 100%);
        color:#15325E;
      }
      .bg_1
      {
        background: linear-gradient( 135deg, #FFCAE1 0%, #FFF3F8 100%);
        color:#5D1638;
      }
      .bg_2
      {
        background: linear-gradient( 135deg, #D2C6FF 0%, #F7F1FF 100%);
        color:#41155E;
      }
    }
    //命题分析数据样式
    .analysis_info
    {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .info_item
      {
        width: calc((100% - 40px)/5);
        border-radius: 4px;
        display: flex;
        align-items: center;
        .item_number
        {
          width: calc(100% - 20px);
          margin: auto;
          height: auto;
          text-align: left;
          padding: 20px;
          .number_title
          {
            font-weight: 400;
            font-size: 12px;
            
            line-height: 20px;
          }
          .number_value
          { 
            font-weight: bold;
            font-size: 18px;
          
            line-height:30px;
          }
        }
      }

      .bg_0
      {
        background: linear-gradient( 135deg, #B4D2FF 0%, #F1F7FF 100%);
        color:#15325E;
      }

      .bg_1
      {
        background: linear-gradient( 135deg, #FFCAE1 0%, #FFF3F8 100%);
        color:#5D1638;
      }

      .bg_2
      {
        background: linear-gradient( 135deg, #D2C6FF 0%, #F7F1FF 100%);
        color:#41155E;
      }

      .bg_3
      {
        background: linear-gradient( 135deg, #FFCAE1 0%, #FFF3F8 100%);
        color:#5D1638;
      }

      .bg_4
      {
        background: linear-gradient( 135deg, #D2C6FF 0%, #F7F1FF 100%);
        color:#41155E;
      }
    }

    .area_line
    {
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #E9E9E9;
    }

    .area_page_number
    {
      position: absolute;
      width: 100%;
      bottom: 20px;
      left: 0;
      text-align: center;
      color: #333333;
      font-size: 12px;
      font-weight: 400;
    }

    .area_page_title
    {
      position: absolute;
      width: 100%;
      top: 16px;
      right: 40px;
      text-align: right;
      color: #333333;
      font-size: 12px;
      font-weight: 400;
    }

  }
}

//成绩小条打印区域
.print_slip
{
  width: 100%;
  height: calc(100% - 40px);
  
  margin: auto;
  overflow-y: auto;
  .slip_page
  {
    width: 595px;
    height: 842px;
    margin: auto;
    background: #fff;
    border-radius: 0px 0px 0px 0px;
    padding: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
  }
  .student_item
  {
    width: 100%;
    // height: calc((100% - 40px)/3);
    height: auto;
    // border-bottom: 1px dashed #E6E6E6;
    // margin-bottom: 20px;

    &:last-child
    {
      margin-bottom:0;//移除最后一个的底部边距
    }
    .item_header
    {
      width: 100%;
      display: flex;
      justify-content: space-between;
      height: 25px;
      .header_left
      {
        font-weight: 500;
        font-size: 12px;
        color:#000;
        display: flex;
        justify-content: flex-start;
        gap: 20px;

      }

      .header_right
      {
        font-weight: 400px;
        font-size: 12px;
        color:#333;
        span
        {
          font-weight: 500;
          font-size: 12px;
          color: #000;
        }
      }
    }

    .item_line
    {
      width: 100%;
      height: 50px;
     

      display: flex;
      justify-content: flex-start;
      align-items: center;
      .line_left
      {
        width: 20px;
        height: 20px;
        background-image: url("@/assets/report/scissors_left.webp");
        background-size:16px auto;
        background-position: 50% 50%;
        background-repeat: no-repeat;

      }

      .line_right
      {
        width: 20px;
        height: 20px;
        background-image: url("@/assets/report/scissors_right.webp");
        background-size:16px auto;
        background-position: 50% 50%;
        background-repeat: no-repeat;
      }

      .line_content
      {
        width: calc(100% - 40px);
        height: 1px;
        border-bottom: 1px dashed #E6E6E6;
      }
    }
  }

  .item_table
  {
      width: 100%;
      height: auto;
      // min-height: 200px;
      border-radius: 5px;
      border:1px solid #EBEEF5;
      border-bottom: 0px solid #EBEEF5;
      display: flex;
      justify-content:space-between;
  
      .table_td_header
      {
          width: 100%;
          background-color: #F4F6F8;
          height:22px;
          line-height: 22px;
          text-align: center;
          border-left: 1px solid #EBEEF5;
          border-bottom: 1px solid #EBEEF5;
  
          font-size: 10px;
          color:#000;
          font-weight: 500;

          white-space: nowrap;     /* 禁止换行 */
          overflow: hidden;        /* 隐藏溢出内容 */
          text-overflow: ellipsis; /* 溢出部分显示省略号 */
      }
  
      .table_td
      {
          width: 100%;
          height:22px;
          line-height: 22px;
          text-align: center;
          border-left: 1px solid #EBEEF5;
          border-bottom: 1px solid #EBEEF5;
          font-size: 10px;
          color:#333;
          font-weight: 400;
      }
  
      .table_left
      {
          width: 39px;
          height: auto;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          .table_tr
          {
              width:100%;
              height: auto;
  
              // &:last-child
              // {
              //     .table_td {
  
              //         &:last-child
              //         {
              //             border-bottom: none; // 移除最后一个 .table_tr 的底部边框
              //         }
              //     }
              // }
              .table_td_header
              {
                  width: 100%;
                  background-color: #F4F6F8;
                  height:22px;
                  line-height: 22px;
                  text-align: center;
                  border-left: 1px solid #fff;
                  border-bottom: 1px solid #EBEEF5;
              }
  
              .table_td
              {
                  width: 100%;
                  height:22px;
                  line-height: 22px;
                  text-align: center;
                  border-left: 1px solid #fff;
                  border-bottom: 1px solid #EBEEF5;
              }
  
  
          }
  
      }
      .table_right
      {
          width: calc(100% - 39px);
          display: flex;
          justify-content:space-between;
          flex-wrap: wrap;
          .table_tr
          {
              width:calc(100%/12);
              height: auto;
          }
      }
  }
  
  .td_icon_yes
  {
      width: 100%;
      height: 100%;
      background-image: url("@/assets/report/yes_icon.webp");
      background-size:12px auto;
      background-position: 50% 50%;
      background-repeat: no-repeat;
  }
  
  .td_icon_no
  {
      width: 100%;
      height: 100%;
      background-image: url("@/assets/report/no_icon.webp");
      background-size:12px auto;
      background-position: 50% 50%;
      background-repeat: no-repeat;
  }
  
  .td_icon_dimidiate
  {
      width: 100%;
      height: 100%;
      background-image: url("@/assets/report/dimidiate_icon.webp");
      background-size:12px auto;
      background-position: 50% 50%;
      background-repeat: no-repeat;
  }
}

//内容间距
.pring_jg
{
  width: 100%;
  height: 20px;
}
.pring_jg10
{
  width: 100%;
  height: 10px;
}

// 年级组长的封面背景
.grade_leader_bg
{
  background: url('~@/assets/bg/grade_leader.webp') no-repeat center/cover;

}

// 备课组长的封面背景
.lesson_leader_bg
{
  background: url('~@/assets/bg/lesson_leader.webp') no-repeat center/cover;
}

// 班主任的封面背景
.class_teacher_bg
{
  background-image: url('~@/assets/bg/class_teacher.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-origin: 0 0;
}

// 任课教师的封面背景
.teacher_bg
{
  background: url('~@/assets/bg/teacher_report.webp') no-repeat center/cover;
}

// 学生的封面背景
.student_bg
{
  background: url('~@/assets/bg/student_report.webp') no-repeat center/cover;
}
//报告的封面内部样式
.report_cover {
  width: 100%;
  height: 100%;
  box-sizing: border-box; // 确保内部 div 也使用 border-box
  position: relative;
  .cover_header {
    width: 100%;
    position: absolute;
    top: 170px;//210-40  40边距
    color: #000;
    text-align: center;
    .cover_header_title1 {
      font-weight: 600;
      font-size: 40px;
      line-height: 64px;
      white-space: nowrap;
    }
    .cover_header_title2 {
      font-weight: 500;
      font-size: 28px;
      margin-top: 30px;
    }
  }

  .cover_footer {
    position: absolute;
    width: 100%;
    bottom: 40px;
    color: #333;
    text-align: center;
    .cover_footer_desc {
      font-weight: 500;
      font-size: 18px;
      line-height: 28px;
    }
  }
}

/* 分析报告 的目录内部样式 */
.report_directory {
  box-sizing: border-box;
  width: 100%;
  background-color: #fff;
  padding: 0px 40px 30px;//需要减去外部的40px边距

  .title_tag {
    display: inline-block;
    font-style: normal;
    background-color: #2E64FA;
    width: 4px;
    height: 20px;
  }

  /* 目录标题 */
  .directory_title {
    font-weight: 600;
    font-size: 40px;
    line-height: 56px;
    text-align: center;
    color: #000;
  }

  .directory_content {
    
    li {
      height: 34px;
      line-height: 34px;
      display: flex;
      justify-content: space-between;
      .content_left 
      {

        width: calc(100% - 50px);
        height: 100%;
        position: relative;
        
        .left_line
        {
          position: absolute;
          width: 100%;
          height: 1px;
          border-top: 1px dashed #e9e9e9;
          top:16px;
          right:0px;
          z-index: 1;
        }
      }

      .content_right {
        width:40px;
        font-size: 16px;
        text-align: right;
        color:#999;
        font-weight: 400px;
      }

      .one_title
      {

          .left_line
          {
            position: absolute;
            width: 100%;
            height: 1px;
            border-top: 1px dashed #2E64FA;
            top:16px;
            right:0px;
            z-index: 1;
          }
          span
          {
            position: absolute;
            left: 0px;
            top: 3px;
            color:#2E64FA;
            height: 28px;
            line-height: 28px;
            font-weight: 600;
            font-size: 20px;
            border-left: 4px solid #2E64FA;
            padding-left: 12px;
            background-color: #fff;
            z-index: 2;
            padding-right: 20px;
          }
        }

        .two_title
        {

          span
          {
            position: absolute;
            left: 0px;
            top: 3px;
            height: 28px;
            line-height: 28px;
            font-weight: 500;
            font-size: 16px;
            color: #333333;
            border-left: 4px solid #fff;
            background-color: #fff;
            padding-left: 12px;
            z-index: 2;
            padding-right: 20px;
          }
          
        }
        .three_title
        {

          span
          {
            position: absolute;
            left: 0px;
            top: 3px;
            height: 28px;
            line-height: 28px;
            font-weight: 400;
            font-size: 16px;
            color: #999999;
            border-left: 4px solid #fff;
            background-color: #fff;
            padding-left: 12px;
            z-index: 2;
            padding-right: 20px;
          }
          
        }
    }
  }
}

.report_loading
{
  padding: 10px 40px;

  .report_loading_icon
  {
    text-align: center;
    img
    {
      width: 200px;
      height: auto;
    }
  }
  .report_loading_title
  {
    font-size: 14px;
    color:#333;
    font-weight: 400;
    text-align: center;
    display: flex;
    justify-content: center;
  }

  .report_loading_progress
  {
    padding: 40px;

    .el-progress-bar__innerText
    {
      margin-bottom: 3px;
    }
  }

  


}



.table_no_scrollbar
{
    /* 隐藏滚动条 */
    .el-table__body-wrapper
    {
      // /* 隐藏竖向滚动条 */
      // ::-webkit-scrollbar-vertical {
      //   display: none; /* Chrome, Safari, Opera */
      // }
      //成绩单表格竖向滚动条隐藏
      &::-webkit-scrollbar
      {
        width: 0;
      }
      // scrollbar-width: none; /* Firefox */
    }
    
}