Merge branch 'dev' of http://101.201.78.203/cfld-front/liyeyun into dev

src/App.vue

 <template>
   <div>
     <ElContainer class="min-h-screen">
-      <ElHeader>
+      <ElHeader class="!px-0">
         <CommonHeader :menu-list="menuList" :current-path="currentPath"></CommonHeader>
       </ElHeader>
-      <ElMain class="!p-0">
+      <ElMain class="h-0 !p-0">
         <RouterView />
       </ElMain>
       <ElFooter>Footer</ElFooter>

src/components/common/CommonHeader.vue

 <template>
-  <div class="header-view flex items-center justify-between pl-[40px] pt-[12px]">
+  <div class="header-view flex items-center justify-between pl-[40px]">
     <!-- <div>logo</div> -->
     <div class="flex flex-1 justify-start">
       <ElMenu
@@ -68,6 +68,6 @@ const handleMenuChange = () => {};
 </script>
 <style scoped>
 .header-view {
-  box-shadow: 0 2px 8px 0 rgba(90 0 0 0.1);
+  box-shadow: 0 2px 8px 0 rgba(90, 0, 0, 0.1);
 }
 </style>

src/components/common/CommonTitle.vue

@@ -10,7 +10,7 @@
         {{ typeName }}
       </div>
     </div>
-    <div class="h-full">
+    <div v-if="showSearch" class="h-full">
       <div class="search-input-shadow flex h-full items-center overflow-hidden rounded">
         <div class="flex flex-1 items-center justify-center">
           <input
@@ -30,8 +30,12 @@
 withDefaults(
   defineProps<{
     typeName: string;
+    /** 显示搜索 */
+    showSearch?: boolean;
   }>(),
-  {},
+  {
+    showSearch: true,
+  },
 );
 </script>
 
@@ -45,7 +49,7 @@ withDefaults(
     outline: none;
   }
   &::placeholder {
-    @apply text-[#999999];
+    color: #999999;
   }
 }
 </style>

src/components/detail/StarDetail.vue

