u

code/link56/link56-frontend/src/views/home/index.vue

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import QueryCompany from '@/components/QueryCompany.vue'
+import { getRecommendCompanyApi, getRecommendHotCompanyApi } from '@/request/api/company'
+import { useCommonStore } from '@/store/common'
+import Recommend from './components/recommend.vue'
+
+const router = useRouter()
+const commonStore = useCommonStore()
+
+const carouselList = [
+  { img: '/ship-8263464_1920.jpg', href: '' },
+  { img: '/ship-8263464_1920.jpg', href: '' },
+  { img: '/ship-8263464_1920.jpg', href: '' },
+]
+
+const recommendCompanies = ref<RecommendCompany[]>([])
+const recommendHotCompanies = ref<RecommendHotCompany[]>([])
+
+onMounted(() => {
+  getRecommendCompanyApi().then((res) => {
+    if (res.isSuccess) {
+      recommendCompanies.value = res.data
+    }
+  })
+  getRecommendHotCompanyApi().then((res) => {
+    if (res.isSuccess) {
+      recommendHotCompanies.value = res.data
+    }
+  })
+})
+
+function handleSearch() {
+  router.push('/company')
+}
+</script>
+
+<template>
+  <div class="wrapper">
+    <!-- 轮播图 -->
+    <el-carousel class="carousel">
+      <el-carousel-item v-for="item in carouselList" :key="item.href">
+        <img :src="item.img">
+      </el-carousel-item>
+    </el-carousel>
+
+    <!-- 内容浮在轮播图上 -->
+    <div class="content">
+      <div class="intro">
+        <span class="intro-heading">连接优质企业伙伴</span>
+      </div>
+
+      <div class="query">
+        <QueryCompany v-model="commonStore.companyQuery" :industries="commonStore.industryOptions" :areas="commonStore.areaOptions" @search="handleSearch"/>
+      </div>
+    </div>
+
+    <Recommend :recommed-companies="recommendCompanies" :recommed-hot-companies="recommendHotCompanies" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+}
+
+/* 轮播图 */
+.carousel {
+  width: 100%;
+  height: 600px;
+  position: relative;
+  :deep(.el-carousel__container) {
+    height: 100%;
+  }
+  :deep(.el-carousel__item) {
+    cursor: pointer;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    cursor: pointer;
+  }
+}
+
+/* 内容浮在轮播图上 */
+.content {
+  position: absolute;
+  top: 260px;
+  left: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  color: #fff;
+
+  .intro {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 28px;
+
+    .intro-heading {
+      font-size: 28px;
+      font-weight: 600;
+    }
+
+    .intro-detail {
+      font-size: 18px;
+      margin-top: 8px;
+    }
+  }
+
+  .query {
+    width: 1240px;
+  }
+}
+</style>