Files
template-10490/components/AppFooter.vue
2025-01-27 23:24:42 +08:00

114 lines
5.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<footer class="overflow-hidden pt-4">
<!-- 间隔 -->
<div class="sm:h-[3px] h-[15px]" v-if="getPath().startsWith('/passport/login')"></div>
<div class="sm:h-[30px] h-[15px]" v-else></div>
<div class=" bg-white my-3 w-3/4 m-auto" v-if="config.copyrightForDemoData">
<el-alert :title="config.copyrightForDemoData" center show-icon type="warning" />
</div>
<div class="w-full flex flex-col sm:bg-black justify-between">
<!-- PC版 -->
<div class="sub-menu w-full xl:w-screen-xl xl:px-0 px-4 m-auto flex justify-between py-10 text-center hidden-sm-and-down">
<!-- 底部菜单 -->
<div class="left flex flex-col sm:flex-row sm:flex-wrap justify-between gap-3xl sm:w-9/12 flex-wrap w-full">
<template v-for="item in subMenu">
<div class="sub-menu-item text-left">
<div class="pb-4">
<text class="text-gray-400 hover:text-gray-300 font-bold text-[16px]">{{ item.title }}</text>
</div>
<template v-if="item.children">
<div class="sub-menu-children flex flex-col gap-xs">
<template v-for="sub in item.children">
<a @click="openSpmUrl(`${sub.path}`,sub,sub.navigationId)" class="text-gray-400 hover:text-gray-300 cursor-pointer">{{ sub.title }}</a>
</template>
</div>
</template>
</div>
</template>
</div>
<!-- 关注我们 -->
<div class="right w-3/12 pr-3 text-right flex justify-end" v-if="config.wxQrcode">
<div class="qrcode flex flex-col items-center">
<el-image :src="config.wxQrcode" class="w-[100px]" />
<text class="text-gray-400 py-2">{{ config.wxQrcodeText }}</text>
</div>
</div>
</div>
<div class="flex pt-1 w-auto sm:hidden px-4 sm:px-0">
<el-divider><span class="text-gray-400">Footer</span></el-divider>
</div>
<div class="mx-3 sm:hidden p-5 bg-white rounded-xl">
<el-collapse v-model="activeNames" accordion>
<template v-for="(item,index) in subMenu">
<el-collapse-item :title="item.title" :name="index">
<template v-if="item.children">
<template v-for="sub in item.children">
<a :href="sub.path" class="block cursor-pointer text-gray-600 hover:text-gray-900">{{ sub.title }}</a>
</template>
</template>
</el-collapse-item>
</template>
</el-collapse>
</div>
<!-- <div class="sm:hidden p-4 mt-3">-->
<!-- <el-button type="primary" class="w-full" size="large">联系我们</el-button>-->
<!-- </div>-->
<!-- 版权信息 -->
<div class="w-full xl:w-screen-xl xl:px-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-between justify-center items-center sm:py-10 pt-6 pb-6 text-center">
<div class="text-gray-400 sm:gap-xl leading-7 flex flex-col sm:flex-row">
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号{{ config?.icpNo }}</a>
</div>
<div class="tools flex gap-xl items-center opacity-80 hover:opacity-90 text-gray-400 text-sm">
Powered by <a rel="nofollow" href="https://website.websoft.top" target="_blank" class="text-gray-400 hover:text-gray-50">·企业官网</a>
<!-- <el-tooltip :content="`管理后台`" v-if="config.showAdminIcon">-->
<!-- <a :href="`https://${website.tenantId}.websoft.top`" target="_blank"><img src="@/assets/svg/websoft-mark-white.svg" alt="github" width="28" class="text-gray-400" /></a>-->
<!-- </el-tooltip>-->
</div>
</div>
</div>
</footer>
<footer class="absolute bottom-0 w-full" v-if="getPath().startsWith('/login')">
<div class="w-full xl:w-screen-xl xl:p-0 px-4 w-full m-auto flex sm:flex-row flex-col-reverse sm:justify-center justify-center items-center sm:py-10 pt-6 pb-6 text-center">
<div class="text-gray-400 sm:gap-xl leading-7 flex flex-col sm:flex-row">
<span>Copyright © {{ new Date().getFullYear() }} {{ config?.copyright }}</span>
<a class="text-gray-400 hover:text-gray-400" href="https://beian.miit.gov.cn/" target="_blank"> 备案号{{ config?.icpNo }}</a>
</div>
</div>
</footer>
<el-backtop></el-backtop>
</template>
<script setup lang="ts">
// 请求数据
import {getPath, openSpmUrl, useConfigInfo} from "#imports";
import {useSubMenu, useWebsite} from "~/composables/configState";
import { StarFilled } from '@element-plus/icons-vue'
const config = useConfigInfo();
const website = useWebsite();
const subMenu = useSubMenu();
console.log('---------config---------',config.value)
console.log('---------website---------',website.value)
console.log('---------subMenu---------',subMenu.value)
const activeNames = ref(['1'])
</script>
<style lang="scss">
.el-divider__text{
display: block;
margin-top: -1px;
--el-bg-color: #ffffff;
}
</style>