1

src/assets/icon/iconfont.css

@@ -0,0 +1,23 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2596994 */
+  src: url('iconfont.woff2?t=1623051037621') format('woff2'),
+       url('iconfont.woff?t=1623051037621') format('woff'),
+       url('iconfont.ttf?t=1623051037621') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-ceshi:before {
+  content: "\e61f";
+}
+
+.icon-shouye:before {
+  content: "\e608";
+}
+

src/assets/icon/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "2596994",
+  "name": "study",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "学习平台",
+  "glyphs": [
+    {
+      "icon_id": "15296109",
+      "name": "测试",
+      "font_class": "ceshi",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "7587742",
+      "name": "首页",
+      "font_class": "shouye",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    }
+  ]
+}

src/components/admin-frame/Header copy.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="header">
+    <!-- 折叠按钮 -->
+    <div class="collapse-btn" @click="collapseChage">
+      <i v-if="!collapse" class="el-icon-s-fold"></i>
+      <i v-else class="el-icon-s-unfold"></i>
+    </div>
+    <div class="logo">管理中心</div>
+    <div class="header-right">
+      <div class="header-user-con">
+        <!-- 全屏显示 -->
+        <div class="btn-fullscreen" @click="handleFullScreen">
+          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
+            <i class="el-icon-rank"></i>
+          </el-tooltip>
+        </div>
+        <!-- 用户头像 -->
+        <div class="user-avator">
+          <img src="../../assets/img/img.jpg" alt="" />
+        </div>
+        <!-- 用户名下拉菜单 -->
+        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
+          <span class="el-dropdown-link">
+            {{ user.name || '游客' }}
+            <i class="el-icon-caret-bottom"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import bus from './bus';
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  data() {
+    return {
+      collapse: false,
+      fullscreen: false,
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  methods: {
+    // 用户名下拉菜单选择事件
+    handleCommand(command) {
+      if (command == 'loginout') {
+        localStorage.removeItem('token');
+        this.$router.push('/login');
+      }
+    },
+    // 侧边栏折叠
+    collapseChage() {
+      this.collapse = !this.collapse;
+      bus.$emit('collapse', this.collapse);
+    },
+    // 全屏事件
+    handleFullScreen() {
+      let element = document.documentElement;
+      if (this.fullscreen) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+      }
+      this.fullscreen = !this.fullscreen;
+    },
+  },
+  mounted() {
+    if (document.body.clientWidth < 1500) {
+      this.collapseChage();
+    }
+  },
+};
+</script>
+<style scoped>
+.header {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 60px;
+  font-size: 22px;
+  color: #fff;
+}
+.collapse-btn {
+  float: left;
+  padding: 0 21px;
+  cursor: pointer;
+  line-height: 60px;
+}
+.header .logo {
+  float: left;
+  width: 25%;
+  line-height: 60px;
+}
+.header-right {
+  float: right;
+  padding-right: 50px;
+}
+.header-user-con {
+  display: flex;
+  height: 60px;
+  align-items: center;
+}
+.btn-fullscreen {
+  transform: rotate(45deg);
+  margin-right: 5px;
+  font-size: 24px;
+}
+.btn-bell,
+.btn-fullscreen {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  border-radius: 15px;
+  cursor: pointer;
+}
+.btn-bell-badge {
+  position: absolute;
+  right: 0;
+  top: -2px;
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background: #f56c6c;
+  color: #fff;
+}
+.btn-bell .el-icon-bell {
+  color: #fff;
+}
+.user-name {
+  margin-left: 10px;
+}
+.user-avator {
+  margin-left: 20px;
+}
+.user-avator img {
+  display: block;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.el-dropdown-link {
+  color: #fff;
+  cursor: pointer;
+}
+.el-dropdown-menu__item {
+  text-align: center;
+}
+</style>

src/components/admin-frame/Header.vue

@@ -1,171 +1,104 @@
 <template>
-  <div class="header">
-    <!-- 折叠按钮 -->
-    <div class="collapse-btn" @click="collapseChage">
-      <i v-if="!collapse" class="el-icon-s-fold"></i>
-      <i v-else class="el-icon-s-unfold"></i>
-    </div>
-    <div class="logo">管理中心</div>
-    <div class="header-right">
-      <div class="header-user-con">
-        <!-- 全屏显示 -->
-        <div class="btn-fullscreen" @click="handleFullScreen">
-          <el-tooltip effect="dark" :content="fullscreen ? `取消全屏` : `全屏`" placement="bottom">
-            <i class="el-icon-rank"></i>
-          </el-tooltip>
-        </div>
-        <!-- 用户头像 -->
-        <div class="user-avator">
-          <img src="../../assets/img/img.jpg" alt="" />
-        </div>
-        <!-- 用户名下拉菜单 -->
-        <el-dropdown class="user-name" trigger="click" @command="handleCommand">
-          <span class="el-dropdown-link">
-            {{ user.name || '游客' }}
-            <i class="el-icon-caret-bottom"></i>
-          </span>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </div>
-    </div>
+  <div id="Header">
+    <el-row>
+      <el-col :span="24" class="main header">
+        <el-col :span="24" class="one">
+          <el-col :span="12" class="left">
+            <span @click="collapseChage">
+              <i v-if="!collapse" class="el-icon-s-fold"></i>
+              <i v-else class="el-icon-s-unfold"></i>
+            </span>
+            <span>{{ siteInfo.title }}-管理中心</span>
+          </el-col>
+          <el-col :span="12" class="right">
+            <i class="el-icon-user-solid"></i>
+            <span>{{ user.name || '游客' }}</span>
+            <el-button type="danger" size="mini" @click="logout">退出登录</el-button>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
 <script>
-import bus from './bus';
+const { siteInfo } = require('../../layout/deploy/site');
 import { mapState, createNamespacedHelpers } from 'vuex';
+import bus from './bus';
 export default {
-  data() {
-    return {
-      collapse: false,
-      fullscreen: false,
-    };
-  },
-  computed: {
-    ...mapState(['user']),
+  name: 'Header',
+  props: {},
+  components: {},
+  data: function() {
+    return { collapse: false, siteInfo: siteInfo };
   },
+  created() {},
   methods: {
-    // 用户名下拉菜单选择事件
-    handleCommand(command) {
-      if (command == 'loginout') {
-        localStorage.removeItem('token');
-        this.$router.push('/login');
-      }
-    },
     // 侧边栏折叠
     collapseChage() {
       this.collapse = !this.collapse;
       bus.$emit('collapse', this.collapse);
     },
-    // 全屏事件
-    handleFullScreen() {
-      let element = document.documentElement;
-      if (this.fullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-      this.fullscreen = !this.fullscreen;
+    // 退出登录
+    logout() {
+      localStorage.removeItem('token');
+      this.$router.push('/login');
     },
   },
+  computed: {
+    ...mapState(['user']),
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   mounted() {
     if (document.body.clientWidth < 1500) {
       this.collapseChage();
     }
   },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
+  },
 };
 </script>
-<style scoped>
-.header {
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  height: 60px;
-  font-size: 22px;
-  color: #fff;
-}
-.collapse-btn {
-  float: left;
-  padding: 0 21px;
-  cursor: pointer;
-  line-height: 60px;
-}
-.header .logo {
-  float: left;
-  width: 25%;
-  line-height: 60px;
-}
-.header-right {
-  float: right;
-  padding-right: 50px;
-}
-.header-user-con {
-  display: flex;
-  height: 60px;
-  align-items: center;
-}
-.btn-fullscreen {
-  transform: rotate(45deg);
-  margin-right: 5px;
-  font-size: 24px;
-}
-.btn-bell,
-.btn-fullscreen {
-  position: relative;
-  width: 30px;
-  height: 30px;
-  text-align: center;
-  border-radius: 15px;
-  cursor: pointer;
-}
-.btn-bell-badge {
-  position: absolute;
-  right: 0;
-  top: -2px;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: #f56c6c;
-  color: #fff;
-}
-.btn-bell .el-icon-bell {
-  color: #fff;
-}
-.user-name {
-  margin-left: 10px;
-}
-.user-avator {
-  margin-left: 20px;
-}
-.user-avator img {
-  display: block;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-.el-dropdown-link {
-  color: #fff;
-  cursor: pointer;
-}
-.el-dropdown-menu__item {
-  text-align: center;
+
+<style lang="less" scoped>
+.main {
+  .one {
+    height: 60px;
+    border-bottom: 1px solid #f1f1f1;
+    padding: 0 10px;
+    .left {
+      line-height: 60px;
+      span {
+        display: inline-block;
+        margin: 0 10px;
+        font-size: 22px;
+        color: #ffffff;
+        font-weight: bold;
+        font-family: cursive;
+      }
+    }
+    .right {
+      text-align: right;
+      line-height: 60px;
+      i {
+        position: relative;
+        top: 5px;
+        margin: 0px 15px;
+        font-size: 30px;
+        color: #fff;
+      }
+      span {
+        color: #fff;
+        font-size: 16px;
+        padding: 0 15px 0 0px;
+      }
+    }
+  }
 }
 </style>

src/components/admin-frame/Home copy.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-container>
+    <el-header style="padding: 0">
+      <v-head></v-head>
+    </el-header>
+    <el-container>
+      <el-aside width="200px">
+        <v-sidebar></v-sidebar>
+      </el-aside>
+      <el-main>
+        <div class="content-box" :class="{ 'content-collapse': collapse }">
+          <v-tags></v-tags>
+          <div class="content">
+            <transition name="move" mode="out-in">
+              <el-row>
+                <el-col :span="24">
+                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+                  <el-col :span="24" class="container">
+                    <router-view></router-view>
+                  </el-col>
+                </el-col>
+              </el-row>
+            </transition>
+            <el-backtop target=".content"></el-backtop>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+import breadcrumb from './breadcrumb.vue';
+import vHead from './Header.vue';
+import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import bus from './bus';
+export default {
+  data() {
+    return {
+      tagsList: [],
+      collapse: false,
+    };
+  },
+  components: {
+    vHead,
+    vSidebar,
+    vTags,
+    breadcrumb,
+  },
+  created() {
+    bus.$on('collapse-content', msg => {
+      this.collapse = msg;
+    });
+
+    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+    bus.$on('tags', msg => {
+      let arr = [];
+      for (let i = 0, len = msg.length; i < len; i++) {
+        msg[i].name && arr.push(msg[i].name);
+      }
+      this.tagsList = arr;
+    });
+  },
+};
+</script>

src/components/admin-frame/Home.vue

@@ -1,66 +1,42 @@
 <template>
-  <el-container>
-    <el-header style="padding: 0">
-      <v-head></v-head>
-    </el-header>
+  <div id="Home">
     <el-container>
-      <el-aside width="200px">
-        <v-sidebar></v-sidebar>
-      </el-aside>
-      <el-main>
-        <div class="content-box" :class="{ 'content-collapse': collapse }">
-          <v-tags></v-tags>
-          <div class="content">
-            <transition name="move" mode="out-in">
-              <el-row>
-                <el-col :span="24">
-                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
-                  <el-col :span="24" class="container">
-                    <router-view></router-view>
-                  </el-col>
-                </el-col>
-              </el-row>
-            </transition>
-            <el-backtop target=".content"></el-backtop>
-          </div>
-        </div>
-      </el-main>
+      <el-header style="padding:0"><v-head></v-head></el-header>
+      <el-container>
+        <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
+        <el-main>Main</el-main>
+      </el-container>
     </el-container>
-  </el-container>
+  </div>
 </template>
 
 <script>
-import breadcrumb from './breadcrumb.vue';
 import vHead from './Header.vue';
 import vSidebar from './Sidebar.vue';
-import vTags from './Tags.vue';
-import bus from './bus';
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  data() {
-    return {
-      tagsList: [],
-      collapse: false,
-    };
+  name: 'Home',
+  props: {},
+  components: { vHead, vSidebar },
+  data: function() {
+    return {};
   },
-  components: {
-    vHead,
-    vSidebar,
-    vTags,
-    breadcrumb,
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
   },
-  created() {
-    bus.$on('collapse-content', msg => {
-      this.collapse = msg;
-    });
-
-    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
-    bus.$on('tags', msg => {
-      let arr = [];
-      for (let i = 0, len = msg.length; i < len; i++) {
-        msg[i].name && arr.push(msg[i].name);
-      }
-      this.tagsList = arr;
-    });
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  watch: {
+    test: {
+      deep: true,
+      immediate: true,
+      handler(val) {},
+    },
   },
 };
 </script>
+
+<style lang="less" scoped></style>

src/components/admin-frame/Sidebar copy.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="sidebar">
+    <el-menu
+      class="sidebar-el-menu"
+      :default-active="onRoutes"
+      :collapse="collapse"
+      background-color="#324157"
+      text-color="#bfcbd9"
+      active-text-color="#20a0ff"
+      unique-opened
+      router
+    >
+      <template v-for="item in items">
+        <template v-if="item.subs">
+          <el-submenu class="second" :index="item.index" :key="item.index">
+            <template slot="title">
+              <i :class="item.icon"></i>
+              <span slot="title">{{ item.title }}</span>
+            </template>
+            <template v-for="subItem in item.subs">
+              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                <template slot="title">{{ subItem.title }}</template>
+                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+              </el-submenu>
+              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+            </template>
+          </el-submenu>
+        </template>
+        <template v-else>
+          <el-menu-item class="first" :index="item.index" :key="item.index">
+            <i :class="item.icon"></i>
+            <span slot="title">{{ item.title }}</span>
+          </el-menu-item>
+        </template>
+      </template>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+import { mapState, createNamespacedHelpers } from 'vuex';
+import bus from './bus';
+export default {
+  data() {
+    return {
+      collapse: false,
+      items: [
+        {
+          icon: 'el-icon-s-home',
+          index: '/adminCenter/homeIndex',
+          title: '系统首页',
+        },
+      ],
+    };
+  },
+  computed: {
+    ...mapState(['user']),
+    onRoutes() {
+      return this.$route.path.replace('/', '');
+    },
+  },
+  created() {
+    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
+    bus.$on('collapse', msg => {
+      this.collapse = msg;
+      bus.$emit('collapse-content', msg);
+    });
+  },
+  methods: {
+    // 分配用户彩带权限
+    async getMenu() {
+      let list = _.cloneDeep(this.items);
+      let data = [
+        {
+          icon: 'el-icon-s-home',
+          index: '/adminCenter/test/index',
+          title: '测试页面',
+        },
+      ];
+      list.push(...data);
+      this.$set(this, `items`, _.uniqBy(list, 'index'));
+    },
+  },
+  watch: {
+    user: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.getMenu();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.sidebar {
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 60px;
+  bottom: 0;
+  overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+  width: 0;
+}
+.sidebar-el-menu:not(.el-menu--collapse) {
+  width: 200px;
+}
+.sidebar > ul {
+  height: 100%;
+}
+// /deep/.first {
+//   padding-left: 0 !important;
+// }
+// /deep/.second .el-submenu__title {
+//   padding-left: 0 !important;
+// }
+</style>

src/components/admin-frame/Sidebar.vue

@@ -1,87 +1,85 @@
 <template>
-  <div class="sidebar">
-    <el-menu
-      class="sidebar-el-menu"
-      :default-active="onRoutes"
-      :collapse="collapse"
-      background-color="#324157"
-      text-color="#bfcbd9"
-      active-text-color="#20a0ff"
-      unique-opened
-      router
-    >
-      <template v-for="item in items">
-        <template v-if="item.subs">
-          <el-submenu class="second" :index="item.index" :key="item.index">
-            <template slot="title">
-              <i :class="item.icon"></i>
-              <span slot="title">{{ item.title }}</span>
+  <div id="Sidebar">
+    <el-row class="sidebar">
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-menu
+            class="sidebar-el-menu"
+            :default-active="onRoutes"
+            :collapse="collapse"
+            background-color="#324157"
+            text-color="#bfcbd9"
+            active-text-color="#20a0ff"
+            unique-opened
+            router
+          >
+            <template v-for="item in items">
+              <template v-if="item.subs">
+                <el-submenu :index="item.index" :key="item.index">
+                  <template slot="title">
+                    <i :class="['iconfont', item.icon]"></i>
+                    <span slot="title">{{ item.title }}</span>
+                  </template>
+                  <template v-for="subItem in item.subs">
+                    <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
+                      <template slot="title">{{ subItem.title }}</template>
+                      <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
+                    </el-submenu>
+                    <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
+                  </template>
+                </el-submenu>
+              </template>
+              <template v-else>
+                <el-menu-item class="first" :index="item.index" :key="item.index">
+                  <i :class="['iconfont', item.icon]"></i>
+                  <span slot="title">{{ item.title }}</span>
+                </el-menu-item>
+              </template>
             </template>
-            <template v-for="subItem in item.subs">
-              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
-                <template slot="title">{{ subItem.title }}</template>
-                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">{{ threeItem.title }}</el-menu-item>
-              </el-submenu>
-              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
-            </template>
-          </el-submenu>
-        </template>
-        <template v-else>
-          <el-menu-item class="first" :index="item.index" :key="item.index">
-            <i :class="item.icon"></i>
-            <span slot="title">{{ item.title }}</span>
-          </el-menu-item>
-        </template>
-      </template>
-    </el-menu>
+          </el-menu>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import _ from 'lodash';
 import { mapState, createNamespacedHelpers } from 'vuex';
+import _ from 'lodash';
 import bus from './bus';
 export default {
-  data() {
+  name: 'Sidebar',
+  props: {},
+  components: {},
+  data: function() {
     return {
       collapse: false,
-      items: [
-        {
-          icon: 'el-icon-s-home',
-          index: '/adminCenter/homeIndex',
-          title: '系统首页',
-        },
-      ],
+      items: [{ icon: 'icon-shouye', index: '/adminCenter/homeIndex', title: '系统首页' }],
     };
   },
-  computed: {
-    ...mapState(['user']),
-    onRoutes() {
-      return this.$route.path.replace('/', '');
-    },
-  },
   created() {
-    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
-    bus.$on('collapse', (msg) => {
+    bus.$on('collapse', msg => {
       this.collapse = msg;
       bus.$emit('collapse-content', msg);
     });
   },
   methods: {
-    // 分配用户彩带权限
-    async getMenu() {
+    getMenu() {
       let list = _.cloneDeep(this.items);
-      let data = [
-        {
-          icon: 'el-icon-s-home',
-          index: '/adminCenter/test/index',
-          title: '测试页面',
-        },
-      ];
+      let data = [{ icon: 'icon-ceshi', index: '/adminCenter/test/index', title: '测试页面' }];
       list.push(...data);
       this.$set(this, `items`, _.uniqBy(list, 'index'));
     },
   },
+  computed: {
+    ...mapState(['user']),
+    onRoutes() {
+      return this.$route.path.replace('/', '');
+    },
+  },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   watch: {
     user: {
       deep: true,
@@ -102,6 +100,7 @@ export default {
   top: 60px;
   bottom: 0;
   overflow-y: scroll;
+  background-color: rgb(50, 65, 87);
 }
 .sidebar::-webkit-scrollbar {
   width: 0;
@@ -112,10 +111,12 @@ export default {
 .sidebar > ul {
   height: 100%;
 }
-// /deep/.first {
-//   padding-left: 0 !important;
-// }
-// /deep/.second .el-submenu__title {
-//   padding-left: 0 !important;
-// }
+.main {
+  .one {
+    .iconfont {
+      font-size: 18px;
+      margin: 0 5px 0 0;
+    }
+  }
+}
 </style>

src/components/web-frame/foot.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script>
+const { footinfo } = require('../../layout/deploy/site');
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'foot',
@@ -23,12 +24,7 @@ export default {
   components: {},
   data: function() {
     return {
-      footInfo: {
-        p1: '技术运营：吉林省科技大市场专利分市场',
-        p2: '技术支持：长春福瑞科技有限公司',
-        p3: '地址：吉林省长春市朝阳区前进大街1244号电话：17319450324微信：guhongwei324邮箱：guhongwei0324@163.com',
-        p4: '吉ICP备2020007658号-1 Copyright 2019 版权所有 中科院长春分院 吉林省计算中心 All Rights Reserved',
-      },
+      footInfo: footinfo,
     };
   },
   created() {},

src/layout/deploy/foot.js

@@ -1,3 +1,8 @@
+// 网站基本设置
+export const siteInfo = {
+  title: '平台名称',
+};
+// 网站底部信息
 export const footinfo = {
   p1: '技术运营：吉林省科技大市场专利分市场',
   p2: '技术支持：长春福瑞科技有限公司',