赵忠林
76534dd2de
- 集成 a-carousel 组件实现首页英雄区域轮播图效果 - 添加 ClientOnly 包装确保轮播图在客户端渲染 - 配置自动播放和淡入淡出动画效果 - 设置背景图片数组包含两个轮播图片地址 - 调整 CSS 样式实现轮播图绝对定位和层级管理 - 修改页脚背景色从黑色调整为灰色 - 恢复显示网站名称文字并设置绿色字体颜色 - 优化轮播图容器和幻灯片的高度适配样式
82 lines
2.7 KiB
Vue
82 lines
2.7 KiB
Vue
<template>
|
|
<a-layout-footer class="footer">
|
|
<div class="mx-auto max-w-screen-xl px-4 py-10">
|
|
<a-row :gutter="[24, 24]">
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-base font-semibold text-white">关注我们</div>
|
|
<div class="mt-4 flex items-center gap-4">
|
|
<a-avatar shape="square" :size="96" src="https://oss.wsdns.cn/20260127/74041127623e4a8faa49a24e0818dae6.png" />
|
|
<div class="text-sm leading-6 text-gray-400">
|
|
小程序
|
|
<br />
|
|
获取最新动态
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-base font-semibold text-white">快速入口</div>
|
|
<div class="mt-4 grid gap-2 text-sm text-gray-400">
|
|
<NuxtLink class="hover:text-white" to="/products">经营范围</NuxtLink>
|
|
<NuxtLink class="hover:text-white" to="/contact">联系我们</NuxtLink>
|
|
</div>
|
|
</a-col>
|
|
|
|
<a-col :xs="24" :md="8">
|
|
<div class="text-base font-semibold text-white">备案信息</div>
|
|
<div class="mt-4 text-sm text-gray-400">{{ icpText }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<div
|
|
class="mt-10 flex flex-col gap-2 border-t border-white/10 pt-6 text-xs text-gray-500 md:flex-row md:items-center md:justify-between"
|
|
>
|
|
<div>© {{ year }} {{ siteName }}. All rights reserved.</div>
|
|
<div class="tools flex items-center opacity-80 hover:opacity-90 text-gray-100 text-xs">
|
|
Powered by
|
|
<a
|
|
rel="nofollow"
|
|
href="https://glt.websoft.top"
|
|
target="_blank"
|
|
class="text-white visited:text-white hover:text-gray-200 ml-1"
|
|
>
|
|
云·企业官网
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-layout-footer>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { getCmsWebsiteFieldByCode } from '@/api/cms/cmsWebsiteField'
|
|
|
|
const { data: siteInfo } = useSiteInfo()
|
|
const siteName = computed(() => String((siteInfo.value as any)?.data?.websiteName || '桂乐淘'))
|
|
|
|
const { data: icpField } = useAsyncData('cms-website-field-icpNo', async () => {
|
|
try {
|
|
return await getCmsWebsiteFieldByCode('icpNo')
|
|
} catch {
|
|
return null
|
|
}
|
|
})
|
|
|
|
const icpNo = computed(() => {
|
|
const v = icpField.value?.value ?? icpField.value?.defaultValue
|
|
if (typeof v === 'string' && v.trim()) return v.trim()
|
|
const fallback = (siteInfo.value as any)?.data?.icpNo
|
|
return typeof fallback === 'string' ? fallback.trim() : ''
|
|
})
|
|
|
|
const icpText = computed(() => (icpNo.value ? `备案号：${icpNo.value}` : '备案号：'))
|
|
const year = new Date().getFullYear()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.footer {
|
|
background: #4b5563;
|
|
padding: 0;
|
|
}
|
|
</style>
|