54 lines
1.6 KiB
Vue
54 lines
1.6 KiB
Vue
`
|
|
<template>
|
|
<div class="main-content">
|
|
<div class="flex">
|
|
<div class="h-[424px] w-[957px]">
|
|
<el-carousel height="424px" indicator-position="none">
|
|
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
|
|
<el-image :src="item.content" class="w-[100%]" :class="{ 'cursor-pointer': item.url }" fit="cover" @click="handleClick(item.url)" />
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
<LoginForm />
|
|
</div>
|
|
<div class="box-border h-[56px] w-[1219px] flex items-center border border-[#EEEEEE] border-solid border-t-none bg-[#FFFFFF] pl-[10px] line-height-[46px]">
|
|
<img src="~/assets/images/voice.png" alt="" srcset="" class="mr-[10px] h-[15px] w-[16px]" />
|
|
<Vue3Marquee :duration="10" direction="normal" pause-on-hover>
|
|
<template v-for="(item, index) in noticeList" :key="index"> {{ item }} </template>
|
|
</Vue3Marquee>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue'
|
|
import LoginForm from './LoginForm.vue'
|
|
import { Vue3Marquee } from 'vue3-marquee'
|
|
|
|
import { getSettingPage, getNoticeList } from '~/api/home/index'
|
|
|
|
const pageReq = reactive({
|
|
type: 1,
|
|
status: 0,
|
|
})
|
|
|
|
const { data: bannerList } = useAsyncData('get-setting-Page-main-content', async () => {
|
|
const res = await getSettingPage(pageReq)
|
|
return res.data
|
|
})
|
|
|
|
const handleClick = (url: string) => {
|
|
if (url) {
|
|
navigateTo(url)
|
|
}
|
|
}
|
|
|
|
const { data: noticeList } = await getNoticeList()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main-content {
|
|
flex: 1;
|
|
}
|
|
</style>
|