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:mx0">
|
||
<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>
|
||
</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,
|
||
})
|
||
|
||
// 方案1: 直接在useAsyncData中通过泛型设置类型（当前已使用的方式）
|
||
const { data: arr } = await useAsyncData<PageResultIndexSettingRespVO[]>('projectTypeListChildren-PopularDrawings-popularDrawings', async (): Promise<PageResultIndexSettingRespVO[]> => {
|
||
const res = await getSettingPage(pageReq)
|
||
return res?.data || []
|
||
})
|
||
|
||
const bannerList = ref<Array<PageResultIndexSettingRespVO[]>>([])
|
||
if (arr && arr.value?.length) {
|
||
const bannerListOne = arr.value?.filter((item) => item.rowType === 1)?.sort((a, b) => a.sort - b.sort)
|
||
const bannerListTwo = arr.value?.filter((item) => item.rowType === 2)?.sort((a, b) => a.sort - b.sort)
|
||
const bannerListThree = arr.value?.filter((item) => item.rowType === 3)?.sort((a, b) => a.sort - b.sort)
|
||
const bannerListFour = arr.value?.filter((item) => item.rowType === 4)?.sort((a, b) => a.sort - b.sort)
|
||
bannerList.value = [bannerListOne, bannerListTwo, bannerListThree, bannerListFour]
|
||
}
|
||
// }
|
||
|
||
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>
|