66 lines
1.6 KiB
Vue
66 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>
|