样式文字优化

src/page/Meeting/index.module.scss

@@ -50,8 +50,8 @@
     justify-content: center;
     display: flex;
     align-items: center;
-    left: 50%;
+    left: calc(50% + 2px);
-    top: 50%;
+    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;
+            box-shadow: 0px 0px 13px 0px #7B96FF !important;
-            border: 2px solid #7B96FF;
+            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 {

src/page/Meeting/index.tsx

@@ -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 === '成员列表' ? <div>{roomUserList.length}</div> : null}
-                          {row.title === '聊天' && noViewChatList > 0 ? <div style={{ right: '-30px' }}>{noViewChatList}</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 : ''}`}
+        className={`${styles.meetingContentError}`}
-        style={{ left: bool ? 'calc(50% + 2px)' : '', top: bool ? 'calc(50% + 2px)' : '' }}
       >
         <Avatar name={item.userName} />
       </div>

src/utils/package/signalr.ts

@@ -70,7 +70,7 @@ export const onSignalr = (callBack: Function) => {
         type
       })
     });
-    // 踢出房间
+    // 移出会议
     connection.on("ForceExitRoom", () => {
       callBack({
         key: 'ForceExitRoom',