flx:样式调整

lesingle-creation-frontend/src/views/public/Activities.vue

@@ -7,14 +7,8 @@
         <p>发现精彩活动，展现创作才华</p>
       </div>
       <div class="hero-search">
-        <a-input-search
-          v-model:value="keyword"
-          placeholder="搜索活动名称..."
-          size="large"
-          enter-button
-          @search="handleSearch"
-          class="search-input"
-        />
+        <a-input-search v-model:value="keyword" placeholder="搜索活动名称..." size="large" enter-button @search="handleSearch"
+          class="search-input" />
       </div>
     </div>
 
@@ -28,18 +22,9 @@
     </div>
 
     <div v-else class="activities-grid">
-      <div
-        v-for="item in activities"
-        :key="item.id"
-        class="activity-card"
-        @click="goDetail(item.id)"
-      >
+      <div v-for="item in activities" :key="item.id" class="activity-card" @click="goDetail(item.id)">
         <div class="card-cover">
-          <img
-            v-if="item.coverUrl"
-            :src="item.coverUrl"
-            :alt="item.contestName"
-          />
+          <img v-if="item.coverUrl" :src="item.coverUrl" :alt="item.contestName" />
           <div v-else class="cover-placeholder">
             <span>{{ item.contestName.charAt(0) }}</span>
           </div>
@@ -69,12 +54,7 @@
 
     <!-- 分页 -->
     <div v-if="total > pageSize" class="pagination-wrap">
-      <a-pagination
-        v-model:current="page"
-        :total="total"
-        :page-size="pageSize"
-        @change="fetchActivities"
-      />
+      <a-pagination v-model:current="page" :total="total" :page-size="pageSize" @change="fetchActivities" />
     </div>
   </div>
 </template>
@@ -218,7 +198,7 @@ $primary: #6366f1;
   }
 
   .card-cover {
-    height: 160px;
+    height: 200px;
     position: relative;
     overflow: hidden;
 

lesingle-creation-frontend/src/views/public/ActivityDetail.vue

@@ -693,15 +693,18 @@ $primary: #6366f1;
 
 .detail-hero {
   position: relative;
-  height: 220px;
+  min-height: 150px;
+  display: flex;
+  // height: 220px;
   border-radius: 20px;
   overflow: hidden;
   margin-bottom: 16px;
 
   .hero-cover {
     width: 100%;
-    height: 100%;
-    object-fit: cover;
+    // height: 100%;
+    object-fit: contain;
+    margin: auto;
   }
 
   .hero-placeholder {
@@ -1258,7 +1261,7 @@ $primary: #6366f1;
 
 @media (max-width: 640px) {
   .detail-hero {
-    height: 180px;
+    // height: 180px;
     border-radius: 16px;
   }