diff --git a/frontend/pages/components/Header.vue b/frontend/pages/components/Header.vue
index 867cad7..f615e5a 100644
--- a/frontend/pages/components/Header.vue
+++ b/frontend/pages/components/Header.vue
@@ -1,53 +1,73 @@
 <template>
-	<view class="header-container">
-		<!-- 返回按钮（可选） -->
-		<view v-if="showBack" class="back-button" @click="handleBack">
-			<text class="back-icon" :style="{ color: backIconColor }">←</text>
-		</view>
+  <view class="header-container">
+    <!-- 返回按钮（可选） -->
+    <view v-if="showBack" class="back-button" @click="handleBack">
+      <text class="back-icon" :style="{ color: backIconColor }">←</text>
+    </view>
 
-		<!-- 左侧水晶余额 -->
-		<view class="crystal-balance-new" @click="handleAvatarClick">
-			<!-- 1. 左侧钻石图标：层级最高，盖住右侧背景 -->
-			<view class="crystal-icon-box">
-				<image class="crystal-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
-			</view>
+    <!-- 左侧水晶余额 -->
+    <view class="crystal-balance-new" @click="handleAvatarClick">
+      <!-- 1. 左侧钻石图标：层级最高，盖住右侧背景 -->
+      <view class="crystal-icon-box">
+        <image
+          class="crystal-icon"
+          src="/static/icon/crystal.png"
+          mode="aspectFit"
+        ></image>
+      </view>
 
-			<!-- 2. 右侧容器：用于包裹背景和文字 -->
-			<view class="crystal-info-container">
-				<image class="crystal-bg-img" src="/static/square/shuijingzhanshikuang.png" mode="aspectFill">
-				</image>
+      <!-- 2. 右侧容器：用于包裹背景和文字 -->
+      <view class="crystal-info-container">
+        <image
+          class="crystal-bg-img"
+          src="/static/square/shuijingzhanshikuang.png"
+          mode="aspectFill"
+        >
+        </image>
 
-				<!-- 上层：文字内容 -->
-				<view class="crystal-text-layer">
-					<text class="balance-number">{{ exhibitionRevenue }}</text>
-				</view>
+        <!-- 上层：文字内容 -->
+        <view class="crystal-text-layer">
+          <text class="balance-number">{{ exhibitionRevenue }}</text>
+        </view>
 
-				<!-- 收益文字 -->
-				<!-- <view class="crystal-bg-layer">
+        <!-- 收益文字 -->
+        <!-- <view class="crystal-bg-layer">
 					<text class="balance-income">收益 {{ hourlyEarnings }}/时</text>
 				</view> -->
-			</view>
-		</view>
+      </view>
+    </view>
 
-		<!-- 右侧图标区域 -->
-		<view class="right-icons">
-			<view class="left-items">
-				<!-- 任务图标 -->
-				<view v-if="showTaskIcon" class="daily-task-group" @click="handleTaskClick">
-					<!-- 1. 上层：任务图标（悬浮在上面） -->
-					<view class="task-icon-box">
-						<image class="task-icon-img" src="/static/icon/task.png" mode="aspectFit"></image>
-						<image class="task-red-dot" src="/static/square/tishi.png" mode="aspectFit"></image>
-					</view>
+    <!-- 右侧图标区域 -->
+    <view class="right-icons">
+      <view class="left-items">
+        <!-- 任务图标 -->
+        <view
+          v-if="showTaskIcon"
+          class="daily-task-group"
+          @click="handleTaskClick"
+        >
+          <!-- 1. 上层：任务图标（悬浮在上面） -->
+          <view class="task-icon-box">
+            <image
+              class="task-icon-img"
+              src="/static/icon/task.png"
+              mode="aspectFit"
+            ></image>
+            <image
+              class="task-red-dot"
+              src="/static/square/tishi.png"
+              mode="aspectFit"
+            ></image>
+          </view>
 
-					<!-- 2. 下层：文字背景块 -->
-					<view class="task-text-box">
-						<text class="task-text-label">每日任务</text>
-					</view>
-				</view>
+          <!-- 2. 下层：文字背景块 -->
+          <view class="task-text-box">
+            <text class="task-text-label">每日任务</text>
+          </view>
+        </view>
 
-				<!-- 新手引导 -->
-				<!-- <view v-if="showGuideIcon" class="daily-task-group" @click="handleGuideClick">
+        <!-- 新手引导 -->
+        <!-- <view v-if="showGuideIcon" class="daily-task-group" @click="handleGuideClick">
 					1. 上层：新手引导（悬浮在上面）
 					<view class="task-icon-box">
 						<image class="task-icon-img" src="/static/icon/onboarding-bg.png" mode="aspectFit"></image>
@@ -60,39 +80,59 @@
 					</view>
 				</view> -->
 
-				<!-- 星援活动列表 -->
-				<view v-if="showStarActivityIcon" class="star-activity-list">
-					<view v-for="activity in starActivities" :key="activity.id" class="daily-task-group"
-						@click="handleActivityClick(activity)">
-						<!-- 上层：活动图标 -->
-						<view class="task-icon-box">
-							<image class="task-icon-img" :src="activity.icon || '/static/icon/bus-icon.png'"
-								mode="aspectFit"></image>
-							<image class="task-red-dot" src="/static/square/tishi.png" mode="aspectFit"></image>
-						</view>
+        <!-- 星援活动列表 -->
+        <view v-if="showStarActivityIcon" class="star-activity-list">
+          <view
+            v-for="activity in starActivities"
+            :key="activity.id"
+            class="daily-task-group"
+            @click="handleActivityClick(activity)"
+          >
+            <!-- 上层：活动图标 -->
+            <view class="task-icon-box">
+              <image
+                class="task-icon-img"
+                :src="activity.icon || '/static/icon/bus-icon.png'"
+                mode="aspectFit"
+              ></image>
+              <image
+                class="task-red-dot"
+                src="/static/square/tishi.png"
+                mode="aspectFit"
+              ></image>
+            </view>
 
