样式文字优化
This commit is contained in:
parent
42c4677197
commit
87f2e3dcdb
|
|
@ -50,8 +50,8 @@
|
|||
justify-content: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
left: calc(50% + 2px);
|
||||
top: calc(50% + 2px);
|
||||
transform: translate(-50%, -50%);
|
||||
width: calc(100% - 18px);
|
||||
height: calc(100% - 18px);
|
||||
|
|
@ -258,11 +258,17 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
.boxShadow {
|
||||
box-shadow: 0px 0px 13px 0px #7B96FF;
|
||||
border: 2px solid #7B96FF;
|
||||
box-shadow: 0px 0px 13px 0px #7B96FF !important;
|
||||
border: 2px solid #7B96FF !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
border: 2px solid #0fa01b !important;
|
||||
}
|
||||
|
||||
.meetingContentSwiperCardVdeio {
|
||||
box-shadow: 0px 0px 13px 0px transparent;
|
||||
border: 2px solid transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -275,6 +281,7 @@
|
|||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(2);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -607,7 +614,11 @@
|
|||
position: absolute;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
width: 30px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -271,7 +271,7 @@ const Meeting: React.FC = () => {
|
|||
case 'AllLeave':
|
||||
leaveChannel(false)
|
||||
break;
|
||||
// 踢出房间
|
||||
// 移出会议
|
||||
case 'ForceExitRoom':
|
||||
leaveChannel()
|
||||
break;
|
||||
|
|
@ -1007,13 +1007,13 @@ const Meeting: React.FC = () => {
|
|||
}
|
||||
}}
|
||||
>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
|
||||
<div className={`${styles.meetingContentSwiperCardVdeio} ${item.uid === currentVideoId ? styles.active : ''} ${item.roleId === '1' || item.isRoomManager ? styles.boxShadow : ''}`} id={`video-${item.uid}`}>
|
||||
<div className={styles.meetingContentSwiperCardVdeioLoading}>
|
||||
<Avatar name={item.userName} />
|
||||
</div>
|
||||
</div>
|
||||
{meetingContentUser(item)}
|
||||
{item.enableCamera ? null : meetingContentError(currentVideoId, item, item.roleId === '1' || item.isRoomManager)}
|
||||
{item.enableCamera ? null : meetingContentError(item)}
|
||||
{String(isShare) === item.screenShareId ? <div className={styles.meetingContentSwiperCardShare}>
|
||||
屏幕分享中
|
||||
</div> : null}
|
||||
|
|
@ -1036,7 +1036,7 @@ const Meeting: React.FC = () => {
|
|||
event.stopPropagation();
|
||||
GetRoomKickout(state.channelId, item.uid)
|
||||
}}
|
||||
>踢出房间</Button> : null}
|
||||
>移出会议</Button> : null}
|
||||
{item.uid !== user.uid ? <Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
|
|
@ -1057,7 +1057,7 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
}
|
||||
}}
|
||||
>{item.isRoomManager ? '取消房间发言人' : '设为发言人'}</Button> : null}
|
||||
>{item.isRoomManager ? '取消发言人' : '设为发言人'}</Button> : null}
|
||||
{item.isRoomManager ? <Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
|
|
@ -1108,7 +1108,7 @@ const Meeting: React.FC = () => {
|
|||
</div>}
|
||||
</div>
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
|
||||
</div> : null}
|
||||
{currentLookUserStatus === 2 && currentLookUserAccount ?
|
||||
<div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()}`}>
|
||||
|
|
@ -1136,7 +1136,7 @@ const Meeting: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
{meetingContentUser(currentLookUserAccount, true)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentVideoId, currentLookUserAccount)}
|
||||
{currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
|
||||
</div> : null}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1227,7 +1227,7 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
}
|
||||
}}
|
||||
>{item.isRoomManager ? '取消房间发言人' : '设为发言人'}</Button>
|
||||
>{item.isRoomManager ? '取消发言人' : '设为发言人'}</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
|
|
@ -1236,7 +1236,7 @@ const Meeting: React.FC = () => {
|
|||
onClick={() => {
|
||||
GetRoomKickout(state.channelId, item.uid)
|
||||
}}
|
||||
>踢出房间</Button>
|
||||
>移出会议</Button>
|
||||
</div>
|
||||
}>
|
||||
<EllipsisOutlined style={{
|
||||
|
|
@ -1305,7 +1305,7 @@ const Meeting: React.FC = () => {
|
|||
event.stopPropagation();
|
||||
GetRoomKickout(state.channelId, roomUserItem.uid)
|
||||
}}
|
||||
>踢出房间</Button> : null}
|
||||
>移出会议</Button> : null}
|
||||
{roomUserItem.uid !== user.uid ? <Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
|
|
@ -1326,7 +1326,7 @@ const Meeting: React.FC = () => {
|
|||
})
|
||||
}
|
||||
}}
|
||||
>{roomUserItem.isRoomManager ? '取消房间发言人' : '设为发言人'}</Button> : null}
|
||||
>{roomUserItem.isRoomManager ? '取消发言人' : '设为发言人'}</Button> : null}
|
||||
{roomUserItem.isRoomManager ? <Button
|
||||
type="primary"
|
||||
className='m-ant-btn'
|
||||
|
|
@ -1430,8 +1430,13 @@ const Meeting: React.FC = () => {
|
|||
<div className='drag' onClick={() => changeStatusList(row, itemIndex, rowIndex)} key={rowIndex}>
|
||||
<img src={row.active ? row.iconActive : row.icon} alt="" />
|
||||
<span>{row.title}</span>
|
||||
{row.title === '成员列表' ? <div style={{ right: '-20px' }}>{roomUserList.length}</div> : null}
|
||||
{row.title === '聊天' && noViewChatList > 0 ? <div style={{ right: '-30px' }}>{noViewChatList}</div> : null}
|
||||
{row.title === '成员列表' ? <div>{roomUserList.length}</div> : null}
|
||||
{row.title === '聊天' && noViewChatList > 0 ? <div
|
||||
style={{
|
||||
backgroundColor: 'red',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>{noViewChatList}</div> : null}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
|
@ -1530,12 +1535,11 @@ const meetingContentUser = (item: any, bool?: boolean) => {
|
|||
</>
|
||||
)
|
||||
}
|
||||
const meetingContentError = (currentVideoId: any, item: any, bool?: boolean) => {
|
||||
const meetingContentError = (item: any) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`${styles.meetingContentError} ${currentVideoId === item.uid ? styles.active : ''}`}
|
||||
style={{ left: bool ? 'calc(50% + 2px)' : '', top: bool ? 'calc(50% + 2px)' : '' }}
|
||||
className={`${styles.meetingContentError}`}
|
||||
>
|
||||
<Avatar name={item.userName} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export const onSignalr = (callBack: Function) => {
|
|||
type
|
||||
})
|
||||
});
|
||||
// 踢出房间
|
||||
// 移出会议
|
||||
connection.on("ForceExitRoom", () => {
|
||||
callBack({
|
||||
key: 'ForceExitRoom',
|
||||
|
|
|
|||
Loading…
Reference in New Issue