142 lines
5.1 KiB
Vue
142 lines
5.1 KiB
Vue
<template>
|
|
<div class="mt-[30px] bg-[#14213d] px-[40px] pb-[20px] pt-[50px] text-white lg:px-[80px] sm:px-[60px]">
|
|
<!-- 主内容区 -->
|
|
<div class="mb-[40px] flex flex-col items-start justify-between gap-[30px] lg:flex-row">
|
|
<!-- 左侧 Logo -->
|
|
<div class="mx-auto w-[200px] shrink-0 lg:mx-0">
|
|
<img src="~/assets/images/logo5.png" class="h-auto w-full" />
|
|
</div>
|
|
|
|
<!-- 中间部分 -->
|
|
<div class="grid grid-cols-2 mx-[80px] flex-1 gap-[10px] lg:grid-cols-3">
|
|
<div v-for="(col, index) in bannerList?.slice(0, 3)" :key="index">
|
|
<h3 v-if="handle(col)" class="ma-[0px] mb-[20px] pa-[0px] text-[16px]">{{ handle(col) }}</h3>
|
|
<ul>
|
|
<li
|
|
v-for="(item, i) in handle2(col)"
|
|
:key="i"
|
|
class="mb-[15px] cursor-pointer text-[15px] text-white/90"
|
|
:class="{ 'cursor-pointer hover:text-blue-400!': item.url }"
|
|
@click="handleClick(item)"
|
|
>
|
|
{{ item.name }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧二维码 -->
|
|
<div class="flex shrink-0 flex-row gap-[30px]">
|
|
<div
|
|
v-for="(qr, i) in bannerList?.[3]"
|
|
:key="i"
|
|
class="text-center"
|
|
:class="{ 'cursor-pointer hover:text-blue-400!': qr.url }"
|
|
@click="handleClick(qr)"
|
|
>
|
|
<el-image :src="qr.content" class="mx-auto mb-[10px] w-[120px] rounded-lg bg-gray-400/20" />
|
|
<p class="text-[15px] text-white/90" :class="{ 'cursor-pointer hover:text-blue-400!': qr.url }">{{ qr.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部版权 -->
|
|
<div class="border-t border-white/20 pt-[20px] text-center text-[14px] text-white/70">
|
|
Copyright 2007-2025 图夕夕网络科技(成都)有限公司
|
|
<a href="http://beian.miit.gov.cn/" target="_blank" class="text-white/90 hover:text-blue-400!"> 蜀ICP备2025141494号-1</a>
|
|
<img src="~/assets/images/x.png" class="w-[20px] h-[20px] relative top-[2px]" />
|
|
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51010702043645" rel="noreferrer" target="_blank">川公网安备51010702043645号</a >
|
|
</div>
|
|
|
|
<el-image-viewer v-if="showViewer" :url-list="previewImgList" :url-index="0" @close="showViewer = false"></el-image-viewer>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
|
|
import { getSettingPage } from '~/api/home/index'
|
|
import type { PageResultIndexSettingRespVO } from '~/api/home/type'
|
|
|
|
// 导航数据
|
|
// const columns = [
|
|
// {
|
|
// title: '联系与合作',
|
|
// items: ['关于我们', '联系我们', '免责声明', '常见问题'],
|
|
// },
|
|
// {
|
|
// title: '关注我们',
|
|
// items: ['微信订阅号：多多机械', '微信服务号：多多网', '技术交流群：点此加入', '创收平台：为设计师创造收益'],
|
|
// },
|
|
// ]
|
|
|
|
// 二维码数据（需要替换真实图片路径）
|
|
// const qrcodes = [
|
|
// {
|
|
// img: new URL('~/assets/images/logo2.png', import.meta.url).href,
|
|
// text: '抖音电商关注官方号',
|
|
// },
|
|
// {
|
|
// img: new URL('~/assets/images/logo2.png', import.meta.url).href,
|
|
// text: '微信扫码关注官方助手',
|
|
// },
|
|
// ]
|
|
|
|
const pageReq = reactive({
|
|
type: 3,
|
|
status: 0,
|
|
})
|
|
|
|
const bannerList = ref<Array<PageResultIndexSettingRespVO[]>>([])
|
|
const getBanner = async () => {
|
|
const res = await getSettingPage(pageReq)
|
|
if (res.code === 0) {
|
|
const arr = res.data || []
|
|
const bannerListOne = arr.filter((item) => item.rowType === 1)?.sort((a, b) => a.sort - b.sort)
|
|
const bannerListTwo = arr.filter((item) => item.rowType === 2)?.sort((a, b) => a.sort - b.sort)
|
|
const bannerListThree = arr.filter((item) => item.rowType === 3)?.sort((a, b) => a.sort - b.sort)
|
|
const bannerListFour = arr.filter((item) => item.rowType === 4)?.sort((a, b) => a.sort - b.sort)
|
|
bannerList.value = [bannerListOne, bannerListTwo, bannerListThree, bannerListFour]
|
|
}
|
|
}
|
|
getBanner()
|
|
|
|
const handle = (col: PageResultIndexSettingRespVO[]) => {
|
|
if (col?.length > 0) {
|
|
return col[0].name
|
|
}
|
|
return ''
|
|
}
|
|
|
|
const handle2 = (col: PageResultIndexSettingRespVO[]) => {
|
|
if (col?.length > 0) {
|
|
return col.slice(1)
|
|
}
|
|
return []
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param item.innerType 区分 底部信息展示 0 文本 1 图片地址 2 站内链接地址 3 外部链接地址 4 富文本
|
|
*/
|
|
const showViewer = ref(false)
|
|
const previewImgList = ref<string[]>([])
|
|
const handleClick = (item: PageResultIndexSettingRespVO) => {
|
|
if (item.content && (item.innerType === 3 || item.innerType === 2)) {
|
|
window.open(item.content, '_blank')
|
|
} else if (item.content && (item.innerType === 4 || item.innerType === 0)) {
|
|
navigateTo(`/editor-view?content=${encodeURIComponent(item.content)}`)
|
|
} else if (item.innerType === 1 && item.content) {
|
|
showViewer.value = true
|
|
previewImgList.value = [item.content]
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
ul {
|
|
li {
|
|
list-style: none;
|
|
}
|
|
}
|
|
</style>
|