diff --git a/frontend/App.vue b/frontend/App.vue
index a920dfa..5877788 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -58,11 +58,21 @@ export default {
 		font-display: swap;
 	}
 
+	/* 引入 ZaoZiGongFangJianHei-1 字体 */
+	@font-face {
+		font-family: 'JDLTYuanTiJian';
+		src: url('/static/fonts/JDLTYuanTiJian.ttf') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+		font-display: swap;
+	}
+
 	/* 圆体 JDLTYuanTiJian.ttf 在部分 Android WebView 上报 OTS/cmap 解析失败，暂不 @font-face 加载，避免控制台告警与渲染异常 */
 
 	/* 全局字体设置 */
 	body {
 		font-family:
+			'JDLTYuanTiJian',
 			-apple-system,
 			BlinkMacSystemFont,
 			'PingFang SC',
diff --git a/frontend/pages/components/BannerTop3.vue b/frontend/pages/components/BannerTop3.vue
index 793cff4..21afef3 100644
--- a/frontend/pages/components/BannerTop3.vue
+++ b/frontend/pages/components/BannerTop3.vue
@@ -110,7 +110,7 @@ defineExpose({ reload: loadTop3 });
 	position: absolute;
 	inset: 0;
 	width: 100%;
-	height: 100%;
+	height: 328rpx;
 }
 
 /* 卡片层 */
@@ -131,20 +131,20 @@ defineExpose({ reload: loadTop3 });
 }
 
 .card-pos-0 {
-	left: 50rpx;
-	top: 40rpx;
-	transform: rotate(-6deg);
-	z-index: 3;
-}
-.card-pos-1 {
 	left: 140rpx;
 	top: -8rpx;
 	transform: rotate(6deg);
 	z-index: 4;
 }
+.card-pos-1 {
+	left: 50rpx;
+	top: 40rpx;
+	transform: rotate(-6deg);
+	z-index: 3;
+}
 .card-pos-2 {
 	left: 240rpx;
-	top: 106rpx;
+	top: 72rpx;
 	transform: rotate(16deg);
 	z-index: 5;
 }
diff --git a/frontend/pages/square/components/BannerCarousel.vue b/frontend/pages/square/components/BannerCarousel.vue
index 23ac666..f412f20 100644
--- a/frontend/pages/square/components/BannerCarousel.vue
+++ b/frontend/pages/square/components/BannerCarousel.vue
@@ -54,7 +54,7 @@ const onTop3DataLoaded = (items) => {
   position: relative;
   width: 100%;
   z-index: 100;
-  padding: 0 16rpx;
+  /* padding: 0 16rpx; */
   box-sizing: border-box;
   /* top:16rpx; */
 }
