添加自定义的头

 <template>
   <div id="app">
+    <c-header></c-header>
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-  export default {
-    
-  }
+import CHeader from "./components/title";
+export default {
+  components: { CHeader }
+};
 </script>
 
 <style>
-  /* CSS */
+/* CSS */
 </style>

@@ -45,7 +45,7 @@ export default {
   methods: {
     // 获取electron方法
     open() {
-      console.log(this.$store);
+      console.log(this.$electron);
     },
     // 设置数据库的数据
     setdata() {

@@ -2,21 +2,21 @@
 <template>
   <div class="title">
     <!-- 软件logo预留位置 -->
-    <div style="-webkit-app-region: drag;"></div>
+    <div style="-webkit-app-region: drag;" class="logo"></div>
     <!-- 菜单栏位置 -->
-    <div ></div>
+    <div></div>
     <!-- 中间标题位置 -->
-    <div style="-webkit-app-region: drag;"></div>
+    <div style="-webkit-app-region: drag;">标题文字</div>
     <div class="controls-container">
-      <div class="windows-icon-bg">
-        <svg-icon icon-class="mini"></svg-icon>
+      <div class="windows-icon-bg" @click="Mini">
+        <svg-icon icon-class="mini" class-name="icon-size"></svg-icon>
       </div>
-      <div class="windows-icon-bg">
-        <svg-icon v-if="mix" icon-class="mix"></svg-icon>
-        <svg-icon v-else icon-class="mini"></svg-icon>
+      <div class="windows-icon-bg" @click="MixOrReduction">
+        <svg-icon v-if="mix" icon-class="reduction" class-name="icon-size"></svg-icon>
+        <svg-icon v-else icon-class="mix" class-name="icon-size"></svg-icon>
       </div>
-      <div class="windows-icon-bg">
-        <svg-icon icon-class="close"></svg-icon>
+      <div class="windows-icon-bg close-icon" @click="Close">
+        <svg-icon icon-class="close" class-name="icon-size"></svg-icon>
       </div>
     </div>
   </div>
@@ -32,15 +32,19 @@ export default {
 
   mounted() {},
 
-  methods: {}
+  methods: {
+    
+  }
 };
 </script>
 <style rel='stylesheet/scss' lang='scss' scoped>
 .title {
   width: 100%;
-  height: 40px;
+  height: 30px;
+  line-height: 30px;
   background-color: #ffffff;
   color: rgba(60, 60, 60, 0.6);
+  display: flex;
   .controls-container {
     display: flex;
     flex-grow: 0;
@@ -57,6 +61,18 @@ export default {
       -webkit-app-region: no-drag;
       height: 100%;
       width: 33.34%;
+      .icon-size {
+        width: 12px;
+        height: 12px;
+      }
+    }
+    .windows-icon-bg:hover {
+      background-color: rgba(85, 85, 85, 0.2);
+      color: #333;
+    }
+    .close-icon:hover {
+      background-color: rgba(232, 17, 35, 0.9);
+      color: #fff;
     }
   }
 }

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567080341044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1825" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M753.40182882 759.75665253a19.59403977 19.59403977 0 0 1-13.85025679-5.74378297L267.74664771 282.20794526a19.55330372 19.55330372 0 1 1 27.7005136-27.7005136l471.84566037 471.84566036a19.63477582 19.63477582 0 0 1-13.89099286 33.40356051" fill="#434243" p-id="1826"></path><path d="M281.59690452 759.75665253a19.55330372 19.55330372 0 0 1-13.85025681-33.44429657l471.84566036-471.80492431a19.59403977 19.59403977 0 0 1 27.65977756 27.70051361L295.44716131 754.01286957a19.55330372 19.55330372 0 0 1-13.8502568 5.74378296" fill="#434243" p-id="1827"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width='11' height='11' viewBox='0 0 11 11' class="icon" xmlns='http://www.w3.org/2000/svg'><path d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z'/></svg>
\ No newline at end of file

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567080309066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9842" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M288 480h448v64h-448z" p-id="9843"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width='11' height='11' viewBox='0 0 11 11' class='icon' xmlns='http://www.w3.org/2000/svg'><path d='M11 4.399V5.5H0V4.399h11z'/></svg>
\ No newline at end of file

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567080369879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2540" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M183.49568 181.69856H850.7392v644.23424H183.49568V181.69856z m39.24992 43.01312v558.21312h588.74368V224.71168H222.7456z" p-id="2541"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width='11' height='11' viewBox='0 0 11 11' class='icon' xmlns='http://www.w3.org/2000/svg'><path d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z'/></svg>
\ No newline at end of file

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1567080331054" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1095" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M312.17664 393.09312c11.32544 0 20.48-9.15456 20.48-20.48s-9.15456-20.48-20.48-20.48l-77.2096 0c-11.32544 0-20.48 9.15456-20.48 20.48l0 449.55648c0 11.32544 9.15456 20.48 20.48 20.48l449.55648 0c11.32544 0 20.48-9.15456 20.48-20.48l0-77.1072c0-11.32544-9.15456-20.48-20.48-20.48s-20.48 9.15456-20.48 20.48l0 56.6272L255.46752 801.6896 255.46752 393.09312 312.17664 393.09312z" p-id="1096"></path><path d="M849.38752 187.31008 399.81056 187.31008c-11.32544 0-20.48 9.15456-20.48 20.48l0 449.55648c0 11.32544 9.15456 20.48 20.48 20.48l449.55648 0c11.32544 0 20.48-9.15456 20.48-20.48L869.84704 207.79008C869.86752 196.46464 860.69248 187.31008 849.38752 187.31008zM828.90752 636.86656 420.29056 636.86656 420.29056 228.27008l408.59648 0L828.88704 636.86656z" p-id="1097"></path></svg>
\ No newline at end of file
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width='11' height='11' viewBox='0 0 11 11' class="icon" xmlns='http://www.w3.org/2000/svg'><path d='M11 8.798H8.798V11H0V2.202h2.202V0H11v8.798zm-3.298-5.5h-6.6v6.6h6.6v-6.6zM9.9 1.1H3.298v1.101h5.5v5.5h1.1v-6.6z'/></svg>
\ No newline at end of file

@@ -9,6 +9,8 @@ body {
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  margin: 0;
+  padding: 0;
 }
 
 html {