layout

ui/src/App.vue

@@ -29,11 +29,7 @@ export default {
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

ui/src/layout/Footer.vue

+<template>
+  <div class="footer">
+    <span class="copyright">
+      © 2019- 2020 <a href="http://www.easycorp.cn" target="_blank">易企天创</a>
+    </span>
+    <span class="icp-info">
+      <a href="http://beian.miit.gov.cn/" class="common" target="_blank">鲁ICP备18054969号-14</a>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.footer {
+  height: 38px;
+  line-height: 38px;
+  text-align: center;
+  font-family: 'WenQuanYi Micro Hei';
+
+  span {
+    display: inline-block;
+    margin: 0 8px;
+  }
+
+  .icp-info {
+    a {
+      font-size: 12px;
+    }
+  }
+}
+</style>

ui/src/layout/Header.vue

+<template>
+  <div class="header">
+    <h1 class="left">
+      <a href="https://www.zendata.cn" target="_blank">zd.im</a>
+    </h1>
+    <div class="center"></div>
+    <div class="right">
+      <a href="https://www.zendata.cn/book/zendata/" target="_blank">帮助</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.header {
+  display: flex;
+  height: 48px;
+  line-height: 48px;
+
+  a {
+    color: #fff;
+  }
+
+  .left {
+    margin: 0 15px;
+    width: 100px;
+    color: #fff;
+  }
+  .center {
+    flex: 1;
+  }
+  .right {
+    margin: 0 15px;
+    width: 100px;
+    text-align: right;
+  }
+}
+</style>

ui/src/layout/MainLayout.less

 @import "~ant-design-vue/es/style/themes/default.less";
 
-.header {
-  color: red;
+#app, body, .main {
+  height: 100%;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, 'PingFang SC', 'Source Han Sans CN', 'Source Han Sans', 'Source Han Serif', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'Microsoft YaHei', sans-serif;
+}
+
+a.common {
+  color: rgba(0, 0, 0, 0.65) !important;
 }
 

ui/src/layout/MainLayout.vue

 <template>
-  <div>
-    <div class="header">HEADER</div>
-    <router-view></router-view>
-    <div>FOOTER</div>
+  <div class="main">
+    <div class="header-container">
+      <Header></Header>
+    </div>
+    <div class="content-container">
+      <router-view></router-view>
+    </div>
+    <div class="footer-container">
+      <Footer></Footer>
+    </div>
   </div>
 </template>
 
 <script>
+import Header from "./Header";
+import Footer from "./Footer";
+
 export default {
   name: 'MainLayout',
   components: {
+    Header, Footer
   },
   data () {
     return {
@@ -26,6 +36,31 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   @import './MainLayout.less';
 </style>
+<style lang="less" scoped>
+.main {
+  display:flex;
+  flex-flow: column;
+  height: 100%;
+
+  .header-container {
+    height: 50px;
+    color: #fff;
+    background-color: #1183fb;
+    border-bottom: 1px solid #e9f2fb;
+  }
+  .content-container {
+    flex: 1;
+    display:flex;
+    padding: 10px;
+    background: #fff;
+  }
+  .footer-container {
+    height: 40px;
+    background: #fff;
+    border-top: 1px solid #eff1f7;
+  }
+}
+</style>

ui/src/views/test/Test.vue

@@ -30,8 +30,6 @@ export default {
     //   this.defs = res
     // })
 
-    console.log("========")
-
     const def = {name: "myDef"}
     saveDef(def).then(res => {
       console.log('saveDef', res)