main.js

@@ -316,12 +316,21 @@ app.on('ready', () => {
                 frame: false,
                 backgroundColor: '#00000000',
                 transparent: true,
+                width: config.width,
+                height: config.height,
             })
             child.loadURL(config.url)
             childWindow[config.key] = child
             child.once('ready-to-show', () => {
                 child.show()
-                child.setSize(config.width, config.height)
+                if (config.key === 'shareScreenWindow') {
+                    const display = screen.getDisplayMatching({ ...child.getBounds() });
+                    const x = Math.round((display.workArea.width - child.getSize()[0]) / 2);
+                    child.setPosition(x, 0);
+                    child.setResizable(false)
+                    child.setMovable(false)
+                    mainWindow.setPosition(-999999, -999999);
+                }
             })
         });
     }

src/page/ShareScreenWindow/index.module.scss

@@ -1,7 +1,45 @@
 .shareScreenWindow {
-  background-color: red;
+  background-color: #07090B;
-  color: black;
+  color: white;
   height: 100%;
   width: 100%;
-  font-size: 30px;
+  display: flex;
+  flex-direction: column;
+
+  .shareScreenWindowTitle {
+    font-size: 12px;
+    flex-shrink: 0;
+    padding: 4px;
+    box-sizing: border-box;
+    background-color: lighten(#07090B, 4%);
+  }
+
+  .shareScreenWindowContent {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .shareScreenWindowContentList {
+      display: flex;
+      flex-grow: 1;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      >div {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        cursor: pointer;
+
+        >img {
+          height: 24px;
+        }
+
+        >span {
+          font-size: 12px;
+        }
+      }
+    }
+  }
 }

src/page/ShareScreenWindow/index.tsx

@@ -1,20 +1,88 @@
 import styles from '@/page/ShareScreenWindow/index.module.scss'
-import { useEffect } from "react";
+import ImageUrl from '@/utils/package/imageUrl';
+import { Button } from 'antd';
+import { useEffect, useState } from "react";
+// window.electron.createChildWindow({
+//   url: location.origin + `/#/shareScreenWindow`,
+//   width: 500,
+//   height: 70,
+//   key: 'shareScreenWindow',
+// })
 const ShareScreenWindow: React.FC = () => {
-
+  const [footerList, setFooterList] = useState<any>([
+    {
+      title: '静音',
+      icon: ImageUrl.icon22,
+      iconActive: ImageUrl.icon22Active,
+      active: false,
+      select: false,
+    },
+    {
+      title: '关闭视频',
+      icon: ImageUrl.icon23,
+      iconActive: ImageUrl.icon23Active,
+      active: false,
+      select: false,
+    },
+    {
+      title: '成员列表',
+      icon: ImageUrl.icon30,
+      iconSelect: ImageUrl.icon30Select,
+      active: false,
+      select: false,
+    },
+    {
+      title: '聊天',
+      icon: ImageUrl.icon31,
+      iconSelect: ImageUrl.icon31Select,
+      active: false,
+      select: false,
+    },
+    {
+      title: '设置',
+      icon: ImageUrl.icon28,
+      iconSelect: ImageUrl.icon28Select,
+      active: false,
+      select: false,
+    },
+    {
+      title: '录制',
+      icon: ImageUrl.icon27,
+      iconSelect: ImageUrl.icon27Select,
+      iconActive: ImageUrl.icon27Active,
+      active: false,
+      select: false,
+    },
+  ])
   useEffect(() => {
 
   }, []);
-  // window.electron.createChildWindow({
+
-  //   url: location.origin + `/#/shareScreenWindow`,
-  //   width: 600,
-  //   height: 40,
-  //   key: 'shareScreenWindow',
-  // })
   return (
     <>
-      <div className={styles.shareScreenWindow}>
+      <div className={`${styles.shareScreenWindow} drag`}>
-        2222
+        <div className={styles.shareScreenWindowTitle}>02：38 共享中</div>
+        <div className={styles.shareScreenWindowContent}>
+          <div className={styles.shareScreenWindowContentList}>
+            {footerList.map((item: any, index: number) => {
+              return (
+                <div
+                  onClick={() => {
+                    console.log(item, index)
+                  }}
+                  key={index}>
+                  {item.select ? <img src={item.iconSelect} alt="" /> : <img src={item.active ? item.iconActive : item.icon} alt="" />}
+                  <span>{item.title}</span>
+                </div>
+              )
+            })}
+          </div>
+          <Button type="primary" style={{ backgroundColor: '#FF5219', marginRight: '14px' }} onClick={() => {
+
+          }}>
+            结束会议
+          </Button>
+        </div>
       </div>
     </>
   )

src/utils/styles/main.css

@@ -29,7 +29,6 @@ input {
   padding: 0;
   font-size: 16px;
   overflow: hidden;
-  border-radius: 10px;
   -webkit-app-region: drag;
 }