feat: 详情页主体结构

components.d.ts

@@ -7,7 +7,13 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CommonHeader: typeof import('./src/components/CommonHeader.vue')['default']
+    CommonHeader: typeof import('./src/components/common/CommonHeader.vue')['default']
+    Detail: typeof import('./src/components/detail/Detail.vue')['default']
+    DetailInfoCell: typeof import('./src/components/detail/DetailInfoCell.vue')['default']
+    DetailMain: typeof import('./src/components/detail/DetailMain.vue')['default']
+    DetailMainCell: typeof import('./src/components/detail/DetailMainCell.vue')['default']
+    DetailScaffold: typeof import('./src/components/detail/DetailScaffold.vue')['default']
+    DetailSupport: typeof import('./src/components/detail/DetailSupport.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']

src/App.vue

@@ -16,7 +16,7 @@
 import { useRoute, useRouter } from 'vue-router';
 import { computed } from 'vue';
 import { uniqueId } from 'lodash-es';
-import CommonHeader from './components/CommonHeader.vue';
+import CommonHeader from '@/components/common/CommonHeader.vue';
 import type { HeaderMenuItem } from './types/common';
 
 const router = useRouter();

src/components/CommonHeader.vue → src/components/common/CommonHeader.vue

@@ -39,10 +39,7 @@ const props = withDefaults(
     currentPath: string;
     menuList: HeaderMenuItem[];
   }>(),
-  {
-    currentPath: '',
-    menuList: () => [],
-  },
+  {},
 );
 
 const getParentName = (menu: HeaderMenuItem) => {

src/components/detail/DetailInfoCell.vue

+<!-- 详情页下方信息块 -->
+<template>
+  <section class="bg-white p-4 shadow">
+    <h2 v-if="title">{{ title }}</h2>
+    <div v-if="toListText" class="flex justify-end text-xs" @click="handleToList">更多</div>
+    <div>
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+export interface DetailInfoCellProps {
+  /** 标题 */
+  title: string;
+  /** 跳转列表按钮文案 */
+  toListText?: string;
+}
+withDefaults(defineProps<DetailInfoCellProps>(), {
+  title: '',
+  toListText: '',
+});
+
+const emit = defineEmits(['to-list']);
+
+const handleToList = () => {
+  emit('to-list');
+};
+</script>

src/components/detail/DetailMain.vue

+<!-- 主图部分 -->
+<template>
+  <div>
+    <div class="flex">
+      <div>
+        <img src="" alt="" />
+      </div>
+      <div>
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>

src/router/index.ts

@@ -24,6 +24,8 @@ const MapSelection = () => import('@/views/map/MapSelection.vue');
 const AboutUs = () => import('@/views/about/AboutUs.vue');
 /** 合伙人招募 */
 const PartnerEnlist = () => import('@/views/partner/PartnerEnlist.vue');
+/** 产业园列表 */
+const IndustrialParkDetail = () => import('@/views/industrial-park/IndustrialParkDetail.vue');
 
 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -57,8 +59,8 @@ const router = createRouter({
     },
     {
       // 产业园列表
-      path: '/industrial-parkList',
-      name: 'industrial-parkList',
+      path: '/industrial-park-list',
+      name: 'industrial-park-list',
       component: IndustrialParkList,
       meta: {
         menuName: '产业园',
@@ -127,6 +129,12 @@ const router = createRouter({
         menuName: '合伙人招募',
       },
     },
+    {
+      // 产业园详情
+      path: '/industrial-park-detail',
+      name: 'industrial-park-detail',
+      component: IndustrialParkDetail,
+    },
     {
       path: '/:pathMatch(.*)*',
       redirect: '/',

src/views/industrial-park/IndustrialParkDetail.vue

+<!-- 产业园详情 -->
+<template>
+  <div>
+    <div class="space-y-4">
+      <detail-info-cell>
+        <detail-main></detail-main>
+      </detail-info-cell>
+      <detail-info-cell title="产业园简介"></detail-info-cell>
+      <detail-info-cell title="入驻要求"></detail-info-cell>
+      <detail-info-cell title="要素成本"></detail-info-cell>
+      <detail-info-cell title="产业支持"></detail-info-cell>
+      <detail-info-cell title="产业政策"></detail-info-cell>
+      <detail-info-cell title="代表企业"></detail-info-cell>
+      <detail-info-cell title="园内配套信息"></detail-info-cell>
+      <detail-info-cell title="周边配套"></detail-info-cell>
+      <detail-info-cell title="产业园内载体" to-list-text="更多产业园区"></detail-info-cell>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DetailInfoCell from '@/components/detail/DetailInfoCell.vue';
+import DetailMain from '@/components/detail/DetailMain.vue';
+</script>