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.

76 lines
1.4 KiB

<template>
<el-footer :class="prefixCls">
<div :class="`${prefixCls}__links`">
<nuxt-link :to="item.link" :key="index" v-for="(item, index) in menuList">{{
item.title
}}
</nuxt-link>
</div>
<div :class="`${prefixCls}__copyright`"
>{{ store.$state.otherConfig?.icp_record }}
</div
>
</el-footer>
</template>
<script lang="ts" setup>
const menuList = ref([]);
const {prefixCls} = useDesign('layout-footer');
const {commonApi} = useApi();
const store = useAppStore()
async function getData() {
const menus = await commonApi.getBottomMenu()
const config = await commonApi.getIndexConfig()
menuList.value = menus.data
store.setConfig(config.data)
}
getData()
</script>
<style lang="scss" scoped>
$prefix-cls: '#{$name-prefix}-layout-footer';
$normal-color: #fff;
$hover-color: rgba(0, 0, 0, 0.85);
.#{$prefix-cls} {
height: fit-content;
padding: 40px 0 85px;
background-color: #022950;
color: $normal-color;
text-align: center;
&__links {
margin-bottom: 50px;
a {
font-size: 20px;
padding: 0 20px;
color: $normal-color;
border-right: 1px solid $white;
&:hover {
//color: @hover-color;
}
&:last-of-type {
border: unset;
}
}
}
&__github {
margin: 0 30px;
&:hover {
color: $hover-color;
}
}
&__copyright {
font-size: 16px;
}
}
</style>