.container {  
  padding: 0rpx;  
  display: flex;  
  flex-direction: column;  
  width: 100%; /* 宽度占满整个屏幕 */  
  height: 100%; /* 高度占满整个视口高度 */  
  position: absolute; /* 使用绝对定位 */  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
}  

.classname{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  margin-top: 200rpx;
  text-align: center;
  font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
  font-size: 70rpx;  /* 字体大小 */
  color: rgb(224, 222, 222);
  font-weight: bolder;
  z-index: 20;
  width:100%;
}

.blackboard{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 10;
}
image{
  width: 780rpx;
}
.roll {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}
.scroll-text {  
  font-size: 24px;  
  font-weight: bold;  
  white-space: nowrap;  
}
.teacher {
  width: 150px;
  height: auto;
  margin-top: -100rpx;
  /* margin-right: -300rpx; */
}

.surperise {  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  justify-content: center; /* 水平居中，但这里可能不需要，因为我们希望元素靠左对齐但内部居中 */  
  width: 100%;  
  box-sizing: border-box; /* 确保padding不影响宽度 */  
  padding: 5rpx; /* 可选，增加内边距以避免内容紧贴边缘 */  
  /* margin-top: -40rpx;
  margin-bottom: 60rpx; */
  /* justify-content: space-between; 移除这个，因为我们不需要元素之间的间距 */  
  
}  
  
.s {  
  width: 60rpx;   /* 适当调整宽度 */  
  height: 60rpx;  /* 适当调整高度 */  
  margin-right: 20rpx; /* 调整图标和文字之间的间距 */  
  /* background-color: lightblue;  移除背景颜色，实际使用时不需要 */  
  /* background-color: lightblue; */
}  
  
.word {  
  display: flex; /* 保持flex布局，但这里其实不需要设置display: flex，因为里面只有一个子元素 */  
  align-items: center; /* 保持垂直居中，但这里其实可以省略，因为默认就是居中的 */  
  /* flex-direction: column; 移除这个，因为我们不需要纵向排列 */  
}  
  
.s1 {  
  font-size: 20px;  
  font-weight: bolder;  
}  
  
.class_button {  
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-top: -20rpx;  
  background-color: #3f5a3b; /* 淡蓝色 */  
  color: white;  
  border: none;  
  border-radius: 50rpx;  
  margin-bottom: 20rpx;  
}  
  
.evaluate {
  position: relative;  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 80%;  
  color: white;  
  border-radius: 27rpx;  
  margin-bottom: 80rpx;
}

.input {
  position: relative;
  background-color: white;
  padding: 10rpx;
  border: 3px solid #3f5a3b;
  border-radius: 25px;
  left: 40rpx;
  z-index: 2;  
  color: #000;
}

.e0 {
  position: relative;
  right: 40rpx;
  padding-right: 15rpx;
  padding-top: 25rpx;
  padding-bottom: 25rpx;
  background-color: #90989d; 
  color: white;  
  border: none;  
  border-radius: 35px 35px 35px 35px;  
  z-index: 1;
}