feat: 星级开发区，信息展示样式

src/components/detail/StarDetail.vue

@@ -55,16 +55,20 @@
     ></StarIconCell>
   </div>
   <DetailInfoCell
-    v-for="info of infos"
+    v-for="(info, index) of infos"
     :key="info.name"
     title-center
     :title="info.name"
     class="py-5"
   >
-    <div class="flex items-center space-x-[23px]">
+    <div
+      class="flex items-center space-x-[23px]"
+      :class="{ 'space-x-9 overflow-x-auto': index === 1 }"
+    >
       <StarInfoCell
         v-for="item of info.value"
         :key="item.title"
+        :class="{ 'star-info-cell_small': index === 1 }"
         :title="item.title"
         :img="item.coverUrl"
         :content="item.titleIntroduce"
@@ -194,4 +198,30 @@ const handleShowDesc = () => {
     padding: 0;
   }
 }
+.star-info-cell_small {
+  flex: none;
+  width: 272px;
+  height: 262px;
+  padding: 20px 16px;
+  overflow: hidden;
+  .star-info-img {
+    width: 100%;
+    height: 181.5px;
+  }
+  .star-info-content {
+    position: static;
+    width: 208px;
+    height: 30px;
+    margin-top: 12px;
+    padding-top: 0;
+  }
+  &:hover {
+    .star-info-img {
+      transform: scale(1.2);
+    }
+    .star-info-content {
+      height: 30px;
+    }
+  }
+}
 </style>

src/components/detail/StarInfoCell.vue

 <!-- 星级开发区信息 -->
 <template>
   <div
-    class="star-info-cell relative star-info-shadow h-[357px] w-[370px] cursor-pointer rounded-sm px-[21px] py-[27px]"
+    class="star-info-cell star-info-shadow relative h-[357px] w-[370px] cursor-pointer rounded-sm px-[21px] py-[27px]"
   >
     <div>
       <CommonImage
@@ -9,8 +9,8 @@
         :src="img || null"
       />
     </div>
-    <div class="absolute star-info-content">
-      <div class="font-yahei text-lg leading-[41px] font-bold text-[#1A1A1A]">
+    <div class="star-info-content absolute">
+      <div class="font-yahei text-lg font-bold leading-[41px] text-[#1A1A1A]">
         {{ title }}
       </div>
       <div class="overflow-hidden break-all text-xs leading-5">
@@ -43,17 +43,12 @@ withDefaults(
   overflow: hidden;
   padding-top: 17px;
   background-color: #fff;
-  transition: height 0.3s;
+  transition: all 0.3s;
   width: 327px;
 }
 .star-info-cell:hover {
-  // .star-info-img {
-  //   height: 0;
-  //   transition-delay: 0.2s;
-  // }
   .star-info-content {
     height: 320px;
-    // transition-delay: 0.3s;
   }
 }
 </style>