+<!-- 星级开发区展示 -->
+<template>
+  <div class="header-bg absolute inset-x-0 top-0 flex h-[493px] w-full items-center justify-center">
+    <div class="header-bg__img h-[359px] w-[947px]">
+      <div class="flex justify-between">
+        <div>
+          <div
+            class="header-bg__content ml-[11px] mt-[74px] font-yahei text-[40px] font-bold leading-[56px] tracking-[2px] text-[#C0322B]"
+          >
+            投资{{ developName }} | 共赢发展未来
+          </div>
+          <div>
+            <img
+              class="ml-[155px] mt-[41px] h-[120px] w-[150px]"
+              src="@/assets/images/home-header-right.png"
+            />
+          </div>
+        </div>
+        <div class="mt-[25px] pb-[40px] pt-[33px]">
+          <div class="flex flex-col">
+            <div class="text-[0px]">
+              <CommonImage class="h-[286px] w-[388px]"></CommonImage>
+            </div>
+            <div class="bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]">舒城县</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- icon -->
+  <div class="flex items-center justify-between px-10 py-[30px]">
+    <StarIconCell
+      type-name="产业园"
+      :count="detail.developmentCountVo!.parkCount"
+      icon="industrial"
+    ></StarIconCell>
+    <StarIconCell
+      type-name="载体"
+      :count="detail.developmentCountVo!.carrierCount"
+      icon="carrier"
+    ></StarIconCell>
+    <StarIconCell
+      type-name="土地"
+      :count="detail.developmentCountVo!.landCount"
+      icon="land"
+    ></StarIconCell>
+  </div>
+  <DetailInfoCell
+    v-for="info of infos"
+    :key="info.name"
+    title-center
+    :title="info.name"
+    class="py-5"
+  >
+    <div class="flex items-center space-x-[23px]">
+      <StarInfoCell
+        v-for="item of info.value"
+        :key="item.title"
+        :title="item.title"
+        :img="item.coverUrl"
+        :content="item.titleIntroduce"
+        @click="handlePreviewInfo(item)"
+      ></StarInfoCell>
+    </div>
+  </DetailInfoCell>
+  <ElDialog
+    v-model="isShowContent"
+    class="star-content-dialog"
+    append-to-body
+    :title="currentInfo?.title"
+    width="380px"
+  >
+    <div class="px-5 py-4 font-yahei text-[#1A1A1A]">
+      {{ currentInfo?.titleIntroduce }}
+    </div>
+    <template #footer>
+      <div class="flex justify-end">
+        <div
+          class="flex h-[26px] cursor-pointer items-center rounded-[4px] bg-[#C0322B] px-[10px] text-sm text-white"
+          @click="changeShowContent(false)"
+        >
+          我知道了
+        </div>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<script setup lang="ts">
+import type { DevelopZoneDetailResp, StarInfo } from '@/types/api/developZoneDetail';
+import { computed, ref } from 'vue';
+import CommonImage from '../common/CommonImage.vue';
+import StarIconCell from './StarIconCell.vue';
+import DetailInfoCell from './DetailInfoCell.vue';
+import StarInfoCell from './StarInfoCell.vue';
+
+const props = withDefaults(
+  defineProps<{
+    detail: DevelopZoneDetailResp;
+  }>(),
+  {},
+);
+
+/** 当前点击信息 */
+const currentInfo = ref<null | StarInfo>(null);
+/** 显示内容弹窗 */
+const isShowContent = ref(false);
+
+const isLishui = computed(() => {
+  return props.detail.name === '溧水产业新城';
+});
+
+const infos = computed(() => {
+  return Object.entries(props.detail.starObjectExtensionInfoMap!).map(([key, value]) => {
+    return {
+      name: key,
+      value,
+    };
+  });
+});
+
+const developName = computed(() => {
+  if (isLishui.value) {
+    return '溧水';
+  } else {
+    return '舒城';
+  }
+});
+const changeShowContent = (b: boolean) => {
+  isShowContent.value = b;
+};
+
+const handlePreviewInfo = (info: StarInfo) => {
+  currentInfo.value = info;
+  changeShowContent(true);
+};
+</script>
+<style lang="scss">
+.star-content-dialog {
+  .el-dialog__header {
+    border-bottom: 1px solid #00000014;
+    padding: 16px 20px 12px 20px;
+    .el-dialog__title {
+      color: #1a1a1a;
+      font-weight: bold;
+      @apply font-yahei;
+    }
+  }
+  .el-dialog__footer {
+    border-top: 1px solid #00000014;
+    padding: 12px 20px 12px 20px;
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+}
+</style>

src/components/detail/StarIconCell.vue

+<!-- 星级开发区，上部各列表数量 -->
+<template>
+  <div class="flex items-center">
+    <div>
+      <img class="h-[50px] w-[50px]" :src="currentIcon" />
+    </div>
+    <div class="ml-4">
+      <div class="font-yahei text-2xl font-bold text-[#1A1A1A]">
+        {{ count }}
+      </div>
+      <div class="mt-3 font-yahei text-base text-[#4D4D4D]">{{ typeName }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import industrialIcon from '@/assets/images/industrial-icon.png';
+import carrierIcon from '@/assets/images/carrier-icon.png';
+import landIcon from '@/assets/images/land-icon.png';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    count: number;
+    icon: 'industrial' | 'carrier' | 'land';
+    typeName: string;
+  }>(),
+  {},
+);
+
+const currentIcon = computed(() => {
+  switch (props.icon) {
+    case 'industrial':
+      return industrialIcon;
+    case 'carrier':
+      return carrierIcon;
+    case 'land':
+      return landIcon;
+    default:
+      return '';
+  }
+});
+</script>

src/components/detail/StarInfoCell.vue

