49 lines
1.1 KiB
Vue
49 lines
1.1 KiB
Vue
<template>
|
|
<div v-if="bannerList?.length" class="mt-34px w-100% flex items-center justify-between">
|
|
<el-image
|
|
v-for="(item, index) in bannerList"
|
|
:key="index"
|
|
:src="item.content"
|
|
alt=""
|
|
srcset=""
|
|
fit="cover"
|
|
class="h-180px w-460px"
|
|
:class="{
|
|
'cursor-pointer': item.url,
|
|
}"
|
|
@click="item.url && handleClick(item.url)"
|
|
>
|
|
<template #placeholder>
|
|
<div class="image-slot">Loading<span class="dot">...</span></div>
|
|
</template>
|
|
</el-image>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
|
|
import { getSettingPage } from '@/api/home/index'
|
|
import { PageResultIndexSettingRespVO } from '@/api/home/type'
|
|
|
|
const pageReq = reactive({
|
|
type: 2,
|
|
status: 0,
|
|
})
|
|
|
|
const bannerList = ref<PageResultIndexSettingRespVO[]>([])
|
|
const getBanner = async () => {
|
|
const res = await getSettingPage(pageReq)
|
|
if (res.code === 0) {
|
|
bannerList.value = res.data
|
|
}
|
|
}
|
|
getBanner()
|
|
|
|
const handleClick = (url: string) => {
|
|
window.open(url, '_blank')
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|