diff --git a/main.js b/main.js index 0f04457..db2a312 100644 --- a/main.js +++ b/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); + } }) }); } diff --git a/src/page/ShareScreenWindow/index.module.scss b/src/page/ShareScreenWindow/index.module.scss index 5ffb0a4..9859102 100644 --- a/src/page/ShareScreenWindow/index.module.scss +++ b/src/page/ShareScreenWindow/index.module.scss @@ -1,7 +1,45 @@ .shareScreenWindow { - background-color: red; - color: black; + background-color: #07090B; + 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; + } + } + } + } } \ No newline at end of file diff --git a/src/page/ShareScreenWindow/index.tsx b/src/page/ShareScreenWindow/index.tsx index 55666e3..0d122bf 100644 --- a/src/page/ShareScreenWindow/index.tsx +++ b/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([ + { + 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 ( <> -
- 2222 +
+
02:38 共享中
+
+
+ {footerList.map((item: any, index: number) => { + return ( +
{ + console.log(item, index) + }} + key={index}> + {item.select ? : } + {item.title} +
+ ) + })} +
+ +
) diff --git a/src/utils/styles/main.css b/src/utils/styles/main.css index 7af6dc3..23b67d5 100644 --- a/src/utils/styles/main.css +++ b/src/utils/styles/main.css @@ -29,7 +29,6 @@ input { padding: 0; font-size: 16px; overflow: hidden; - border-radius: 10px; -webkit-app-region: drag; }