feat: 星级开发区顶部样式

src/components/detail/DetailMain.vue

@@ -12,7 +12,7 @@
         {{ item.name }}
       </ElBreadcrumbItem>
     </ElBreadcrumb>
-    <div class="py-5">
+    <div v-if="!isStar" class="py-5">
       <div class="flex h-10 items-center">
         <div class="font-yahei text-[32px] font-bold leading-10 text-[#333333]">
           {{ detail.name }}
@@ -147,7 +147,7 @@ const headerType = computed(() => {
     [DetailType.develop]: '开发区',
     [DetailType.industrial]: '产业园',
     [DetailType.land]: '土地',
-    [DetailType.startDevelop]: '',
+    [DetailType.startDevelop]: '开发区',
   };
   return config[props.type];
 });
@@ -170,6 +170,11 @@ const listRoute = computed(() => {
   return config[type];
 });
 
+/** 是否是星级开发区 */
+const isStar = computed(() => {
+  return props.type === DetailType.startDevelop;
+});
+
 const searchToList = (params: any) => {
   open({
     name: listRoute.value,

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 class="h-[558px]">
+    <div class="header-bg absolute inset-x-0 flex h-[558px] w-full items-center justify-center">
+      <div class="header-bg__img main-width h-[455px]">
+        <div class="flex justify-between">
           <div>
-            <img
-              class="ml-[155px] mt-[41px] h-[120px] w-[150px]"
-              src="@/assets/images/home-header-right.png"
-            />
+            <div
+              class="header-bg__content ml-[56px] mt-[75px] font-yahei text-[40px] font-bold leading-[56px] tracking-[2px] text-[#C0322B]"
+            >
+              投资{{ developName }} | 共赢发展未来
+            </div>
+            <div>
+              <img
+                class="ml-[162px] mt-[68px] h-[182px] w-[228px]"
+                src="@/assets/images/home-header-right.png"
+              />
+            </div>
+          </div>
+          <div class="mt-[48px] pb-[47px]">
+            <VideoList
+              :video-urls="detail.videoUrlList"
+              :image-urls="detail.imgUrlList"
+              :description="detail.description"
+              @show-description="handleShowDesc"
+            ></VideoList>
           </div>
-        </div>
-        <div class="mt-[25px] pb-[40px] pt-[33px]">
-          <VideoList :video-urls="detail.videoUrlList" :image-urls="detail.imgUrlList"></VideoList>
         </div>
       </div>
     </div>
   </div>
+
   <!-- icon -->
   <div class="flex items-center justify-between px-10 py-[30px]">
     <StarIconCell
@@ -72,7 +80,7 @@
     width="380px"
   >
     <div class="px-5 py-4 font-yahei text-[#1A1A1A]">
-      {{ currentInfo?.titleIntroduce }}
+      {{ currentInfo?.content }}
     </div>
     <template #footer>
       <div class="flex justify-end">
@@ -108,7 +116,7 @@ const props = withDefaults(
 const { open } = useJump();
 
 /** 当前点击信息 */
-const currentInfo = ref<null | StarInfo>(null);
+const currentInfo = ref<null | { title: string; content: string }>(null);
 /** 显示内容弹窗 */
 const isShowContent = ref(false);
 
@@ -137,7 +145,10 @@ const changeShowContent = (b: boolean) => {
 };
 
 const handlePreviewInfo = (info: StarInfo) => {
-  currentInfo.value = info;
+  currentInfo.value = {
+    title: info.title,
+    content: info.titleIntroduce,
+  };
   changeShowContent(true);
 };
 
@@ -151,6 +162,18 @@ const toList = (name: RouteName) => {
     },
   });
 };
+
+/**
+ * 展示简介
+ */
+const handleShowDesc = () => {
+  const { description, name } = props.detail;
+  currentInfo.value = {
+    title: `${name}概况`,
+    content: description,
+  };
+  changeShowContent(true);
+};
 </script>
 <style lang="scss">
 .star-content-dialog {

src/components/detail/VideoList.vue

 <template>
-  <div class="flex flex-col">
-    <div class="relative h-[286px] w-[388px] text-[0px]">
+  <div class="flex h-[360px] w-[492px] flex-col">
+    <div class="relative text-[0px]">
       <Swiper
         class="h-full w-full"
         :modules="[Autoplay]"
@@ -20,8 +20,9 @@
           <CommonVideo
             v-if="isVideType"
             ref="videoRef"
-            :width="286"
-            :height="388"
+            class="h-[288px]"
+            :width="492"
+            :height="288"
             :src="item.videourl"
             :cover="item.videoCover!"
           ></CommonVideo>
@@ -29,10 +30,10 @@
         </SwiperSlide>
       </Swiper>
       <div
-        class="h-20px absolute bottom-[14px] right-[14px] z-10 flex w-[70px] cursor-pointer items-center rounded-[50px] bg-[#808080] font-yahei text-xs leading-[18px] text-white"
+        class="absolute bottom-[14px] right-[14px] z-10 flex h-[26px] cursor-pointer rounded-[50px] bg-[#808080] font-yahei text-xs leading-[18px] text-white"
       >
         <div
-          class="flex flex-1 items-center justify-center rounded-[50px]"
+          class="flex w-[45px] items-center justify-center rounded-[50px]"
           :class="{ 'bg-white text-[#C0322B]': isVideType }"
           @click="changeListType(ListType.video)"
         >
@@ -40,7 +41,7 @@
         </div>
         <div
           v-if="imageUrls.length > 0"
-          class="flex flex-1 items-center justify-center rounded-[50px]"
+          class="flex w-[45px] items-center justify-center rounded-[50px]"
           :class="{ 'bg-white text-[#C0322B]': isPictureType }"
           @click="changeListType(ListType.picture)"
         >
@@ -49,7 +50,21 @@
       </div>
     </div>
     <div>
-      <div class="bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]">舒城县</div>
+      <div class="flex bg-white p-[10px] font-yahei text-xs leading-5 text-[#4D4D4D]">
+        <div ref="descriptionRef" class="ell2">
+          {{ description }}
+        </div>
+        <div
+          v-if="isShowMore"
+          class="flex flex-none cursor-pointer items-center self-end"
+          @click="showDesc"
+        >
+          <div class="text-xs font-semibold leading-5 text-[#C0322B]">展开</div>
+          <div class="ml-1 h-[5px] w-2">
+            <img src="@/assets/images/icon-arrow_down.png" />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -60,7 +75,7 @@ import 'swiper/css/autoplay';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import type { Swiper as SwiperType } from 'swiper/types';
 import { Autoplay } from 'swiper/modules';
-import { computed, ref, nextTick } from 'vue';
+import { computed, ref, nextTick, onMounted } from 'vue';
 import CommonVideo from '../common/CommonVideo.vue';
 import CommonImage from '../common/CommonImage.vue';
 
@@ -79,6 +94,7 @@ const props = withDefaults(
       videourl: string;
     }[];
     imageUrls: string[];
+    description: string;
   }>(),
   {
     videoUrls: () => [],
@@ -86,9 +102,15 @@ const props = withDefaults(
   },
 );
 
+const emit = defineEmits(['show-description']);
+
 const mainSwiper = ref<null | SwiperType>(null);
 const videoRef = ref<any>(null);
 const currentType = ref<ListType>(ListType.video);
+/** 是否展示更多 */
+const isShowMore = ref(false);
+/** 简介元素 */
+const descriptionRef = ref<HTMLElement | null>(null);
 
 const isVideType = computed(() => {
   return currentType.value === ListType.video;
@@ -115,6 +137,18 @@ const isPictureType = computed(() => {
   return currentType.value === ListType.picture;
 });
 
+const changeShowMore = (b: boolean) => {
+  isShowMore.value = b;
+};
+
+onMounted(() => {
+  const el = descriptionRef.value;
+  if (el) {
+    const isHide = el.clientHeight !== el.scrollHeight;
+    changeShowMore(isHide);
+  }
+});
+
 const setMainSwiper = (swiper: SwiperType) => {
   mainSwiper.value = swiper;
 };
@@ -143,4 +177,8 @@ const changeListType = (type: ListType) => {
     });
   }
 };
