Restructure components and update page configuration

components/drawe-components/FeaturedSpecials.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="box-border w-100% border border-[#EEEEEE] rounded-12px border-solid bg-[#FFFFFF] px-26px py-30px">
+    <div class="flex items-center">
+      <div class="text-28px text-[#333333] font-normal">精选专题</div>
+      <div class="ml-50px text-21px text-[#999999] font-normal">了解最新趋势发展</div>
+    </div>
+    <div class="mt-36px flex justify-between">
+      <div v-for="item in 4" :key="item" class="flex flex-col items-center">
+        <img :src="`https://picsum.photos/320/190?_t${new Date().getTime()}`" alt="" srcset="" class="h-190px w320 rounded-4px" />
+        <div class="mt-10px text-18px text-[#333333] font-normal">机器人</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { PropType} from 'vue'
+  import { ref, watch } from 'vue'
+  import { recommendTop } from '~/api/upnew/index'
+  import type { recommendTopRes } from '~/api/upnew/types'
+  const props = defineProps({
+    type: {
+      type: Number as PropType<1 | 2 | 3>,
+      default: 1,
+    },
+  })
+
+  /**
+   * 这个接口调用错了 后续修改
+   */
+  const list = ref<recommendTopRes[]>([])
+  watch(
+    () => props.type,
+    (newVal) => {
+      if (newVal) {
+        recommendTop({
+          type: newVal,
+          projectType: 0,
+          isDomestic: 1,
+        }).then((res) => {
+          list.value = res.data
+        })
+      }
+    },
+    {
+      immediate: true,
+    }
+  )
+</script>