-						<!-- 下层：文字背景块 -->
-						<view class="task-text-box">
-							<text class="task-text-label">{{
-								activity.theme || "星援活动"
-							}}</text>
-						</view>
-					</view>
-				</view>
+            <!-- 下层：文字背景块 -->
+            <view class="task-text-box">
+              <text class="task-text-label">{{
+                activity.theme || "星援活动"
+              }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+      <!-- 用户头像 -->
+      <view class="icon-item avatar-icon" @click="handleAvatarClick">
+        <Avatar
+          :key="avatarKey"
+          :userId="userUid"
+          :avatarUrl="userAvatarUrl"
+          :size="68"
+          :borderWidth="2"
+        />
+      </view>
+    </view>
 
-			</view>
-			<!-- 用户头像 -->
-			<view class="icon-item avatar-icon" @click="handleAvatarClick">
-				<Avatar :key="avatarKey" :userId="userUid" :avatarUrl="userAvatarUrl" :size="68" :borderWidth="2" />
-			</view>
-		</view>
+    <!-- 任务弹窗 -->
+    <DailyTasks :visible="showTaskModal" @close="showTaskModal = false" />
 
-		<!-- 任务弹窗 -->
-		<DailyTasks :visible="showTaskModal" @close="showTaskModal = false" />
-
-		<!-- 新手引导弹窗 -->
-		<GuideModal :visible="showGuideModal" @close="showGuideModal = false" @updated="handleGuideUpdated" />
-	</view>
+    <!-- 新手引导弹窗 -->
+    <GuideModal
+      :visible="showGuideModal"
+      @close="showGuideModal = false"
+      @updated="handleGuideUpdated"
+    />
+  </view>
 </template>
 
 <script setup>
@@ -111,30 +151,30 @@ const { bannerActivities, loadBannerActivities } = useBanner();
 
 // 定义 props
 const props = defineProps({
-	showBack: {
-		type: Boolean,
-		default: false,
-	},
-	backUrl: {
-		type: String,
-		default: "",
-	},
-	backIconColor: {
-		type: String,
-		default: "#000000",
-	},
-	showTaskIcon: {
-		type: Boolean,
-		default: false,
-	},
-	showGuideIcon: {
-		type: Boolean,
-		default: false,
-	},
-	showStarActivityIcon: {
-		type: Boolean,
-		default: false,
-	},
+  showBack: {
+    type: Boolean,
+    default: false,
+  },
+  backUrl: {
+    type: String,
+    default: "",
+  },
+  backIconColor: {
+    type: String,
+    default: "#000000",
+  },
+  showTaskIcon: {
+    type: Boolean,
+    default: false,
+  },
+  showGuideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  showStarActivityIcon: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const store = useStore();
@@ -151,25 +191,25 @@ const showGuideModal = ref(false);
 
 // 从本地存储读取用户信息
 const loadUserInfo = () => {
-	try {
-		const userStr = uni.getStorageSync("user");
-		if (userStr) {
-			userInfo.value = JSON.parse(userStr);
-		}
-	} catch (e) {
-		console.error("解析用户信息失败:", e);
-		userInfo.value = null;
-	}
+  try {
+    const userStr = uni.getStorageSync("user");
+    if (userStr) {
+      userInfo.value = JSON.parse(userStr);
+    }
+  } catch (e) {
+    console.error("解析用户信息失败:", e);
+    userInfo.value = null;
+  }
 };
 
 // 获取用户UID
 const userUid = computed(() => {
-	return userInfo.value?.uid || "";
+  return userInfo.value?.uid || "";
 });
 
 // 获取用户头像URL
 const userAvatarUrl = computed(() => {
-	return userInfo.value?.avatar_url || "";
+  return userInfo.value?.avatar_url || "";
 });
 
 // // 获取水晶余额
@@ -183,447 +223,451 @@ const hourlyEarnings = ref(0); // 每小时收益之和
 
 // 加载收益汇总
 const loadEarningsSummary = async () => {
-	try {
-		const response = await getEarningsSummaryApi();
+  try {
+    const response = await getEarningsSummaryApi();
 
-		if (response.code === 200) {
-			const data = response.data;
-			exhibitionRevenue.value = data.crystal_balance || 0;
-			hourlyEarnings.value = data.total_hourly_earnings || 0;
-		}
-	} catch (e) {
-		console.error("获取收益汇总失败:", e);
-	}
+    if (response.code === 200) {
+      const data = response.data;
+      exhibitionRevenue.value = data.crystal_balance || 0;
+      hourlyEarnings.value = data.total_hourly_earnings || 0;
+    }
+  } catch (e) {
+    console.error("获取收益汇总失败:", e);
+  }
 };
 
 // 监听头像更新事件
 const handleAvatarUpdate = (data) => {
-	// 重新加载用户信息（含新 avatar_url）
-	loadUserInfo();
-	// 强制刷新Avatar组件
-	avatarKey.value += 1;
+  // 重新加载用户信息（含新 avatar_url）
+  loadUserInfo();
+  // 强制刷新Avatar组件
+  avatarKey.value += 1;
 };
 
 // 监听用户信息更新事件（如切换身份）
 const handleUserInfoUpdate = () => {
-	loadUserInfo();
-	avatarKey.value += 1;
-	// 切换身份后重新检查每日登录状态
-	checkAndReportDailyLogin();
+  loadUserInfo();
+  avatarKey.value += 1;
+  // 切换身份后重新检查每日登录状态
+  checkAndReportDailyLogin();
 };
 
 // 监听余额更新事件
 const handleBalanceUpdate = (data) => {
-	if (userInfo.value) {
-		userInfo.value = {
-			...userInfo.value,
-			crystal_balance: data.crystal_balance,
-		};
-		exhibitionRevenue.value = data.crystal_balance || 0;
-	} else {
-		loadUserInfo();
-	}
+  if (userInfo.value) {
+    userInfo.value = {
+      ...userInfo.value,
+      crystal_balance: data.crystal_balance,
+    };
+    exhibitionRevenue.value = data.crystal_balance || 0;
+  } else {
+    loadUserInfo();
+  }
 };
 
 // 检查并上报每日首次登录事件
 function checkAndReportDailyLogin() {
-	// 5点之前属于昨日周期，不触发登录事件
-	const now = new Date();
-	const currentHour = now.getHours();
-	if (currentHour < 5) return; // 5点之前不触发
+  // 5点之前属于昨日周期，不触发登录事件
+  const now = new Date();
+  const currentHour = now.getHours();
+  if (currentHour < 5) return; // 5点之前不触发
 
-	const today = now.toISOString().split("T")[0];
-	const starId = uni.getStorageSync("star_id");
-	if (!starId) return;
+  const today = now.toISOString().split("T")[0];
+  const starId = uni.getStorageSync("star_id");
+  if (!starId) return;
 
-	// 获取用户ID
-	const userStr = uni.getStorageSync("user");
-	let userId = null;
-	if (userStr) {
-		try {
-			const user = JSON.parse(userStr);
-			userId = user?.uid || null;
-		} catch (e) { }
-	}
-	if (!userId) return;
+  // 获取用户ID
+  const userStr = uni.getStorageSync("user");
+  let userId = null;
+  if (userStr) {
+    try {
+      const user = JSON.parse(userStr);
+      userId = user?.uid || null;
+    } catch (e) {}
+  }
+  if (!userId) return;
 
-	// 每个用户每个明星身份有独立的每日登录状态
-	const dailyLoginKey = `daily_login_completed_${today}_${userId}_${starId}`;
-	if (!uni.getStorageSync(dailyLoginKey)) {
-		reportEvent("daily_login", starId)
-			.then(() => {
-				// 报告成功后标记今日已完成，并清除昨日的记录
-				uni.setStorageSync(dailyLoginKey, true);
-				const yesterday = new Date(now.getTime() - 86400000)
-					.toISOString()
-					.split("T")[0];
-				uni.removeStorageSync(
-					`daily_login_completed_${yesterday}_${userId}_${starId}`,
-				);
-			})
-			.catch((err) => {
-				console.error("上报登录事件失败:", err);
-			});
-	}
+  // 每个用户每个明星身份有独立的每日登录状态
+  const dailyLoginKey = `daily_login_completed_${today}_${userId}_${starId}`;
+  if (!uni.getStorageSync(dailyLoginKey)) {
+    reportEvent("daily_login", starId)
+      .then(() => {
+        // 报告成功后标记今日已完成，并清除昨日的记录
+        uni.setStorageSync(dailyLoginKey, true);
+        const yesterday = new Date(now.getTime() - 86400000)
+          .toISOString()
+          .split("T")[0];
+        uni.removeStorageSync(
+          `daily_login_completed_${yesterday}_${userId}_${starId}`,
+        );
+      })
+      .catch((err) => {
+        console.error("上报登录事件失败:", err);
+      });
+  }
 }
 
 // 星援活动列表 - 从 bannerActivities 中获取非 expired 的活动
 const starActivities = computed(() => {
-	// return bannerActivities.value
-	return bannerActivities.value.filter(
-		(activity) => activity.status !== "expired",
-	);
+  // return bannerActivities.value
+  return bannerActivities.value.filter(
+    (activity) => activity.status !== "expired",
+  );
 });
 
 // 组件挂载时加载用户信息和星援活动数据
 onMounted(async () => {
-	await loadUserInfo();
-	await loadBannerActivities();
-	// await loadEarningsSummary();
-	uni.$on("avatarUpdated", handleAvatarUpdate);
-	uni.$on("userInfoUpdated", handleUserInfoUpdate);
-	uni.$on("balanceUpdated", handleBalanceUpdate);
+  await loadUserInfo();
+  await loadBannerActivities();
+  // await loadEarningsSummary();
+  uni.$on("avatarUpdated", handleAvatarUpdate);
+  uni.$on("userInfoUpdated", handleUserInfoUpdate);
+  uni.$on("balanceUpdated", handleBalanceUpdate);
 
-	// 上报每日首次登录事件（每日5点重置后首次挂载时）
-	checkAndReportDailyLogin();
+  // 上报每日首次登录事件（每日5点重置后首次挂载时）
+  checkAndReportDailyLogin();
 });
 
 onShow(() => {
-	// 每次页面显示时刷新收益数据
-	loadEarningsSummary();
+  // 每次页面显示时刷新收益数据
+  loadEarningsSummary();
 });
 
 // 组件卸载时移除事件监听
 onUnmounted(() => {
-	uni.$off("avatarUpdated", handleAvatarUpdate);
-	uni.$off("userInfoUpdated", handleUserInfoUpdate);
-	uni.$off("balanceUpdated", handleBalanceUpdate);
+  uni.$off("avatarUpdated", handleAvatarUpdate);
+  uni.$off("userInfoUpdated", handleUserInfoUpdate);
+  uni.$off("balanceUpdated", handleBalanceUpdate);
 });
 
 // 处理返回按钮点击
 const handleBack = () => {
-	if (props.backUrl) {
-		uni.navigateTo({
-			url: props.backUrl,
-		});
-	} else {
-		// 获取页面栈
-		const pages = getCurrentPages();
-		if (pages.length > 1) {
-			// 有上一页，执行返回
-			uni.navigateBack();
-		} else {
-			// 没有上一页，跳转到square页面
-			uni.reLaunch({
-				url: "/pages/square/square",
-			});
-		}
-	}
+  if (props.backUrl) {
+    uni.navigateTo({
+      url: props.backUrl,
+    });
+  } else {
+    // 获取页面栈
+    const pages = getCurrentPages();
+    if (pages.length > 1) {
+      // 有上一页，执行返回
+      uni.navigateBack();
+    } else {
+      // 没有上一页，跳转到square页面
+      uni.reLaunch({
+        url: "/pages/square/square",
+      });
+    }
+  }
 };
 // 处理任务图标点击
 const handleTaskClick = () => {
-	showTaskModal.value = true;
+  showTaskModal.value = true;
 };
 
 // 处理星援活动图标点击
 const handleActivityClick = (activity) => {
-	if (activity) {
-		uni.navigateTo({
-			url: `/pages/support-activity/index?id=${activity.id}`,
-		});
-	}
+  if (activity) {
+    uni.navigateTo({
+      url: `/pages/support-activity/index?id=${activity.id}`,
+    });
+  }
 };
 
 // 点击新手引导
 const handleGuideClick = () => {
-	showGuideModal.value = true;
+  showGuideModal.value = true;
 };
 
 // 引导更新回调
 const handleGuideUpdated = () => {
-	// 可以在这里刷新相关数据
-	console.log("[Header] Guide updated");
+  // 可以在这里刷新相关数据
+  console.log("[Header] Guide updated");
 };
 
 // 执行引导
 const handleStartGuide = (params) => {
-	const key = typeof params === "string" ? params : params?.key || "";
-	const fromStep = typeof params === "object" ? (params.fromStep ?? 0) : 0;
-	const targetPage = typeof params === "object" ? params.targetPage || "" : "";
+  const key = typeof params === "string" ? params : params?.key || "";
+  const fromStep = typeof params === "object" ? (params.fromStep ?? 0) : 0;
+  const targetPage = typeof params === "object" ? params.targetPage || "" : "";
 
-	console.log("[Header] handleStartGuide:", { key, fromStep, targetPage });
+  console.log("[Header] handleStartGuide:", { key, fromStep, targetPage });
 
-	showGuideListModal.value = false;
+  showGuideListModal.value = false;
 
-	// 根据引导类型跳转到对应页面
-	if (key === "square_home") {
-		const navigateUrl = targetPage || "/pages/square/square";
-		uni.navigateTo({
-			url: navigateUrl,
-			success: () => {
-				setTimeout(() => {
-					if (fromStep === 0) {
-						store.dispatch("guide/startGuideFromBeginning", key);
-					} else {
-						store.dispatch("guide/resumeGuide", key);
-					}
-				}, 500);
-			},
-		});
-	} else {
-		if (fromStep === 0) {
-			store.dispatch("guide/startGuideFromBeginning", key);
-		} else {
-			store.dispatch("guide/resumeGuide", key);
-		}
-	}
+  // 根据引导类型跳转到对应页面
+  if (key === "square_home") {
+    const navigateUrl = targetPage || "/pages/square/square";
+    uni.navigateTo({
+      url: navigateUrl,
+      success: () => {
+        setTimeout(() => {
+          if (fromStep === 0) {
+            store.dispatch("guide/startGuideFromBeginning", key);
+          } else {
+            store.dispatch("guide/resumeGuide", key);
+          }
+        }, 500);
+      },
+    });
+  } else {
+    if (fromStep === 0) {
+      store.dispatch("guide/startGuideFromBeginning", key);
+    } else {
+      store.dispatch("guide/resumeGuide", key);
+    }
+  }
 };
 
 // 领取奖励成功
 const handleClaimSuccess = (reward) => {
-	console.log("[Header] 领取奖励成功:", reward);
+  console.log("[Header] 领取奖励成功:", reward);
 };
 
 // 关闭任务弹窗
 const closeTaskModal = () => {
-	showTaskModal.value = false;
+  showTaskModal.value = false;
 };
 
 // 处理头像点击
 const handleAvatarClick = () => {
-	// 获取当前页面栈
-	const pages = getCurrentPages();
-	if (pages.length > 0) {
-		const currentPage = pages[pages.length - 1];
-		// 检查当前页面是否是个人信息页面
-		if (currentPage.route === "pages/profile/myWorks") {
-			// 已经在个人信息页面，不执行跳转
-			return;
-		}
-	}
-	uni.navigateTo({
-		url: "/pages/profile/myWorks",
-	});
+  // 获取当前页面栈
+  const pages = getCurrentPages();
+  if (pages.length > 0) {
+    const currentPage = pages[pages.length - 1];
+    // 检查当前页面是否是个人信息页面
+    if (currentPage.route === "pages/profile/myWorks") {
+      // 已经在个人信息页面，不执行跳转
+      return;
+    }
+  }
+  uni.navigateTo({
+    url: "/pages/profile/myWorks",
+  });
 };
 
 // 将方法暴露给模板
 defineExpose({
-	showTaskModal,
-	closeTaskModal,
+  showTaskModal,
+  closeTaskModal,
 });
 </script>
 
 <style scoped>
 .header-container {
-	position: fixed;
-	top: 80rpx;
-	left: 0;
-	right: 0;
-	width: 100%;
-	height: 144rpx;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 0 32rpx;
-	box-sizing: border-box;
-	z-index: 200;
+  position: fixed;
+  top: 80rpx;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 144rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 32rpx;
+  box-sizing: border-box;
+  z-index: 200;
 }
 
 .back-button {
-	width: 60rpx;
-	height: 60rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .back-icon {
-	font-size: 48rpx;
-	font-weight: bold;
+  font-size: 48rpx;
+  font-weight: bold;
 }
 
 .right-icons {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
-	/* gap: 30rpx; */
-	margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  /* gap: 30rpx; */
+  margin-left: auto;
 }
 
 .left-items {
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 
 .star-activity-list {
-	display: flex;
-	align-items: center;
-	gap: 8rpx;
-	width: 68rpx;
-	/* 控制整体宽度，根据图标大小调整 */
-	height: 156rpx;
-	/* 预估高度，包含图标和文字块 */
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  width: 68rpx;
+  /* 控制整体宽度，根据图标大小调整 */
+  height: 156rpx;
+  /* 预估高度，包含图标和文字块 */
 }
 
 .daily-task-group {
-	position: relative;
-	/* 必须是相对定位，作为子元素的定位基准 */
-	width: 68rpx;
-	/* 控制整体宽度，根据图标大小调整 */
-	height: 156rpx;
-	/* 预估高度，包含图标和文字块 */
-	margin-right: 24rpx;
+  position: relative;
+  /* 必须是相对定位，作为子元素的定位基准 */
+  width: 68rpx;
+  /* 控制整体宽度，根据图标大小调整 */
+  height: 156rpx;
+  /* 预估高度，包含图标和文字块 */
+  margin-right: 24rpx;
 }
 
 /* --- 上层图标样式 --- */
 .task-icon-box {
-	position: absolute;
-	top: 32rpx;
-	/* 固定在顶部 */
-	left: 50%;
-	transform: translateX(-50%);
-	/* 水平居中 */
-	width: 34rpx;
-	/* 图标宽度 */
-	height: 48rpx;
-	/* 图标高度 */
-	z-index: 10;
-	/* 确保图标在文字块上面 */
+  position: absolute;
+  top: 32rpx;
+  /* 固定在顶部 */
+  left: 50%;
+  transform: translateX(-50%);
+  /* 水平居中 */
+  width: 34rpx;
+  /* 图标宽度 */
+  height: 48rpx;
+  /* 图标高度 */
+  z-index: 10;
+  /* 确保图标在文字块上面 */
 }
 
 .task-icon-img {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 /* 红点样式 */
 .task-red-dot {
-	position: absolute;
-	top: 8rpx;
-	right: 0;
-	width: 16rpx;
-	height: 16rpx;
+  position: absolute;
+  top: 8rpx;
+  right: 0;
+  width: 16rpx;
+  height: 16rpx;
 }
 
 /* --- 下层文字背景块 --- */
 .task-text-box {
-	position: absolute;
-	top: 48rpx;
-	/* 关键：调整这个值，让文字块往上顶，与图标产生重叠 */
-	left: 50%;
-	transform: translateX(-50%);
-	width: 60rpx;
-	height: 60rpx;
-	background-image: url("/static/square/gerenzhongxincangpinkuang.png");
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-	border-radius: 20rpx;
-	box-shadow: 0px 4px 4px 0px #ee262654;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	z-index: 5;
-	/* 必须比图标小，才能被覆盖 */
+  position: absolute;
+  top: 48rpx;
+  /* 关键：调整这个值，让文字块往上顶，与图标产生重叠 */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60rpx;
+  height: 60rpx;
+  background-image: url("/static/square/gerenzhongxincangpinkuang.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  border-radius: 20rpx;
+  box-shadow: 0px 4px 4px 0px #ee262654;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 5;
+  /* 必须比图标小，才能被覆盖 */
 }
 
 .task-text-label {
-	font-weight: 500;
-	font-size: 12rpx;
-	line-height: 100%;
-	letter-spacing: 0%;
-	color: #fff9e7;
-	text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.84);
-	margin-top: 32rpx;
+  font-weight: 500;
+  font-size: 12rpx;
+  line-height: 100%;
+  letter-spacing: 0%;
+  color: #fff9e7;
+  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.84);
+  margin-top: 32rpx;
 }
 
 /* 水晶余额组件 */
 .crystal-balance-new {
-	height: 120rpx;
-	display: flex;
-	align-items: center;
-	/* 底部对齐 */
-	position: relative;
-	/* 左侧留出足够空间给钻石图标，防止文字被压在图标正下方 */
-	padding-left: 50rpx;
-	top: 8rpx;
+  height: 120rpx;
+  display: flex;
+  align-items: center;
+  /* 底部对齐 */
+  position: relative;
+  /* 左侧留出足够空间给钻石图标，防止文字被压在图标正下方 */
+  padding-left: 50rpx;
+  top: 8rpx;
 }
 
 /* --- 左侧钻石图标 --- */
 .crystal-icon-box {
-	position: absolute;
-	left: 8rpx;
-	bottom: 24rpx;
-	/* 与右侧底部平齐 */
-	z-index: 10;
-	width: 68rpx;
-	height: 60rpx;
-	transform: rotate(-15deg);
-	opacity: 1;
+  position: absolute;
+  left: 8rpx;
+  bottom: 24rpx;
+  /* 与右侧底部平齐 */
+  z-index: 10;
+  width: 68rpx;
+  height: 60rpx;
+  transform: rotate(-15deg);
+  opacity: 1;
 }
 
 .crystal-icon {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 /* --- 右侧容器 --- */
 .crystal-info-container {
-	position: relative;
-	height: 34rpx;
-	/* width: 120rpx; */
-	opacity: 1;
-	border-radius: 20rpx;
-	border-width: 1px;
-	border: 1px solid #F3A68A40;
-	box-shadow: 2px 2px 4.1px 0px #F936365C;
-
+  position: relative;
+  height: 34rpx;
+  /* width: 120rpx; */
+  opacity: 1;
+  border-radius: 20rpx;
+  border-width: 1px;
+  border: 1px solid #f3a68a40;
+  box-shadow: 2px 2px 4.1px 0px #f936365c;
 }
 
 .crystal-bg-img {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	z-index: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
 }
 
 /* --- 上层：文字内容 --- */
 .crystal-text-layer {
-	position: relative;
-	z-index: 2;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	border-radius: 120rpx;
-	opacity: 0.75;
-	background: linear-gradient(270deg, rgba(168, 17, 255, 0.83) 0%, rgba(30, 180, 217, 0.470865) 81.01%, rgba(101, 10, 153, 0) 178.07%);
-	padding: 0 24rpx;
-
+  position: relative;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 120rpx;
+  opacity: 0.75;
+  background: linear-gradient(
+    270deg,
+    rgba(255, 15, 19, 0.83) 0%,
+    rgba(30, 180, 217, 0.470865) 57.01%,
+    rgba(51, 241, 255, 0) 178.07%
+  );
+  padding: 0 24rpx;
+  
 }
 
 .balance-number {
-	font-size: 24rpx;
-	font-weight: bold;
-	color: #ffb800;
-	font-family: "yt", sans-serif;
-	text-shadow:
-		0 0 10rpx rgba(255, 184, 0, 0.8),
-		0 2rpx 4rpx rgba(0, 0, 0, 0.5);
-	letter-spacing: 1rpx;
-	display: flex;
-	align-items: center;
-	white-space: nowrap;
+  font-size: 24rpx;
+  font-weight: bold;
+  color: #ffb800;
+  font-family: "yt", sans-serif;
+  text-shadow:
+    0 0 10rpx rgba(255, 184, 0, 0.8),
+    0 2rpx 4rpx rgba(0, 0, 0, 0.5);
+  letter-spacing: 1rpx;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .balance-income {
-	font-size: 18rpx;
-	color: #ffffff;
-	margin-bottom: 2rpx;
-	margin-left: 28rpx;
-	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9);
+  font-size: 18rpx;
+  color: #ffffff;
+  margin-bottom: 2rpx;
+  margin-left: 28rpx;
+  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9);
 }
 
 /* --- 下层：渐变背景 --- */
@@ -652,24 +696,24 @@ defineExpose({
 } */
 
 .icon-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .task-icon {
-	width: 64rpx;
-	height: 64rpx;
+  width: 64rpx;
+  height: 64rpx;
 }
 
 .icon-image {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .avatar-icon {
-	width: 60rpx;
-	height: 60rpx;
+  width: 60rpx;
+  height: 60rpx;
 }
 </style>
diff --git a/frontend/pages/profile/hisWorks.vue b/frontend/pages/profile/hisWorks.vue
index 648bac6..e19f931 100644
--- a/frontend/pages/profile/hisWorks.vue
+++ b/frontend/pages/profile/hisWorks.vue
@@ -22,39 +22,76 @@
 				</view>
 
 				<view class="exhibition-grid">
-					<view v-for="(item, index) in exhibitionWorks" :key="item.id" class="exhibition-card"
-						:class="index % 2 === 0 ? 'card-tilt-left' : 'card-tilt-right'" @tap="goToAssetDetail(item.id)">
-						<image class="card-image" :src="item.cover_url || '/static/nft/placeholder.png'"
-							mode="aspectFill"></image>
+					<!-- 左边展位 (slot_index=1) -->
+					<view v-if="exhibitionAtSlot[0]" class="exhibition-card card-tilt-left"
+						@tap="goToAssetDetail(exhibitionAtSlot[0].id)">
+						<LenticularCard v-if="exhibitionAtSlot[0].is_lenticular" class="card-lenticular"
+							:layers="getLenticularLayers(exhibitionAtSlot[0].id)"
+							:transforms="getLenticularTransforms(exhibitionAtSlot[0].id)" :gyro-source="gyroSourceLabel"
+							:skip-built-in-touch="true" :shimmer-mid-opacity="0.16"
+							@simulate="(x, y) => onLenticularSimulate(exhibitionAtSlot[0].id, x, y)" />
+						<image v-else class="card-image"
+							:src="exhibitionAtSlot[0].cover_url || '/static/nft/placeholder.png'" mode="aspectFill">
+						</image>
 						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
 						</image>
 						<!-- 点赞数 -->
 						<view class="card-rate-badge">
 							<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
 							<view class="card-rate-text-wrap">
-								<text class="card-rate-text">{{ item.like_count || 0 }}</text>
+								<text class="card-rate-text">{{ exhibitionAtSlot[0].like_count || 0 }}</text>
 							</view>
 						</view>
-						<!-- 倒计时背景 -->
 						<view class="countdown-background" :style="getCountdownBackgroundStyle()">
-							<!-- 倒计时文字 -->
-							<text class="countdown-text">
-								{{ formatCountdown(item.id) }}
-							</text>
+							<text class="countdown-text">{{ formatCountdown(exhibitionAtSlot[0].id) }}</text>
 						</view>
-						<!-- 图片下方收益 -->
-						<view class="card-income-row"
-							:class="index % 2 === 0 ? 'income-tilt-right' : 'income-tilt-left'">
+						<view class="card-income-row income-tilt-right">
 							<image class="topfans-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
 							<view class="card-income-text-wrap">
-								<text class="card-income-text">{{ item.earnings || 0 }}/时</text>
+								<text class="card-income-text">{{ exhibitionAtSlot[0].earnings || 0 }}/时</text>
 							</view>
 						</view>
 					</view>
+					<view v-else class="empty-card empty-card-left">
+						<image class="empty-cover" src="/static/nft/placeholder.png" mode="aspectFill"></image>
+						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
+						</image>
+					</view>
 
-					<!-- 空状态占位 -->
-					<view v-if="exhibitionWorks.length === 0" class="empty-exhibition">
-						<text class="empty-text">该用户暂无在展作品</text>
+					<!-- 右边展位 (slot_index=2) -->
+					<view v-if="exhibitionAtSlot[1]" class="exhibition-card card-tilt-right"
+						@tap="goToAssetDetail(exhibitionAtSlot[1].id)">
+						<LenticularCard v-if="exhibitionAtSlot[1].is_lenticular" class="card-lenticular"
+							:layers="getLenticularLayers(exhibitionAtSlot[1].id)"
+							:transforms="getLenticularTransforms(exhibitionAtSlot[1].id)" :gyro-source="gyroSourceLabel"
+							:skip-built-in-touch="true" :shimmer-mid-opacity="0.16"
+							@simulate="(x, y) => onLenticularSimulate(exhibitionAtSlot[1].id, x, y)" />
+						<image v-else class="card-image"
+							:src="exhibitionAtSlot[1].cover_url || '/static/nft/placeholder.png'" mode="aspectFill">
+						</image>
+						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
+						</image>
+						<!-- 点赞数 -->
+						<view class="card-rate-badge">
+							<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
+							<view class="card-rate-text-wrap">
+								<text class="card-rate-text">{{ exhibitionAtSlot[1].like_count || 0 }}</text>
+							</view>
+						</view>
+						<view class="countdown-background" :style="getCountdownBackgroundStyle()">
+							<text class="countdown-text">{{ formatCountdown(exhibitionAtSlot[1].id) }}</text>
+						</view>
+						<view class="card-income-row income-tilt-left">
+							<image class="topfans-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
+							<view class="card-income-text-wrap">
+								<text class="card-income-text">{{ exhibitionAtSlot[1].earnings || 0 }}/时</text>
+							</view>
+						</view>
+					</view>
+					<view v-else class="empty-card empty-card-right">
+						<image class="empty-cover" src="/static/nft/placeholder.png" mode="aspectFill"></image>
+						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFill">
+						</image>
 					</view>
 				</view>
 			</view>
@@ -68,18 +105,6 @@
 						</image>
 						<text class="section-label-text">当前点赞作品</text>
 					</view>
-					<!-- <view class="section-label" :class="{ 'tab-active': likedTab === 'today' }"
-						@tap="switchLikedTab('today')">
-						<image class="section-label-bg" src="/static/nft/dingbutubiao_liang.png" mode="aspectFill">
-						</image>
-						<text class="section-label-text">今日点赞作品</text>
-					</view>
-					<view class="section-label" :class="{ 'tab-active': likedTab === 'week' }"
-						@tap="switchLikedTab('week')">
-						<image class="section-label-bg" src="/static/nft/dingbutubiao_liang.png" mode="aspectFill">
-						</image>
-						<text class="section-label-text">本周点赞作品</text>
-					</view> -->
 				</view>
 
 				<scroll-view class="liked-list" scroll-y="true" :show-scrollbar="false">
@@ -90,11 +115,15 @@
 							mode="aspectFit"></image>
 
 						<!-- 卡片主体 -->
-
 						<view class="liked-item" :class="index === 0 ? 'liked-item-first' : ''">
 							<!-- 作品封面 -->
 							<view class="liked-cover-wrap" :class="index === 0 ? 'liked-cover-wrap-first' : ''">
-								<image class="liked-cover" :src="item.cover_url || '/static/nft/placeholder.png'"
+								<LenticularCard v-if="item.is_lenticular" class="liked-lenticular"
+									:layers="getLikedLenticularLayers(item.id)"
+									:transforms="getLikedLenticularTransforms(item.id)" :gyro-source="gyroSourceLabel"
+									:skip-built-in-touch="true" :shimmer-mid-opacity="0.16"
+									@simulate="(x, y) => onLikedLenticularSimulate(item.id, x, y)" />
+								<image v-else class="liked-cover" :src="item.cover_url || '/static/nft/placeholder.png'"
 									mode="aspectFill"></image>
 								<image class="liked-cover-frame" src="/static/square/cangpinkuang1.png"
 									mode="aspectFill"></image>
@@ -116,7 +145,7 @@
 									:src="item.earnings > 10 ? '/static/square/shuijingtubiao.png' : '/static/icon/crystal.png'"
 									mode="aspectFit">
 								</image>
-								<text class="reward-amount">+{{ item.reward }}</text>
+								<text class="reward-amount">{{ item.reward }}</text>
 							</view>
 						</view>
 					</view>
@@ -132,9 +161,13 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
-import { getUserGalleriesApi, getUserLikedAssetsApi, getUserProfileApi } from '@/utils/api.js';
+import { getUserGalleriesApi, getUserLikedAssetsApi, getAssetMaterialsApi } from '@/utils/api.js';
+import LenticularCard from '@/components/lenticular/LenticularCard.vue';
+import { useLenticularCraftTiltPreview } from '@/composables/useLenticularCraftTiltPreview.js';
+import { buildLenticularLayers, buildLenticularLayersTwo } from '@/utils/castloveMintForm.js';
+import { LenticularEngine, DEFAULT_PHYSICS } from '@/utils/lenticular-engine.js';
 
 const userId = ref('');
 const nickname = ref('');
@@ -226,7 +259,6 @@ const getCountdownBackgroundStyle = () => {
 	};
 };
 
-
 const rankIcons = [
 	'/static/square/icon1.png',
 	'/static/square/icon2.png',
@@ -245,11 +277,269 @@ const likedWorks = ref([]);
 // 点赞标签状态: current-当前, today-今日, week-本周
 const likedTab = ref('current');
 
+// 光栅卡预览相关
+// 每张光栅卡独立的 transforms，通过 asset id 索引
+const lenticularTransformsMap = ref({});
+const lenticularLayersByAsset = ref({});
+const activeLenticularId = ref(null);
+const gyroSourceLabel = ref('device');
+
+// 点赞作品光栅卡数据
+const likedLenticularLayersByAsset = ref({});
+const likedLenticularTransformsMap = ref({});
+
+// 创建单一引擎供模拟倾斜使用
+const lenticularPhysics = ref(null);
+const lenticularEngine = ref(null);
+let lenticularRafId = null;
+
+// 使用 useLenticularPreview 来管理光栅效果
+const lenticularLayersRef = ref([]);
+
+function getLenticularLayers(assetId) {
+	return lenticularLayersByAsset.value[assetId] || [];
+}
+
+function getLenticularTransforms(assetId) {
+	return lenticularTransformsMap.value[assetId] || {};
+}
+
+// 点赞作品光栅卡相关函数
+function getLikedLenticularLayers(assetId) {
+	return likedLenticularLayersByAsset.value[assetId] || [];
+}
+
+function getLikedLenticularTransforms(assetId) {
+	return likedLenticularTransformsMap.value[assetId] || {};
+}
+
+function onLikedLenticularSimulate(assetId, x, y) {
+	simulateLikedLenticularTilt(assetId, x, y);
+}
+
+function simulateLikedLenticularTilt(assetId, x, y) {
+	if (!lenticularEngine.value) return;
+	const layers = likedLenticularLayersByAsset.value[assetId];
+	if (!layers || layers.length === 0) return;
+
+	lenticularEngine.value.setLayers(layers);
+	const renderState = lenticularEngine.value.feedSimulatedTilt(x, y ? y : 0);
+
+	const transforms = {};
+	for (const l of layers) {
+		const rs = renderState.layerOffsets.get(l.id);
+		const op = renderState.layerOpacities.get(l.id);
+		transforms[l.id] = {
+			x: rs ? rs.x : 0,
+			y: rs ? rs.y : 0,
+			opacity: op != null ? op : l.opacity,
+		};
+	}
+	likedLenticularTransformsMap.value = { ...likedLenticularTransformsMap.value, [assetId]: transforms };
+}
+
+async function loadLikedLenticularLayersForAsset(assetId) {
+	const item = likedWorks.value.find(w => w.id === assetId);
+	if (!item) return;
+
+	try {
+		const materialsRes = await getAssetMaterialsApi(assetId);
+		if (materialsRes.code === 200 && materialsRes.data) {
+			const materialsList = Array.isArray(materialsRes.data) ? materialsRes.data : materialsRes.data.materials || [];
+			let subjectUrl = item.cover_url;
+			let bgUrl = '';
+			for (const mat of materialsList) {
+				if (mat.material_type === 'main' && mat.material_url_signed) {
+					subjectUrl = mat.material_url_signed;
+				}
+				if (mat.material_type === 'bg' && mat.material_url_signed) {
+					bgUrl = mat.material_url_signed;
+				}
+			}
+			if (bgUrl) {
+				likedLenticularLayersByAsset.value[assetId] = buildLenticularLayersTwo(bgUrl, subjectUrl);
+			} else {
+				likedLenticularLayersByAsset.value[assetId] = buildLenticularLayers(subjectUrl);
+			}
+			initLikedTransformsForAsset(assetId);
+		} else {
+			likedLenticularLayersByAsset.value[assetId] = buildLenticularLayers(item.cover_url);
+			initLikedTransformsForAsset(assetId);
+		}
+	} catch (e) {
+		console.error('[hisWorks] 获取点赞作品素材列表失败:', e);
+		likedLenticularLayersByAsset.value[assetId] = buildLenticularLayers(item.cover_url);
+		initLikedTransformsForAsset(assetId);
+	}
+}
+
+function initLikedTransformsForAsset(assetId) {
+	const layers = likedLenticularLayersByAsset.value[assetId];
+	if (!layers || layers.length === 0) return;
+	const transforms = {};
+	for (const l of layers) {
+		transforms[l.id] = { x: 0, y: 0, opacity: l.opacity || 1 };
+	}
+	likedLenticularTransformsMap.value = { ...likedLenticularTransformsMap.value, [assetId]: transforms };
+}
+
+async function loadLenticularLayersForAsset(assetId) {
+	const item = exhibitionWorks.value.find(w => w.id === assetId);
+	if (!item) return;
+
+	try {
+		const materialsRes = await getAssetMaterialsApi(assetId);
+		if (materialsRes.code === 200 && materialsRes.data) {
+			const materialsList = Array.isArray(materialsRes.data) ? materialsRes.data : materialsRes.data.materials || [];
+			let subjectUrl = item.cover_url;
+			let bgUrl = '';
+			for (const mat of materialsList) {
+				if (mat.material_type === 'main' && mat.material_url_signed) {
+					subjectUrl = mat.material_url_signed;
+				}
+				if (mat.material_type === 'bg' && mat.material_url_signed) {
+					bgUrl = mat.material_url_signed;
+				}
+			}
+			if (bgUrl) {
+				lenticularLayersByAsset.value[assetId] = buildLenticularLayersTwo(bgUrl, subjectUrl);
+			} else {
+				lenticularLayersByAsset.value[assetId] = buildLenticularLayers(subjectUrl);
+			}
+			initTransformsForAsset(assetId);
+		} else {
+			lenticularLayersByAsset.value[assetId] = buildLenticularLayers(item.cover_url);
+			initTransformsForAsset(assetId);
+		}
+	} catch (e) {
+		console.error('[hisWorks] 获取素材列表失败:', e);
+		lenticularLayersByAsset.value[assetId] = buildLenticularLayers(item.cover_url);
+	}
+}
+
+// 处理光栅卡触摸模拟
+function onLenticularSimulate(assetId, x, y) {
+	simulateLenticularTilt(assetId, x, y);
+}
+
+// 处理光栅卡触摸模拟
+function simulateLenticularTilt(assetId, x, y) {
+	if (!lenticularEngine.value) return;
+	const layers = lenticularLayersByAsset.value[assetId];
+	if (!layers || layers.length === 0) return;
+
+	// 更新引擎的层
+	lenticularEngine.value.setLayers(layers);
+
+	// 计算渲染状态
+	const renderState = lenticularEngine.value.feedSimulatedTilt(x, y ? y : 0);
+
+	const transforms = {};
+	for (const l of layers) {
+		const rs = renderState.layerOffsets.get(l.id);
+		const op = renderState.layerOpacities.get(l.id);
+		transforms[l.id] = {
+			x: rs ? rs.x : 0,
+			y: rs ? rs.y : 0,
+			opacity: op != null ? op : l.opacity,
+		};
+	}
+	// 创建新对象以触发 Vue 响应式更新
+	lenticularTransformsMap.value = { ...lenticularTransformsMap.value, [assetId]: transforms };
+}
+
+// 初始化光栅引擎
+function initLenticularEngine() {
+	if (lenticularEngine.value) return;
+	const physics = { ...DEFAULT_PHYSICS, parallaxDepth: 18 };
+	physics.gyroSimEnabled = false;
+	lenticularPhysics.value = physics;
+	lenticularEngine.value = new LenticularEngine(physics);
+}
+
+// 为每个资产初始化 transforms 为空（居中状态）
+function initTransformsForAsset(assetId) {
+	const layers = lenticularLayersByAsset.value[assetId];
+	if (!layers || layers.length === 0) return;
+	const transforms = {};
+	for (const l of layers) {
+		transforms[l.id] = { x: 0, y: 0, opacity: l.opacity || 1 };
+	}
+	lenticularTransformsMap.value = { ...lenticularTransformsMap.value, [assetId]: transforms };
+}
+
+// 开始光栅渲染循环（为所有卡片更新 transforms）
+function startLenticularRenderLoop() {
+	if (lenticularRafId !== null) return;
+	const tick = () => {
+		// 遍历所有有层数据的在展作品卡片，更新 transforms
+		for (const assetId of Object.keys(lenticularLayersByAsset.value)) {
+			const layers = lenticularLayersByAsset.value[assetId];
+			if (!layers || layers.length === 0) continue;
+			lenticularEngine.value.setLayers(layers);
+			const renderState = lenticularEngine.value.feedSimulatedTilt(0, 0);
+			const transforms = {};
+			for (const l of layers) {
+				const rs = renderState.layerOffsets.get(l.id);
+				const op = renderState.layerOpacities.get(l.id);
+				transforms[l.id] = {
+					x: rs ? rs.x : 0,
+					y: rs ? rs.y : 0,
+					opacity: op != null ? op : l.opacity,
+				};
+			}
+			lenticularTransformsMap.value = { ...lenticularTransformsMap.value, [assetId]: transforms };
+		}
+		// 遍历点赞作品的光栅卡
+		for (const assetId of Object.keys(likedLenticularLayersByAsset.value)) {
+			const layers = likedLenticularLayersByAsset.value[assetId];
+			if (!layers || layers.length === 0) continue;
+			lenticularEngine.value.setLayers(layers);
+			const renderState = lenticularEngine.value.feedSimulatedTilt(0, 0);
+			const transforms = {};
+			for (const l of layers) {
+				const rs = renderState.layerOffsets.get(l.id);
+				const op = renderState.layerOpacities.get(l.id);
+				transforms[l.id] = {
+					x: rs ? rs.x : 0,
+					y: rs ? rs.y : 0,
+					opacity: op != null ? op : l.opacity,
+				};
+			}
+			likedLenticularTransformsMap.value = { ...likedLenticularTransformsMap.value, [assetId]: transforms };
+		}
+		lenticularRafId = requestAnimationFrame(tick);
+	};
+	lenticularRafId = requestAnimationFrame(tick);
+}
+
+function stopLenticularRenderLoop() {
+	if (lenticularRafId !== null) {
+		cancelAnimationFrame(lenticularRafId);
+		lenticularRafId = null;
+	}
+}
+
+// 将作品映射到正确的左右位置（slot 1=左边, slot 2=右边）
+const exhibitionAtSlot = computed(() => {
+	const slots = [null, null];
+	for (const item of exhibitionWorks.value) {
+		const pos = (item.slot_index ?? 0) - 1;
+		if (pos >= 0 && pos < 2) {
+			slots[pos] = item;
+		}
+	}
+	return slots;
+});
+
 // 切换点赞标签
 const switchLikedTab = async (tab) => {
 	if (likedTab.value === tab) return;
 	likedTab.value = tab;
 	likedWorks.value = [];
+	// 清理点赞作品光栅卡数据
+	likedLenticularLayersByAsset.value = {};
+	likedLenticularTransformsMap.value = {};
 	await loadLikedAssets();
 };
 
@@ -267,7 +557,17 @@ const loadExhibitedAssets = async () => {
 					like_count: slot.asset.like_count,
 					earnings: slot.asset.earnings || 0,
 					name: slot.asset.name,
-				}));
+					slot_index: slot.slot_index ?? 0,
+					is_lenticular: slot.asset.is_lenticular ?? false,
+				}))
+				.sort((a, b) => (a.slot_index ?? 0) - (b.slot_index ?? 0));
+
+			// 为每个光栅卡加载层级数据
+			for (const item of exhibitionWorks.value) {
+				if (item.is_lenticular) {
+					loadLenticularLayersForAsset(item.id);
+				}
+			}
 		}
 	} catch (err) {
 		console.error('加载展出作品失败:', err);
@@ -297,10 +597,18 @@ const loadLikedAssets = async () => {
 				like_count: item.like_count,
 				earnings: item.earnings,
 				name: item.name,
+				is_lenticular: item.is_lenticular ?? false,
 				status_text: index < 3 ? '排名进榜' : '潜力待挖',
 				score: item.like_count,
 				reward: Math.floor(item.earnings || 0),
 			}));