@@ -69,7 +69,7 @@ const onTop3DataLoaded = (items) => {
 
 .banner-activity-img {
   width: 100%;
-  height: 328rpx;
+  height: 296rpx;
   display: block;
   border-radius:24rpx;
   position: relative;
diff --git a/frontend/pages/square/components/HotCategoryBlock.vue b/frontend/pages/square/components/HotCategoryBlock.vue
index 89952f1..1f04001 100644
--- a/frontend/pages/square/components/HotCategoryBlock.vue
+++ b/frontend/pages/square/components/HotCategoryBlock.vue
@@ -4,77 +4,54 @@
     <view class="block-title">{{ title }}</view>
 
     <!-- 骨架屏 -->
-    <view v-if="loading" class="grid-skeleton">
-      <view v-for="i in 8" :key="i" class="skeleton-card">
-        <view class="skeleton-image"></view>
+    <view v-if="loading" class="ranking-skeleton">
+      <view v-for="i in 3" :key="i" class="skeleton-item">
+        <view class="skeleton-rank"></view>
+        <view class="skeleton-cover"></view>
         <view class="skeleton-info">
-          <view class="skeleton-avatar"></view>
           <view class="skeleton-name"></view>
         </view>
       </view>
     </view>
 
-    <!-- 内容网格 -->
-    <view v-else class="items-grid">
+    <!-- 榜单列表 -->
+    <view v-else class="ranking-list">
       <view
         v-for="(item, index) in items"
         :key="item.id || index"
-        class="grid-card"
-        @click="handleCardClick(item)"
+        class="ranking-item"
       >
-        <image class="card-image" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
-        <!-- 底部渐变遮罩 -->
-        <view class="card-gradient"></view>
-        <!-- 用户信息 -->
-        <view class="card-info">
-          <view class="user-info">
-            <image class="user-avatar" :src="item.owner_avatar || item.creator_avatar || ''" mode="aspectFill"></image>
-            <text class="user-name">{{ item.owner_nickname || item.creator_name || item.name || '' }}</text>
-          </view>
-          <view class="like-info">
-            <image class="like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
-            <text class="like-count">{{ formatCount(item.likes || item.like_count || 0) }}</text>
+        <view class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</view>
+        <image class="rank-cover" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
+        <view class="rank-info">
+          <text class="rank-name">{{ item.name || '' }}</text>
+          <view class="rank-creator">
+            <image class="creator-avatar" :src="item.owner_avatar || ''" mode="aspectFill"></image>
+            <text class="creator-name">{{ item.owner_nickname || '' }}</text>
           </view>
         </view>
-      </view>
-    </view>
-
-    <!-- 操作按钮 -->
-    <view class="block-actions">
-      <view class="action-left">
-        <view class="refresh-btn" @click="handleRefresh">
-          <image class="refresh-icon" :class="{ spinning: refreshing }" src="/static/icon/refresh-icon.png" mode="aspectFit"></image>
-          <text class="action-text">刷新</text>
+        <view class="rank-likes">
+          <image class="rank-like-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
+          <text class="rank-like-count">{{ formatCount(item.likes || 0) }}</text>
         </view>
       </view>
-      <view class="action-right">
-        <text class="action-text">查看更多</text>
-        <text class="arrow">›</text>
-      </view>
     </view>
   </view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
-import { getHotInspirationFlowApi } from '@/utils/api.js'
+import { ref, onMounted } from 'vue'
+import { getHotRankingApi } from '@/utils/api.js'
 
 const props = defineProps({
-  categoryType: {
-    type: String,
-    default: 'hot_recommend'
-  },
   title: {
     type: String,
-    default: '热门推荐'
+    default: '在线榜单'
   }
 })
 
-const emit = defineEmits(['cardClick'])
-
 const items = ref([])
 const loading = ref(false)
-const refreshing = ref(false)
 
 // 格式化数量
 const formatCount = (count) => {
@@ -84,42 +61,23 @@ const formatCount = (count) => {
   return count.toString()
 }
 
-// 点击卡片
-const handleCardClick = (item) => {
-  emit('cardClick', item)
-}
-
-// 刷新数据
-const handleRefresh = async () => {
-  if (refreshing.value) return
-
-  refreshing.value = true
+// 加载数据
+const loadData = async () => {
+  loading.value = true
   try {
-    const res = await getHotInspirationFlowApi(props.categoryType)
+    const res = await getHotRankingApi('displaying', null, 1, 12)
     if (res.code === 200 && res.data?.items) {
       items.value = res.data.items
     }
   } catch (e) {
-    console.error('[HotCategoryBlock] 刷新数据失败', e?.message ?? e)
+    console.error('[HotCategoryBlock] 加载数据失败', e?.message ?? e)
   } finally {
-    refreshing.value = false
+    loading.value = false
   }
 }
 
-// 设置数据
-const setItems = (newItems) => {
-  items.value = newItems || []
-}
-
-// 设置加载状态
-const setLoading = (status) => {
-  loading.value = status
-}
-
-defineExpose({
-  setItems,
-  setLoading,
-  handleRefresh
+onMounted(() => {
+  loadData()
 })
 </script>
 
@@ -140,189 +98,144 @@ defineExpose({
 }
 
 /* 骨架屏 */
-.grid-skeleton {
+.ranking-skeleton {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  flex-direction: column;
 }
 
-.skeleton-card {
-  width: calc(25% - 12rpx);
+.skeleton-item {
+  display: flex;
+  align-items: center;
   margin-bottom: 16rpx;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 16rpx;
-  overflow: hidden;
 }
 
-.skeleton-image {
-  width: 100%;
-  height: 320rpx;
+.skeleton-rank {
+  width: 48rpx;
+  height: 48rpx;
+  background: #3a3a4a;
+  border-radius: 8rpx;
+  margin-right: 16rpx;
+}
+
+.skeleton-cover {
+  width: 120rpx;
+  height: 120rpx;
   background: linear-gradient(90deg, #3a3a4a 25%, #4a4a5a 50%, #3a3a4a 75%);
   background-size: 200% 100%;
+  border-radius: 12rpx;
+  margin-right: 16rpx;
   animation: shimmer 1.5s infinite;
 }
 
 .skeleton-info {
-  display: flex;
-  align-items: center;
-  padding: 16rpx;
-}
-
-.skeleton-avatar {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
-  background: #3a3a4a;
-  margin-right: 8rpx;
+  flex: 1;
 }
 
 .skeleton-name {
-  width: 100rpx;
-  height: 24rpx;
+  width: 200rpx;
+  height: 32rpx;
   background: #3a3a4a;
   border-radius: 8rpx;
 }
 
 @keyframes shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
 }
 
-/* 内容网格 */
-.items-grid {
+/* 榜单列表 */
+.ranking-list {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
+  flex-direction: column;
 }
 
-.grid-card {
-  width: calc(25% - 12rpx);
+.ranking-item {
+  display: flex;
+  align-items: center;
   margin-bottom: 16rpx;
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 16rpx;
-  overflow: hidden;
-  position: relative;
-}
-
-.card-image {
-  width: 100%;
-  height: 320rpx;
-}
-
-.card-gradient {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 120rpx;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
-}
-
-.card-info {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12rpx;
   padding: 16rpx;
-  box-sizing: border-box;
 }
 
-.user-info {
+.rank-number {
+  width: 48rpx;
+  height: 48rpx;
   display: flex;
   align-items: center;
-}
-
-.user-avatar {
-  width: 40rpx;
-  height: 40rpx;
-  border-radius: 50%;
-  margin-right: 8rpx;
-}
-
-.user-name {
-  font-size: 22rpx;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: 600;
   color: #fff;
-  max-width: 120rpx;
+  border-radius: 8rpx;
+  margin-right: 16rpx;
+}
+
+.rank-number.rank-1 {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
+}
+
+.rank-number.rank-2 {
+  background: linear-gradient(135deg, #a0a0a0 0%, #c0c0c0 100%);
+}
+
+.rank-number.rank-3 {
+  background: linear-gradient(135deg, #cd7f32 0%, #e6a86e 100%);
+}
+
+.rank-cover {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 12rpx;
+  margin-right: 16rpx;
+}
+
+.rank-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.rank-name {
+  font-size: 28rpx;
+  color: #fff;
+  margin-bottom: 8rpx;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.like-info {
+.rank-creator {
   display: flex;
   align-items: center;
 }
 
-.like-icon {
+.creator-avatar {
+  width: 32rpx;
+  height: 32rpx;
+  border-radius: 50%;
+  margin-right: 8rpx;
+}
+
+.creator-name {
+  font-size: 24rpx;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.rank-likes {
+  display: flex;
+  align-items: center;
+}
+
+.rank-like-icon {
   width: 24rpx;
   height: 24rpx;
   margin-right: 4rpx;
 }
 
-.like-count {
-  font-size: 22rpx;
-  color: #fff;
-}
-
-/* 操作按钮 */
-.block-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 16rpx;
-  padding-top: 16rpx;
-  border-top: 1rpx solid rgba(255, 255, 255, 0.1);
-}
-
-.action-left {
-  display: flex;
-  align-items: center;
-}
-
-.action-right {
-  display: flex;
-  align-items: center;
-}
-
-.refresh-btn {
-  display: flex;
-  align-items: center;
-}
-
-.refresh-icon {
-  width: 28rpx;
-  height: 28rpx;
-  margin-right: 8rpx;
-}
-
-.refresh-icon.spinning {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.action-text {
+.rank-like-count {
   font-size: 24rpx;
   color: rgba(255, 255, 255, 0.8);
 }
-
-.arrow {
-  font-size: 28rpx;
-  color: rgba(255, 255, 255, 0.8);
-  margin-left: 4rpx;
-}
 </style>
diff --git a/frontend/pages/square/hot-category-more.vue b/frontend/pages/square/hot-category-more.vue
index 51c35dc..f103258 100644
--- a/frontend/pages/square/hot-category-more.vue
+++ b/frontend/pages/square/hot-category-more.vue
@@ -92,7 +92,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
-import { getHotInspirationFlowMoreApi } from '@/utils/api.js'
 
 // ========== 路由参数 ==========
 const type = ref('')
@@ -148,12 +147,7 @@ const loadData = async (reset = false) => {
   loading.value = true
 
   try {
-    // 星卡使用子类型
-    const apiType = isStarCard.value && activeSubTab.value !== 'all'
-      ? activeSubTab.value
-      : type.value
-
-    const res = await getHotInspirationFlowMoreApi(apiType, cursor.value, 20)
+    const res = await Promise.resolve({ code: 200, data: { items: [] } })
 
     if (res.code === 200 && res.data?.items && res.data.items.length > 0) {
       const newItems = res.data.items.map((item) => {
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index b825c1e..0a77ed5 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -1,100 +1,63 @@
 <template>
   <view class="square-container">
     <!-- 背景图片 -->
-    <image
-      class="bg-wrapper"
-      src="/static/square/squearbj1.png"
-      mode="aspectFill"
-    ></image>
+    <image class="bg-wrapper" src="/static/square/squearbj1.png" mode="aspectFill"></image>
 
     <!-- Header组件 -->
-    <Header
-      :showGuideIcon="true"
-      :showTaskIcon="true"
-      :showStarActivityIcon="true"
-      backIconColor="#e6e6e6"
-    />
+    <Header :showGuideIcon="true" :showTaskIcon="true" :showStarActivityIcon="true" backIconColor="#e6e6e6" />
 
     <!-- 蒙层 - 导航栏展开时显示 -->
     <view v-if="navExpanded" class="nav-mask" @click="navExpanded = false"></view>
 
     <!-- 排行榜弹窗 -->
-    <RankingModal
-      :visible="showRankingModal"
-      :parent-active="true"
-      :star-id="currentStarId"
-      @update:visible="handleRankingModalClose"
-      @visit="handleRankingVisit"
-    />
+    <RankingModal :visible="showRankingModal" :parent-active="true" :star-id="currentStarId"
+      @update:visible="handleRankingModalClose" @visit="handleRankingVisit" />
 
     <!-- 底部导航栏 -->
-    <BottomNav
-      :activeTab="4"
-      :isExpanded="navExpanded"
-      @update:activeTab="handleTabChange"
-      @update:isExpanded="navExpanded = $event"
-    />
+    <BottomNav :activeTab="4" :isExpanded="navExpanded" @update:activeTab="handleTabChange"
+      @update:isExpanded="navExpanded = $event" />
 
     <!-- 全局引导遮罩 -->
     <GuideOverlay />
 
     <!-- 内容区域 -->
-    <scroll-view
-      class="content-wrapper"
-      scroll-y
-      :show-scrollbar="false"
-      :bounce="false"
-      @scrolltolower="handleScrollToLower"
-    >
+    <scroll-view class="content-wrapper" scroll-y :show-scrollbar="false" :bounce="false"
+      @scrolltolower="handleScrollToLower">
       <!-- 区域一：顶部运营轮播图 -->
       <view class="banner-section">
-        <BannerCarousel
-          :bannerActivities="bannerActivities"
-          @activityClick="handleActivityClick"
-          @top3Click="showRankingModal = true"
-        />
+        <BannerCarousel :bannerActivities="bannerActivities" @activityClick="handleActivityClick"
+          @top3Click="showRankingModal = true" />
       </view>
 
-      <!-- 区域二：分类标签区 -->
-      <!-- <view id="category-section" class="category-section" :class="{ fixed: isFixed }">
+      <!-- 在线榜单区块 -->
+      <view class="hot-category-wrapper">
+        <HotCategoryBlock :title="'在线榜单'" />
+      </view>
+
+      <!-- 区域二：主Tab标签区（星卡/吧唧/海报） -->
+      <view class="main-tab-section">
+        <view v-for="(tab, index) in mainTabs" :key="index" class="tab-item" @click="handleMainTabClick(tab)">
+          <image class="tab-icon" :src="tab.icon" mode="aspectFit"
+            :style="{ width: tab.width + 'rpx', height: tab.height + 'rpx', borderRadius: tab.type === 'badge' ? '50%' : '0', transform: 'rotate(' + tab.rotate + 'deg)' }">
+          </image>
+          <text class="tab-name">{{ tab.name }}</text>
+        </view>
+      </view>
+
+      <!-- 区域三：分类标签区 -->
+      <view id="category-section" class="category-section" :class="{ fixed: isFixed }">
         <scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
-          <view
-            v-for="(category, index) in categories"
-            :key="index"
-            class="category-item"
-            :class="{ active: activeContentTab === category.value }"
-            @click="handleCategoryChange(category.value)"
-          >
+          <view v-for="(category, index) in categories" :key="index" class="category-item"
+            :class="{ active: activeContentTab === category.value }" @click="handleCategoryChange(category.value)">
             <text class="category-text">{{ category.label }}</text>
           </view>
         </scroll-view>
-      </view> -->
-
-      <!-- 热门分类区块 -->
-      <view
-        v-for="category in hotCategories"
-        :key="category.type"
-        class="hot-category-wrapper"
-      >
-        <HotCategoryBlock
-          :ref="el => { if(el) hotCategoryRefs[category.type] = el }"
-          :categoryType="category.type"
-          :title="category.title"
-          @cardClick="handleHotCardClick"
-        />
       </view>
 
-      <!-- 区域三：创作网格列表 -->
-      <CreationGrid
-        :screenWidth="screenWidth"
-        :screenHeight="screenHeight"
-        :bannerBottom="bannerBottomPx"
-        :useMockData="USE_MOCK_DATA"
-        :category="activeContentTab"
-        :isActive="isActive"
-        @cardClick="handleCardClick"
-        ref="creationGridRef"
-      />
+      <!-- 区域四：创作网格列表 -->
+      <CreationGrid :screenWidth="screenWidth" :screenHeight="screenHeight" :bannerBottom="bannerBottomPx"
+        :useMockData="USE_MOCK_DATA" :category="activeContentTab" :isActive="isActive" @cardClick="handleCardClick"
+        ref="creationGridRef" />
     </scroll-view>
   </view>
 </template>
@@ -110,7 +73,7 @@ import RankingModal from '../components/RankingModal.vue'
 import BannerCarousel from './components/BannerCarousel.vue'
 import HotCategoryBlock from './components/HotCategoryBlock.vue'
 import CreationGrid from './components/CreationGrid.vue'
-import { getHotInspirationFlowBatchApi } from '@/utils/api.js'
+import { getHotRankingApi } from '@/utils/api.js'
 // import { clearSubStepProgress, shouldShowGuideStartModal } from '@/utils/guideConfig.js'
 import { useBanner } from './composables/useBanner.js'
 import { doubleTapLike } from '@/utils/likeHelper.js'
@@ -128,11 +91,37 @@ const showRankingModal = ref(false)
 const isActive = ref(true)
 const isFixed = ref(false)
 const creationGridRef = ref(null)
-const hotCategories = ref([])
-const hotCategoryRefs = ref({})
 const cardTapTimers = {}
 const likingMap = ref({})
 
+// 主Tab配置
+const mainTabs = ref([
+  {
+    name: '星卡',
+    type: 'star_card',
+    icon: '/static/square/xingka.png',
+    width: 96,
+    height: 96,
+    rotate: -15
+  },
+  {
+    name: '吧唧',
+    type: 'badge',
+    icon: '/static/square/baji.png',
+    width: 100,
+    height: 100,
+    rotate: 0
+  },
+  {
+    name: '海报',
+    type: 'poster',
+    icon: '/static/square/haibao.png',
+    width: 100,
+    height: 108,
+    rotate: -15
+  }
+]);
+
 // ========== 分类配置 ==========
 const categories = ref([
   { label: '热门作品', value: 'hot' },
@@ -194,23 +183,6 @@ const handleCardClick = (card) => {
   }
 }
 
-const loadHotCategories = async () => {
-  try {
-    const res = await getHotInspirationFlowBatchApi()
-    if (res.code === 200 && res.data?.categories) {
-      hotCategories.value = res.data.categories
-    }
-  } catch (e) {
-    console.error('[square] 加载热门分类失败', e)
-  }
-}
-
-const handleHotCardClick = (item) => {
-  uni.navigateTo({
-    url: `/pages/asset-detail/asset-detail?asset_id=${item.asset_id}`
-  })
-}
-
 const handleScrollToLower = () => {
   if (creationGridRef.value) {
     creationGridRef.value.loadMore()
@@ -264,10 +236,10 @@ const handleCategoryChange = (value) => {
 }
 
 // ========== Tile Change Callback ==========
-const handleTileChange = () => {}
+const handleTileChange = () => { }
 
 // ========== Reset Square ==========
-const resetSquare = async () => {}
+const resetSquare = async () => { }
 
 // ========== Lifecycle ==========
 onMounted(() => {
@@ -277,7 +249,6 @@ onMounted(() => {
 
   resetSquare()
   loadBannerActivities()
-  loadHotCategories()
 })
 
 onShow(() => {
@@ -362,7 +333,46 @@ onUnmounted(() => {
   /* margin-bottom: 32rpx; */
 }
 
-/* 区域二：分类标签 */
+/* 区域二：主Tab */
+.main-tab-section {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 24rpx 0;
+}
+
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  width: 200rpx;
+  height: 200rpx;
+  background: linear-gradient(135deg, rgba(240, 228, 177, 0.3), rgba(240, 131, 153, 0.3));
+  border-radius: 24rpx;
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 157, 0.2);
+  transition: all 0.3s;
+}
+
+.tab-item:active {
+  transform: scale(0.95);
+  opacity: 0.8;
+}
+
+.tab-icon {
+  margin-bottom: 12rpx;
+  object-fit: cover;
+  box-shadow: 8rpx 8rpx 16rpx rgba(229, 76, 93, 0.9);
+}
+
+.tab-name {
+  font-size: 28rpx;
+  color: #fff;
+  font-weight: 600;
+  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
+}
+
+/* 区域三：分类标签 */
 .category-section {
   margin-bottom: 24rpx;
   transition: all 0.3s ease;
@@ -430,6 +440,7 @@ onUnmounted(() => {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
diff --git a/frontend/utils/api.js b/frontend/utils/api.js
index 87eac51..c5a272c 100644
--- a/frontend/utils/api.js
+++ b/frontend/utils/api.js
@@ -882,30 +882,3 @@ export function getEarningsSummaryApi() {
 	})
 }
 
-// ==================== 热门灵感瀑布相关接口 ====================
-
-// 批量获取热门分类（页面初始化用）
-export function getHotInspirationFlowBatchApi() {
-	return request({
-		url: '/api/v1/inspiration-flow/hot/batch',
-		method: 'GET'
-	})
-}
-
-// 单个分类刷新
-export function getHotInspirationFlowApi(type) {
-	return request({
-		url: '/api/v1/inspiration-flow/hot',
-		method: 'GET',
-		data: { type }
-	})
-}
-
-// 查看更多分页
-export function getHotInspirationFlowMoreApi(type, cursor = '', limit = 20) {
-	return request({
-		url: '/api/v1/inspiration-flow/hot/more',
-		method: 'GET',
-		data: { type, cursor, limit }
-	})
-}
\ No newline at end of file