surveyMaker/src/views/cnctestlists/cncTestLists.scss

.page {
  background: #EDEFF7;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-content {
  width: 61.45%;
  height: 100%;
  margin: 0 auto;
  padding-top: 60px;
  display: flex;
  flex-direction: column;

  .title-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 36px;
    align-items: center;

    .create-test-box {
      display: flex;
      flex-direction: row;
      align-items: center;

      .create-test {
        width: 77px;
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border-radius: 14px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(111, 111, 111, 1);
        line-height: 28px;
        text-align: center;
      }

      .select-test {
        width: 77px;
        height: 28px;
        background: rgba(255, 255, 255, 1);
        border-radius: 14px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        color: rgba(78, 93, 255, 1);
        line-height: 28px;
        text-align: center;
      }
    }
  }

  .content {
    width: 100%;
    height: 100%;
    margin-top: 33px;
    background: rgba(255, 255, 255, 1);
    border-radius: 6px;
    padding-top: 13px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    .item-test {
      height: 50px;
      width: 100%;
      display: flex;
      padding-left: 40px;
      padding-right: 40px;
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 10px;

      .item-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 30%;
      }

      .item-right {
        display: flex;
        flex-direction: row;
        align-items: center;

        .project-name,
        .qr-num {
          font-size: 14px;
          font-family: STYuanti-SC-Regular;
          font-weight: 400;
          color: rgba(153, 160, 182, 1);
          width: 150px;
        }

        .qr-num {
          margin-left: 11%;
          margin-right: 7%;
        }

        .use-test,
        .watch-test {
          width: 110px;
          height: 30px;
          background: rgba(230, 237, 255, 1);
          border-radius: 15px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;

          .watch-icon {
            width: 15px;
            height: 11px;
            background-image: url('../../assets/images/watch-icon.png');
            background-size: 15px 11px;
            margin-right: 3px;
          }

          span {
            display: inline-block;
            line-height: 30px;
            font-size: 12px;
            font-family: STYuanti-SC-Regular;
            font-weight: 400;
            color: rgba(78, 93, 255, 1);
          }
        }

        .use-test {
          margin-left: 20px;

          .use-icon {
            width: 11px;
            height: 13px;
            background-image: url('../../assets/images/use-icon.png');
            background-size: 11px 13px;
            margin-right: 3px;
          }
        }
      }
    }

    .item-test:hover {
      background: rgba(230, 237, 255, 1);

      .watch-test,
      .use-test {
        cursor:pointer;
        background: rgba(78, 93, 255, 1);

        .use-icon {
          background-image: url('../../assets/images/use-icon-white.png');
          background-size: 11px 13px;
        }

        span {
          color: rgba(255, 255, 255, 1);
        }
      }

      .watch-test {
        .watch-icon {
          background-image: url('../../assets/images/watch-icon-white.png');
          background-size: 15px 11px;
        }
      }

    }

    .loading-style{
      height: 50px;
      width: 100%;
      display: flex;
      justify-content: center;
      color: rgba(78, 93, 255, 1);
      align-items: center;
    }
  }

}

.el-button {
  padding: 7px 20px;
  position: relative
}

.el-button--primary {
  width: 220px;
  border-radius: 17px;
  font-size: 14px;
  color: #4E5DFF;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

.el-button--primary:focus,
.el-button--primary:hover {
  background: #4E5DFF;
  border-color: #4E5DFF;
  color: #fff;
}

.icon-right {
  position: absolute;
  right: 10px;
}

.dialog {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 100000;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .dialog-content {
    width: 560px;
    height: 70%;
    position: relative;

    .close {
      cursor: pointer;
      width: 28px;
      height: 28px;
      position: absolute;
      top: 0;
      right: 0;
    }

    .content-box {
      width: 100%;
      height: 100%;
      background-color: #FFFFFF;
      margin-top: 50px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;


      .dialog-title {
        width: 100%;
        height: 98px;
        background: rgba(78, 93, 255, 1);
        border-radius: 6px 6px 0px 0px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 98px;
        padding-left: 42px;
      }

      .dialog-qr {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-left: 30px;
        padding-right: 15px;

        .qr-item {
          width: 100%;
          margin-top: 19px;
          margin-bottom: 20px;

          .title {
            display: inline-block;
            font-size: 14px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
          }

          .qr-as-text {
            display: flex;
            flex-direction: column;
            padding-left: 55px;
            margin-top: 6px;
            span{
              font-size: 14px;
            }
          }

          .qr-as-img {
            width: 100%;
            padding-left: 55px;
            margin-top: 6px;

            .qr-img {
              width: 100px;
              display: inline-block;
              flex-direction: column;
              align-items: center;
              margin-bottom: 10px;
              margin-right: 7px;

              .qr-image {
                width: 100px;
                height: 72px;
                margin-bottom: 4px;
              }

              .qr-desc {
                display: inline-block;
                width: 100px;
                height: 46px;
                font-size: 14px;
                color: rgba(0, 0, 0, 1);
                line-height: 23px;
                white-space: normal !important;
                word-break: break-all;
                overflow: hidden;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }

      }
    }
  }
}