You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

86 lines
1.6 KiB

<template>
<router-view v-slot="{ Component }">
<component :is="Component" />
</router-view>
<!-- 全站通用Footer -->
<div class="footer">
<div class="footer-inner">
<div class="footer-left">
<span>© 2024 智慧照明系统</span>
<span class="footer-divider">|</span>
<span>技术支持:上海蕊鑫信息科技有限公司</span>
<span class="footer-divider">|</span>
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" class="beian-link">沪ICP备2022011794号</a>
</div>
</div>
</div>
</template>
<script setup lang="ts">
// No imports needed
</script>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#app {
height: 100%;
}
</style>
<style scoped>
.footer {
width: 100%;
background: #0a1a2f;
color: #b0b8c7;
font-size: 14px;
padding: 18px 0 12px 0;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
border-top: 1px solid #1a2a3f;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 0 24px;
}
.footer-left, .footer-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.footer-divider {
margin: 0 8px;
color: #3a4a5f;
}
.beian-link {
color: #b0b8c7;
text-decoration: underline;
}
.beian-link:hover {
color: #409EFF;
}
@media (max-width: 700px) {
.footer-inner {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.footer {
font-size: 12px;
padding: 12px 0 8px 0;
}
}
</style>