diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 7a75217..f3a07c0 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -232,6 +232,11 @@ position: relative; overflow: hidden; + #videoView { + position: relative; + border: 1px red solid; + } + .standardModeIcon { position: absolute; left: 50%; @@ -305,6 +310,10 @@ .meetingContentSwiperCard { width: 100%; } + + .meetingContentSwiperCard { + height: calc(100% / 6); + } } // 单画面模式 @@ -427,6 +436,22 @@ } } + .meetingContentSwiperCaret { + position: absolute; + z-index: 2; + cursor: pointer; + background-color: rgba(0, 0, 0, 0.5); + color: white; + border: 1px white solid; + font-size: 20px; + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + } + + .meetingContentBodyLeftBlock { position: absolute; background-color: #1F2022; diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 8aeb57a..a0a501e 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -4,7 +4,7 @@ import Operation from '@/components/Operation'; import SpeakerModeModal from '@/components/SpeakerModeModal'; import InvitingPersonnelModal from '@/components/InvitingPersonnelModal'; import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm, notification } from "antd"; -import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined } from '@ant-design/icons'; +import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled, FullscreenExitOutlined, FullscreenOutlined, QuestionCircleOutlined, CaretLeftOutlined, CaretRightOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'; import { useLocation, useNavigate } from 'react-router-dom'; import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { storage } from '@/utils'; @@ -1443,12 +1443,17 @@ const Meeting: React.FC = () => { } // 滚动 const handleWheelChange = (e: any): void => { - const container = document.getElementById('videoView') as HTMLElement; - if (e.wheelDeltaY > 0) { - container.scrollLeft -= 100 - } else { - container.scrollLeft += 100 - } + setMeetingMode(res => { + if (res === 'StandardMode') { + const container = document.getElementById('videoView') as HTMLElement; + if (e.wheelDeltaY > 0) { + container.scrollLeft -= 100 + } else { + container.scrollLeft += 100 + } + } + return res + }) } // 渲染视频 const renderVideo = async (uid: string = ''): Promise => { @@ -2595,6 +2600,30 @@ const Meeting: React.FC = () => { : null) } )} + {roomUserList.length > 6 ?
+ {meetingMode === "StandardMode" ?
{ + const container = document.getElementById('videoView') as HTMLElement; + container.scrollLeft -= 100 + }}> + +
:
{ + const container = document.getElementById('videoView') as HTMLElement; + container.scrollTop -= 100 + }}> + +
} + {meetingMode === "StandardMode" ?
{ + const container = document.getElementById('videoView') as HTMLElement; + container.scrollLeft += 100 + }}> + +
:
{ + const container = document.getElementById('videoView') as HTMLElement; + container.scrollTop += 100 + }}> + +
} +
: null} {currentLookUserStatus === 0 ?