feat: 产业园详情载体列表

components.d.ts

@@ -40,6 +40,7 @@ declare module 'vue' {
     ListInfo: typeof import('./src/components/list/ListInfo.vue')['default']
     ListLand: typeof import('./src/components/list/list-land.vue')['default']
     ListPagination: typeof import('./src/components/list/ListPagination.vue')['default']
+    MiniListItem: typeof import('./src/components/detail/MiniListItem.vue')['default']
     ParkItem: typeof import('./src/components/list/ParkItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

src/components/detail/DetailInfoCell.vue

 <!-- 详情页下方信息块 -->
 <template>
   <section class="bg-white">
-    <h2 v-if="title" class="flex h-8 items-center">
-      <div class="h-[18px] w-[3px] rounded-[30px] bg-[#C0322B]"></div>
-      <div class="ml-[13px] font-yahei text-xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]">
+    <h2 v-if="title" class="flex h-8 items-center" :class="{ 'justify-center': titleCenter }">
+      <div v-if="!titleCenter" class="h-[18px] w-[3px] rounded-[30px] bg-[#C0322B]"></div>
+      <div
+        class="ml-[13px] font-yahei text-xl font-bold leading-8 tracking-[2px] text-[#1A1A1A]"
+        :class="{ 'text-2xl': titleCenter }"
+      >
         {{ title }}
       </div>
     </h2>
-    <div v-if="toListText" class="flex justify-end text-xs" @click="handleToList">更多</div>
+    <div class="relative flex h-[17px] items-center">
+      <div v-if="titleCenter" class="title-bottom-bg h-1 w-[102px] rounded-[30px]"></div>
+      <div
+        v-if="toListText"
+        class="absolute right-0 flex cursor-pointer justify-end text-xs"
+        @click="handleToList"
+      >
+        更多
+      </div>
+    </div>
     <div class="mt-5">
       <slot></slot>
     </div>
@@ -20,10 +32,13 @@ export interface DetailInfoCellProps {
   title?: string;
   /** 跳转列表按钮文案 */
   toListText?: string;
+  /** 是否标题居中 */
+  titleCenter?: boolean;
 }
 withDefaults(defineProps<DetailInfoCellProps>(), {
   title: '',
   toListText: '',
+  titleCenter: false,
 });
 
 const emit = defineEmits(['to-list']);
@@ -32,3 +47,14 @@ const handleToList = () => {
   emit('to-list');
 };
 </script>
+
+<style lang="scss">
+.title-bottom-bg {
+  background: linear-gradient(
+    90deg,
+    #c0322b 0%,
+    rgba(192, 50, 43, 0.45) 66%,
+    rgba(192, 50, 43, 0) 100%
+  );
+}
+</style>

src/components/detail/MiniListItem.vue

+<!-- 产业园、开发区内的载体、土地项 -->
+<template>
+  <div v-if="detail" class="w-[214px]">
+    <div @click="handleDetail">
+      <img class="h-[161px] w-full cursor-pointer rounded-sm" :src="detail.imgUrl" />
+    </div>
+    <div class="mt-3 cursor-pointer font-yahei text-base text-[#1A1A1A]" @click="handleDetail">
+      {{ detail.name }}
+    </div>
+    <div class="mt-1 font-yahei text-[10px] leading-[18px] text-[#4D4D4D]">
+      {{ detail.info }}
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+export interface MiniDetail {
+  imgUrl: string;
+  name: string;
+  info: string;
+}
+withDefaults(
+  defineProps<{
+    detail: MiniDetail;
+  }>(),
+  {},
+);
+
+const emit = defineEmits(['to-detail']);
+
+const handleDetail = () => {
+  emit('to-detail');
+};
+</script>

src/types/api/industrialParkDetail.ts

@@ -65,6 +65,7 @@ export interface IndustrialParkDetailResp {
     imgUrl: string;
     /** 载体类型 */
     type: string;
+    name: string;
   }[];
   /** 产业政策 */
   parkPolicy: ListInfo<Policy>[];

src/views/industrial-park/IndustrialParkDetail.vue

@@ -59,7 +59,21 @@
         </div>
       </DetailInfoCell>
       <DetailInfoCell title="配套设施"></DetailInfoCell>
-      <DetailInfoCell title="产业园内载体" to-list-text="更多产业园区"></DetailInfoCell>
+      <DetailInfoCell
+        v-if="carriers.length"
+        title-center
+        title="产业园内载体"
+        to-list-text="查看更多"
+        @to-list="toCarrierList"
+      >
+        <div class="flex justify-evenly">
+          <MiniListItem
+            v-for="item of carriers.slice(0, 4)"
+            :key="item.name"
+            :detail="item"
+          ></MiniListItem>
+        </div>
+      </DetailInfoCell>
     </div>
   </div>
 </template>
@@ -76,6 +90,10 @@ import type { IndustrialParkDetailResp } from '@/types/api/industrialParkDetail'
 import type { Policy } from '@/types/common';
 import { computed } from 'vue';
 import DetailInfoTab from '@/components/detail/DetailInfoTab.vue';
+import MiniListItem, { type MiniDetail } from '@/components/detail/MiniListItem.vue';
+import { haveValue } from '@/utils/filters.ts';
+import { useJump } from '@/composable/useJump.ts';
+import { RouteName } from '@/router/router.ts';
 
 const { detail, initDetail } = useDetail<IndustrialParkDetailResp>(RequestUrl.industrialParkDetal);
 
@@ -96,6 +114,7 @@ const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Pol
   },
   computed(() => detail.value?.parkPolicy || []),
 );
+const { open } = useJump();
 
 /** 产业基础 */
 const industryBase = computed(() => {
@@ -217,5 +236,24 @@ const enterprises = computed(() => {
   return detail.value?.enterprise.split(',') || [];
 });
 
+/** 产业园内载体列表 */
+const carriers = computed<MiniDetail[]>(() => {
+  if (detail.value) {
+    return detail.value.parkCarrier.map(({ imgUrl, type, area, name }) => {
+      return {
+        imgUrl,
+        name,
+        info: [area ? `${area}㎡` : '', type].filter(haveValue).join(' | '),
+      };
+    });
+  } else {
+    return [];
+  }
+});
+
+const toCarrierList = () => {
+  open(RouteName.carrierList);
+};
+
 initDetail();
 </script>