Refactor code structure and remove redundant changes

pages/home/components/MainContent.vue

@@ -0,0 +1,52 @@
+`<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 { getSettingPage } from '@/api/home/index'
+  import { PageResultIndexSettingRespVO } from '@/api/home/type'
+
+  const pageReq = reactive({
+    type: 1,
+    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) => {
+    if (url) {
+      window.open(url, '_blank')
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .main-content {
+    flex: 1;
+  }
+</style>