.remark {  
  display: flex;  
  flex-direction: column; // 垂直布局  
  gap: 10px; // 元素之间的间隙  
  padding: 10px; // 内边距  
  border: 1px solid #ccc; // 边框  
  border-radius: 4px; // 边框圆角  
  background-color: #fff; // 背景色   

} 
.rating-component {  
  margin-bottom: 2vh; // 下边距  
} 
.score-input {  
  /* 设置边框样式 */  
  border: 2px solid #597D3B;  
  border-radius: 5px; /* 边框圆角 */  
  width: 15%;
  

  /* 设置背景色和字体样式 */  
  background-color: #f8f9fa; /* 浅灰色背景 */  
  color: #212529; /* 深色字体 */  
  font-size: 16px; /* 字体大小 */  
  padding: 8px 12px; /* 内边距 */  

  /* 设置焦点时的样式 */  
  &:focus {  
      border-color: #597D3B; /* 聚焦时边框颜色变深 */  
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 聚焦时添加阴影效果 */  
  }
}   

// 文本区域样式  
textarea { 
  margin-bottom: 10px; /* 为textarea底部留出空间给提交按钮 */ 
  height:35vh;
  width: 100%; // 宽度占满父容器
  box-sizing: border-box; // 内容区域包括内边距和边框，不会撑大元素
  padding: 10px; // 内边距   
  border: 1px solid #ccc; // 边框  
  border-radius: 4px; // 边框圆角  
  font-size: 18px;  
  resize: none; // 禁止用户调整大小
}   

.correction-actions {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
  
  // 让按钮保持原来的宽度
  .el-button {
    width: fit-content;
    align-self: flex-start;
  }
}

.button-with-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .progress-numbers {
    font-size: 13px;
    color: #999;
    font-weight: 400;
  }
}

.progress-text {
  font-size: 14px;
  color: #666;
  font-weight: 700;
  margin-top: 5px;
  margin-left: 10px;
}

.correction-progress {
  display: flex;
  flex-direction: column;
  gap: 5px;
  
  .progress-bar {
    width: 200px;
  }
}   