优化讲解展厅列表一屏展示

src/components/explain/ExplainHallSelect.vue

@@ -10,6 +10,7 @@
 
     <scroll-view
       class="explain-scroll"
+      :class="{ 'hall-stage': stage === 'hall' }"
       scroll-y
       :show-scrollbar="false"
     >
@@ -24,11 +25,11 @@
       </view>
 
       <template v-else>
-        <view v-if="stage === 'hall' && filteredHalls.length" class="hall-list">
+        <view v-if="stage === 'hall' && filteredHalls.length" class="hall-list hall-overview-list">
           <view
             v-for="(hall, index) in filteredHalls"
             :key="hall.id"
-            class="hall-card"
+            class="hall-card hall-overview-card"
             @tap="handleHallClick(hall.id)"
           >
             <view
@@ -62,7 +63,7 @@
                 <view class="floor-badge">
                   <text class="floor-badge-text">{{ hall.floorLabel || '楼层待补充' }}</text>
                 </view>
-                <text class="hall-meta-text">{{ hallMetaText(hall) }}</text>
+                <text class="hall-meta-text hall-overview-meta">{{ hallMetaText(hall) }}</text>
               </view>
             </view>
 
@@ -338,10 +339,15 @@ const handleBack = () => {
 
 .explain-scroll {
   height: 100%;
-  padding: 76px 20px calc(112px + env(safe-area-inset-bottom));
+  padding: 60px 12px calc(82px + env(safe-area-inset-bottom));
   box-sizing: border-box;
 }
 
+.explain-scroll.hall-stage {
+  padding: 58px 12px calc(74px + env(safe-area-inset-bottom));
+  overflow: hidden;
+}
+
 .state-title,
 .state-desc,
 .hall-name,
@@ -426,15 +432,20 @@ const handleBack = () => {
 .hall-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
+}
+
+.hall-overview-list {
+  height: 100%;
+  gap: 5px;
 }
 
 .hall-card {
-  min-height: 112px;
-  padding: 14px 13px 14px 16px;
+  min-height: 96px;
+  padding: 10px 11px 10px 12px;
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 10px;
   box-sizing: border-box;
   background: #ffffff;
   border: 1px solid #e4e6df;
@@ -442,14 +453,21 @@ const handleBack = () => {
   box-shadow: 0 8px 18px rgba(36, 49, 42, 0.05);
 }
 
+.hall-overview-card {
+  min-height: 0;
+  flex: 1 1 0;
+  gap: 7px;
+  padding: 4px 10px;
+}
+
 .hall-card:active {
   background: #f7f8f3;
 }
 
 .hall-thumb {
   flex-shrink: 0;
-  width: 68px;
-  height: 68px;
+  width: 56px;
+  height: 56px;
   position: relative;
   overflow: hidden;
   border-radius: 8px;
@@ -461,6 +479,11 @@ const handleBack = () => {
   object-fit: contain;
 }
 
+.hall-overview-card .hall-thumb {
+  width: 48px;
+  height: 48px;
+}
+
 .hall-thumb-shell.is-image-loaded {
   background: #eef0e4;
 }
@@ -503,16 +526,16 @@ const handleBack = () => {
 }
 
 .hall-thumb-text {
-  font-size: 24px;
-  line-height: 32px;
+  font-size: 20px;
+  line-height: 28px;
   font-weight: 800;
   color: #83927a;
 }
 
 .unit-thumb {
   flex-shrink: 0;
-  width: 96px;
-  height: 68px;
+  width: 84px;
+  height: 58px;
   border-radius: 8px;
   background: #eef0e4;
   border: 1px solid rgba(36, 49, 42, 0.06);
@@ -525,6 +548,10 @@ const handleBack = () => {
   min-width: 0;
 }
 
+.hall-overview-card .hall-main {
+  flex: 1;
+}
+
 .stop-desc {
   display: block;
   margin-top: 5px;
@@ -538,8 +565,8 @@ const handleBack = () => {
 
 .hall-name {
   min-width: 0;
-  font-size: 17px;
-  line-height: 24px;
+  font-size: 16px;
+  line-height: 22px;
   font-weight: 800;
   color: #151713;
   overflow: hidden;
@@ -547,6 +574,15 @@ const handleBack = () => {
   white-space: nowrap;
 }
 
+.hall-overview-card .hall-name {
+  font-size: 15px;
+  line-height: 20px;
+}
+
+.hall-overview-card .hall-meta-row {
+  margin-top: 3px;
+}
+
 .stop-title-row {
   display: flex;
   align-items: center;
@@ -580,18 +616,18 @@ const handleBack = () => {
 }
 
 .hall-meta-row {
-  margin-top: 10px;
+  margin-top: 7px;
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   min-width: 0;
 }
 
 .floor-badge {
   flex-shrink: 0;
   min-width: 28px;
-  height: 24px;
-  padding: 0 6px;
+  height: 22px;
+  padding: 0 5px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -602,29 +638,53 @@ const handleBack = () => {
 }
 
 .floor-badge-text {
-  font-size: 13px;
-  line-height: 17px;
+  font-size: 12px;
+  line-height: 16px;
   font-weight: 600;
   color: #aaa900;
 }
 
 .hall-meta-text {
   min-width: 0;
-  font-size: 15px;
-  line-height: 21px;
+  font-size: 13px;
+  line-height: 18px;
   color: #555c51;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.hall-overview-card .floor-badge {
+  height: 19px;
+  border-radius: 5px;
+}
+
+.hall-overview-card .floor-badge-text {
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.hall-overview-meta {
+  min-width: 0;
+  font-size: 11px;
+  line-height: 15px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .hall-arrow {
   flex-shrink: 0;
-  font-size: 30px;
-  line-height: 30px;
+  font-size: 24px;
+  line-height: 24px;
   color: #151713;
 }
 
+.hall-overview-card .hall-arrow {
+  font-size: 20px;
+  line-height: 20px;
+}
+
 .state-block {
   margin: 34px 0;
   padding: 22px 16px;