修改3

.env

@@ -13,9 +13,21 @@ VUE_APP_APPID=com.menu.test
 # 请求api版本号
 VUE_APP_API_VERSION=V1
 
-#主窗口宽高
+#主窗口宽高（简约）
 VUE_APP_mainW=1000
-VUE_APP_mainH=60
+VUE_APP_mainH=70
+
+#极简模式-宽高
+VUE_APP_JiJianModeW=419
+VUE_APP_JiJianModeH=70
+
+#U学模式-宽高
+VUE_APP_UXueModeW=1074
+VUE_APP_UXueModeH=100
+
+#窗口:初始化左边距，下边距
+VUE_APP_WINDOW_LEFT=20
+VUE_APP_WINDOW_BOTTOM=10
 
 
 

package.json

@@ -6,7 +6,7 @@
   "homepage": "/",
   "author": "Guangzhou Menu Technology Co., Ltd. <service@sei-tpo.com> (https://www.zei-dao.com/)",
   "scripts": {
-    "serve": "vue-cli-service serve --mode web --enable-transparent-visuals",
+    "serve": "vue-cli-service serve --mode web",
     "build": "vue-cli-service build",
     "build:web": "vue-cli-service build --mode web",
     "test:unit": "vue-cli-service test:unit",

public/index.html

@@ -8,7 +8,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
-  <body style="background-color:rgba(255,255,255,0);">
+  <body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

src/assets/css/common.less

+/* 禁止图片拖拽 */
+.disable-drag {
+    -webkit-user-drag: none;
+}
\ No newline at end of file

src/main/events/app.js

@@ -33,9 +33,10 @@ class AppEvents {
     Before electron app is ready, we should initial */
     app.on('ready', async () => {
       try {
-        // console.log('getPrimaryDisplay')
-        // console.log(screen.getPrimaryDisplay())
-        appManager.initApp()
+        setTimeout(() => {
+          //为了窗体透明，延迟
+          appManager.initApp()
+        }, 500);
       } catch (error) {
         console.error(error)
       }

src/main/events/ipc.js

@@ -55,6 +55,8 @@ class IpcEvents {
 
     // 显示右键菜单
     ipcMain.on('show-context-menu', (event) => {
+      const window_left_distance = Number( process.env.VUE_APP_WINDOW_LEFT );
+      const window_bottom_distance = Number( process.env.VUE_APP_WINDOW_BOTTOM );
       const displayDetail = screen.getPrimaryDisplay();
       let currentMode = this.store.get("currentMode");
       let displayWH = displayDetail.size;
@@ -62,15 +64,12 @@ class IpcEvents {
         {
           label: '简约模式',
           str:'modeJianYue',
-          click: () => { 
-            // console.log('modeJianYue')
+          click: () => {
             event.sender.send('context-menu-command', 'modeJianYue');
             this.store.set("currentMode", "modeJianYue");
             this.windowManager.mainWindow.win.setBounds({ 
-              // x: (displayWH.width - Number(process.env.VUE_APP_mainW))/2, 
-              x: 0, 
-              y: (displayWH.height - Number(process.env.VUE_APP_mainH)), 
-              // width: Number(process.env.VUE_APP_mainW), 
+              x: window_left_distance, 
+              y: (displayWH.height - Number(process.env.VUE_APP_mainH) - window_bottom_distance),
               width: displayWH.width, 
               height: Number(process.env.VUE_APP_mainH) 
             }, true);
@@ -79,31 +78,27 @@ class IpcEvents {
         {
           label: '极简模式',
           str:'modeJiJian',
-          click: () => { 
-            // console.log('modeJiJian',displayWH.width,displayWH.height)
+          click: () => {
             event.sender.send('context-menu-command', 'modeJiJian');
             this.store.set("currentMode", "modeJiJian");
             this.windowManager.mainWindow.win.setBounds({ 
-              // x: ( Number(displayWH.width) - 419)/2, 
-              x:0, 
-              y: ( Number(displayWH.height) - 60), 
-              width: 419, 
-              height: 60 
+              x: window_left_distance, 
+              y: ( Number(displayWH.height) - Number( process.env.VUE_APP_JiJianModeH ) - window_bottom_distance), 
+              width: Number( process.env.VUE_APP_JiJianModeW ), 
+              height: Number( process.env.VUE_APP_JiJianModeH ) 
             }, true);
           }
         },
         {
           label: 'U学模式',
           str:'modeUXue',
-          click: () => { 
-            // console.log('modeUXue')
+          click: () => {
             event.sender.send('context-menu-command', 'modeUXue');
             this.windowManager.mainWindow.win.setBounds({ 
-              // x: ( Number(displayWH.width) - 419)/2, 
-              x:0, 
-              y: ( Number(displayWH.height) - 74), 
+              x: window_left_distance, 
+              y: ( Number(displayWH.height) - Number( process.env.VUE_APP_UXueModeH ) - window_bottom_distance), 
               width: displayWH.width, 
-              height: 74 
+              height: Number( process.env.VUE_APP_UXueModeH ) 
             }, true);
             this.store.set("currentMode", "modeUXue");
           }
@@ -122,7 +117,7 @@ class IpcEvents {
 
     // 获取app列表
     ipcMain.on("getApps", (e, data) => {
-      let apps = this.store.get("apps8");
+      let apps = this.store.get("apps10");
       this.store.set("currentMode", "modeJianYue");
       e.sender.send("appsList", apps)
     })
@@ -148,10 +143,10 @@ class IpcEvents {
         }else if(imagePath && imagePath.indexOf('.svg') > 0) {
           src = this.softList.svgToBase64(imagePath);
         }
-        let apps = this.store.get("apps8");
+        let apps = this.store.get("apps10");
         apps[index].icon = src || imagePath;
 
-        this.store.set("apps8", apps);
+        this.store.set("apps10", apps);
         e.sender.send("base64Info", {url:src,index});
       } catch (error) {
         console.error(error)
@@ -160,7 +155,7 @@ class IpcEvents {
 
     // 移动app列表
     ipcMain.on("moveSoft", (e, {appname, addFiles})=>{
-      let appList = this.store.get("apps8");
+      let appList = this.store.get("apps10");
       let addFile = addFiles[0]; //某个拖拽文件
       let targetIndex = appList.findIndex(v => v.name == appname);
       let resIndex = appList.findIndex(v => v.name == addFile.shortName);
@@ -190,7 +185,7 @@ class IpcEvents {
         }
         // 刷新渲染进程app列表
         e.sender.send('appsList_update', appList);
-        this.store.set("apps8", appList);
+        this.store.set("apps10", appList);
       }
     })
 

src/main/index.js

@@ -7,7 +7,7 @@ Electron will restart when saving this file */
 /* AppManager负责管理整个app
 AppManager is responsible for managing the entire app */
 import AppManager from './managers/app'
-import { protocol } from 'electron'
+import { protocol, app as appElectron } from 'electron'
 
 //热加载
 try {
@@ -19,6 +19,14 @@ protocol.registerSchemesAsPrivileged([
   { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
+// 实现窗体透明
+if(process.platform === "linux") {
+  // 启用 ARGB,用以实现窗体透明
+  appElectron.commandLine.appendSwitch('enable-transparent-visuals');
+  // 为当前应用程序禁用硬件加速
+  appElectron.disableHardwareAcceleration();
+}
+
 const app = new AppManager()
 
 /* 可通过electron remote从渲染进程（vue）获取到appManager

src/main/managers/window.js

@@ -20,13 +20,17 @@ class WindowManager {
     //   // minHeight: Number(process.env.VUE_APP_mainH),
     // })
     // 极简模式
+    const JiJianModeW = Number( process.env.VUE_APP_JiJianModeW );
+    const JiJianModeH = Number( process.env.VUE_APP_JiJianModeH );
+    const window_left_distance = Number( process.env.VUE_APP_WINDOW_LEFT );
+    const window_bottom_distance = Number( process.env.VUE_APP_WINDOW_BOTTOM );
     this.mainWindow.createWindow({
       isMainWin: true, 
-      x:0,
-      y: ( Number(displayDetail.size.height) - 60), 
-      width: 419,
-      height: 60 ,
-    })
+      x: window_left_distance,
+      y: ( Number(displayDetail.size.height) - JiJianModeH - window_bottom_distance), 
+      width: JiJianModeW,
+      height: JiJianModeH,
+    });
   }
 }
 export default WindowManager

src/main/plugins/category.js

@@ -6,7 +6,7 @@ class category {
 
     // 重置列表
     resetList() {
-        this.store.set("categorys6",[
+        this.store.set("categorys8",[
             {
               name:'备课资源',
               id:'bk001',
@@ -34,7 +34,7 @@ class category {
     getList () {
         // console.log('获取分类列表')
         this.mainWindow.win.webContents.send('getMsg', '获取分类列表-mainprocess')
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         // this.mainWindow.win.webContents.send("categoryList", categoryList);
         return categoryList;
     }
@@ -42,7 +42,7 @@ class category {
     /* 新增分类 */
     addCategory({name, sender}) {
         if(name == undefined) return;
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         name = name.trim();
         let hasIn = categoryList.findIndex(v => v.name == name);
         if(hasIn != -1) return;
@@ -53,28 +53,28 @@ class category {
             softIds:[]
         };
         categoryList.unshift(category);
-        this.store.set("categorys6", categoryList);
+        this.store.set("categorys8", categoryList);
         sender.send("add-category", category);
         this.mainWindow.win.webContents.send("add-category", category);
     }   
     
     /* 删除分类 */
     delCategory({id, sender}) {
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         let hasIn = categoryList.findIndex(v => v.id == id);
         console.log('delCategory - hasIn', hasIn, id)
         if(hasIn == -1) return null;
 
         categoryList.splice(hasIn,1);
 
-        this.store.set("categorys6", categoryList);
+        this.store.set("categorys8", categoryList);
         sender.send('remove-category',{id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     // 获取分类详情
     getCategory(id) {
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         let hasIn = categoryList.findIndex(v => v.id == id);
         if(hasIn == -1) return null;
         return categoryList[hasIn]
@@ -82,42 +82,42 @@ class category {
 
     /* 更新分类列表 */
     updateCategory({id, detail, sender}) {
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn] = detail;
 
-        this.store.set("categorys6", categoryList);
+        this.store.set("categorys8", categoryList);
         sender.send('change-category',{detail,id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     // 更新分类下的软件列表
     updateSoftList({id, detail, sender}) {
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn] = detail;
 
-        this.store.set("categorys6", categoryList);
+        this.store.set("categorys8", categoryList);
         sender.send('remove-soft',{detail,id});
         this.mainWindow.main.webContents.send("category-list", categoryList);
     }
 
     /* 修改分类名称 */
     updateName({name, detail, sender}) {
-        let categoryList = this.store.get("categorys6");
+        let categoryList = this.store.get("categorys8");
         let id = detail.id;
         let hasIn = categoryList.findIndex(v => v.id == id);
         // console.log('hasIn-updateName', hasIn)
         if(hasIn == -1) return null;
 
         categoryList[hasIn].name = name;
-        this.store.set("categorys6", categoryList);
+        this.store.set("categorys8", categoryList);
         sender.send('update-category-name',{detail,id,name});
     }
 
@@ -159,7 +159,7 @@ class category {
     }
 
     getSoftDetail(softId) {
-        let appList = this.store.get("apps8");
+        let appList = this.store.get("apps10");
         let targetIndex = appList.findIndex(v => v.id == softId);
         if(targetIndex==-1) return null;
         return appList[targetIndex];

src/main/plugins/softList.js

@@ -11,7 +11,7 @@ class SoftList {
     /* 获取app列表 */
     getList ({sender} = {}) {
         this.mainWindow.win.webContents.send('getMsg', '获取app列表-mainprocess')
-        let appsList = this.store.get("apps8");
+        let appsList = this.store.get("apps10");
         if(appsList && appsList.length > 0) {
             // 已有app列表
             // console.log('apps-length', appsList.length)
@@ -37,14 +37,16 @@ class SoftList {
     /* 查找linux icon */
     findIcon(iconName, pathBase, callback = ()=>{}) { ///usr/share/icons
         try {
-          exec(`find ${pathBase} -name "${iconName}.png" -o -name "${iconName}.svg"`, (error, stdout, stderr) =>{
+          // exec(`find ${pathBase} -name "${iconName}.png" -o -name "${iconName}.svg"`, (error, stdout, stderr) =>{
+            exec(`dpkg -L ${iconName}`, (error, stdout, stderr) =>{
             if(error) {
               console.error(`findIcon: ${error}`);
               if(typeof callback === 'function') callback([]);
               return;
             }
             const iconPaths = stdout.toString().split('\n').filter(path => path && path.trim() !== '');
-            if(typeof callback === 'function') callback(iconPaths);
+            let newIconList = iconPaths.filter(v => ( v.indexOf('.png') > 0 || v.indexOf('.svg') > 0 ))
+            if(typeof callback === 'function') callback(newIconList);
           });
           // const stdout = execSync(`find ${pathBase} -name "${iconName}.*"`);
           // const iconPaths = stdout.toString().split('\n').filter(path => path && path.trim() !== '');
@@ -221,7 +223,7 @@ class SoftList {
                   searchIcon:true,
                 };
               })
-              this.store.set("apps8", newApps);
+              this.store.set("apps10", newApps);
               this.mainWindow.win.webContents.send("appsList", newApps);
               console.log('sender',sender)
               if(sender && sender.send) sender.send("appsList", newApps);
@@ -280,7 +282,7 @@ class SoftList {
                 };
             });
             let newarr = apps.filter(v => !!v.name)
-            this.store.set("apps8", newarr);
+            this.store.set("apps10", newarr);
             this.mainWindow.win.webContents.send("appsList", newarr)
         });
     }
@@ -337,12 +339,12 @@ class SoftList {
     }
 
     updatePath({index, path, name}) {
-      let appsList = this.store.get("apps8");
+      let appsList = this.store.get("apps10");
       let currentApp = appsList[index];
       if(currentApp && currentApp.name == name) {
         appsList[index].icon = path;
         appsList[index].searchIcon = true;
-        this.store.set("apps8", appsList);
+        this.store.set("apps10", appsList);
       }
     }
 

src/main/windows/mainWindow.js

-import { BrowserWindow, Menu, app, globalShortcut, shell, ipcMain, remote } from 'electron'
+import { BrowserWindow, Menu, app, globalShortcut, shell, ipcMain, remote, screen } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
 const fs = require('fs');
 const path = require('path')
@@ -7,9 +7,9 @@ import SoftList from '../plugins/softList';
 
 const store = new Store({
   defaults: {
-    "apps8": [], //app列表
+    "apps10": [], //app列表
     //分类
-    "categorys6": [
+    "categorys8": [
       {
         name:'备课资源',
         id:'bk001',
@@ -102,8 +102,9 @@ class MainWindow {
       // autoHideMenuBar: true,
       // titleBarStyle: "hidden",
       // backgroundColor: '#1affff1a', //透明颜色
-      // transparent: true,
+      transparent: true, //支持透明
       resizable: false,
+      movable:true,
       minimizable: false,
       maximizable: false,
       frame: false,
@@ -239,6 +240,7 @@ class MainWindow {
     //   event.preventDefault();
     //   // win.hide();
     // })
+
     // 等待加载完成再去显示，不显示白屏加载过程
     win.once('ready-to-show', () => {
       if(args.visible!='hide') {
@@ -251,20 +253,26 @@ class MainWindow {
     });
     win.on('blur', (event) => {
       event.preventDefault();
-      
       // console.log(`Window ${win.id} lost focus webType:${win.webContents.webType}`)
-      // 如果当前app 管理页 失去焦点，则隐藏
-      // if(win.webContents.webType === 'appManage') {
-      //   event.sender.send('manageVisible',false);
+      // 如果没有聚焦窗口存在，则隐藏app 管理页
+      if(win.webContents.webType === 'appManage' || win.webContents.webType === 'mainWindow') {
+        let focusWin = BrowserWindow.getFocusedWindow();
+        if(focusWin != null) return;
+        console.log('需要隐藏')
+        event.sender.send('manageVisible',false);
         
-      //   // win.hide();
-      //   let winList = this.getAllWindows();
-      //   console.log(winList[0].webContents.webType, winList[1].webContents.webType)
-      //   if(winList[1].webContents.webType === 'mainWindow') {
-      //     console.log('通知')
-      //     winList[1].webContents.send('manageVisible',false);
-      //   }
-      // }
+        if(win.webContents.webType === 'appManage') win.hide();
+        else {
+          let manageWin = this.getWinOf('appManage');
+          if(manageWin != null) manageWin.hide();
+        }
+        // let winList = this.getAllWindows();
+        // console.log(winList[0].webContents.webType, winList[1].webContents.webType)
+        // if(winList[1].webContents.webType === 'mainWindow') {
+        //   console.log('通知')
+        //   winList[1].webContents.send('manageVisible',false);
+        // }
+      }
     })
 
     win.on('hide', (event) => {

src/renderer/App.vue

@@ -7,18 +7,20 @@
 </script>
 <style lang="less">
 html {
-  // background-color: transparent;
   font-size: 16px;
 }
 body {
   margin: 0;
   font-size: 14px !important;
-  // background-color: rgba(0,0,0,0.25);
-  background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
+}
+.electron_app {
+  border-radius: 20px;
+  // background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
 }
 </style>
 <style>
 /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
 @import url('https://at.alicdn.com/t/c/font_4010399_5s1gb1mpn7t.css');
+@import '~@/assets/css/common.less';
 </style>
 

src/renderer/components/Appbox/item.vue

 <template>
-  <div class="item_wrap" @click="tapApp" data-type="right-menu" :data-id="detail.id" :data-index="index">
+  <div v-if="src && (src.indexOf('data:image/svg') == 0 || src.indexOf('data:image/png') == 0)" 
+    class="item_wrap" @click="tapApp" data-type="right-menu" :data-id="detail.id" :data-index="index">
     <img :src="src" alt="" class="item_img">
     <span class="item_name">{{name}}</span>
   </div>

src/renderer/components/Dockmode/one.vue

 <template>
   <div class="one_container">
     <div class="left_main">
-      <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img" @click="getFrontApp">
+      <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img disable-drag" @click="getFrontApp">
     </div>
     <div v-if="mode === 'modeJiJian'" class="group1_wrap center">
-      <img src="~@/assets/yunpingtai.png" alt="" class="yun_img">
+      <img src="~@/assets/yunpingtai.png" alt="" class="yun_img disable-drag">
     </div>
     <div  v-if="mode === 'modeJianYue'" class="group_list">
       <div v-for="(cateItem, cateIndex) in cateList" 
@@ -15,7 +15,7 @@
           :data-appname="appItem.name"
           class="app_item" 
           @click="tapApp(appItem)">
-          <img :src="appItem.icon" alt="" class="img">
+          <img :src="appItem.icon" alt="" class="img disable-drag">
           <span class="app_name">{{ appItem.name }}</span>
         </div>
       </div>
@@ -71,11 +71,12 @@ export default {
   flex-shrink: 0;
   padding: 0 20px 0 6px;
   width: 240px;
+  -webkit-app-region: drag;
   &::after {
     position: absolute;
     content: "";
     right: 0;
-    border-right: 1px solid #031428;
+    border-right: 1px solid rgba(3, 20, 40, 0.5);
     width: 1px;
     height: calc(100% - 14px);
   }
@@ -83,10 +84,9 @@ export default {
 .left_img {
   margin-top: 6px;
   width: 225px;
-  // height: 60px;
-  height: 54px;
+  height: 60px;
   object-fit: contain;
-
+  -webkit-app-region: no-drag;
 }
 .left_name {
   padding-left: 4px;

src/renderer/components/Dockmode/second.vue

 <template>
   <div class="second_container">
     <div class="left_main">
-      <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img" @click="getFrontApp">
+      <img src="~@/assets/xuchanzhongxue.png" alt="" class="left_img disable-drag" @click="getFrontApp">
     </div>
    <div class="right_app_wrapper">
       <div class="right_app" :class="['active_'+(current+1)]">
@@ -14,10 +14,10 @@
             </div>
           </div>
         </el-scrollbar>
-        <div v-if="list.length > 12" @click="toLeft" class="scroll-to-left">
+        <div v-if="list && list.length > 12" @click="toLeft" class="scroll-to-left">
           <span class="iconfont icon-right"></span>
         </div>
-        <div v-if="list.length > 12" @click="toRight" class="scroll-to-right">
+        <div v-if="list && list.length > 12" @click="toRight" class="scroll-to-right">
           <span class="iconfont icon-right"></span>
         </div>
       </div>
@@ -167,7 +167,7 @@ export default {
   .second_container {
     display: flex;
     align-items: center;
-    justify-content: center;
+    height: 100%;
   }
   .left_main {
     box-sizing: border-box;

src/renderer/views/Home.vue

 <template>
-  <div class="application-list-container" :class="{'uMode':mode === 'modeUXue'}">
+  <div class="application-list-container" :class="{'uMode':mode === 'modeUXue'}" :style="applicationStyle">
     <one v-if="mode !== 'modeUXue'" :cateList="categoryList" :mode="mode"
       @tapApp="tapApp" @getFrontApp="newWin"></one>
     <second v-else 
@@ -22,7 +22,7 @@ export default {
     return {
       appList: [],
       categoryList:[],
-      mode: "modeJiJian",
+      mode: "modeJiJian", //modeJianYue、modeUXue
       showManage:false,
       secondAcitveIndex:1, //U学模式，当前选中
     };
@@ -31,6 +31,23 @@ export default {
     ipcRenderer() {
       return (this.$electron && this.$electron.ipcRenderer) || {};
     },
+    applicationStyle() {
+      if(this.mode === "modeJiJian") {
+        return {
+          height: `${process.env.VUE_APP_JiJianModeH}px`
+        }
+      }
+      if(this.mode === "modeJianYue") {
+        return {
+          height: `${process.env.VUE_APP_mainH}px`
+        }
+      }
+      if(this.mode === "modeUXue") {
+        return {
+          height: `${process.env.VUE_APP_UXueModeH}px`
+        }
+      }
+    }
   },
   created() {
     // this.ipcRenderer.invoke('getOsPlatform').then((platform) => {
@@ -81,11 +98,11 @@ export default {
         // width: 1200,
         width: 600,
         height: 700,
-        backgroundColor: "#DBE4F6",
+        // backgroundColor: "#DBE4F6",
         resizable: false,
         modal: false,
-        x: 0,
-        y: mainY - 700 -6,
+        x: Number( process.env.VUE_APP_WINDOW_LEFT ),
+        y: mainY - 700 - 6 - Number( process.env.VUE_APP_WINDOW_BOTTOM ),
         webType:'appManage',
         visible: 'hide'
       });
@@ -314,10 +331,16 @@ export default {
 </script>
 <style lang="less" scoped>
 .application-list-container {
+  box-sizing: border-box;
+  border-radius: 8px;
+  border: 1px solid rgba(135, 183, 255, 0.44);
+  border-right-color: rgba(0,148,255,0.5);
+  border-left-color: rgba(0,148,255,0.5);
   width: 100%;
-  height: 60px;
+  // height: 60px;
+  height: 100%;
   font-size: 24px;
-  // background: #fff;
+  background: linear-gradient(180deg, rgba(10,37,91,0.3) 0%, #05173A 100%);
   
   &.uMode {
     height: 74px;

src/renderer/views/manage/index.vue

@@ -267,6 +267,7 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    border-radius: 20px 0 0 20px;
     background-color: #DBE4F6;
     box-shadow: 2px 0px 4px 0px rgba(10,78,141,0.1);
     transition: width 0.6s;
@@ -306,10 +307,10 @@ export default {
     }
   }
   .manage_main {
+    border-radius: 0 20px 20px 0;
     padding: 36px 0 36px 48px;
     background-color: #C6D3EA;
     .manage_main_content {
-      // padding-bottom: 36px;
       padding-right: 48px;
     }
     .el-scrollbar__wrap {