u

code/link56/link56-frontend-new/src/views/home/components/recommend.vue

@@ -1,26 +1,15 @@
 <script lang="ts" setup>
-const tableData = [
-  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
+import type { PropType } from 'vue'
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+
+defineProps({
+  recommedCompanies: {
+    type: Object as PropType<RecommendCompany[]>,
   },
-  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
+  recommedHotCompanies: {
+    type: Object as PropType<RecommendHotCompany[]>,
   },
-  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-]
+})
 </script>
 
 <template>
@@ -29,12 +18,21 @@ const tableData = [
       <div class="recommend-title">
         企业名录
       </div>
-
-      <!-- <el-table :data="tableData" style="width: 100%" :show-header="false">
-        <el-table-column prop="date" label="地区" width="180" />
-        <el-table-column prop="name" label="公司" />
-      </el-table> -->
-      <el-empty description="暂无企业名录" style="background-color: #fff;" />
+      <div v-if="recommedCompanies && recommedCompanies.length > 0" class="area-list">
+        <div v-for="(item, index) in recommedCompanies" :key="index" class="area-row">
+          <div class="area-name">
+            {{ item.shengName }} {{ item.shiName }}
+          </div>
+          <div class="area-company-box">
+            <div class="area-company-list">
+              <div v-for="company in item.companies" :key="company.id" class="area-company-item" :style="{ color: company.color || '#000' }">
+                {{ company.name }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-empty v-else description="暂无企业名录" style="background-color: #fff;" />
     </div>
 
     <div class="right">
@@ -43,12 +41,18 @@ const tableData = [
           热门推荐
         </div>
         <div class="hot-card-list">
-          <el-empty description="暂无热门推荐" />
+          <template v-if="recommedHotCompanies && recommedHotCompanies.length > 0">
+            <div
+              v-for="(item, i) in recommedHotCompanies"
+              :key="item.id"
+              class="hot-card-item"
+            >
+              <span class="number">{{ i + 1 }}</span>
+              <span class="name">{{ item.name }}</span>
+            </div>
+          </template>
 
-          <!-- <div v-for="i in 10" :key="i" class="hot-card-item">
-            <span class="number">{{ i }}</span>
-            <span class="name">xxxxxxxxxx公司公司</span>
-          </div> -->
+          <el-empty v-else description="暂无热门推荐" />
         </div>
       </div>
     </div>
@@ -75,6 +79,7 @@ const tableData = [
         display: flex;
         flex-direction: column;
         background-color: #fff;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
         .hot-card-item {
           display: flex;
           align-items: center;
@@ -109,5 +114,63 @@ const tableData = [
     position: relative;
     margin-bottom: 12px;
   }
+  .area-list {
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+
+    .area-row {
+      display: flex;
+      align-items: stretch;
+      border-bottom: 1px solid #e0e3e8;
+      transition: background-color 0.2s;
+    }
+
+    .area-row:hover {
+      background-color: #f9f9fb;
+    }
+
+    .area-row:last-child {
+      border-bottom: none;
+    }
+
+    .area-name {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 15%;
+      background-color: #f8f9fa;
+      color: #34495e;
+      font-weight: bold;
+      border-right: 1px solid #e0e3e8;
+      padding: 12px;
+      font-size: 15px;
+    }
+
+    .area-company-box {
+      flex: 1;
+      padding: 14px 20px;
+      background-color: #ffffff;
+    }
+
+    .area-company-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px 16px;
+    }
+
+    .area-company-item {
+      padding-left: 10px;
+      line-height: 1.8;
+      font-size: 14px;
+      color: #333;
+      cursor: pointer;
+    }
+
+    .area-company-item:hover {
+      color: #1e80ff;
+      text-decoration: underline;
+    }
+  }
 }
 </style>

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

@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { RecommendCompany, RecommendHotCompany } from '@/types/company'
+import { onMounted, ref } from 'vue'
 import QueryCompany from '@/components/QueryCompany.vue'
+import { getRecommendCompanyApi, getRecommendHotCompanyApi } from '@/request/api/company'
 import { useCommonStore } from '@/store/common'
 import Recommend from './components/recommend.vue'
 
@@ -10,6 +13,22 @@ const carouselList = [
   { 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
+    }
+  })
+})
 </script>
 
 <template>
@@ -32,7 +51,7 @@ const carouselList = [
       </div>
     </div>
 
-    <Recommend />
+    <Recommend :recommed-companies="recommendCompanies" :recommed-hot-companies="recommendHotCompanies" />
   </div>
 </template>