marking
/
WGShare.Client.Electron
18
0
Fork 0
Code Pull Requests 1 Actions Releases 4 Activity

样式优化

This commit is contained in:
yj 2024-08-21 16:25:00 +08:00
parent 994c774c05
commit f0d65cab8b
2 changed files with 21 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/page/Meeting/index.module.scss
View File

@ -285,6 +285,19 @@
} }
} }
.meetingContentBodyLeftBlock {
position: absolute;
background-color: #1F2022;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0
}
@include meetingContent(); @include meetingContent();
.meetingContentOperation { .meetingContentOperation {
@ -572,15 +585,6 @@
} }
} }
} }
.meetingContentBodyLeftBlock {
position: absolute;
background-color: #1F2022;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
} }
.meetingContentFooter { .meetingContentFooter {

41
src/page/Meeting/index.tsx
View File

@ -140,7 +140,6 @@ const Meeting: React.FC = () => {
const msgTips = '您不是管理员或发言人，无法开启此功能！' const msgTips = '您不是管理员或发言人，无法开启此功能！'
useEffect(() => { useEffect(() => {
let time = null as any; let time = null as any;
setSizeAndPosition()
setUser(userInfo) setUser(userInfo)
setTimeout(() => { setTimeout(() => {
window.electron.getIsMaximized().then((res: boolean) => { window.electron.getIsMaximized().then((res: boolean) => {
@ -217,7 +216,6 @@ const Meeting: React.FC = () => {
window.addEventListener('offline', handleNetworkChange); window.addEventListener('offline', handleNetworkChange);
time = setInterval(() => { time = setInterval(() => {
setCurrentSeconds(currentSeconds++) setCurrentSeconds(currentSeconds++)
setSizeAndPosition()
}, 1000) }, 1000)
return () => { return () => {
window.removeEventListener('customStorageChange', handleCustomStorageChange); window.removeEventListener('customStorageChange', handleCustomStorageChange);
@ -449,29 +447,6 @@ const Meeting: React.FC = () => {
return res return res
}) })
} }
// 获取dom信息
const getElementSizeAndPosition = (element: HTMLElement): { width: number; height: number; top: number; left: number } => {
const width = element.offsetWidth;
const height = element.offsetHeight;
const rect = element.getBoundingClientRect();
const top = rect.top;
const left = rect.left;
return { width, height, top, left };
}
// 设置dom
const setSizeAndPosition = (): void => {
const meetingContentBodyLeftDom = document.getElementById('meetingContentBodyLeft') as HTMLElement;
const meetingContentBodyLeftBlock = document.getElementById('meetingContentBodyLeftBlock') as HTMLElement;
if (meetingContentBodyLeftDom) {
const info = getElementSizeAndPosition(meetingContentBodyLeftDom);
if (meetingContentBodyLeftBlock) {
meetingContentBodyLeftBlock.style.width = `${info.width}px`
meetingContentBodyLeftBlock.style.height = `${info.height}px`
meetingContentBodyLeftBlock.style.top = `${info.top}px`
meetingContentBodyLeftBlock.style.left = `0`
}
}
}
// 刷新 // 刷新
const refreshVideoView = async (userItem: any): Promise<void> => { const refreshVideoView = async (userItem: any): Promise<void> => {
if (userItem.uid === userInfo.uid) { if (userItem.uid === userInfo.uid) {
@ -1136,7 +1111,7 @@ const Meeting: React.FC = () => {
</div> </div>
<div className={styles.meetingContent}> <div className={styles.meetingContent}>
<div className={styles.meetingContentBody}> <div className={styles.meetingContentBody}>
<div className={`${styles.meetingContentBodyLeft} drag`} id='meetingContentBodyLeft'> <div className={`${styles.meetingContentBodyLeft} drag`}>
<div className={getMeetingContentBodyLeftModeClass()} id='videoView'> <div className={getMeetingContentBodyLeftModeClass()} id='videoView'>
{roomUserList.map((item: any, index: number) => { {roomUserList.map((item: any, index: number) => {
return (index <= 19 && item.isRoom && item.isAdmin ? <div return (index <= 19 && item.isRoom && item.isAdmin ? <div
@ -1282,11 +1257,11 @@ const Meeting: React.FC = () => {
{meetingContentUser(currentLookUserAccount, true)} {meetingContentUser(currentLookUserAccount, true)}
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)} {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
</div> : null} </div> : null}
{isAdmin ? null : <div className={styles.meetingContentBodyLeftBlock}>
<img src={ImageUrl.icon46} alt="" />
</div>}
</div> </div>
</div> </div>
{isAdmin ? null : <div className={styles.meetingContentBodyLeftBlock} id='meetingContentBodyLeftBlock'>
<img src={ImageUrl.icon46} alt="" />
</div>}
{ {
(statusList.userList || statusList.userChatList) ? ( (statusList.userList || statusList.userChatList) ? (
<div className={styles.meetingContentBodyRight}> <div className={styles.meetingContentBodyRight}>
@ -1510,16 +1485,16 @@ const Meeting: React.FC = () => {
<div> <div>
<div><Avatar name={item.userName} /></div> <div><Avatar name={item.userName} /></div>
{item.uid !== user.uid ? {item.uid !== user.uid ?
<span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> : <span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
<span> <span style={{ fontSize: '12px', color: '#ccc' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span> <span> <span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
} }
</div> </div>
</Popover> : <div> </Popover> : <div>
<div><Avatar name={item.userName} /></div> <div><Avatar name={item.userName} /></div>
{item.uid !== user.uid ? {item.uid !== user.uid ?
<span>{item.userName} <span style={{ fontSize: '12px', color: '#ccc' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> : <span>{item.userName}<span style={{ fontSize: '12px', color: '#ccc', marginLeft: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')}</span></span> :
<span><span style={{ fontSize: '12px', color: '#ccc' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span> <span><span style={{ fontSize: '12px', color: '#ccc', marginRight: '4px' }}>{dayjs(item.timestamp).format('HH:mm:ss')} </span>{item.userName}</span>
} }
</div>} </div>}
<div>{item.message}</div> <div>{item.message}</div>