+<!-- 星级开发区信息 -->
+<template>
+  <div
+    class="star-info-cell star-info-shadow h-[208px] w-[214px] cursor-pointer rounded-sm px-[13px] py-4"
+  >
+    <div>
+      <CommonImage
+        class="star-info-img h-[142px] w-[189px] transition-all duration-200"
+        :src="img || null"
+      />
+    </div>
+    <div class="mt-[10px] font-yahei text-base font-bold text-[#1A1A1A]">
+      {{ title }}
+    </div>
+    <div class="star-info-content h-0 overflow-hidden break-all transition-all duration-200">
+      {{ content }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CommonImage from '../common/CommonImage.vue';
+
+withDefaults(
+  defineProps<{
+    img: string;
+    title: string;
+    content: string;
+  }>(),
+  {},
+);
+</script>
+
+<style lang="scss">
+.star-info-shadow {
+  box-shadow: 0px 2px 8px 0px rgba(90, 0, 0, 0.1);
+}
+.star-info-cell:hover {
+  .star-info-img {
+    height: 0;
+  }
+  .star-info-content {
+    height: 142px;
+  }
+}
+</style>

src/components/user/MyParkList.vue

+<template>
+  <div>
+    <ElTable :data="datas" row-key="id">
+      <ElTableColumn label="编号">
+        <template #default="{ $index }">
+          <div>{{ $index + 1 }}</div>
+        </template>
+      </ElTableColumn>
+      <ElTableColumn prpo="name" :label="typeName + '名称'"></ElTableColumn>
+      <ElTableColumn prpo="isSystemName" label="来源方式"></ElTableColumn>
+      <ElTableColumn prpo="createTime" label="录入时间"></ElTableColumn>
+      <ElTableColumn prpo="updateTime" label="更新时间"></ElTableColumn>
+      <ElTableColumn prpo="statusName" label="审批状态"></ElTableColumn>
+      <ElTableColumn label="操作">
+        <template #default="{ row }">
+          <div :id="row.id">查看</div>
+        </template>
+      </ElTableColumn>
+    </ElTable>
+    <ListPagination
+      v-model:current-page="pageNum"
+      v-model:page-size="pageSize"
+      class="mt-5"
+      layout="prev, pager, next"
+      :total="totalCount"
+    ></ListPagination>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useListView } from '@/composable/useListView.ts';
+import { RequestUrl } from '@/types/api.ts';
+import type { MyParkCondition, MyParkItem } from '@/types/api/myParkList';
+import { ParkItemType } from '@/types/enum.ts';
+import { computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    type: ParkItemType;
+  }>(),
+  {},
+);
+
+const isDevelop = computed(() => {
+  return props.type === ParkItemType.develop;
+});
+
+const isIndustrial = computed(() => {
+  return props.type === ParkItemType.industrial;
+});
+
+const typeName = computed(() => {
+  if (isDevelop.value) {
+    return '开发区';
+  } else if (isIndustrial.value) {
+    return '产业园';
+  } else {
+    return '';
+  }
+});
+
+const currentUrl = computed(() => {
+  if (isDevelop.value) {
+    return RequestUrl.myParkDevelopList;
+  } else if (isIndustrial.value) {
+    return RequestUrl.myParkIndustrialList;
+  } else {
+    return undefined;
+  }
+});
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { pageNum, pageSize, totalCount, datas, handleDetail, queryList } = useListView<
+  MyParkItem,
+  MyParkCondition
+>(currentUrl.value!);
+</script>

src/composable/useJoinRequired.ts

