src/page/Meeting/ShareScreenWindow/index.module.scss

@@ -1,5 +1,4 @@
 .shareScreenWindow {
-  background-color: #07090B;
   color: white;
   height: 100%;
   width: 100%;
@@ -12,13 +11,30 @@
     padding: 4px;
     box-sizing: border-box;
     background-color: lighten(#07090B, 4%);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    >span:nth-child(2) {
+      cursor: pointer;
+      background-color: #FF5219;
+      padding: 1px 10px;
+      border-radius: 2px;
+      font-size: 12px;
+    }
   }
 
   .shareScreenWindowContent {
     flex-grow: 1;
-    display: flex;
     align-items: center;
     justify-content: space-between;
+    opacity: 0;
+    background-color: #07090B;
+    display: flex;
+
+    &:hover {
+      opacity: 1 !important;
+    }
 
     .shareScreenWindowContentList {
       display: flex;

src/page/Meeting/ShareScreenWindow/index.tsx

@@ -46,6 +46,7 @@ const ShareScreenWindow: React.FC = () => {
     },
   ])
   const [time, setTime] = useState('')
+  const [isHover, setIsHover] = useState(true)
   const [roomUserLists, setRoomUserLists] = useState<any>([])
   const channel = new BroadcastChannel('meeting_channel');
   const userInfo = JSON.parse(storage.getItem('user') as string)
@@ -109,8 +110,18 @@ const ShareScreenWindow: React.FC = () => {
   return (
     <>
       <div className={styles.shareScreenWindow}>
-        <div className={styles.shareScreenWindowTitle}>{time} 共享中</div>
-        <div className={`${styles.shareScreenWindowContent} drag`}>
+        <div className={styles.shareScreenWindowTitle}>
+          <span>{time} 共享中</span>
+          {isHover ? <span className='drag' onClick={() => {
+            channel.postMessage({
+              type: 'shareScreenWindowClose'
+            });
+          }}>结束共享</span> : null}
+        </div>
+        <div className={`${styles.shareScreenWindowContent} drag`}
+          onMouseEnter={() => setIsHover(false)}
+          onMouseLeave={() => setIsHover(true)}
+        >
           <div className={styles.shareScreenWindowContentList}>
             {footerLists.map((item: any, index: number) => {
               return (