Bläddra i källkod

reactor:新增页脚;

zhangchong 1 år sedan
förälder
incheckning
64cdbb52d7

+ 1 - 1
src/layout/footer/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="layout-footer">
 		<div class="layout-footer-warp">
-			<el-link href="https://beian.miit.gov.cn/" target="_blank" type="info"> 蜀ICP备19035032号-36</el-link>
+			<el-link href="https://beian.miit.gov.cn/" target="_blank">备案号:蜀ICP备19035032号-36</el-link>
 		</div>
 	</div>
 </template>

+ 29 - 0
src/views/login/component/footer.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="layout-footer">
+    <div class="layout-footer-warp">
+      <el-link href="https://beian.miit.gov.cn/" target="_blank" style="color:#333" :underline="false">备案号:蜀ICP备19035032号-36</el-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="layoutFooter">
+// 此处需有内容(注释也得),否则缓存将失败
+</script>
+
+<style scoped lang="scss">
+.layout-footer {
+  width: 100%;
+  display: flex;
+  position: absolute;
+  bottom: 10px;
+  z-index: 10;
+  &-warp {
+    margin: auto;
+    text-align: center;
+    animation: error-num 0.3s ease;
+    :deep(.el-link) {
+      //color: var(--el-text-color-secondary);
+    }
+  }
+}
+</style>

+ 8 - 0
src/views/login/index.vue

@@ -24,6 +24,7 @@
 				</div>-->
 			</div>
 		</div>
+    <LayoutFooter v-if="isFooter" />
 	</div>
 </template>
 
@@ -44,6 +45,7 @@ interface LoginState {
 const Account = defineAsyncComponent(() => import('@/views/login/component/Account.vue'));
 const Mobile = defineAsyncComponent(() => import('@/views/login/component/Mobile.vue'));
 const Scan = defineAsyncComponent(() => import('@/views/login/component/Scan.vue'));
+const LayoutFooter = defineAsyncComponent(() => import('@/views/login/component/footer.vue'));
 
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -51,6 +53,12 @@ const state = reactive<LoginState>({
 	tabsActiveName: 'account', // 默认显示账号密码登录
 	isScan: false, // 是否显示扫码登录
 });
+
+// 设置 footer 显示/隐藏
+const isFooter = computed(() => {
+  return themeConfig.value.isFooter;
+});
+
 let bgImg = themeConfig.value.loginImage ?? `url(${getImageUrl('login/bg.png')})`;
 // 获取布局配置信息
 const getThemeConfig = computed(() => {

+ 8 - 1
src/views/resetPwd/index.vue

@@ -10,11 +10,12 @@
 				<reset-pwd />
 			</div>
 		</div>
+    <LayoutFooter v-if="isFooter" />
 	</div>
 </template>
 
 <script setup lang="ts" name="resetPwd">
-import { defineAsyncComponent, onMounted } from 'vue';
+import { computed, defineAsyncComponent, onMounted } from "vue";
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '@/stores/themeConfig';
 import { NextLoading } from '@/utils/loading';
@@ -24,6 +25,7 @@ import { getImageUrl } from '@/utils/tools';
 
 // 引入组件
 const ResetPwd = defineAsyncComponent(() => import('@/views/resetPwd/component/Reset-password.vue'));
+const LayoutFooter = defineAsyncComponent(() => import('@/views/login/component/footer.vue'));
 
 // 定义变量
 const storesThemeConfig = useThemeConfig();
@@ -35,6 +37,11 @@ const backToLogin = () => {
 	Local.clear();
 	router.push('/');
 };
+// 设置 footer 显示/隐藏
+const isFooter = computed(() => {
+  return themeConfig.value.isFooter;
+});
+
 // 页面加载时
 onMounted(() => {
 	NextLoading.done();