+
+const showDesc = () => {
+  emit('show-description');
+};
 </script>

src/views/develop/DevelopZoneDetail.vue

 <!-- 开发区详情 -->
 <template>
   <div v-if="detail" class="relative">
-    <div class="main-width mx-auto py-5" :class="{ 'pt-[522px]': isStar }">
+    <div class="main-width mx-auto py-5">
       <div class="space-y-4">
+        <DetailInfoCell>
+          <DetailMain
+            :type="isStar ? DetailType.startDevelop : 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>
         <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 v-if="detail.description" title="开发区简介">
-            <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
-              {{ detail.description }}
-            </div>
-          </DetailInfoCell>
-        </template>
+        <DetailInfoCell v-if="!isStar && detail.description" title="开发区简介">
+          <div class="font-yahei text-xs leading-5 text-[#1A1A1A]">
+            {{ detail.description }}
+          </div>
+        </DetailInfoCell>
         <DetailInfoCell :infos="industryBase" title="产业基础">
           <DetailInfo :infos="industryBase"></DetailInfo>
         </DetailInfoCell>
@@ -158,7 +159,7 @@ const [industryPolicyIndex, industryPolicyTabs, industryPolicy] = useInfoTab<Pol
       [
         {
           name: '政策内容',
-          value: content + content + content + content,
+          value: content,
           customClass: 'ell3',
           oneline: true,
         },