page {
  height: 100%;
  background-color: rgb(240, 240, 240);
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


.col {
  display: flex;
  flex-direction: column;
}

.question {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  .nav-wrapper {
    
    z-index: 999;
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: 5rpx;
    background-color: #fff;
    .nav-btn {
      margin-right: 50rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      color: #000;
      display: flex;
      align-items: center;
      flex-direction: row;
      &:last-child {
        margin-right: 0;
      }

      .open-icon-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 60rpx;
        height: 40rpx;
      }
      
      .open-icon {
        margin-left: 10rpx;
        width: 25rpx;
        height: 15rpx;
      }
     
    }
    .active {
      color: #22a0fa;
    }
    .switch-bar {
      // width: 50rpx;
      height: 6rpx;
      border-radius: 3rpx;
      background-color: #22a0fa;
      transition: all 250ms ease;
    }

  }
  .first-choose {
    width: 110rpx;
    transform: translateX(0rpx);
  }
  .second-choose {
    width: 80rpx;
    transform: translateX(155rpx);
  }
  .third-choose {
    width: 80rpx;
    transform: translateX(270rpx);
  }
  .quest-content {
    background-color: #ffffff;
    height: 100%;
    .my-question-answer {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      height: 100%;
      .tool {
        padding: 0 30rpx;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgb(240, 240, 240);
        line-height: 60rpx;
        font-size: 22rpx;
        letter-spacing: 1rpx;
        color: rgb(197, 195, 195);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        .switch-wrapper {
          line-height: 60rpx;
        }
      }
      .no-data-prompt {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -100rpx;
        .image {
          display: block;
          // margin: 0 auto;
          margin-bottom: 30rpx;
          width: 180rpx;
          height: 101rpx;
        }
        .message {
          font-size: 22rpx;
          letter-spacing: 1rpx;
          color: rgb(197, 195, 195);
        }
      }
    }
    .question-item {
      padding: 20rpx 30rpx;
      padding-top: 40rpx;
      border-bottom: 1px solid rgb(240, 240, 240);
      background-color: #fff;
      font-size: 0;
      .remark {
        display: inline-block;
        padding: 0 12rpx;
        margin-right: 15rpx;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-weight: 700;
        vertical-align: top;
        // height: 40rpx;
        
      }
      .hot {
        background-color: #ffccc7;
        color: #f5222d;
      }
      .stick {
        background-color: #ffe7ba;
        color: #fa8c16;
      }
      .new {
        background-color: #bae7ff;
        color: #1890ff;
      }
      .width {
        width: 600rpx;
      }
      .title {
        // display: inline;
        font-size: 30rpx;
        letter-spacing: 1rpx;
        font-weight: 700;
        width: calc(100% - 10rpx);
        // height: 40rpx;
      }
      .desc {
        margin-top: 20rpx;
        font-size: 22rpx;
        letter-spacing: 1rpx;
        color: rgb(175, 174, 174);
      }
      .hide-text {
        // overflow: hidden;
        text-overflow: ellipsis; //文本溢出显示省略号
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .other-message {
        font-size: 0;
        display: flex;
        justify-content: flex-end;
        .other-message-item {
          align-items: center;
          margin-right: 20rpx;
          font-size: 0;
          &:last-child {
            margin-right: 0;
          }
          .image {
            
            margin-right: 10rpx;
            width: 25rpx;
            height: 25rpx;
            vertical-align: top;
            &.eye {
              width: 32rpx;
              height: 32rpx;
            }
          }
          .eye-text {
            line-height: 32rpx;
          }
          .text {
            line-height: 25rpx;
            font-size: 20rpx;
            color: rgb(175, 174, 174);
          }
        }
      }
    }
  }
}