瀏覽代碼

移动端视频区域固定高度为300px (h-[300px])
移除了flex-1属性避免冲突
桌面端保留原有flex布局(md:flex-1)
确保消息区域能占据剩余空间

yourname 7 月之前
父節點
當前提交
8d0352ca2e
共有 1 個文件被更改,包括 2 次插入2 次删除
  1. 2 2
      client/mobile/components/Classroom/ClassroomLayout.tsx

+ 2 - 2
client/mobile/components/Classroom/ClassroomLayout.tsx

@@ -40,7 +40,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
     <div className="flex flex-col md:flex-row h-screen bg-gray-100">
       {/* 视频区域 */}
       {showVideo && (
-        <div className="flex-1 p-4">
+        <div className="p-4 h-[300px] md:flex-1 md:h-auto">
           <div className="bg-white rounded-lg shadow p-4 h-full">
             <div
               id="remoteVideoContainer"
@@ -54,7 +54,7 @@ export const ClassroomLayout = ({ children, role }: ClassroomLayoutProps) => {
       )}
 
       {/* 消息和控制面板列 */}
-      <div className={`${showVideo ? 'w-full md:w-96' : 'flex-1'} flex flex-col`}>
+      <div className={`${showVideo ? 'w-full md:w-96 flex-1' : 'flex-1'} flex flex-col`}>
         {/* 消息区域 */}
         <div className="bg-white shadow-lg p-4">
           <div className="h-full flex flex-col">