EAIFrontend/src/components/AIChatter/AIChatter.module.scss

.container {
  position: relative;
  width: 100%;
  height: 60%; // 原值：60%
  padding: 10px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;

  .header {
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 10px; /* 控制阴影的高度 */
      box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.2); /* 自定义阴影的大小和颜色 */
      z-index: -1; /* 确保阴影在内容下方 */
    }
  }

  .message-box {
    width: 100%;
    height: 80%;
    overflow-y: auto;

    .item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;

      .content {
        background-color: #f0f0f0;
        padding: 8px 12px;
        border-radius: 16px;
        word-break: break-word;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .question-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    height: 10%;
    //background-color: red;

    .input-group {
      display: flex;
      align-items: center;

      //border: 1px solid #d9d9d9;
      border: 1px solid #ececec;
      border-radius: 5px;
      //background-color: red;

      & .button {
        width: 140px;
        //&:hover {
        //  background-color: #d9d9d9;
        //}
      }
    }
  }

}
//教师视图 应当适配correctPage
.teacher-view{
  position: relative;
  width: 100%;
  height: 90%; 
  padding: 5px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;


  .message-box {
    width: 100%;
    height: 34vh;
    overflow: auto;

    .item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;

      .content {
        background-color: #f0f0f0;
        padding: 8px 12px;
        border-radius: 16px;
        word-break: break-word;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      }
    }
  }

}

//  .question-box {
//    height: 10%;
//
//    .input-group {
//            border: 1px solid #d9d9d9;
//            border-radius: 5px;
//      .button {
//        width: 40px;
//        &:hover {
//          background-color: #d9d9d9;
//        }
//      }
//    }
//  }
//
//}