60 lines
1.6 KiB
Vue
60 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>
|
||
· 经典来袭，SolidWorks装配经典案例之气动发动机
|
||
</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 } 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)
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.main-content {
|
||
flex: 1;
|
||
}
|
||
</style>
|