Refactor code structure and remove redundant changes

pages/home/components/LearningRecommendations.vue

@@ -0,0 +1,48 @@
+<template>
+  <div v-if="bannerList?.length" class="mt-34px w-100% flex items-center justify-between">
+    <el-image
+      v-for="(item, index) in bannerList"
+      :key="index"
+      :src="item.content"
+      alt=""
+      srcset=""
+      fit="cover"
+      class="h-180px w-460px"
+      :class="{
+        'cursor-pointer': item.url,
+      }"
+      @click="item.url && handleClick(item.url)"
+    >
+      <template #placeholder>
+        <div class="image-slot">Loading<span class="dot">...</span></div>
+      </template>
+    </el-image>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue'
+
+  import { getSettingPage } from '@/api/home/index'
+  import { PageResultIndexSettingRespVO } from '@/api/home/type'
+
+  const pageReq = reactive({
+    type: 2,
+    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) => {
+    window.open(url, '_blank')
+  }
+</script>
+
+<style scoped></style>