162 lines
4.1 KiB
Vue
162 lines
4.1 KiB
Vue
<template>
|
|
<div class="bg min-w-392px h-30px absolute bottom-0 left-1/2 z-999 footer flex items-end">
|
|
<div class="h-27px w-full flex text-white text-12px font-bold px-18px">
|
|
<div class="flex-1 flex">
|
|
<div
|
|
class="h-full flex items-center cursor-pointer justify-center px-10px flex-none"
|
|
v-for="item in rFriendlinks"
|
|
:key="item.id"
|
|
@click="onClick(item)"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
<div class="h-full flex items-center cursor-pointer justify-center">
|
|
<Popover
|
|
placement="topRight"
|
|
trigger="click"
|
|
overlayClassName="fotter-popover"
|
|
color="rgba(28, 44, 52, .8)"
|
|
:align="{
|
|
overflow: { adjustX: true, adjustY: true },
|
|
}"
|
|
:get-popup-container="getPopupContainer"
|
|
>
|
|
<!-- :align="{ offset: [38, 0] }" -->
|
|
<template #content>
|
|
<div class="text-white">
|
|
<div v-for="(item, key, index) in friendlinks" :key="index" class="mb-10px">
|
|
<div
|
|
class="bg-clip-text text-transparent bg-gradient-to-t from-[#76E9F0] to-[#A7E6EE]"
|
|
>{{ key }}</div
|
|
>
|
|
<div class="flex -mr-10px flex-wrap">
|
|
<div
|
|
@click="onClick(a)"
|
|
class="text-12px mr-10px py-4px cursor-pointer"
|
|
v-for="a in item"
|
|
:key="a.id"
|
|
>
|
|
{{ a.name }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<SvgIcon name="more-icon" />
|
|
</Popover>
|
|
</div>
|
|
</div>
|
|
<LinkModal v-model:visible="visibleModal" :footer="null" :title1="current.name">
|
|
<template #content>
|
|
<div class="h-500px overflow-auto h-full">
|
|
<div v-if="current.type == 3" v-html="current.content"> </div>
|
|
<div v-if="current.type == 2" class="h-full">
|
|
<video muted autoplay controls :src="current.content" class="w-full h-full"></video>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</LinkModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { SvgIcon } from '/@/components/Icon'
|
|
import { Popover } from 'ant-design-vue'
|
|
import { getFriendLinks } from '/@/api/sys/other'
|
|
import { onBeforeMount, ref } from 'vue'
|
|
import LinkModal from '../LinkModal.vue'
|
|
import { useVContext } from '../useVContext'
|
|
const { rootEmitter } = useVContext()
|
|
const getPopupContainer = (trigger) => {
|
|
return trigger.parentElement
|
|
}
|
|
|
|
const _type = [
|
|
{
|
|
type: 1,
|
|
value: '链接',
|
|
},
|
|
{
|
|
type: 2,
|
|
value: '视频',
|
|
},
|
|
{
|
|
type: 3,
|
|
value: '文章',
|
|
},
|
|
]
|
|
|
|
const friendlinks = ref([])
|
|
const rFriendlinks = ref([])
|
|
|
|
const visibleModal = ref(false)
|
|
|
|
const current = ref({})
|
|
|
|
async function getDataF() {
|
|
const resData = await getFriendLinks({
|
|
recommend: 1,
|
|
show: 1,
|
|
})
|
|
rFriendlinks.value = resData
|
|
}
|
|
async function getData() {
|
|
const resData = await getFriendLinks()
|
|
friendlinks.value = resData.reduce((acc, item) => {
|
|
const find = _type.find((e) => e.type == item.type)
|
|
return {
|
|
...acc,
|
|
[find?.value ?? '其他']: [...(acc[find.value] ?? []), item],
|
|
}
|
|
}, {})
|
|
}
|
|
|
|
function onClick(e) {
|
|
current.value = e
|
|
if (e.type == 1) {
|
|
window.open(e.content)
|
|
} else {
|
|
visibleModal.value = true
|
|
}
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getDataF()
|
|
getData()
|
|
rootEmitter.on('interval:auto', () => {
|
|
getDataF()
|
|
getData()
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.bg {
|
|
background: url('../../../assets/images/footer.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.footer {
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
::v-deep(.fotter-popover) {
|
|
top: -85px !important;
|
|
left: 10px !important;
|
|
|
|
.ant-popover-inner-content {
|
|
width: 375px;
|
|
border: 1px solid rgba(57, 102, 132, 1);
|
|
}
|
|
|
|
.ant-popover-arrow {
|
|
right: 20px;
|
|
|
|
.ant-popover-arrow-content {
|
|
background-color: rgba(57, 102, 132, 1) !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|