`
<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>
