fix(view): 样式调整-增加导航

Author: lisgroup

admin/src/components/common/navBar.vue

@@ -1,20 +1,83 @@
 <template>
   <div>
-    <blockquote class="layui-elem-quote">
-      苏州公交实时查询信息（仅供参考）
-    </blockquote>
-    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
-      <legend>苏州公交实时查询信息（仅供参考）</legend>
-    </fieldset>
+    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
+      <el-row :gutter="1">
+        <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4">
+          <div class="grid-content">
+            <el-menu-item index="1">
+              <router-link :to="{name: 'index'}">首页</router-link>
+            </el-menu-item>
+          </div>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4">
+          <div class="grid-content">
+            <el-menu-item index="3">
+              <router-link :to="{name: 'echarts'}">图表</router-link>
+            </el-menu-item>
+          </div>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4">
+          <div class="grid-content">
+            <el-menu-item index="4">
+              <router-link :to="{path: '/login'}">用户中心</router-link>
+            </el-menu-item>
+          </div>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4">
+          <div class="grid-content">
+            <el-submenu index="2">
+              <template slot="title">常用工具</template>
+              <el-menu-item index="2-1" class="sub">
+                <router-link :to="{name: 'out'}" class="login">中文排版</router-link>
+              </el-menu-item>
+              <el-menu-item index="2-2">
+                <router-link :to="{name: 'md'}" class="login">markdown</router-link>
+              </el-menu-item>
+              <el-menu-item index="2-2">
+                <router-link :to="{name: 'excel'}" class="login">在线表格</router-link>
+              </el-menu-item>
+              <el-menu-item index="2-2">
+                <router-link :to="{name: 'upload'}" class="login">图片转文字</router-link>
+              </el-menu-item>
+            </el-submenu>
+          </div>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="0" :lg="0" :xl="0"/>
+      </el-row>
+    </el-menu>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'NavBar'
+  name: 'NavBar',
+  data() {
+    return {
+      activeIndex: ''
+    }
+  }
 }
 </script>
 
 <style scoped>
+  .el-row {
+    /*margin-bottom: 20px;*/
+    height: 50px;
+  }
 
+  .el-col {
+    border-radius: 4px;
+  }
+
+  .grid-content {
+    border-radius: 4px;
+    min-height: 50px;
+  }
+
+  .grid-content a{
+    display: block;
+  }
+  ul > li > a{
+    display: block;
+  }
 </style>

admin/src/views/echarts/index.vue

@@ -1,5 +1,6 @@
 <template>
   <section class="chart-container">
+    <nav-bar/>
     <el-row>
       <el-col :span="12">
         <div id="chartColumn" style="width:100%; height:400px;"/>

admin/src/views/home/home.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <nav-bar/>
+    <fieldSet/>
     <div id="content">
       <form id="form" class="layui-form layui-form-pane" action="">
         <div class="layui-form-item">
@@ -37,8 +38,13 @@
 </template>
 
 <script>
+import fieldSet from '../../components/common/fieldSet'
+
 export default {
   name: 'Home',
+  components: {
+    fieldSet
+  },
   data() {
     return {
       lineName: ''

admin/src/views/home/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <nav-bar/>
+    <fieldSet/>
 
     <el-input v-model="input" placeholder="线路名称，例：快线1, 55" @keyup.enter.native="goSearch">
       <template slot="prepend">线路</template>
@@ -28,9 +29,13 @@
 
 <script>
 import request from '@/utils/request'
+import fieldSet from '../../components/common/fieldSet'
 
 export default {
   name: 'Index',
+  components: {
+    fieldSet
+  },
   data() {
     return {
       isShow: false,

admin/src/views/home/line.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <nav-bar/>
+    <fieldSet/>
 
     <el-input v-model="input" placeholder="线路名称，例：快线1, 55" @keyup.enter.native="goSearch">
       <template slot="prepend">线路</template>
@@ -26,9 +27,13 @@
 
 <script>
 import request from '@/utils/request'
+import fieldSet from '../../components/common/fieldSet'
 
 export default {
   name: 'Lines',
+  components: {
+    fieldSet
+  },
   data() {
     return {
       loading: false,

admin/src/views/markdown/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="main">
+    <nav-bar/>
     <mavon-editor ref="md" v-model="value" @imgAdd="imgAdd" @imgDel="imgDel" />
   </div>
 </template>