时间格式化

src/components/Layout.vue

@@ -1,113 +1,138 @@
 <!--  -->
 <template>
-    <div class="layout">
+  <div class="layout">
+    <el-container>
+      <el-header>
+        <div class="header">
+          <img src="@/assets/logo-blue.png"
+               alt=""
+               class="logo">
+          <span class="sys-name">云智学工具集合</span>
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside width="200px">
+          <el-menu :default-active="active"
+                   :router="true"
+                   class="el-menu-vertical-demo">
+            <el-menu-item :index="getPath(item)"
+                          v-for="item in menu">
+              <i :class="item.meta.icon"></i>
+              <span slot="title">{{item.meta.title}}</span>
+            </el-menu-item>
+          </el-menu>
+          <img src="@/assets/cszxy.jpg" alt="" class="qr">
+        </el-aside>
         <el-container>
-            <el-header>云智学工具集合</el-header>
-            <el-container>
-                <el-aside width="200px">
-                    <el-menu :default-active="active"
-                             :router="true"
-                             class="el-menu-vertical-demo">
-                        <el-menu-item :index="getPath(item)" v-for="item in menu">
-                            <i :class="item.meta.icon"></i>
-                            <span slot="title">{{item.meta.title}}</span>
-                        </el-menu-item>
-                    </el-menu>
-                </el-aside>
-                <el-container>
-                    <el-main>
-                        <router-view :key="key"/>
-                    </el-main>
-                </el-container>
-            </el-container>
+          <el-main>
+            <router-view :key="key" />
+          </el-main>
         </el-container>
-    </div>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 
 <script>
-    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-    //例如：import 《组件名称》 from '《组件路径》';
-    import path from 'path'
-    export default {
-        name: "Layout",
-        props: {},
-        //import引入的组件需要注入到对象中才能使用
-        components: {
-            //defaultPage ,
-        },
-        data() {
-            return {
-                active: this.$route.path,
-                menu:[]
-            }
-        },
-        //监听属性 类似于data概念
-        computed: {
-            key() {
-                return this.$route.fullPath
-            }
-        },
-        //监控data中的数据变化
-        watch: {},
-        //生命周期 - 创建完成（可以访问当前this实例）
-        async created() {
-            this.menu = this.$router.options.routes;
-        },
-        //生命周期 - 挂载完成（可以访问DOM元素）
-        async mounted() {
-            let routes = this.$router.options.routes;
-            console.log("------>", routes)
-        },
-        //方法集合
-        methods: {
-            getPath(item) {
-                return path.resolve(item.path,item.children[0].path);
-            }
-        },
-        //当前页面的filter
-        filters: {}
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import path from 'path'
+export default {
+  name: "Layout",
+  props: {},
+  //import引入的组件需要注入到对象中才能使用
+  components: {
+    //defaultPage ,
+  },
+  data () {
+    return {
+      active: this.$route.path,
+      menu: []
     }
+  },
+  //监听属性 类似于data概念
+  computed: {
+    key () {
+      return this.$route.fullPath
+    }
+  },
+  //监控data中的数据变化
+  watch: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created () {
+    this.menu = this.$router.options.routes;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  async mounted () {
+    let routes = this.$router.options.routes;
+    console.log("------>", routes)
+  },
+  //方法集合
+  methods: {
+    getPath (item) {
+      return path.resolve(item.path, item.children[0].path);
+    }
+  },
+  //当前页面的filter
+  filters: {}
+}
 </script>
 <!-- 单页私有css -->
 <style scoped>
-    .el-menu{
-        height:100%;
-    }
-    .el-header {
-        background-color: #3c7ef6;
-        color: #fff;
-        text-align: center;
-        line-height: 60px;
-    }
+.el-menu {
+  height: calc(100% - 190px);
+}
+.el-header {
+  background-color: rgba(60,126,246, 0.7);
+  color: #fff;
+  text-align: center;
+  line-height: 60px;
+}
 
-    .el-aside {
-        background-color: #fff;
-        color: #333;
-        text-align: left;
-        height: calc(100vh - 60px);
-    }
+.el-aside {
+  background-color: #fff;
+  color: #333;
+  text-align: left;
+  height: calc(100vh - 60px);
+  overflow: hidden;
+}
 
-    .el-main {
-        background-color: #f5f5f5;
-        color: #333;
-        text-align: left;
-        height: calc(100vh - 60px);
-        overflow:auto;
-    }
+.el-main {
+  background-color: #f5f5f5;
+  color: #333;
+  text-align: left;
+  height: calc(100vh - 60px);
+  overflow: auto;
+}
 
-    body > .el-container {
-        margin-bottom: 40px;
-    }
+body > .el-container {
+  margin-bottom: 40px;
+}
 
-    .el-container:nth-child(5) .el-aside,
-    .el-container:nth-child(6) .el-aside {
-        line-height: 260px;
-    }
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
 
-    .el-container:nth-child(7) .el-aside {
-        line-height: 320px;
-    }
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+.header{
+    display: flex;
+    align-items: center;
+}
+.header .sys-name{
+    margin-left: 15px;
+    font-size: 18px;
+}
+.logo{
+    height: 20px;
+}
+.qr{
+    width: 100%;
+    padding: 15px;
+    box-sizing: border-box;
+}
 </style>
 <style>
-    
 </style>