+
+			// 为每个光栅卡加载层级数据
+			for (const item of likedWorks.value) {
+				if (item.is_lenticular) {
+					loadLikedLenticularLayersForAsset(item.id);
+				}
+			}
 		}
 	} catch (err) {
 		console.error('加载点赞作品失败:', err);
@@ -308,6 +616,8 @@ const loadLikedAssets = async () => {
 };
 
 onMounted(() => {
+	initLenticularEngine();
+	startLenticularRenderLoop();
 	loadExhibitedAssets();
 	loadLikedAssets();
 
@@ -323,6 +633,7 @@ onUnmounted(() => {
 	if (countdownTimer) {
 		clearInterval(countdownTimer);
 	}
+	stopLenticularRenderLoop();
 });
 </script>
 
@@ -332,6 +643,7 @@ onUnmounted(() => {
 	position: relative;
 }
 
+/* 背景图片 */
 .bg-image {
 	position: fixed;
 	top: 0;
@@ -341,13 +653,14 @@ onUnmounted(() => {
 	z-index: 0;
 }
 
+/* 导航栏 */
 .nav-bar {
 	position: relative;
 	z-index: 10;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 80rpx 32rpx 16rpx;
+	padding: 96rpx 32rpx 16rpx;
 }
 
 .nav-back {
@@ -365,28 +678,39 @@ onUnmounted(() => {
 }
 
 .nav-title {
-	font-size: 48rpx;
+	font-size: 36rpx;
 	font-weight: 700;
-	color: #fff;
-	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.9);
+	color: #5a2d82;
 	letter-spacing: 2rpx;
 }
 
 .nav-placeholder {
-	width: 80rpx;
+	width: 64rpx;
 }
 
+/* 内容区域 */
 .scroll-content {
 	position: relative;
 	z-index: 1;
 }
 
 .section-block {
-	/* background: rgb(249 159 192 / 45%);
-	border-radius: 48rpx; */
 	padding: 16rpx;
 }
 
+/* 区块 */
+.section-1 {
+	margin-bottom: 8rpx;
+}
+
+/* 点赞标签容器 */
+.liked-tabs {
+	display: flex;
+	gap: 16rpx;
+	margin-bottom: 16rpx;
+}
+
+/* 区块标签 */
 .section-label {
 	position: relative;
 	display: inline-flex;
@@ -406,12 +730,6 @@ onUnmounted(() => {
 	opacity: 1;
 }
 
-.liked-tabs {
-	display: flex;
-	gap: 16rpx;
-	margin-bottom: 16rpx;
-}
-
 .section-label-bg {
 	position: absolute;
 	top: 0;
@@ -430,6 +748,7 @@ onUnmounted(() => {
 	padding: 0 28rpx;
 }
 
+/* 在展作品网格 */
 .exhibition-grid {
 	display: flex;
 	flex-direction: row;
@@ -454,6 +773,7 @@ onUnmounted(() => {
 
 .card-tilt-right {
 	transform: rotate(4deg) translateY(10rpx);
+	margin-left: 32rpx;
 	border-radius: 32rpx;
 	box-shadow: 16rpx 16rpx 16rpx rgba(229, 76, 93, 0.9);
 }
@@ -486,6 +806,18 @@ onUnmounted(() => {
 	z-index: 2;
 }
 
+.card-lenticular {
+	width: 88%;
+	height: 93%;
+	left: 5%;
+	top: 4%;
+	border-radius: 24rpx;
+	transform-origin: center center;
+	position: relative;
+	z-index: 3;
+	overflow: hidden;
+}
+
 .card-rate-badge {
 	position: absolute;
 	top: 16rpx;
@@ -498,6 +830,7 @@ onUnmounted(() => {
 	z-index: 9;
 }
 
+/* 图片下方收益 */
 .card-income-row {
 	position: absolute;
 	bottom: -88rpx;
@@ -516,7 +849,6 @@ onUnmounted(() => {
 	z-index: 2;
 	margin-right: -16rpx;
 	left: 20rpx;
-	top: 8rpx;
 }
 
 .card-income-text-wrap {
@@ -527,7 +859,8 @@ onUnmounted(() => {
 			#B94E73 100%);
 	border-radius: 999rpx;
 	padding: 8rpx 20rpx 8rpx 40rpx;
-	box-shadow: 0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
 		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
 	display: flex;
 	align-items: center;
@@ -541,6 +874,7 @@ onUnmounted(() => {
 	text-align: center;
 }
 
+
 .heart-icon {
 	width: 28rpx;
 	height: 28rpx;
@@ -553,7 +887,8 @@ onUnmounted(() => {
 			#B94E73 100%);
 	border-radius: 999rpx;
 	padding: 2rpx 16rpx;
-	box-shadow: 0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
 		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
 	display: flex;
 }
@@ -566,10 +901,6 @@ onUnmounted(() => {
 
 /* 倒计时背景 */
 .countdown-background {
-	/* position: absolute;
-	bottom: 20rpx;
-	right: 30%;
-	transform: translateX(-50%); */
 	width: 140rpx;
 	height: 36rpx;
 	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
@@ -593,11 +924,32 @@ onUnmounted(() => {
 	justify-content: center;
 }
 
-.empty-exhibition {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 80rpx 0;
+/* 空状态 */
+.empty-card {
+	width: 248rpx;
+	height: 380rpx;
+	border-radius: 20rpx;
+	overflow: visible;
+	position: relative;
+	margin: 0 32rpx;
+}
+
+.empty-card-left {
+	transform: rotate(-4deg) translateY(10rpx);
+}
+
+.empty-card-right {
+	transform: rotate(4deg) translateY(10rpx);
+}
+
+.empty-cover {
+	width: 88%;
+	height: 92%;
+	border-radius: 80rpx;
+	position: relative;
+	z-index: 3;
+	padding: 16rpx;
+	opacity: 0.5;
 }
 
 .empty-text {
@@ -605,6 +957,7 @@ onUnmounted(() => {
 	color: #b09cc0;
 }
 
+/* 当前点赞列表 */
 .liked-list {
 	max-height: 732rpx;
 }
@@ -620,13 +973,12 @@ onUnmounted(() => {
 	display: flex;
 	align-items: center;
 	background: #ffffff50;
-	border-radius: 32rpx;
+	border-radius: 48rpx;
 	padding: 24rpx 20rpx;
-	gap: 16rpx;
-	overflow: hidden;
 	box-sizing: border-box;
 	width: 80%;
 	padding-left: 13%;
+	justify-content: space-between;
 }
 
 .liked-item-first {
@@ -642,7 +994,6 @@ onUnmounted(() => {
 /* 排名图标 - 排名越靠前越大 */
 .rank-icon {
 	flex-shrink: 0;
-	/* margin-right: 8rpx; */
 	position: relative;
 	left: 32rpx;
 }
@@ -662,12 +1013,12 @@ onUnmounted(() => {
 	height: 88rpx;
 }
 
+/* 作品封面 */
 .liked-cover-wrap {
 	width: 88rpx;
 	height: 88rpx;
 	flex-shrink: 0;
 	margin-left: -18rpx;
-	margin-right: 48rpx;
 	position: relative;
 }
 
@@ -682,6 +1033,17 @@ onUnmounted(() => {
 	padding: 0.25rem;
 }
 
+.liked-lenticular {
+	width: 90%;
+	height: 90%;
+	border-radius: 24rpx;
+	transform: rotate(-22deg);
+	transform-origin: center center;
+	position: relative;
+	z-index: 3;
+	overflow: hidden;
+}
+
 .liked-cover-frame {
 	position: absolute;
 	top: 0;
@@ -693,12 +1055,12 @@ onUnmounted(() => {
 	transform-origin: center center;
 }
 
+
+/* 作品信息 */
 .liked-info {
-	flex: 1;
-	min-width: 0;
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
+	margin: 0 16rpx 0 32rpx;
 }
 
 .liked-status {
@@ -731,26 +1093,31 @@ onUnmounted(() => {
 	margin-top: 4rpx;
 }
 
+/* 右侧奖励 */
 .liked-reward {
+	min-width: 136rpx;
+	padding: 8rpx 16rpx;
+	background: rgba(255, 255, 255, 0.3);
+	border-radius: 999rpx;
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	justify-content: center;
-	gap: 8rpx;
-	flex-shrink: 0;
 }
 
 .reward-token-icon {
 	width: 56rpx;
 	height: 56rpx;
+	margin-right: 8rpx;
 }
 
 .reward-amount {
 	font-size: 28rpx;
-	color: #c060e0;
-	font-weight: 700;
+	color: #fff;
+	font-weight: 600;
+	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.7);
 }
 
+/* 空状态 */
 .empty-liked {
 	padding: 60rpx 0;
 	display: flex;
diff --git a/frontend/pages/profile/myWorks.vue b/frontend/pages/profile/myWorks.vue
index 355713b..77791bc 100644
--- a/frontend/pages/profile/myWorks.vue
+++ b/frontend/pages/profile/myWorks.vue
@@ -1448,6 +1448,7 @@ onShow(() => {
 	box-sizing: border-box;
 	width: 80%;
 	padding-left: 13%;
+	justify-content: space-between;
 }
 
 .liked-item-first {
diff --git a/frontend/pages/square/components/HotCategoryBlock.vue b/frontend/pages/square/components/HotCategoryBlock.vue
index 60134a6..108eb2c 100644
--- a/frontend/pages/square/components/HotCategoryBlock.vue
+++ b/frontend/pages/square/components/HotCategoryBlock.vue
@@ -7,7 +7,7 @@
 
     <!-- 骨架屏 -->
     <view v-if="loading" class="grid-skeleton">
-      <view v-for="i in 12" :key="i" class="skeleton-card">
+      <view v-for="i in 11" :key="i" class="skeleton-card">
         <view class="skeleton-image"></view>
         <view class="skeleton-info">
           <view class="skeleton-avatar"></view>
@@ -18,137 +18,203 @@
 
     <!-- 内容网格 -->
     <view v-else class="items-grid">
-      <view v-for="(item, index) in items" :key="item.id || index" class="grid-card" @click="handleCardClick(item)">
+      <view
+        v-for="(item, index) in items"
+        :key="item.id || index"
+        class="grid-card"
+        @click="handleCardClick(item)"
+      >
         <!-- 点赞动效波纹 -->
-        <view class="wf-like-wave wf-like-wave-outer" :class="{ 'wf-like-wave-active': likingMap[item.id] }" />
-        <view class="wf-like-wave wf-like-wave-inner" :class="{ 'wf-like-wave-active': likingMap[item.id] }" />
+        <view
+          class="wf-like-wave wf-like-wave-outer"
+          :class="{ 'wf-like-wave-active': likingMap[item.id] }"
+        />
+        <view
+          class="wf-like-wave wf-like-wave-inner"
+          :class="{ 'wf-like-wave-active': likingMap[item.id] }"
+        />
         <!-- 底部信息模块：独立于图片 -->
-        <view class="card-bottom">
-          <image class="card-image" :src="item.cover_url || item.cover_image || ''" mode="aspectFill"></image>
-          <view class="like-badge">
+        <view class="card-bottom" :class="`card-bottom-${index + 1}`">
+          <image
+            class="card-image"
+            :src="item.cover_url || item.cover_image || ''"
+            mode="aspectFill"
+          ></image>
+          <view class="like-badge" :class="`like-badge-${index + 1}`">
             <view class="like-icon-wrapper">
-              <image class="like-icon"
-                :src="item.is_liked ? '/static/icon/heart-icon.png' : '/static/icon/heart-icon-false.png'"
-                mode="aspectFit">
+              <image
+                class="like-icon"
+                :src="
+                  item.is_liked
+                    ? '/static/icon/heart-icon.png'
+                    : '/static/icon/heart-icon-false.png'
+                "
+                mode="aspectFit"
+              >
               </image>
               <text class="like-count">{{ formatCount(item.like_count) }}</text>
             </view>
           </view>
           <!-- 用户信息 -->
-          <view class="card-info">
+          <view class="card-info" :class="`card-info-${index + 1}`">
             <view class="user-info">
-              <image class="user-avatar" :src="item.owner_avatar || item.creator_avatar || ''" mode="aspectFill">
+              <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>
+              <text class="user-name">{{
+                item.owner_nickname || item.creator_name || item.name || ""
+              }}</text>
             </view>
           </view>
+          <!-- 前三名专属：包裹 card-bottom 的边框 -->
+          <view v-if="index < 3" class="card-frame">
+            <image
+              class="frame-image"
+              :src="TOP_FRAME_MAP[index]"
+              mode="scaleToFill"
+            ></image>
+          </view>
+        </view>
+        <!-- 前三名专属：右上角装饰图（位于 grid-card 层级，避免被 card-bottom 的 overflow 裁切） -->
+        <view v-if="index < 3" class="corner-decoration">
+          <image :src="TOP_ICON_MAP[index]" mode="aspectFit"></image>
         </view>
         <!-- Top 排名标签 -->
-        <view class="top-badge">
+        <view class="top-badge" :class="`top-badge-${index + 1}`">
+          <view
+            v-if="index < 3"
+            class="corner-decoration top-corner-decoration"
+          >
+            <image :src="TOP_ICON_MAP[index]" mode="aspectFit"></image>
+          </view>
           <view class="badge-rank">TOP {{ index + 1 }}</view>
         </view>
       </view>
     </view>
-
   </view>
 </template>
 
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { onShow } from "@dcloudio/uni-app";
-import { getHotRankingApi } from '@/utils/api.js'
+import { getHotRankingApi } from "@/utils/api.js";
 
 const props = defineProps({
   title: {
     type: String,
-    default: '在线榜单'
+    default: "在线榜单",
   },
   dimension: {
     type: String,
-    default: 'displaying'
-  }
-})
+    default: "displaying",
+  },
+});
 
-const emit = defineEmits(['cardClick'])
+const emit = defineEmits(["cardClick"]);
 
-const items = ref([])
-const loading = ref(false)
-const likingMap = ref({})
+const items = ref([]);
+const loading = ref(false);
+const likingMap = ref({});
+
+// 前三名对应的边框图与右上角装饰图
+const TOP_FRAME_MAP = {
+  0: "/static/square/top/TOP1biankuang.png",
+  1: "/static/square/top/TOP2biankuang.png",
+  2: "/static/square/top/TOP3biankuangpng.png",
+};
+const TOP_ICON_MAP = {
+  0: "/static/square/top/TOP1icon.png",
+  1: "/static/square/top/TOP2icon.png",
+  2: "/static/square/top/TOP3icon.png",
+};
 
 // 监听 dimension 变化，重新加载数据
-watch(() => props.dimension, () => {
-  loadData()
-})
+watch(
+  () => props.dimension,
+  () => {
+    loadData();
+  },
+);
 
 // 格式化数量
 const formatCount = (count) => {
-  if (!count) return '0'
-  if (count >= 10000) return (count / 10000).toFixed(1) + 'w'
-  if (count >= 1000) return (count / 1000).toFixed(1) + 'k'
-  return count.toString()
-}
+  if (!count) return "0";
+  if (count >= 10000) return (count / 10000).toFixed(1) + "w";
+  if (count >= 1000) return (count / 1000).toFixed(1) + "k";
+  return count.toString();
+};
 
 const handleCardClick = (item) => {
-  emit('cardClick', item)
-}
+  emit("cardClick", item);
+};
 
 // 监听全局点赞事件，更新状态
 const onAssetLiked = ({ asset_id, data }) => {
-  const index = items.value.findIndex(item => (item.asset_id || item.id) === asset_id)
+  const index = items.value.findIndex(
+    (item) => (item.asset_id || item.id) === asset_id,
+  );
   if (index !== -1) {
-    const updatedItems = [...items.value]
+    const updatedItems = [...items.value];
     updatedItems[index] = {
       ...updatedItems[index],
       is_liked: data?.is_liked ?? true,
-      like_count: data?.new_like_count ?? (updatedItems[index].like_count || 0) + 1
-    }
-    items.value = updatedItems
+      like_count:
+        data?.new_like_count ?? (updatedItems[index].like_count || 0) + 1,
+    };
+    items.value = updatedItems;
     // 触发动画
-    likingMap.value = { ...likingMap.value, [asset_id]: true }
+    likingMap.value = { ...likingMap.value, [asset_id]: true };
     setTimeout(() => {
-      likingMap.value = { ...likingMap.value, [asset_id]: false }
-    }, 600)
+      likingMap.value = { ...likingMap.value, [asset_id]: false };
+    }, 600);
   }
-}
+};
 
 // 加载数据
 const loadData = async () => {
-  loading.value = true
+  loading.value = true;
   try {
-    const res = await getHotRankingApi(props.dimension, null, 1, 12)
+    const res = await getHotRankingApi(props.dimension, null, 1, 11);
     if (res.code === 200 && res.data?.items) {
-      items.value = res.data.items.map(item => ({
+      items.value = res.data.items.map((item) => ({
         ...item,
-        id: item.id || item.asset_id
-      }))
+        id: item.id || item.asset_id,
+      }));
     }
   } catch (e) {
-    console.error('[HotCategoryBlock] 加载数据失败', e?.message ?? e)
+    console.error("[HotCategoryBlock] 加载数据失败", e?.message ?? e);
   } finally {
-    loading.value = false
+    loading.value = false;
   }
-}
+};
 
 onMounted(() => {
-  
-  uni.$on('assetLiked', onAssetLiked)
-})
+  uni.$on("assetLiked", onAssetLiked);
+});
 
-onShow(()=>{
-  loadData()
-})
+onShow(() => {
+  loadData();
+});
 
 onUnmounted(() => {
-  uni.$off('assetLiked', onAssetLiked)
-})
+  uni.$off("assetLiked", onAssetLiked);
+});
 </script>
 
 <style scoped>
 .hot-category-block {
-  padding: 14rpx 14rpx 0;
+  padding: 19rpx 9.5rpx;
   border-radius: 24rpx;
   opacity: 0.8;
-  background: linear-gradient(161.28deg, rgba(255, 90, 93, 0.2) 16.63%, rgba(76, 237, 255, 0.2) 48.19%, rgba(255, 122, 124, 0.2) 83.71%);
+  background: linear-gradient(
+    161.28deg,
+    rgba(255, 90, 93, 0.2) 16.63%,
+    rgba(76, 237, 255, 0.2) 48.19%,
+    rgba(255, 122, 124, 0.2) 83.71%
+  );
   backdrop-filter: blur(9.300000190734863px);
   position: relative;
 }
@@ -163,8 +229,13 @@ onUnmounted(() => {
   border-top-right-radius: 8rpx;
   border-bottom-right-radius: 44rpx;
   border-bottom-left-radius: 4rpx;
-  background: linear-gradient(90deg, rgba(255, 0, 4, 0.73) -3.96%, rgba(254, 141, 103, 0.73) 57.95%, rgba(252, 228, 75, 0.73) 97%);
-  box-shadow: 2px 2px 4px 0px #D9262640;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 0, 4, 0.73) -3.96%,
+    rgba(254, 141, 103, 0.73) 57.95%,
+    rgba(252, 228, 75, 0.73) 97%
+  );
+  box-shadow: 2px 2px 4px 0px #d9262640;
   backdrop-filter: blur(7.599999904632568px);
   display: flex;
   align-items: center;
@@ -196,14 +267,28 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
+/* 骨架屏：第一排3个大图 */
+.skeleton-card:nth-child(-n + 3) {
+  width: calc(33.333% - 12rpx);
+}
+
 .skeleton-image {
   width: 100%;
-  height: 320rpx;
+  height: 192rpx;
   background: linear-gradient(90deg, #3a3a4a 25%, #4a4a5a 50%, #3a3a4a 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
 }
 
+/* 骨架屏：第一排图片更高 */
+.skeleton-card:nth-child(-n + 3) .skeleton-image {
+  height: 236rpx;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 24px;
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 21px;
+}
+
 .skeleton-info {
   display: flex;
   align-items: center;
@@ -240,22 +325,73 @@ onUnmounted(() => {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-
 }
 
 .grid-card {
   width: calc(25% - 12rpx);
   border-radius: 16rpx;
-  overflow: hidden;
+  /* overflow: hidden; */
   position: relative;
 }
 
+/* 第一排：3个大图突出显示 */
+.grid-card:nth-child(-n + 3) {
+  width: calc(33.333% - 12rpx);
+}
+
+.grid-card:nth-child(-n + 3) .card-image {
+  height: 236rpx;
+  box-shadow: 3px 3px 4.5px 2px rgba(0, 0, 0, 0.15);
+  backdrop-filter: blur(0px);
+  padding: 8rpx;
+  box-sizing: border-box;
+}
+
 .card-image {
   width: 100%;
   height: 192rpx;
   display: block;
 }
 
+/* 前三名专属：包裹 card-bottom 的边框 */
+.card-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+  pointer-events: none;
+}
+
+.frame-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.corner-decoration {
+  position: absolute;
+  top: -16rpx;
+  right: -16rpx;
+  width: 64rpx;
+  height: 64rpx;
+  z-index: 6;
+  pointer-events: none;
+  transform: rotate(60deg);
+}
+
+.corner-decoration.top-corner-decoration {
+  left: -24rpx;
+  right: 0;
+}
+
+.corner-decoration image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
 /* 底部信息模块 - 独立模块，有背景色和圆角 */
 .card-bottom {
   background: rgba(255, 255, 255, 0.15);
@@ -264,42 +400,77 @@ onUnmounted(() => {
   position: relative;
 }
 
+.card-bottom-1,
+.card-bottom-2,
+.card-bottom-3 {
+  border-radius: 28rpx;
+}
+
 /* Top 排名标签 */
 .top-badge {
   width: 80rpx;
   height: 32rpx;
   border-radius: 16rpx;
   margin: 16rpx auto;
-  background: linear-gradient(93.1deg, rgba(224, 180, 247, 0.71) -12.06%, rgba(178, 246, 204, 0.71) 52.09%, rgba(98, 178, 244, 0.71) 163.5%);
+  background: linear-gradient(
+    93.1deg,
+    rgba(224, 180, 247, 0.71) -12.06%,
+    rgba(178, 246, 204, 0.71) 52.09%,
+    rgba(98, 178, 244, 0.71) 163.5%
+  );
   backdrop-filter: blur(11.699999809265137px);
-  overflow: hidden;
+  /* overflow: hidden; */
+}
+
+.top-badge-1,
+.top-badge-2,
+.top-badge-3 {
+  padding-left: 24rpx;
 }
 
 .badge-rank {
   width: 80rpx;
   height: 32rpx;
-  color: #FFFABD;
+  color: #fffabd;
   font-size: 18rpx;
   font-weight: 600;
   border-radius: 16rpx;
   display: flex;
   align-items: center;
   justify-content: center;
-  text-shadow: -1px 1px 4px #CE0909D6;
-  ;
+  text-shadow: -1px 1px 4px #ce0909d6;
 }
 
 /* 用户信息 */
 .card-info {
+  width: 100%;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: 0 16rpx 16rpx;
+  padding: 8rpx;
+  border-top-left-radius: 7px;
+  border-top-right-radius: 7px;
+  position: absolute;
+  bottom: 0;
+  background: linear-gradient(
+    177.83deg,
+    rgba(235, 228, 219, 0) 11.38%,
+    rgba(138, 135, 131, 0.4) 23.67%,
+    rgba(255, 231, 231, 0.6) 43.04%,
+    rgba(255, 255, 255, 0.9) 67.52%,
+    #ffffff 98.2%
+  );
+  backdrop-filter: blur(0px);
+}
+
+.card-info-1,
+.card-info-2,
+.card-info-3 {
+  padding-bottom: 16rpx;
 }
 
 .user-info {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
 }
 
 .user-avatar {
@@ -310,8 +481,9 @@ onUnmounted(() => {
 }
 
 .user-name {
-  font-size: 22rpx;
-  color: #fff;
+  font-size: 18rpx;
+  font-weight: 400;
+  color: #554545;
   max-width: 120rpx;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -327,12 +499,22 @@ onUnmounted(() => {
   opacity: 1;
   border-top-left-radius: 7px;
   border-bottom-right-radius: 21.5px;
-  background: linear-gradient(177.83deg, rgba(83, 244, 211, 0.2) 2.52%, rgba(15, 9, 0, 0) 69.07%);
+  background: linear-gradient(
+    177.83deg,
+    rgba(83, 244, 211, 0.2) 2.52%,
+    rgba(15, 9, 0, 0) 69.07%
+  );
 
   backdrop-filter: blur(0px);
   z-index: 5;
 }
 
+.like-badge-1,
+.like-badge-2,
+.like-badge-3 {
+  padding: 10rpx 0 0 10rpx;
+}
+
 .like-icon-wrapper {
   display: flex;
   align-items: center;
@@ -369,15 +551,19 @@ onUnmounted(() => {
 }
 
 .wf-like-wave-outer {
-  background: radial-gradient(circle,
-      rgba(255, 107, 107, 0.8) 0%,
-      transparent 70%);
+  background: radial-gradient(
+    circle,
+    rgba(255, 107, 107, 0.8) 0%,
+    transparent 70%
+  );
 }
 
 .wf-like-wave-inner {
-  background: radial-gradient(circle,
-      rgba(255, 184, 0, 0.6) 0%,
-      transparent 70%);
+  background: radial-gradient(
+    circle,
+    rgba(255, 184, 0, 0.6) 0%,
+    transparent 70%
+  );
 }
 
 .wf-like-wave-active {
diff --git a/frontend/pages/square/square.vue b/frontend/pages/square/square.vue
index 8e7f5e4..18d2ea9 100644
--- a/frontend/pages/square/square.vue
+++ b/frontend/pages/square/square.vue
@@ -1,39 +1,76 @@
 <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>
+    <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>
 
-      <ContentTabs class="tabs" :modelValue="activeContentTab" @update:modelValue="activeContentTab = $event" />
+      <ContentTabs
+        class="tabs"
+        :modelValue="activeContentTab"
+        @update:modelValue="activeContentTab = $event"
+      />
 
       <!-- 在线榜单区块 -->
       <view class="hot-category-wrapper">
-        <HotCategoryBlock :dimension="activeContentTab" @cardClick="handleCardClick" />
+        <HotCategoryBlock
+          :dimension="activeContentTab"
+          @cardClick="handleCardClick"
+        />
         <view class="hot-more-btn" @click="goToHotCategoryMore">
           <text class="hot-more-text">查看更多</text>
         </view>
@@ -41,99 +78,129 @@
 
       <!-- 区域二：主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)' }">
+        <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 }">
+      <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: activeCategoryTab === category.value }" @click="handleCategoryChange(category.value)">
+          <view
+            v-for="(category, index) in categories"
+            :key="index"
+            class="category-item"
+            :class="{ active: activeCategoryTab === category.value }"
+            @click="handleCategoryChange(category.value)"
+          >
             <text class="category-text">{{ category.label }}</text>
           </view>
         </scroll-view>
       </view>
 
       <!-- 区域四：创作网格列表 -->
-      <CreationGrid :screenWidth="screenWidth" :screenHeight="screenHeight" :bannerBottom="bannerBottomPx"
-        :category="activeCategoryTab" :isActive="isActive" @cardClick="handleCardClick" ref="creationGridRef" />
+      <CreationGrid
+        :screenWidth="screenWidth"
+        :screenHeight="screenHeight"
+        :bannerBottom="bannerBottomPx"
+        :category="activeCategoryTab"
+        :isActive="isActive"
+        @cardClick="handleCardClick"
+        ref="creationGridRef"
+      />
     </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
-import { useStore } from 'vuex'
-import Header from '../components/Header.vue'
-import BottomNav from '../components/BottomNav.vue'
-import GuideOverlay from '@/components/GuideOverlay.vue'
-import RankingModal from '../components/RankingModal.vue'
-import BannerCarousel from './components/BannerCarousel.vue'
-import ContentTabs from './components/ContentTabs.vue'
-import HotCategoryBlock from './components/HotCategoryBlock.vue'
-import CreationGrid from './components/CreationGrid.vue'
+import { ref, computed, watch, onMounted, onUnmounted } from "vue";
+import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
+import { useStore } from "vuex";
+import Header from "../components/Header.vue";
+import BottomNav from "../components/BottomNav.vue";
+import GuideOverlay from "@/components/GuideOverlay.vue";
+import RankingModal from "../components/RankingModal.vue";
+import BannerCarousel from "./components/BannerCarousel.vue";
+import ContentTabs from "./components/ContentTabs.vue";
+import HotCategoryBlock from "./components/HotCategoryBlock.vue";
+import CreationGrid from "./components/CreationGrid.vue";
 // import { clearSubStepProgress, shouldShowGuideStartModal } from '@/utils/guideConfig.js'
-import { useBanner } from './composables/useBanner.js'
-import { doubleTapLike } from '@/utils/likeHelper.js'
+import { useBanner } from "./composables/useBanner.js";
+import { doubleTapLike } from "@/utils/likeHelper.js";
 
 // ========== Store & User Info ==========
-const store = useStore()
+const store = useStore();
 // const currentUserNickname = computed(() => store.state.user?.userInfo?.nickname || '')
-const currentStarId = ref(uni.getStorageSync('star_id') || null)
+const currentStarId = ref(uni.getStorageSync("star_id") || null);
 
 // ========== UI State ==========
-const activeContentTab = ref('displaying')
-const activeCategoryTab = ref('hot')
-const navExpanded = ref(false)
-const showRankingModal = ref(false)
-const isActive = ref(true)
-const isFixed = ref(false)
-const creationGridRef = ref(null)
-const cardTapTimers = {}
-const likingMap = ref({})
+const activeContentTab = ref("displaying");
+const activeCategoryTab = ref("hot");
+const navExpanded = ref(false);
+const showRankingModal = ref(false);
+const isActive = ref(true);
+const isFixed = ref(false);
+const creationGridRef = ref(null);
+const cardTapTimers = {};
+const likingMap = ref({});
 
 // 主Tab配置
 const mainTabs = ref([
   {
-    name: '星卡',
-    type: 'star_card',
-    icon: '/static/square/xingka.png',
+    name: "星卡",
+    type: "star_card",
+    icon: "/static/square/xingka.png",
     width: 96,
     height: 96,
-    rotate: -15
+    rotate: -15,
   },
   {
-    name: '吧唧',
-    type: 'badge',
-    icon: '/static/square/baji.png',
+    name: "吧唧",
+    type: "badge",
+    icon: "/static/square/baji.png",
     width: 100,
     height: 100,
-    rotate: 0
+    rotate: 0,
   },
   {
-    name: '海报',
-    type: 'poster',
-    icon: '/static/square/haibao.png',
+    name: "海报",
+    type: "poster",
+    icon: "/static/square/haibao.png",
     width: 100,
     height: 108,
-    rotate: -15
-  }
+    rotate: -15,
+  },
 ]);
 
 // ========== 分类配置 ==========
 const categories = ref([
-  { label: '热门作品', value: 'hot' },
-  { label: '最新作品', value: 'latest' },
-  { label: '星卡', value: 'star_card' },
-  { label: '吧唧', value: 'badge' },
-  { label: '海报', value: 'poster' }
-])
+  { label: "热门作品", value: "hot" },
+  { label: "最新作品", value: "latest" },
+  { label: "星卡", value: "star_card" },
+  { label: "吧唧", value: "badge" },
+  { label: "海报", value: "poster" },
+]);
 
 // ========== Watch activeContentTab ==========
 // watch(activeContentTab, (newTab) => {
@@ -144,17 +211,16 @@ const categories = ref([
 // })
 
 // ========== Screen Info ==========
-const screenWidth = ref(375)
-const screenHeight = ref(812)
+const screenWidth = ref(375);
+const screenHeight = ref(812);
 
 // ========== Composables ==========
-const {
-  bannerActivities,
-  loadBannerActivities,
-} = useBanner()
+const { bannerActivities, loadBannerActivities } = useBanner();
 
 // banner(216+360rpx) + tab栏(16+80rpx) + 间距(8rpx) ≈ 680rpx
-const bannerBottomPx = computed(() => Math.round(screenWidth.value / 750 * 715))
+const bannerBottomPx = computed(() =>
+  Math.round((screenWidth.value / 750) * 715),
+);
 
 // ========== Handlers ==========
 
@@ -164,7 +230,6 @@ const handleCardClick = (card) => {
     clearTimeout(cardTapTimers[card.id]);
     delete cardTapTimers[card.id];
 
-
     // 触发动画
     likingMap.value = { ...likingMap.value, [card.id]: true };
     setTimeout(() => {
@@ -173,7 +238,7 @@ const handleCardClick = (card) => {
 
     doubleTapLike(card.id, card.exhibition_id || 0, (success) => {
       if (success) {
-        uni.showToast({ title: '点赞成功', icon: 'success' })
+        uni.showToast({ title: "点赞成功", icon: "success" });
       }
     });
   } else {
@@ -181,96 +246,103 @@ const handleCardClick = (card) => {
     if (card.id) {
       cardTapTimers[card.id] = setTimeout(() => {
         delete cardTapTimers[card.id];
-        uni.navigateTo({ url: `/pages/asset-detail/asset-detail?asset_id=${card.id}` });
+        uni.navigateTo({
+          url: `/pages/asset-detail/asset-detail?asset_id=${card.id}`,
+        });
       }, 300);
     }
   }
-}
+};
 
 const handleScrollToLower = () => {
   if (creationGridRef.value) {
-    creationGridRef.value.loadMore()
+    creationGridRef.value.loadMore();
   }
-}
+};
 
 const handleActivityClick = (item) => {
   uni.navigateTo({
     url: `/pages/support-activity/index?id=${item.id}`,
-  })
-}
+  });
+};
 
 const handleRankingVisit = ({ userId, nickname }) => {
-  showRankingModal.value = false
+  showRankingModal.value = false;
   uni.navigateTo({
-    url: `/pages/profile/hisWorks?userId=${userId}&nickname=${encodeURIComponent(nickname)}`
+    url: `/pages/profile/hisWorks?userId=${userId}&nickname=${encodeURIComponent(nickname)}`,
   });
-}
+};
 
 const handleRankingModalClose = (visible) => {
-  showRankingModal.value = visible
+  showRankingModal.value = visible;
   if (!visible && store.state.guide.componentMode) {
-    uni.$emit('guide:closeComponent')
+    uni.$emit("guide:closeComponent");
   }
-}
+};
 
 const goToHotCategoryMore = () => {
-  const title = activeContentTab.value === 'displaying' ? '日榜' : activeContentTab.value === 'week' ? '周榜' : '月榜'
+  const title =
+    activeContentTab.value === "displaying"
+      ? "日榜"
+      : activeContentTab.value === "week"
+        ? "周榜"
+        : "月榜";
   uni.navigateTo({
-    url: `/pages/square/hot-category-more?dimension=${activeContentTab.value}&title=${encodeURIComponent(title)}`
-  })
-}
+    url: `/pages/square/hot-category-more?dimension=${activeContentTab.value}&title=${encodeURIComponent(title)}`,
+  });
+};
 
 const handleTabChange = (newTab) => {
   if (newTab === 4) {
-    navExpanded.value = false
-    return
+    navExpanded.value = false;
+    return;
   }
 
   const routes = [
-    '/pages/ai-dazi/index',
-    '/pages/starbook/index',
-    '/pages/castlove/mall',
-    '/pages/starcity/index',
-    '/pages/square/square'
-  ]
+    "/pages/ai-dazi/index",
+    "/pages/starbook/index",
+    "/pages/castlove/mall",
+    "/pages/starcity/index",
+    "/pages/square/square",
+  ];
 
   if (newTab >= 0 && newTab < routes.length) {
     uni.navigateTo({
-      url: routes[newTab]
-    })
+      url: routes[newTab],
+    });
   }
-}
+};
 
 const handleCategoryChange = (value) => {
-  if (activeCategoryTab.value === value) return
-  activeCategoryTab.value = value
-}
+  if (activeCategoryTab.value === value) return;
+  activeCategoryTab.value = value;
+};
 
 // ========== Tile Change Callback ==========
-const handleTileChange = () => { }
+const handleTileChange = () => {};
 
 // ========== Reset Square ==========
-const resetSquare = async () => { }
+const resetSquare = async () => {};
 
 // ========== Lifecycle ==========
 onMounted(() => {
-  const info = uni.getSystemInfoSync()
-  screenWidth.value = info.windowWidth
-  screenHeight.value = info.windowHeight
+  const info = uni.getSystemInfoSync();
+  screenWidth.value = info.windowWidth;
+  screenHeight.value = info.windowHeight;
 
-  resetSquare()
-  loadBannerActivities()
-})
+  resetSquare();
+  loadBannerActivities();
+});
 
 onShow(() => {
-  isActive.value = true
-  activeContentTab.value = 'displaying'
-  activeCategoryTab.value = 'hot'
-})
+  isActive.value = true;
+  activeContentTab.value = "displaying";
+  activeCategoryTab.value = "hot";
+});
 
 onHide(() => {
-  isActive.value = false
-})
+  isActive.value = false;
+});
 
 // onLoad((options) => {
 //   if (options && 'guide_debug' in options) {
@@ -298,15 +370,15 @@ onHide(() => {
 // })
 
 // 监听引导打开组件事件
-uni.$on('guide:openComponent', (componentName) => {
-  if (componentName === 'RankingModal') {
-    showRankingModal.value = true
+uni.$on("guide:openComponent", (componentName) => {
+  if (componentName === "RankingModal") {
+    showRankingModal.value = true;
   }
-})
+});
 
 onUnmounted(() => {
-  uni.$off('guide:openComponent')
-})
+  uni.$off("guide:openComponent");
+});
 </script>
 
 <style scoped>
@@ -361,7 +433,11 @@ onUnmounted(() => {
   justify-content: space-around;
   width: 200rpx;
   height: 200rpx;
-  background: linear-gradient(135deg, rgba(240, 228, 177, 0.3), rgba(240, 131, 153, 0.3));
+  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;
@@ -416,7 +492,7 @@ onUnmounted(() => {
 }
 
 .category-item.active {
-  background: linear-gradient(135deg, #F0E4B1, #F08399);
+  background: linear-gradient(135deg, #f0e4b1, #f08399);
   box-shadow: 0 4rpx 12rpx rgba(255, 107, 157, 0.4);
 }
 
@@ -446,8 +522,15 @@ onUnmounted(() => {
   border-radius: 20rpx;
   opacity: 0.66;
   padding: 8rpx 20rpx;
-  background: linear-gradient(90deg, rgba(255, 222, 8, 0.61) -17.54%, rgba(255, 0, 25, 0.61) 116.67%);
-  box-shadow: 2px 2px 4px 0px #F2151578;
+  background: linear-gradient(
+    90deg,
+    rgba(255, 222, 8, 0.61) -17.54%,
+    rgba(255, 0, 25, 0.61) 116.67%
+  );
+  box-shadow: 2px 2px 4px 0px #f2151578;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .hot-more-text {
diff --git a/frontend/static/square/top/TOP1biankuang.png b/frontend/static/square/top/TOP1biankuang.png
new file mode 100644
index 0000000..33bd31c
Binary files /dev/null and b/frontend/static/square/top/TOP1biankuang.png differ
diff --git a/frontend/static/square/top/TOP1icon.png b/frontend/static/square/top/TOP1icon.png
new file mode 100644
index 0000000..993479c
Binary files /dev/null and b/frontend/static/square/top/TOP1icon.png differ
diff --git a/frontend/static/square/top/TOP2biankuang.png b/frontend/static/square/top/TOP2biankuang.png
new file mode 100644
index 0000000..2a2e082
Binary files /dev/null and b/frontend/static/square/top/TOP2biankuang.png differ
diff --git a/frontend/static/square/top/TOP2icon.png b/frontend/static/square/top/TOP2icon.png
new file mode 100644
index 0000000..26d0172
Binary files /dev/null and b/frontend/static/square/top/TOP2icon.png differ
diff --git a/frontend/static/square/top/TOP3biankuangpng.png b/frontend/static/square/top/TOP3biankuangpng.png
new file mode 100644
index 0000000..0551b73
Binary files /dev/null and b/frontend/static/square/top/TOP3biankuangpng.png differ
diff --git a/frontend/static/square/top/TOP3icon.png b/frontend/static/square/top/TOP3icon.png
new file mode 100644
index 0000000..ff7c02a
Binary files /dev/null and b/frontend/static/square/top/TOP3icon.png differ