.page {
  padding: 60px 0px;
  width: 100%;
  height: 100%;
  background: rgba(237,239,247,1);
}
.testData {
  width: 1180px;  
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  .testList {
    width: 100%;
    height: 148px;
    background: white;
    margin-top: 16px;
    border-radius:6px;
    .testProject {
      margin-top: 16px;
      margin-left: 135px;
      .el-button{
        padding: 7px 20px;
        position: relative
      }
      .el-button--primary{
        width: 144px;
        height: 32px;
        border-radius: 17px;
        font-size: 14px;
        color: #4E5DFF;
        background:rgba(245,248,255,1);
        border-color: #fff;
      }
      .el-button--primary:focus,.el-button--primary:hover {
        background: #4E5DFF;
        border-color: #4E5DFF;
        color: #fff;
      }
    }
    .testItem {
      width: calc(100% - 200px);
      height: 78px;
      display: flex;
      flex-direction: row;
      margin-left: 100px;
      margin-top: 16px;
      .itemArrow {
        width: 30px;
        height: 100%;
        margin-top: 20px;
        cursor: pointer;
        font-size: 30px;
        color: #999999;
      }
      .testContent {
        flex-grow: 2;
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        .testTopic {
          width: 145px;
          height: 68px;
          margin:0px 5px;
          flex-shrink: 0;
          background:rgba(237,237,237,1);
          border-radius:2px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(100,107,129,1);
          line-height:20px;
          padding: 5px;
          box-sizing: border-box;
          position: relative;
          .testSel {
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 16px;
            height: 16px;
          }
        }
        .testTopicSel {
          background:rgba(78,93,255,1);
          color:rgba(255,255,255,1);
        }
      }
    }
  }
  .testTip {
    width: 100%;
    height: 80px;
    line-height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size:18px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
    .switchItem {
      display: flex;
      flex-direction: row;
      height: 40px;
      background:rgba(255,255,255,1);
      border-radius:20px;
      .switch {
        width: 80px;
        height: 40px;
        line-height: 40px;
        background:rgba(255,255,255,1);
        border-radius:20px;
        text-align: center;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(78,93,255,1);
        cursor: pointer;
      }
      .switchSelected {
        color:rgba(255,255,255,1);
        background:rgba(78,93,255,1);
      }
    }
    .analyseBag {
      display: flex;
      flex-direction: row;
      width:340px;
      height:34px;
      background:rgba(255,255,255,1);
      border-radius:17px;
      .analyseBagTitle {
        width:64px;
        height:34px;
        border-radius:17px;
        text-align: center;
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:34px;
        .el-button{
          padding: 7px 0px;
          position: relative
        }
        .el-button--primary{
          width:64px;
          height:34px;
          border-radius: 17px;
          font-size: 14px;
          color: #fff;
          background: #4E5DFF;
          border-color: #fff;
        }
        .el-button--primary:focus,.el-button--primary:hover {
          background: #4E5DFF;
          border-color: #4E5DFF;
          color: #fff;
        }
      }
      .analyseBagList {
        height: 34px;
        margin-top: -24px;
        .el-cascader {
          width: 260px;
          background:rgba(241,241,241,1);
          line-height: 34px;
          font-size:14px;
          color:rgba(51,51,51,1);
          .el-input__inner {
            height: 34px;
            line-height: 34px;
            background:rgba(255,255,255,1);
            border: 0px;
          }
          .el-input__icon {
            line-height: 34px;
          }
        }
      }
    }
    .addBag {
      font-size:12px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(100,107,129,1);
      line-height:17px;
      cursor: pointer;
      padding-left: 10px;
    }
  }
  .answer {
    width: 100%;
    background: white;
    border-radius:6px;
    padding: 24px 120px;
    box-sizing: border-box;
    .filter {
      width: 100%;
      height: 40px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .filterIcon {
        width: 100px;
        height: 40px;
        cursor: pointer;
      }
      .rightFilter {
        display: flex;
        flex-direction: row;
        .rightFilterItem {
          width: 48px;
          height: 24px;
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(153,160,182,1);
          line-height:24px;
          border-radius:14px;
          border:1px solid rgba(153,160,182,1);
          text-align: center;
          margin: 0px 4px;
          cursor: pointer;
        }
        .rightFilterItemSel {
          color:rgba(78,93,255,1);
          border:1px solid rgba(78,93,255,1);
        }
      }
    }
    .filterContent {
      width: 100%;
      .filterView {
        background:rgba(250,250,250,1);
        border-radius:6px;
        padding: 24px 16px;
      }
      .filterItem {
        width: 100%;
        margin: 4px 0px;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        .filterTitle {
          margin-top: 5px;
          margin-left: 8px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:20px;
          flex-shrink: 0;
          width: 57px;
        }
        .filterAnswer {
          margin-left: 10px;
          flex-shrink: 0;
          margin-right: 10px;
          .el-cascader {
            width: 320px;
            background:rgba(241,241,241,1);
            line-height: 30px;
            font-size:14px;
            color:rgba(51,51,51,1);
            .el-input__inner {
              height: 30px;
              line-height: 30px;
              background:rgba(241,241,241,1);
            }
            .el-input__icon {
              line-height: 30px;
            }
          }
        }
        .filterReply {
          display: flex;
          align-items:center;
        }
      }
      .addfilter{
        width:320px;
        height:30px;
        border:1px dashed rgba(202,204,210,1);
        margin-left: 74px;
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        .addfilterIcon {
          width: 74px;
          height: 18px;
        }
      }
      .filterDel {
        cursor: pointer;
        display: flex;
        align-items:center;
        color: #646B81;
        margin-left: 10px;
      }
      .filterSave {
        height: 28px;
        margin-left: 74px;
        margin-top: 16px;
        display: flex;
        text-align: center;
        .saveLocation {
          width:80px;
          height:28px;
          background:rgba(78,93,255,1);
          border-radius:14px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:28px;
        }
        .saveOnLine {
          margin-left: 16px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(78,93,255,1);
          line-height:28px;
          width:200px;
          height:28px;
          border-radius:14px;
          border:1px solid rgba(78,93,255,1);
          cursor: pointer;
        }
      }
      .filterResult {
        font-size:14px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
        border-bottom: 1px dashed #E8E8E8;
        padding-top: 4px;
        padding-bottom: 15px;
      }
    }
    .result {
      .resultItem {
        margin-top: 36px;
        padding-bottom: 20px;
        border-bottom:1px dashed rgba(202,204,210,1);
        .resultTitle {
          font-size:18px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height:25px;
        }
        .resultTable {

          border-radius:4px;
          border:1px solid rgba(232,232,232,1);
          margin-top: 8px;
        }
        .tableHeader {
          display: flex;
          flex-direction: row;
          height: 32px;
          background:rgba(250,250,250,1);
          border-radius:4px 0px 0px 0px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(0,0,0,0.85);
          line-height:21px;
          align-items:flex-end;
          .option {
           flex-grow: 2;
           padding-left: 25px;
           box-sizing: border-box;
          }
          .numbers {
            width:236px;
            height: 100%;
            padding-top: 8px;
            padding-left: 25px;
            box-sizing: border-box;
            border-left:1px solid rgba(232,232,232,1);
            border-right:1px solid rgba(232,232,232,1);
          }
          .percent {
            width: 408px;
            padding-left: 25px;
            box-sizing: border-box;
          }
        }
        .tableRow {
          display: flex;
          flex-direction: row;
          height: 32px;
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(0,0,0,0.65);
          line-height:21px;
          align-items:flex-end;
          .option {
           flex-grow: 2;
           height: 100%;
           padding-top: 8px;
           padding-left: 25px;
           box-sizing: border-box;
           border-top:1px solid rgba(232,232,232,1);
          }
          .numbers {
            width:236px;
            height: 100%;
            padding-top: 8px;
            padding-left: 25px;
            box-sizing: border-box;
            border-left:1px solid rgba(232,232,232,1);
            border-right:1px solid rgba(232,232,232,1);
            border-top:1px solid rgba(232,232,232,1);
          }
          .percent {
            width: 408px;
            height: 100%;
            padding-top: 8px;
            padding-left: 25px;
            box-sizing: border-box;
            border-top:1px solid rgba(232,232,232,1);
          }
        }
      }
    }
    .chart {
      display: flex;
      flex-direction: column;
      margin-top: 30px;
      .chartItem {
        display: flex;
        flex-direction: column;
        .chartTitle {
          font-size:18px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(51,51,51,1);
          line-height:25px;
        }
        .chartData {
          width: 100%;
          height: 400px;
        }
      }
    }
    
  }
  .crossAnalyse {
    width: 100%;
    background: white;
    border-radius:6px;
    padding: 24px 120px;
    box-sizing: border-box;
    .crossFilter{
      background:rgba(250,250,250,1);
      border-radius:6px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap:wrap;
      .xyFilter {
        width: 360px;
        .el-cascader {
          width: 320px;
          background:rgba(241,241,241,1);
          line-height: 30px;
          font-size:14px;
          color:rgba(51,51,51,1);
          .el-input__inner {
            height: 30px;
            line-height: 30px;
            background:rgba(241,241,241,1);
          }
          .el-input__icon {
            line-height: 30px;
          }
        }
        .addfilter{
          width:320px;
          height:30px;
          border:1px dashed rgba(202,204,210,1);
          margin-top: 8px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .addfilterIcon {
            width: 74px;
            height: 18px;
          }
        }
      }
      .crossFilterTitle {
        font-size:14px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:20px;
      }
      .crossFilterSubTitle {
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(51,51,51,1);
        line-height:20px;
      }
      .analyse {
        width: 100%;
        margin: 16px 0px;
        display: flex;
        flex-direction: row;
        .startAnalyse {
          margin-left: 90px;
          width:80px;
          height:28px;
          background:rgba(78,93,255,1);
          border-radius:14px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(255,255,255,1);
          line-height:28px;
          text-align: center;
          cursor: pointer;
        }
        .analyseTip {
          font-size:12px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(255,0,0,1);
          line-height:28px;
          margin-left: 8px;
        }
      }
    }
    .crossAnalyseTable {
      .crossAnalyseTitle {
        font-size:18px;
        font-family:PingFangSC-Medium,PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:25px;
        margin-top: 32px;
      }
      .crossAnalyseChart {
        width: 100%;
        margin: 8px 0px;
      }
      .table{
        border-radius:4px;
        border-top:1px solid rgba(232,232,232,1); 
        border-left:1px solid rgba(232,232,232,1); 
      }
      .caTable {
        display: flex;
        flex-direction: row;
        .headerRow {
          background:rgba(250,250,250,1);
          border-radius:4px 0px 0px 0px;
          font-size:14px;
          font-family:PingFangSC-Medium,PingFang SC;
          font-weight:500;
          color:rgba(0,0,0,0.85);
          line-height:21px;
          align-items:flex-end;
          padding-top: 8px;
          padding-bottom: 12px;
          box-sizing: border-box;
          border-bottom: 1px solid #E8E8E8;
          border-right: 1px solid #E8E8E8;
        }
        .tabkeRow {
          font-size:14px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(0,0,0,0.65);
          line-height:21px;
          align-items:flex-end;
          padding-top: 8px;
          padding-bottom: 1px;
          padding-left: 5px;
          box-sizing: border-box;
          border-bottom: 1px solid #E8E8E8;
          border-right: 1px solid #E8E8E8;
        }
        
      }
    }
  }
}
