Ver Fonte

✨ feat(classroom): 调整闭门会议标识位置并优化显示样式

- 将闭门会议标识从底部工具栏移至视频区域顶部左侧
- 优化标识样式,增加背景阴影和圆角效果
- 扩展标识文本为"闭门会议"以提高辨识度
- 添加title属性说明"闭门会议(仅限学员进入)"
yourname há 6 meses atrás
pai
commit
6fd7ae234b

+ 8 - 7
src/client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -162,6 +162,14 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
           >
             <CameraIcon className="w-4 h-4" />
           </Button>
+
+          {/* 闭门标识显示 - 移到视频区域顶部 */}
+          {isPrivateClass && (
+            <div className="absolute top-4 left-4 z-20 flex items-center px-3 py-1 bg-purple-100 text-purple-800 rounded-full shadow-md" title="闭门会议(仅限学员进入)">
+              <LockClosedIcon className="w-4 h-4 mr-1" />
+              <span className="text-xs font-medium">闭门会议</span>
+            </div>
+          )}
         </div>
       )}
 
@@ -233,13 +241,6 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
                 </Button>
               )}
 
-              {/* 闭门标识显示 */}
-              {isPrivateClass && (
-                <div className="flex items-center p-2 bg-purple-100 text-purple-800 rounded-full" title="闭门会议(仅限学员进入)">
-                  <LockClosedIcon className="w-4 h-4 mr-1" />
-                  <span className="text-xs font-medium">闭门</span>
-                </div>
-              )}
 
               {/* 横屏按钮 - 仅在移动设备上显示 */}
               {isMobileDevice() && (