@@ -95,7 +95,7 @@ export function useJoinRequired<T extends JoinRequiredParams>(
               ],
               [
                 {
-                  name: '禁限目录',
+                  name: '其他要求',
                   value: prohibitedDirectory || prohibitDirectory || '',
                   oneline: true,
                 },

src/router/router.ts

@@ -17,8 +17,6 @@ const CarrierList = () => import('@/views/carrier/CarrierList.vue');
 const IndustryCategory = () => import('@/views/industry/IndustryCategory.vue');
 /** 产业政策 */
 const IndustryPolicy = () => import('@/views/industry/IndustryPolicy.vue');
-/** 用户中心 */
-const UserCenter = () => import('@/views/user/UserCenter.vue');
 /** 地图选址 */
 const MapSelection = () => import('@/views/map/MapSelection.vue');
 /** 关于立业云 */
@@ -33,13 +31,17 @@ const DevelopZoneDetail = () => import('@/views/develop/DevelopZoneDetail.vue');
 const LandDetail = () => import('@/views/land/LandDetail.vue');
 /** 载体详情 */
 const CarrierDetail = () => import('@/views/carrier/CarrierDetail.vue');
+/** 用户中心（父路由） */
+const UserCenter = () => import('@/views/user/UserCenter.vue');
+/** 用户中心-我的园区 */
+const MyPark = () => import('@/views/user/MyPark.vue');
+/** 用户中心-修改密码 */
+const ChangePassword = () => import('@/views/user/ChangePassword.vue');
 
 export const enum RouteName {
   home = 'home',
   /** 登录页 */
   login = 'login',
-  /** 用户中心 */
-  userCenter = 'use-center',
   /** 开发区列表 */
   developZoneList = 'develop-zone-list',
   /** 产业园列表 */
@@ -66,6 +68,12 @@ export const enum RouteName {
   landDetail = 'land-detail',
   /** 载体详情 */
   carrierDetail = 'carrier-detail',
+  /** 用户中心 */
+  userCenter = 'user-center',
+  /** 用户中心-我的园区 */
+  myPark = 'user-center/my-park',
+  /** 用户中心-修改密码 */
+  changePassword = 'user-center/change-password',
 }
 
 function gen(name: RouteName) {
@@ -184,6 +192,24 @@ const routes: readonly RouteRecordRaw[] = [
     ...gen(RouteName.carrierDetail),
     component: CarrierDetail,
   },
+  {
+    // 用户中心
+    ...gen(RouteName.userCenter),
+    component: UserCenter,
+    redirect: RouteName.myPark,
+    children: [
+      {
+        // 我的园区
+        ...gen(RouteName.myPark),
+        component: MyPark,
+      },
+      {
+        // 修改密码
+        ...gen(RouteName.changePassword),
+        component: ChangePassword,
+      },
+    ],
+  },
   {
     path: '/:pathMatch(.*)*',
     redirect: '/',

src/types/api.ts

@@ -31,4 +31,12 @@ export enum RequestUrl {
   loginByAccount = '/user/pc/v1.0/login',
   /** 修改密码 */
   forget = '/user/pc/v1.0/forget',
+  /** 我的园区-开发区列表 */
+  myParkDevelopList = '/lyy/api/sysAuth/pageDevelopment',
+  /** 我的园区-开发区详情 */
+  myParkDevelopDetail = '/lyy/api/sysAuth/detailDevelopment',
+  /** 我的园区-产业园列表 */
+  myParkIndustrialList = '/lyy/api/sysAuth/pagePark',
+  /** 我的园区-产业园详情 */
+  myParkIndustrialDetail = '/lyy/api/sysAuth/detailPark',
 }

src/types/api/developZoneDetail.ts

 import type { Enterprise, Investment, ListInfo, Policy } from '../common.ts';
 import type { AuthStatus } from '../enum.ts';
 
+export interface StarInfo {
+  /** 图片 */
+  coverUrl: string;
+  /** 标题 */
+  title: string;
+  /** 描述 */
+  titleIntroduce: string;
+}
+
 /**
  * 开发区详情
  */
@@ -148,18 +157,6 @@ export interface DevelopZoneDetailResp {
   sewageWaterPrice: number;
   /** 污水处理类别 */
   sewageWaterType: string;
-  /** 星级开发区附加信息 */
-  starObjectExtensionInfoMap: {
-    /** */
-    additionalProperties1: {
-      /** */
-      coverUrl: string;
-      /** */
-      title: string;
-      /** */
-      titleIntroduce: string;
-    };
-  };
   /** 蒸汽价格（元/m³） */
   steamPrice: string;
   /** 变电站级别 */
@@ -170,4 +167,15 @@ export interface DevelopZoneDetailResp {
   type: string;
   /** 能评要求（单位：tce/万元） */
   valueAddedEnergy: string;
+  /** 星级开发区相关数量 */
+  developmentCountVo?: {
+    /** 载体数量 */
+    carrierCount: number;
+    /** 土地数量 */
+    landCount: number;
+    /** 产业园数量 */
+    parkCount: number;
+  };
+  /** 星级开发区数据 */
+  starObjectExtensionInfoMap?: Record<string, StarInfo[]>;
 }

src/types/api/myParkList.ts

+/**
+ * 我的园区列表请求条件参数
+ */
+export interface MyParkCondition {
+  /** 录入结束时间 */
+  endCreateTime: string;
+  /** 来源方式 */
+  isSystem: number;
+  /** 名称 */
+  name: string;
+  /** 录入起始时间 */
+  startCreateTime: string;
+  /** 审批状态 */
+  status: number;
+}
+
+/**
+ * 我的园区列表项
+ */
+export interface MyParkItem {
+  /** 录入时间 */
+  createTime: string;
+  /** 主键id */
+  id: number;
+  /** 来源方式code */
+  isSystem: number;
+  /** 来源方式 */
+  isSystemName: string;
+  /** 开发区/产业园名称 */
+  name: string;
+  /** 审核状态code */
+  status: number;
+  /** 审核状态 */
+  statusName: string;
+  /** 更新时间 */
+  updateTime: string;
+}

src/views/develop/DevelopZoneDetail.vue

 <!-- 开发区详情 -->
 <template>
-  <div v-if="detail" class="main-width mx-auto py-5">
-    <div>{{ detail.name }}</div>
-    <div class="space-y-4">
-      <DetailInfoCell>
-        <DetailMain :type="DetailType.develop" :detail="detail">
-          <DetailMainInfo :value="detail.levelName" name="开发区级别"></DetailMainInfo>
-          <DetailMainInfo :value="detail.type" name="开发区类型"></DetailMainInfo>
-          <DetailMainInfo
-            :value="detail.planArea"
-            unit="平方公里"
-            name="开发区面积"
-          ></DetailMainInfo>
-        </DetailMain>
-      </DetailInfoCell>
-      <DetailInfoCell title="开发区简介">
-        <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
-          {{ detail.description }}
-        </div>
-      </DetailInfoCell>
-      <DetailInfoCell title="要素成本">
-        <DetailInfo :infos="elementCost"></DetailInfo>
-      </DetailInfoCell>
-      <DetailInfoCell title="重点企业">
-        <DetailInfoTab v-model="importantEnterpriseIndex" :tabs="importantEnterpriseTabs">
-          <DetailInfo :infos="importantEnterprise[importantEnterpriseIndex]"></DetailInfo>
-        </DetailInfoTab>
-      </DetailInfoCell>
-      <DetailInfoCell title="产业政策">
-        <DetailInfoTab v-model="industryPolicyIndex" :tabs="industryPolicyTabs">
-          <DetailInfo :infos="industryPolicy[industryPolicyIndex]"></DetailInfo>
-        </DetailInfoTab>
-      </DetailInfoCell>
-      <DetailInfoCell v-if="industryFund.length" title="产业基金">
-        <DetailInfo :infos="industryFund"></DetailInfo>
-      </DetailInfoCell>
-      <DetailInfoCell title="入驻要求">
-        <DetailInfo :infos="joinRequired"></DetailInfo>
-      </DetailInfoCell>
-      <DetailInfoCell title="配套设施"></DetailInfoCell>
-      <DetailInfoCell
-        v-if="industrials.length"
-        title-center
-        title="开发区内产业园"
-        to-list-text="查看更多"
-        @to-list="toIndustrialList"
-      >
-        <div class="flex space-x-[23px]">
-          <MiniListItem
-            v-for="item of industrials.slice(0, 4)"
-            :key="item.name"
-            :detail="item"
-            @to-detail="toIndustrialDetail(item)"
-          ></MiniListItem>
-        </div>
-      </DetailInfoCell>
-      <DetailInfoCell
-        v-if="lands.length"
-        title-center
-        title="开发区内土地"
-        to-list-text="查看更多"
-        @to-list="toLandList"
-      >
-        <div class="flex space-x-[23px]">
-          <MiniListItem
-            v-for="item of lands.slice(0, 4)"
-            :key="item.name"
-            :detail="item"
-            @to-detail="toLandDetail(item)"
-          ></MiniListItem>
-        </div>
-      </DetailInfoCell>
+  <div v-if="detail" class="relative">
+    <div class="main-width mx-auto py-5" :class="{ 'pt-[522px]': true }">
+      <div v-if="!isStar">{{ detail.name }}</div>
+      <div class="space-y-4">
+        <template v-if="isStar">
+          <StarDetail :detail="detail"></StarDetail>
+        </template>
+        <template v-else>
+          <DetailInfoCell>
+            <DetailMain :type="DetailType.develop" :detail="detail">
+              <DetailMainInfo :value="detail.levelName" name="开发区级别"></DetailMainInfo>
+              <DetailMainInfo :value="detail.type" name="开发区类型"></DetailMainInfo>
+              <DetailMainInfo
+                :value="detail.planArea"
+                unit="平方公里"
+                name="开发区面积"
+              ></DetailMainInfo>
+            </DetailMain>
+          </DetailInfoCell>
+          <DetailInfoCell title="开发区简介">
+            <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
+              {{ detail.description }}
+            </div>
+          </DetailInfoCell>
+        </template>
+        <DetailInfoCell title="要素成本">
+          <DetailInfo :infos="elementCost"></DetailInfo>
+        </DetailInfoCell>
+        <DetailInfoCell title="重点企业">
+          <DetailInfoTab v-model="importantEnterpriseIndex" :tabs="importantEnterpriseTabs">
+            <DetailInfo :infos="importantEnterprise[importantEnterpriseIndex]"></DetailInfo>
+          </DetailInfoTab>
+        </DetailInfoCell>
+        <DetailInfoCell title="产业政策">
+          <DetailInfoTab v-model="industryPolicyIndex" :tabs="industryPolicyTabs">
+            <DetailInfo :infos="industryPolicy[industryPolicyIndex]"></DetailInfo>
+          </DetailInfoTab>
+        </DetailInfoCell>
+        <DetailInfoCell v-if="industryFund.length" title="产业基金">
+          <DetailInfo :infos="industryFund"></DetailInfo>
+        </DetailInfoCell>
+        <DetailInfoCell title="入驻要求">
+          <DetailInfo :infos="joinRequired"></DetailInfo>
+        </DetailInfoCell>
+        <DetailInfoCell title="配套设施"></DetailInfoCell>
+        <DetailInfoCell
+          v-if="industrials.length"
+          title-center
+          title="开发区内产业园"
+          to-list-text="查看更多"
+          @to-list="toIndustrialList"
+        >
+          <div class="flex space-x-[23px]">
+            <MiniListItem
+              v-for="item of industrials.slice(0, 4)"
+              :key="item.name"
+              :detail="item"
+              @to-detail="toIndustrialDetail(item)"
+            ></MiniListItem>
+          </div>
+        </DetailInfoCell>
+        <DetailInfoCell
+          v-if="lands.length"
+          title-center
+          title="开发区内土地"
+          to-list-text="查看更多"
+          @to-list="toLandList"
+        >
+          <div class="flex space-x-[23px]">
+            <MiniListItem
+              v-for="item of lands.slice(0, 4)"
+              :key="item.name"
+              :detail="item"
+              @to-detail="toLandDetail(item)"
+            ></MiniListItem>
+          </div>
+        </DetailInfoCell>
+      </div>
     </div>
   </div>
 </template>
@@ -93,6 +100,7 @@ import { useJump } from '@/composable/useJump.ts';
 import { RouteName } from '@/router/router.ts';
 import { DetailType } from '@/types/enum.ts';
 import DetailMainInfo from '@/components/detail/DetailMainInfo.vue';
+import StarDetail from '@/components/detail/StarDetail.vue';
 
 const { detail, initDetail } = useDetail<DevelopZoneDetailResp>(RequestUrl.developZoneDetail);
 const { joinRequired } = useJoinRequired<DevelopZoneDetailResp>(computed(() => detail.value));
@@ -276,6 +284,11 @@ const lands = computed(() => {
   }
 });
 
+/** 是否是星级开发区 */
+const isStar = computed(() => {
+  return !!detail.value?.starObjectExtensionInfoMap;
+});
+
 const toIndustrialList = () => {
   open(RouteName.industrialParkList);
 };

src/views/user/ChangePassword.vue

+<!-- 用户中心-修改密码 -->
+<template>
+  <div>修改密码</div>
+</template>

src/views/user/MyPark.vue

+<!-- 我的园区 -->
+<template>
+  <div class="my-park">
+    <ElTabs v-model="currentTab">
+      <ElTabPane label="开发区" :name="ParkItemType.develop">
+        <div class="px-[9px] pb-[10px]">
+          <MyParkList v-if="isDevelop" :type="ParkItemType.develop"></MyParkList>
+        </div>
+      </ElTabPane>
+      <ElTabPane label="产业园" :name="ParkItemType.industrial">
+        <div class="px-[9px] pb-[10px]">
+          <MyParkList v-if="isIndustrial" :type="ParkItemType.industrial"></MyParkList>
+        </div>
+      </ElTabPane>
+    </ElTabs>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import MyParkList from '@/components/user/MyParkList.vue';
+import { ParkItemType } from '@/types/enum.ts';
+
+/** 我的园区-当前tab */
+const currentTab = ref<ParkItemType>(ParkItemType.develop);
+
+const isDevelop = computed(() => {
+  return currentTab.value === ParkItemType.develop;
+});
+
+const isIndustrial = computed(() => {
+  return currentTab.value === ParkItemType.industrial;
+});
+</script>
+
+<style lang="scss">
+.my-park {
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+  .el-tabs__active-bar {
+    background-color: #c0322b;
+  }
+  .el-tabs__item {
+    @apply font-yahei;
+    padding: 0;
+    width: 66px;
+    height: 38px;
+    font-size: 14px;
+    line-height: 22px;
+    color: rgba(0, 0, 0, 0.65);
+    &.is-active {
+      color: #c0322b;
+    }
+    &:hover {
+      color: #c0322b;
+    }
+  }
+}
+</style>

src/views/user/UserCenter.vue

 <!-- 用户中心 -->
 <template>
-  <div>用户中心</div>
+  <div class="min-h-full bg-[#F8F8F8] pb-5">
+    <div class="main-width mx-auto pt-[30px]">
+      <CommonTitle type-name="个人中心" :show-search="false"></CommonTitle>
+      <div class="mt-[30px] flex">
+        <div class="h-[580px] w-[160px] rounded-sm bg-white">
+          <div class="px-5 pt-10">
+            <div
+              class="flex flex-col items-center border-b border-solid border-[#000000]/[.08] pb-[10px]"
+            >
+              <div class="p-[5px]">
+                <CommonImage class="h-[50px] w-[50px]" :src="null" />
+              </div>
+              <div class="mt-[7px] text-xs font-medium leading-[22px] text-[#1A1A1A]">
+                130XXXX8888
+              </div>
+            </div>
+          </div>
+          <div class="mt-5 flex flex-col items-center space-y-[10px]">
+            <div
+              class="flex h-10 w-full cursor-pointer items-center justify-center font-yahei text-sm leading-6 text-[#4D4D4D]"
+              :class="{ 'bg-[#C0322B] text-white': isMyPark }"
+              @click="handleRoute(RouteName.myPark)"
+            >
+              我的园区
+            </div>
+            <div
+              class="flex h-10 w-full cursor-pointer items-center justify-center font-yahei text-sm leading-6 text-[#4D4D4D]"
+              :class="{ 'bg-[#C0322B] text-white': !isMyPark }"
+              @click="handleRoute(RouteName.changePassword)"
+            >
+              修改密码
+            </div>
+          </div>
+        </div>
+        <div class="ml-4 flex-1 bg-white">
+          <RouterView />
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import CommonTitle from '@/components/common/CommonTitle.vue';
+import CommonImage from '@/components/common/CommonImage.vue';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { RouteName } from '@/router/router.ts';
+import { useJump } from '@/composable/useJump.ts';
+
+const route = useRoute();
+const { router } = useJump();
+
+/** 是否为我的园区 */
+const isMyPark = computed(() => {
+  return route.name !== RouteName.changePassword;
+});
+
+const handleRoute = (name: RouteName) => {
+  if (route.name !== name) {
+    router.push({
+      name,
+    });
+  }
+};
+</script>