加入编辑器头部

Author: GavinZhuLei

public/favicon.ico

@@ -1,6 +1,15 @@
 <template>
   <div id="app">
-    <router-view/>
+    <div class="fm-header">
+      <img class="fm-logo" src="./assets/logo.png">
+      <div class="fm-title">表单设计器</div>
+
+      <div class="fm-link">
+        <a href="https://github.com/GavinZhuLei/vue-form-making">GitHub</a>
+        <a href="https://gitee.com/gavinzhulei/vue-form-making">码云</a>
+      </div>
+    </div>
+    <div class="fm-container"><router-view/></div>
   </div>
 </template>
 
@@ -12,6 +21,47 @@ export default {
 </script>
 
 <style lang="scss">
+.fm-header{
+  height: 50px;
+  box-shadow: 0 2px 10px rgba(70,160,252, 0.6);
+  padding: 0 10px;
+  background-image: linear-gradient(to right,#1278f6,#00b4aa);
+
+  .fm-logo{
+    height: 26px;
+    vertical-align: middle;
+  }
+  .fm-title{
+    display: inline-block;
+    line-height: 50px;
+    vertical-align: middle;
+    color: #fff;
+    font-size: 20px;
+    font-weight: 600;
+    opacity: 0.8;
+    margin-left: 6px;
+  }
+  .fm-link{
+    height: 50px;
+    float: right;
+    
+    a{
+      color: #fff;
+      text-decoration: none;
+      font-size: 14px;
+      line-height: 50px;
+      font-weight: 500;
+      margin-left: 10px;
+      
+      &:hover{
+        opacity: 0.8;
+      }
+    }
+  }
+}
+.fm-container{
+  height: calc(100% - 50px);
+}
 *, :after, :before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;

src/App.vue

@@ -55,12 +55,12 @@
     </el-aside>
     <el-container class="center-container" direction="vertical">
       <el-header class="btn-bar" style="height: 45px;">
-        <el-button type="text" size="medium" @click="handleGoGithub">GitHub</el-button>
+        <!-- <el-button type="text" size="medium" @click="handleGoGithub">GitHub</el-button> -->
         <el-button type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
         <el-button type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
         <el-button type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
       </el-header>
-      <el-main>
+      <el-main :class="{'widget-empty': widgetForm.list.length == 0}">
 
         <widget-form ref="widgetForm" :data="widgetForm" :select.sync="widgetFormSelect"></widget-form>
       </el-main>
@@ -259,4 +259,9 @@ export default {
 @import '../styles/cover.scss';
 @import '../styles/index.scss';
 
+.widget-empty{
+  background: url('../assets/form_empty.png') no-repeat;
+  background-position: 50%;
+}
+
 </style>