配置文件中加入底部信息配置

src/config/index.js

@@ -46,5 +46,20 @@ export default {
   /**
    * 是否显示设置的悬浮按钮
    */
-  settingBtn: true
+  settingBtn: true,
+
+  /**
+   * 是否显示设置的底部信息
+   */
+  showFooter: true,
+
+  /**
+   * 底部文字，支持html语法
+   */
+  footerTxt: '© 2019 Zheng Jie <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a>',
+
+  /**
+   * 备案号
+   */
+  caseNumber: '浙ICP备18005431号-3'
 }

src/layout/components/AppMain.vue

@@ -1,11 +1,18 @@
 <template>
-  <section class="app-main">
+  <div>
-    <transition name="fade-transform" mode="out-in">
+    <section class="app-main">
-      <keep-alive :include="cachedViews">
+      <transition name="fade-transform" mode="out-in">
-        <router-view :key="key"/>
+        <keep-alive :include="cachedViews">
-      </keep-alive>
+          <router-view :key="key"/>
-    </transition>
+        </keep-alive>
-  </section>
+      </transition>
+    </section>
+    <div v-if="$store.state.settings.showFooter" id="el-main-footer">
+      <span v-html="$store.state.settings.footerTxt"/>
+      <span> ⋅ </span>
+      <a href="http://www.beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -29,6 +36,7 @@ export default {
     min-height: calc(100vh - 84px);
     width: 100%;
     position: relative;
+    padding-bottom: 18px;
     overflow: hidden;
   }
 

src/store/modules/settings.js

@@ -9,7 +9,10 @@ const settings = {
     sidebarLogo: Config.sidebarLogo,
     theme: variables.theme,
     settingBtn: Config.settingBtn,
-    uniqueOpened: Config.uniqueOpened
+    uniqueOpened: Config.uniqueOpened,
+    showFooter: Config.showFooter,
+    footerTxt: Config.footerTxt,
+    caseNumber: Config.caseNumber
   },
   mutations: {
     CHANGE_SETTING: (state, { key, value }) => {

src/styles/index.scss

@@ -135,3 +135,32 @@ a:hover {
     //margin: 0 auto;
   }
 }
+
+#el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+#el-main-footer {
+  background: none repeat scroll 0 0 white;
+  border-top: 1px solid #e7eaec;
+  overflow: hidden;
+  padding: 10px 6px 0px 6px;
+  height: 33px;
+  font-size: 0.5rem !important;
+  color: #7a8b9a;
+  letter-spacing: 0.8px;
+  font-family: Arial, sans-serif !important;
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  width: 100%;
+}

src/views/login.vue

@@ -28,6 +28,11 @@
         </el-button>
       </el-form-item>
     </el-form>
+    <div v-if="$store.state.settings.showFooter" id="el-login-footer">
+      <span v-html="$store.state.settings.footerTxt"/>
+      <span> ⋅ </span>
+      <a href="http://www.beian.miit.gov.cn" target="_blank">{{ $store.state.settings.caseNumber }}</a>
+    </div>
   </div>
 </template>