1

src/main/events/ipc.js

@@ -4,6 +4,8 @@ import { saveJson } from '@/libs/utils/backfunction.js';
 class IpcEvents {
   create (appManager) {
     this.appManager = appManager
+    this.windowManager = appManager.windowManager;
+    this.win = this.windowManager.mainWindow.win;
 
     /* 翻译器函数
     Translator function */
@@ -44,6 +46,11 @@ class IpcEvents {
       menu.popup(BrowserWindow.fromWebContents(event.sender))
     });
 
+    ipcMain.on("setMainWindow0", (e, data) => {
+      console.log('data',data)
+      this.windowManager.mainWindow.win.setPosition((data.width-600)/2,(data.height-80))
+    })
+
   }
 }
 

src/main/windows/mainWindow.js

-import { BrowserWindow, Menu, app, globalShortcut, shell } from 'electron'
+import { BrowserWindow, Menu, app, globalShortcut, shell, remote } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 const path = require('path')
 
@@ -35,11 +35,11 @@ class MainWindow {
 
     const win = new BrowserWindow({
       width: 600,
-      height: 120,
+      height: 80,
       // fullscreen:true, //是否全屏显示
       // fullscreenable:true,
       maxWidth: 600,
-      maxHeight: 120,
+      maxHeight: 80,
       resizable: false,
       x:400,
       y:500,
@@ -49,6 +49,8 @@ class MainWindow {
       fullscreen:false,
       fullscreenable:false,
       autoHideMenuBar:true,
+      backgroundColor: '#00000000', //透明颜色
+      transparent:true, //透明开启
       // useContentSize: true,
       webPreferences: {
         /* 注意，这些设置有关程序的安全性，请谨慎使用！

src/renderer/App.vue

@@ -14,7 +14,11 @@ export default {
   created() {
   },
   mounted() {
-    
+    const screen = this.$electron.remote.screen;
+    const {width,height} = screen.getPrimaryDisplay().workAreaSize;//获取到屏幕的宽度和高度
+    console.log('宽高',width,height);
+    let ipcRenderer = this.$electron && this.$electron.ipcRenderer || {};
+    ipcRenderer.send("setMainWindow0",{width,height});
   },
   methods: {
     
@@ -22,6 +26,9 @@ export default {
 }
 </script>
 <style lang="less">
+html {
+  background-color: transparent;
+}
 body {
   margin: 0;
 }
@@ -31,11 +38,14 @@ body {
   justify-content: space-evenly;
   align-items: center;
   height: 100%;
+  border-radius: 20px;
+  overflow: hidden;
+  background-color: hsl(0, 0%, 25%);
   .img1 {
-    height: 120px;
+    height: 80px;
   }
   .img {
-    height: 90px;
+    height: 60px;
   }
 }
 </style>

src/renderer/main.js

@@ -18,6 +18,7 @@ import "vue-router-tab/dist/lib/vue-router-tab.css";
 // web不引入 以下在打包时不生效
 // if (!!process.env.IS_ELECTRON) require("./styles/electron.less");
 if ( isElectron() ) require("./styles/electron.less");
+if (!!process.env.IS_ELECTRON) Vue.use(require("./vue_electron.js"));
 
 
 import {