diff --git a/frontend/pages/asset-detail/asset-detail.vue b/frontend/pages/asset-detail/asset-detail.vue
index 094d13a..e6d19c2 100644
--- a/frontend/pages/asset-detail/asset-detail.vue
+++ b/frontend/pages/asset-detail/asset-detail.vue
@@ -1,12 +1,12 @@
 <template>
 	<view class="detail-container">
 		<!-- 背景图片 -->
-		<image class="background-image" src="/static/background/starbook.jpg" mode="aspectFill"></image>
+		<image class="background-image" src="/static/square/squearbj.png" mode="aspectFill"></image>
 
 		<!-- Header -->
 		<view class="header-bar">
 			<view class="back-btn" @tap="handleBack">
-				<text class="back-icon">←</text>
+				<image class="back-icon" src="/static/starbookcontent/tuichu.png" mode="aspectFit"></image>
 			</view>
 		</view>
 
@@ -38,19 +38,26 @@
 				<!-- 藏品卡片区域 -->
 				<view class="card-section">
 					<view class="card-wrapper">
-						<NftCard :cover-image="coverUrl" :width="cardSize" :height="cardSize"
-							:custom-style="nftCardStyle" />
+						<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png" mode="aspectFit">
+						</image>
+						<image class="card-image" :src="coverUrl" mode="aspectFill"></image>
+						<!-- <view class="card-badge"></view> -->
 					</view>
 
-					<!-- 点赞 + 倒计时行 -->
+					<!-- 点赞 + 收益 + 倒计时行 -->
 					<view class="card-meta-row">
 						<!-- 点赞 -->
 						<view class="like-area" @tap="handleLike">
-							<image :src="isLiked ? '/static/icon/like-after.png' : '/static/icon/like-before.png'"
-								class="like-icon" mode="aspectFit" />
+							<image :src="isLiked ? '/static/icon/like-after.png' : '/static/icon/like-before.png'" class="like-icon" mode="aspectFit"></image>
 							<text class="like-num">{{ likeCount }}</text>
 						</view>
 
+						<!-- 收益 -->
+						<view class="earnings-area">
+							<image class="crystal-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
+							<text class="earnings-text">{{ assetData.earnings || 0 }}/时</text>
+						</view>
+
 						<!-- 倒计时（如有） -->
 						<view v-if="showCountdown" class="countdown-area">
 							<view class="countdown-pill">
@@ -60,54 +67,132 @@
 					</view>
 				</view>
 
-				<!-- 持有人 + 获取时间 -->
-				<view class="owner-section">
-					<view class="owner-row">
-						<view class="owner-info">
-							<text class="owner-label">持有人</text>
-							<text class="owner-name">{{ assetData.owner_nickname || '未知' }}</text>
+				<!-- 信息行（创作者 + 铸造时间 + 来源） -->
+				<view class="info-row">
+					<view class="info-col">
+						<view class="info-item">
+							<text class="info-label">创作者</text>
+							<text class="info-value">{{ assetData.owner_nickname || '未知' }}</text>
 						</view>
 					</view>
-					<view class="acquire-row">
-						<text class="acquire-label">获取时间</text>
-						<text class="acquire-value">{{ formattedAcquireTime }}</text>
+					<view class="info-col">
+						<view class="info-item">
+							<text class="info-label">铸造时间</text>
+							<text class="info-value">{{ formattedAcquireTime }}</text>
+						</view>
+					</view>
+					<view class="info-col">
+						<view class="info-item">
+							<text class="info-label">来源</text>
+							<text class="info-value">{{ assetData.source || '铸造' }}</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 创作者信息模块 -->
+				<view class="creator-section" @tap="showLikeUsersModal = true">
+					<!-- 点赞用户头像区域 -->
+					<view class="liked-users-area">
+						<view
+							v-for="(user, index) in likedUsers"
+							:key="index"
+							class="liked-user-avatar"
+							:style="{
+								transform: `translate(${user.ellipseX || 0}rpx, ${user.ellipseY || 0}rpx) scale(${user.size || 1})`,
+								zIndex: index < 2 ? index + 1 : (index < 4 ? index + 3 : index + 1)
+							}"
+						>
+							<image class="liked-user-image" :src="user.avatar" mode="aspectFill"></image>
+						</view>
+					</view>
+					<view class="creator-info">
+						<text class="creator-title">TA们最近为你点过赞</text>
+						<view class="creator-card">
+							<text class="creator-tip">点击查看</text>
+							<image class="creator-preview" src="/static/rank/activity-support-icon/tubiao.png" mode="aspectFill"></image>
+						</view>
 					</view>
 				</view>
 
 				<!-- 链上数据 -->
 				<view class="chain-section">
-					<view class="chain-row">
-						<text class="chain-label">数根名称</text>
-						<text class="chain-value">{{ assetData.name || '未知' }}</text>
-					</view>
-					<view class="chain-row">
-						<text class="chain-label">数根编号</text>
-						<text class="chain-value">{{ assetData.asset_id || '未知' }}</text>
-					</view>
-					<view class="chain-row">
-						<text class="chain-label">数根发行方</text>
-						<text class="chain-value">TOPFANS</text>
-					</view>
-					<view class="chain-row">
-						<text class="chain-label">区块链编号</text>
-						<text class="chain-value">{{ assetData.block_number || '未知' }}</text>
-					</view>
-					<view class="chain-row">
-						<text class="chain-label">交易哈希</text>
-						<text class="chain-value chain-hash" @longpress="copyHash">{{ displayTxHash }}</text>
+					<image class="chain-logo" src="/static/logo/APPLOGO.png" mode="aspectFit"></image>
+					<view class="chain-left">
+						<view class="chain-row">
+							<text class="chain-label">数根名称</text>
+							<view class="chain-value-wrap">
+								<text class="chain-value">{{ assetData.name || '未知' }}</text>
+							</view>
+						</view>
+						<view class="chain-row">
+							<text class="chain-label">数根发行方</text>
+							<view class="chain-value-wrap">
+								<text class="chain-value">TOPFANS</text>
+							</view>
+						</view>
+						<view class="chain-row">
+							<text class="chain-label">区块链编号</text>
+							<view class="chain-value-wrap">
+								<text class="chain-value">{{ showBlockNumber ? (assetData.block_number || '未知') : hiddenBlockNumber }}</text>
+								<view class="toggle-btn" @tap="showBlockNumber = !showBlockNumber">
+									<text class="toggle-icon">{{ showBlockNumber ? '👁' : '👁‍🗨' }}</text>
+								</view>
+							</view>
+						</view>
+						<view class="chain-row">
+							<text class="chain-label">交易哈希</text>
+							<view class="chain-value-wrap">
+								<text class="chain-value chain-hash" @longpress="copyHash">{{ showTxHash ? displayTxHash : hiddenTxHash }}</text>
+								<view class="toggle-btn" @tap="showTxHash = !showTxHash">
+									<text class="toggle-icon">{{ showTxHash ? '👁' : '👁‍🗨' }}</text>
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
+
+		<!-- 点赞用户弹窗 -->
+		<LikeUsersModal
+			:visible="showLikeUsersModal"
+			:tabs="['今日', '历史']"
+			@close="showLikeUsersModal = false"
+			@tab-change="handleLikeUsersTabChange"
+		>
+			<template #content>
+				<view class="like-users-list">
+					<view v-for="(user, index) in displayedLikeUsers" :key="index" class="like-user-item" >
+						<image class="like-user-avatar" :src="user.avatar" mode="aspectFill"></image>
+						<view class="like-user-info">
+							<text class="like-user-name">{{ user.nickname }}</text>
+						</view>
+						<!-- 拜访按钮 -->
+						<view
+							class="visit-button"
+							@tap="handleVisit"
+						>
+							<image
+								class="visit-icon"
+								src="/static/square/dianjibaifang.png"
+								mode="aspectFit"
+								lazy-load
+							></image>
+							<text class="visit-text">点击拜访</text>
+						</view>
+					</view>
+				</view>
+			</template>
+		</LikeUsersModal>
 	</view>
 </template>
 
 <script setup>
 import { ref, computed, onUnmounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
-import NftCard from '../components/NftCard.vue';
 import { getAssetDetailApi, getMintOrderDetailApi, likeAssetApi, unlikeAssetApi } from '@/utils/api.js';
 import { getAssetCoverRealUrl } from '@/utils/assetImageHelper.js';
+import LikeUsersModal from '@/pages/components/LikeUsersModal.vue';
 // 页面参数
 const assetIdParam = ref('');
 const orderIdParam = ref('');
@@ -123,6 +208,51 @@ const isLiked = ref(false);
 const likeCount = ref(0);
 const liking = ref(false);
 
+// 点赞用户头像数据（最多6个，按椭圆排列，每个头像有独立的偏移量配置）
+// avatar: 头像地址, ellipseX: 椭圆X轴坐标, ellipseY: 椭圆Y轴坐标, size: 缩放比例
+const likedUsers = ref([
+	{ avatar: '/static/sucai/image-01.png', ellipseX: -40, ellipseY: -40, size: 0.85 },
+	{ avatar: '/static/sucai/image-02.png', ellipseX: 40, ellipseY: -40, size: 0.85 },
+	{ avatar: '/static/sucai/image-03.png', ellipseX: -96, ellipseY: 0, size: 0.9 },
+	{ avatar: '/static/sucai/image-04.png', ellipseX: 120, ellipseY: -40, size: 0.9 },
+	{ avatar: '/static/sucai/image-05.png', ellipseX: 64, ellipseY: 32},
+	{ avatar: '/static/sucai/image-06.png', ellipseX: -16, ellipseY: 32 ,size:1.15 }
+]);
+
+// 弹窗相关
+const showLikeUsersModal = ref(false);
+const likeUsersActiveTab = ref(0);
+
+// 今日/历史点赞用户数据（模拟）
+const todayLikeUsers = ref([
+	{ userId: '1', nickname: '用户A', avatar: '/static/sucai/image-01.png', time: '10分钟前' },
+	{ userId: '2', nickname: '用户B', avatar: '/static/sucai/image-02.png', time: '30分钟前' },
+	{ userId: '3', nickname: '用户C', avatar: '/static/sucai/image-03.png', time: '1小时前' },
+]);
+const historyLikeUsers = ref([
+	{ userId: '4', nickname: '用户D', avatar: '/static/sucai/image-04.png', time: '昨天' },
+	{ userId: '5', nickname: '用户E', avatar: '/static/sucai/image-05.png', time: '3天前' },
+]);
+
+const displayedLikeUsers = computed(() => {
+	return likeUsersActiveTab.value === 0 ? todayLikeUsers.value : historyLikeUsers.value;
+});
+
+const handleLikeUsersTabChange = ({ tabIndex }) => {
+	likeUsersActiveTab.value = tabIndex;
+};
+
+// 拜访按钮
+const handleVisit = () => {
+	uni.navigateTo({
+		url: `/pages/profile/hisWorks?userId=${user.userId}&nickname=${encodeURIComponent(user.nickname)}`
+	});
+};
+
+// 区块链编号和交易哈希的显示切换
+const showBlockNumber = ref(false);
+const showTxHash = ref(false);
+
 // 倒计时
 const remainSeconds = ref(0);
 let countdownTimer = null;
@@ -136,16 +266,6 @@ const countdownText = computed(() => {
 	return `${h}:${m}:${s}`;
 });
 
-// 卡片尺寸（固定 px）
-const cardSize = 280;
-
-const nftCardStyle = {
-	position: 'relative',
-	pointerEvents: 'none',
-	cursor: 'default',
-	transition: 'none'
-};
-
 // 格式化获取时间（字段名 created_at，来自 getAssetDetailApi 响应）
 const formattedAcquireTime = computed(() => {
 	const raw = assetData.value.created_at || '';
@@ -166,6 +286,23 @@ const displayTxHash = computed(() => {
 	return `${hash.substring(0, 10)}...${hash.substring(hash.length - 8)}`;
 });
 
+// 隐藏交易哈希（保留前6位 + 6个*）
+const hiddenTxHash = computed(() => {
+	const hash = assetData.value.tx_hash;
+	if (!hash) return '******';
+	if (hash.length <= 6) return hash + '******';
+	return `${hash.substring(0, 6)}******`;
+});
+
+// 隐藏区块链编号（保留前6位 + 6个*）
+const hiddenBlockNumber = computed(() => {
+	const num = assetData.value.block_number;
+	if (!num) return '******';
+	const str = String(num);
+	if (str.length <= 6) return str + '******';
+	return `${str.substring(0, 6)}******`;
+});
+
 // 复制完整哈希
 const copyHash = () => {
 	const hash = assetData.value.tx_hash;
@@ -337,13 +474,8 @@ onUnmounted(() => {
 /* Header */
 .header-bar {
 	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	height: 180rpx;
-	display: flex;
-	align-items: flex-end;
-	padding: 0 30rpx 20rpx;
+	top: 32rpx;
+	left: 32rpx;
 	z-index: 100;
 }
 
@@ -358,10 +490,8 @@ onUnmounted(() => {
 }
 
 .back-icon {
-	font-size: 48rpx;
-	color: #1a1a1a;
-	line-height: 1;
-	text-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.6);
+	width: 80rpx;
+	height: 80rpx;
 }
 
 /* 加载/错误 */
@@ -506,7 +636,7 @@ onUnmounted(() => {
 }
 
 .content-wrapper {
-	padding: 200rpx 40rpx 80rpx;
+	padding: 104rpx 40rpx 80rpx;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -519,11 +649,48 @@ onUnmounted(() => {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	margin-bottom: 48rpx;
 }
 
 .card-wrapper {
-	margin-bottom: 28rpx;
+	position: relative;
+	width: 352rpx;
+	height: 520rpx;
+	margin-bottom: 32rpx;
+}
+
+.card-image {
+	width: 88%;
+	height: 96%;
+	left: 6%;
+	top: 1.5%;
+	border-radius: 48rpx;
+	transform-origin: center center;
+	position: absolute;
+	z-index: 3;
+	overflow: hidden;
+	transform: rotate(-10deg);
+}
+
+.card-frame {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	transform: rotate(-10deg);
+
+}
+
+.card-badge {
+	position: absolute;
+	top: 40rpx;
+	left: 40rpx;
+	width: 60rpx;
+	height: 60rpx;
+	background: red;
+	border-radius: 20rpx;
+	z-index: 4;
 }
 
 .card-meta-row {
@@ -539,8 +706,14 @@ onUnmounted(() => {
 	display: flex;
 	align-items: center;
 	gap: 10rpx;
-	background: rgba(0, 0, 0, 0.22);
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
 	border-radius: 999rpx;
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
 	padding: 10rpx 28rpx;
 	backdrop-filter: blur(12rpx);
 }
@@ -549,7 +722,7 @@ onUnmounted(() => {
 	opacity: 0.75;
 }
 
-.like-icon {
+.like-icon, .heart-icon, .crystal-icon {
 	width: 44rpx;
 	height: 44rpx;
 }
@@ -562,6 +735,30 @@ onUnmounted(() => {
 	font-variant-numeric: tabular-nums;
 }
 
+/* 收益 */
+.earnings-area {
+	display: flex;
+	align-items: center;
+	gap: 10rpx;
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
+	border-radius: 999rpx;
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
+	padding: 10rpx 28rpx;
+}
+
+.earnings-text {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #e6e6e6;
+	font-family: 'yt', sans-serif;
+	font-variant-numeric: tabular-nums;
+}
+
 /* 倒计时 */
 .countdown-area {
 	display: flex;
@@ -583,84 +780,155 @@ onUnmounted(() => {
 	font-variant-numeric: tabular-nums;
 }
 
-/* 持有人区域 */
-.owner-section {
+/* 信息行（持有人 + 铸造时间） */
+.info-row {
 	width: 100%;
-	margin-bottom: 40rpx;
 	display: flex;
-	flex-direction: column;
-	align-items: center;
+	align-items: stretch;
+	justify-content: center;
 	gap: 20rpx;
+	padding: 24rpx 32rpx;
+	border-radius: 24rpx;
+	margin-bottom: 40rpx;
+	flex-direction: column;
 }
 
-.owner-row {
+.info-col {
+	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
-.owner-info {
+.info-item {
 	display: flex;
-	flex-direction: column;
-	align-items: center;
-	text-align: center;
-	gap: 4rpx;
+	gap: 8rpx;
+	width: 416rpx;
+    justify-content: space-between;
+    align-items: center;
 }
 
-.owner-label {
-	font-size: 24rpx;
+.info-label {
+	font-size: 32rpx;
 	color: rgba(255, 255, 255, 0.7);
 	font-family: 'yt', sans-serif;
-	text-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.6);
 }
 
-.owner-name {
-	font-size: 36rpx;
+.info-value {
+	font-size: 32rpx;
 	font-weight: bold;
 	color: #ffffff;
 	font-family: 'yt', sans-serif;
 	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.7);
 }
 
-.acquire-row {
+/* 点赞用户头像区域 */
+.liked-users-area {
+	position: relative;
+	flex: 1;
+	height: 184rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.liked-user-avatar {
+	position: absolute;
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 50%;
+	border: 3rpx solid #F0E4B1;
+	overflow: hidden;
+}
+
+.liked-user-image{
+	width: 100%;
+	height: 100%;
+}
+
+/* 创作者信息模块 */
+.creator-section {
+	width: calc(100% - 80rpx);
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 24rpx;
+	padding: 16rpx;
+	background: url('/static/rank/activity-support-icon/beijingkuang.png') no-repeat center center;
+	background-size: 105% 120%;
+	border-radius: 24rpx;
+	margin-bottom: 64rpx;
+}
+
+.creator-avatar {
+	width: 100rpx;
+	height: 100rpx;
+	border-radius: 50%;
+}
+
+.creator-info {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	align-items: center;
-	text-align: center;
-	gap: 4rpx;
+	gap: 12rpx;
 }
 
-.acquire-label {
-	font-size: 24rpx;
-	color: rgba(255, 255, 255, 0.7);
+.creator-title {
+	font-size: 28rpx;
+	color: #fff;
 	font-family: 'yt', sans-serif;
-	text-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.6);
 }
 
-.acquire-value {
+.creator-card {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex-direction: column;
+	gap: 16rpx;
+	border-radius: 16rpx;
+}
+
+.creator-tip {
 	font-size: 32rpx;
-	color: #ffffff;
+	color: #ffcc00;
 	font-family: 'yt', sans-serif;
 	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.7);
 }
 
+.creator-preview {
+	width: 112rpx;
+	height: 80rpx;
+	border-radius: 12rpx;
+}
+
 /* 链上数据 */
 .chain-section {
 	width: calc(100% - 80rpx);
-	background: rgba(0, 0, 0, 0.22);
+	background: url('/static/rank/activity-support-icon/beijingkuang.png') no-repeat center center;
+	background-size: 105% 120%;
 	border-radius: 24rpx;
-	padding: 30rpx 48rpx;
-	backdrop-filter: blur(12rpx);
+	padding: 30rpx 16rpx;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 24rpx;
+}
+
+.chain-left {
+	flex: 1;
 	display: flex;
 	flex-direction: column;
-	gap: 0;
 }
 
 .chain-row {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
-	padding: 18rpx 0;
+}
+
+.chain-logo {
+	width: 156rpx;
+	height: 156rpx;
 }
 
 .chain-label {
@@ -678,9 +946,97 @@ onUnmounted(() => {
 	text-align: right;
 	flex: 1;
 	word-break: break-all;
+	display: flex
+}
+
+.chain-value-wrap {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+	width: 240rpx;
+}
+
+.toggle-btn {
+	padding: 4rpx 8rpx;
+}
+
+.toggle-icon {
+	font-size: 28rpx;
 }
 
 .chain-hash {
 	color: rgba(255, 255, 255, 0.75);
 }
+
+/* 点赞用户列表 */
+.like-users-list {
+	display: flex;
+	flex-direction: column;
+	gap: 24rpx;
+	padding: 16rpx;
+}
+
+.like-user-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding:0 16rpx;
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
+	border-radius: 999rpx;
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
+}
+
+.like-user-avatar {
+	width: 80rpx;
+	height: 80rpx;
+	border-radius: 50%;
+}
+
+.like-user-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	margin: 0 24rpx;
+}
+
+.like-user-name {
+	font-size: 28rpx;
+	color: #fff;
+	font-family: 'yt', sans-serif;
+}
+
+.like-user-time {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.6);
+	font-family: 'yt', sans-serif;
+}
+
+/* 拜访按钮 - 只显示图标 */
+.visit-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 80rpx;
+	height: 80rpx;
+	padding: 8rpx;
+	flex-direction: column;
+}
+
+
+.visit-icon {
+	width: 80rpx;
+	height: 80rpx;
+	margin-bottom: 8rpx;
+	/* transform: scale(1.2); */
+}
+.visit-text{
+	color: #FFFFFF;
+	font-size:16rpx;
+}
+
 </style>
diff --git a/frontend/pages/components/Avatar.vue b/frontend/pages/components/Avatar.vue
index 569ec53..4378eed 100644
--- a/frontend/pages/components/Avatar.vue
+++ b/frontend/pages/components/Avatar.vue
@@ -4,7 +4,7 @@
 			<image class="avatar-image" :src="avatarImage" mode="aspectFill"></image>
 		</view>
 		<view class="level-badge" v-if="showLevel && level" :style="badgeStyle">
-			<text class="level-text" :style="badgeTextStyle">LV{{ level }}</text>
+			<text class="level-text" :style="badgeTextStyle">Lv {{ level }}</text>
 		</view>
 	</view>
 </template>
@@ -155,23 +155,25 @@
 		if (props.size >= 160) {
 			// 大头像（profile页面）
 			return {
-				top: '-10rpx',
-				right: '-10rpx',
+				// top: '-10rpx',
+				// right: '-10rpx',
 				borderRadius: '20rpx',
 				padding: '6rpx 16rpx',
 				border: '3rpx solid rgba(255, 255, 255, 0.8)',
-				boxShadow: '0 4rpx 12rpx rgba(0, 0, 0, 0.3)'
+				boxShadow: '0 4rpx 12rpx rgba(0, 0, 0, 0.3)',
+				bottom: '-10rpx'
 			};
 		} else {
 			// 小头像（好友列表等）
 			const offset = -props.size * 0.18; // 徽章偏移量
 			return {
-				top: `${offset}rpx`,
-				right: `${offset}rpx`,
+				// top: `${offset}rpx`,
+				// right: `${offset}rpx`,
 				borderRadius: '10rpx',
 				padding: '0 8rpx',
 				border: '2rpx solid rgba(255, 255, 255, 0.8)',
-				boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.3)'
+				boxShadow: '0 2rpx 8rpx rgba(0, 0, 0, 0.3)',
+				bottom: `${offset}rpx`
 			};
 		}
 	});
@@ -179,7 +181,7 @@
 	// 徽章文字样式（根据头像大小自适应）
 	const badgeTextStyle = computed(() => {
 		// 根据头像大小调整文字大小
-		const fontSize = props.size >= 160 ? 22 : 18;
+		const fontSize = props.size >= 160 ? 44 : 40;
 		return {
 			fontSize: `${fontSize}rpx`
 		};
@@ -215,11 +217,18 @@
 .level-badge {
 	position: absolute;
 	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	width: 88rpx;
+	height: 24rpx;
+    display: flex;
+    justify-content: center;
 }
 
 .level-text {
-	font-weight: bold;
-	color: #e6e6e6;
+	font-weight: bolder;
+	color: #fff;
+	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
 	line-height: 1;
+	position: relative;
+	top: -24rpx;
 }
 </style>
diff --git a/frontend/pages/components/LikeUsersModal.vue b/frontend/pages/components/LikeUsersModal.vue
new file mode 100644
index 0000000..676e4f0
--- /dev/null
+++ b/frontend/pages/components/LikeUsersModal.vue
@@ -0,0 +1,332 @@
+<template>
+	<view v-if="visible" class="modal-wrapper" @touchmove.stop.prevent @click.stop>
+		<transition name="fade">
+			<view v-if="visible" class="modal-mask" @touchstart.stop="handleMaskTouchStart"
+				@click.stop="handleMaskClick">
+			</view>
+		</transition>
+
+		<transition name="slide-up">
+			<view v-if="visible" class="modal-container" @click.stop>
+				<!-- 背景图片 -->
+				<image class="modal-background" src="/static/rank/activity-support-icon/beijingkuang1.png"
+					mode="aspectFill"></image>
+
+				<!-- 蒙层 -->
+				<view class="modal-overlay"></view>
+
+				<!-- 关闭按钮 -->
+				<view class="close-button" @touchstart.stop="handleCloseTouchStart" @touchend.stop="handleCloseTouchEnd"
+					@click="handleCloseClick">
+					<image class="back-icon" src="/static/starbookcontent/tuichu.png" mode="aspectFit"></image>
+				</view>
+
+				<!-- 内容区域 -->
+				<view class="modal-content" @touchstart.stop @touchend.stop @click.stop>
+					<!-- 标题区域 -->
+					<view class="title-section">
+						<text class="modal-title">TA们最近为你点过赞</text>
+						<image class="title-image" src="/static/rank/activity-support-icon/tubiao.png"
+							mode="aspectFill"></image>
+					</view>
+
+					<!-- 胶囊按钮区域 -->
+					<view class="tab-section">
+						<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
+							:class="{ 'active': activeTabIndex === index }" @tap="handleTabClick(index)">
+							<text class="tab-text">{{ tab }}</text>
+						</view>
+					</view>
+
+					<!-- 可滚动列表区域 -->
+					<scroll-view class="scrollable-content" scroll-y="true" :show-scrollbar="false"
+						:lower-threshold="100" @scrolltolower="handleScrollToLower">
+						<!-- 列表内容插槽 -->
+						<slot name="content"></slot>
+					</scroll-view>
+				</view>
+			</view>
+		</transition>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+	visible: {
+		type: Boolean,
+		default: false
+	},
+	tabs: {
+		type: Array,
+		default: () => ['今日', '历史']
+	}
+});
+
+const emit = defineEmits(['close', 'tab-change', 'scroll-to-lower']);
+
+// 当前选中的标签索引
+const activeTabIndex = ref(0);
+
+// 遮罩层触摸处理
+let maskTouchStartTime = 0;
+const handleMaskTouchStart = (e) => {
+	maskTouchStartTime = Date.now();
+	e.preventDefault();
+	e.stopPropagation();
+};
+
+const handleMaskClick = () => {
+	emit('close');
+};
+
+// 关闭按钮触摸处理
+let closeTouchStartTime = 0;
+let closeTouchLocked = false;
+
+const handleCloseTouchStart = (e) => {
+	closeTouchStartTime = Date.now();
+	closeTouchLocked = false;
+};
+
+const handleCloseTouchEnd = (e) => {
+	if (closeTouchLocked) return;
+	closeTouchLocked = true;
+
+	const touchDuration = Date.now() - closeTouchStartTime;
+	if (touchDuration < 300) {
+		e.preventDefault();
+		e.stopPropagation();
+		emit('close');
+	}
+};
+
+const handleCloseClick = (e) => {
+	e.preventDefault();
+	e.stopPropagation();
+	emit('close');
+};
+
+// 处理标签点击
+const handleTabClick = (index) => {
+	if (activeTabIndex.value === index) return;
+	activeTabIndex.value = index;
+	emit('tab-change', {
+		tabName: props.tabs[index],
+		tabIndex: index
+	});
+};
+
+// 处理滚动到底部
+const handleScrollToLower = () => {
+	emit('scroll-to-lower');
+};
+
+// 暴露方法给父组件
+defineExpose({
+	switchToTab: (indexOrName) => {
+		if (typeof indexOrName === 'number') {
+			activeTabIndex.value = indexOrName;
+		} else {
+			const index = props.tabs.indexOf(indexOrName);
+			if (index !== -1) {
+				activeTabIndex.value = index;
+			}
+		}
+	},
+	getActiveTab: () => props.tabs[activeTabIndex.value],
+	getActiveTabIndex: () => activeTabIndex.value
+});
+</script>
+
+<style scoped>
+.modal-wrapper {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.modal-mask {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0, 0, 0, 0.6);
+	z-index: 1;
+}
+
+.modal-container {
+	position: relative;
+	width: 580rpx;
+	max-height: 85vh;
+	border-radius: 40rpx;
+	overflow: hidden;
+	z-index: 2;
+}
+
+.modal-background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 0;
+	object-fit: cover;
+}
+
+.modal-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+}
+
+.close-button {
+	position: absolute;
+	top: 20rpx;
+	right: 20rpx;
+	width: 60rpx;
+	height: 60rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	cursor: pointer;
+}
+
+.back-icon {
+	width: 56rpx;
+	height: 56rpx;
+}
+
+.close-icon {
+	font-size: 50rpx;
+	color: #e6e6e6;
+	line-height: 1;
+	font-weight: 300;
+}
+
+.modal-content {
+	position: relative;
+	z-index: 2;
+	padding: 60rpx 40rpx 40rpx;
+	display: flex;
+	flex-direction: column;
+}
+
+/* 标题区域 */
+.title-section {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 16rpx;
+	margin-bottom: 32rpx;
+}
+
+.modal-title {
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #e6e6e6;
+	font-family: 'yt', sans-serif;
+	text-shadow: 0 4rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.title-image {
+	width: 112rpx;
+	height: 80rpx;
+	border-radius: 12rpx;
+}
+
+/* 胶囊按钮区域 */
+.tab-section {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	gap: 32rpx;
+	margin-bottom: 24rpx;
+	padding: 12rpx 24rpx;
+	position: relative;
+}
+
+.tab-item {
+	padding: 16rpx 40rpx;
+	border-radius: 999rpx;
+	background: transparent;
+	transition: all 0.3s ease;
+	position: relative;
+}
+
+.tab-section::before {
+	content: '';
+	position: absolute;
+	bottom: -4rpx;
+	left: 96rpx;
+	right: 96rpx;
+	height: 6rpx;
+	background: #ccc;
+	border-radius: 4rpx;
+}
+
+.tab-item.active {
+	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
+	box-shadow:
+		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
+		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
+}
+
+.tab-text {
+	font-size: 28rpx;
+	color: rgba(255, 255, 255, 0.8);
+	font-family: 'yt', sans-serif;
+	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+}
+
+.tab-item.active .tab-text {
+	color: #FFFFFF;
+	font-weight: bold;
+}
+
+/* 可滚动内容区域 */
+.scrollable-content {
+	flex: 1;
+	max-height: 500rpx;
+	overflow-y: auto;
+}
+
+/* 动画效果 */
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+	opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+	transition: all 0.3s ease;
+}
+
+.slide-up-enter-from,
+.slide-up-leave-to {
+	opacity: 0;
+	transform: translateY(100rpx);
+}
+</style>
\ No newline at end of file
diff --git a/frontend/pages/profile/profile.vue b/frontend/pages/profile/profile.vue
index 87db222..69120f5 100644
--- a/frontend/pages/profile/profile.vue
+++ b/frontend/pages/profile/profile.vue
@@ -1,7 +1,7 @@
 <template>
 	<view class="profile-container">
 		<!-- 背景图片 - 固定在容器上 -->
-		<image class="background-image" src="/static/background/starbook.png" mode="aspectFill"></image>
+		<image class="background-image" src="/static/square/squearbj.png" mode="aspectFill"></image>
 		
 		<scroll-view class="profile-scroll" scroll-y :show-scrollbar="false" :enable-back-to-top="true">
 			<!-- 上半部分：用户信息卡片 -->
@@ -11,38 +11,40 @@
 			<view class="background-overlay"></view>
 
 			<!-- Header组件 -->
-			<Header :showBack="true" :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false" />
-
+			<image class="close-icon-img" src="/static/starbookcontent/tuichu.png" mode="aspectFit" @tap="goBack"></image>
+			
 			<!-- 用户信息卡片 -->
 			<view class="user-info-card">
 				<!-- 上半部分：头像和用户信息左右布局 -->
 				<view class="user-main-info">
 					<view @tap="handleAvatarClick" class="avatar-container">
-						<Avatar :key="avatarKey" :userId="uid" :size="180" :borderWidth="6" :showLevel="true"
+						<Avatar :key="avatarKey" :userId="uid" :size="260" :borderWidth="6" :showLevel="true"
 							:level="fanLevel" :avatarUrl="userAvatarUrl" />
 					</view>
 					<view class="user-text-info">
-						<!-- 第1行：等级 + 昵称 + 粉丝标签 -->
-						<view class="name-wrapper">
-							<!-- <text class="level-badge">LV {{ fanLevel }}</text> -->
-							<text class="user-name">{{ nickname }}</text>
-							<view class="fan-tag-badge" v-if="fanTag" @tap="handleFanTagClick">
-								<text class="fan-tag-text">{{ fanTag }}</text>
-								<image class="fan-tag-arrow" src="/static/icon/dropdown-arrow.png" mode="aspectFit">
-								</image>
-							</view>
+						<!-- 昵称 -->
+						<view class="info-row">
+							<text style="font-size: 48rpx;text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);" class="info-value">{{ nickname }}</text>
 						</view>
-						<!-- 第2行：DID -->
-						<text class="user-did">数字身份DID: {{ uid }}</text>
-						<!-- 第3行：区块链地址 -->
-						<view class="blockchain-address-wrapper">
-							<text class="blockchain-address-text">链上地址: {{ displayAddress }}</text>
-							<view class="copy-icon" @tap="copyAddress">
-								<text class="copy-icon-text">📋</text>
-							</view>
+						<!-- DID -->
+						<view class="info-row">
+							<text class="info-label">DID</text>
+							<text class="info-value uid-value">{{ uid }}</text>
+							<view class="info-btn" @tap="copyUid">查看</view>
+						</view>
+						<!-- 链上地址 -->
+						<view class="info-row">
+							<text class="info-label">链上地址</text>
+							<text class="info-value address-value">{{ displayAddress }}</text>
+							<view class="info-btn" @tap="copyAddress">查看</view>
+						</view>
+						<!-- 手机号 -->
+						<view class="info-row">
+							<text class="info-label">注册手机</text>
+							<text class="info-value" v-if="displayMobile">{{ displayMobile }}</text>
+							<text class="info-value" v-else>未绑定</text>
+							<view class="info-btn" @tap="handleViewMobile">查看</view>
 						</view>
-						<!-- 第4行：手机号 -->
-						<text class="user-mobile" v-if="displayMobile">{{ displayMobile }}</text>
 					</view>
 				</view>
 			</view>
@@ -56,8 +58,8 @@
 					<view class="section-title">我的资产</view>
 					<view class="assets-grid">
 						<view class="asset-card" @tap="handleAssetClick('myWorks')">
-							<image class="asset-icon" src="/static/icon/square.png" mode="aspectFit"></image>
-							<text class="asset-text">我的展馆</text>
+							<image class="asset-icon" src="/static/icon/dazi.png" mode="aspectFit"></image>
+							<text class="asset-text">个人中心</text>
 							<!-- <text class="arrow">›</text> -->
 						</view>
 						<view class="asset-card" @tap="handleAssetClick('starbook')">
@@ -421,6 +423,41 @@ const fetchUserInfo = async (forceRefresh = false) => {
 	}
 };
 
+// 复制UID
+const copyUid = () => {
+	if (!uid.value) {
+		uni.showToast({ title: 'UID为空', icon: 'none' });
+		return;
+	}
+	uni.setClipboardData({
+		data: uid.value,
+		success: () => uni.showToast({ title: '已复制UID', icon: 'success' }),
+		fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
+	});
+};
+
+// 查看昵称（复制）
+const handleViewNickname = () => {
+	uni.setClipboardData({
+		data: nickname.value,
+		success: () => uni.showToast({ title: '已复制昵称', icon: 'success' }),
+		fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
+	});
+};
+
+// 查看手机号
+const handleViewMobile = () => {
+	if (!displayMobile.value) {
+		uni.showToast({ title: '未绑定手机号', icon: 'none' });
+		return;
+	}
+	uni.setClipboardData({
+		data: displayMobile.value,
+		success: () => uni.showToast({ title: '已复制手机号', icon: 'success' }),
+		fail: () => uni.showToast({ title: '复制失败', icon: 'none' })
+	});
+};
+
 // 复制区块链地址
 const copyAddress = () => {
 	if (!blockchainAddress.value) {
@@ -1022,6 +1059,11 @@ const confirmLogout = () => {
 	});
 };
 
+// 返回上一页
+const goBack = () => {
+	uni.navigateBack();
+};
+
 // 打开头像修改弹窗
 const handleAvatarClick = () => {
 	showAvatarModal.value = true;
@@ -1247,6 +1289,7 @@ onShow(() => {
 	width: 100%;
 	height: auto;
 	overflow: hidden;
+	margin-bottom: 64rpx;
 }
 
 .background-image {
@@ -1266,13 +1309,21 @@ onShow(() => {
 	display: none;
 }
 
+.close-icon-img{
+	width: 80rpx;
+	height: 80rpx;
+	position: relative;
+    top: 32rpx;
+    left: 32rpx;
+}
+
 .user-info-card {
 	position: relative;
 	z-index: 2;
 	width: 90%;
 	max-width: 600rpx;
 	margin: 0 auto;
-	margin-top: 225rpx;
+	margin-top: 64rpx;
 	padding: 40rpx 0;
 	display: flex;
 	flex-direction: row;
@@ -1284,17 +1335,65 @@ onShow(() => {
 	align-items: flex-start;
 	/* gap: 30rpx; */
 	margin-bottom: 0;
+	
+}
+
+.avatar-container {
+	position: absolute;
+	left: -56rpx;
+	top: 32rpx;
 }
 
 /* 右侧用户文本信息 */
 .user-text-info {
-	flex: 1;
+	/* flex: 1; */
 	display: flex;
 	flex-direction: column;
 	justify-content: flex-end;
-	/* gap: 12rpx; */
-	margin-left: 30rpx;
-	padding-bottom: 10rpx;
+	gap: 8rpx;
+	margin-left: 8rpx;
+	background-image: url(/static/rank/activity-support-icon/beijingkuang.png);
+    background-size: 100% 110%;
+    background-position: center;
+	padding: 24rpx 24rpx 24rpx 240rpx;
+	min-width: 356rpx;
+}
+
+.info-row {
+	display: flex;
+	align-items: center;
+	gap: 12rpx;
+}
+
+.info-label {
+	font-size: 24rpx;
+	color: rgba(255, 255, 255, 0.7);
+	min-width: 112rpx;
+}
+
+.info-value {
+	font-size: 24rpx;
+	color: #ffffff;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.uid-value {
+	max-width: 200rpx;
+}
+
+.address-value {
+	max-width: 160rpx;
+}
+
+.info-btn {
+	font-size: 20rpx;
+	color: #FFD700;
+	padding: 4rpx 16rpx;
+	border: 2rpx solid rgba(255, 215, 0, 0.5);
+	border-radius: 16rpx;
 }
 
 .name-wrapper {
@@ -1400,6 +1499,7 @@ onShow(() => {
 .section-bg {
 	border-radius: 30rpx;
 	padding: 30rpx;
+	margin-bottom: 64rpx;
 }
 
 .section-title {
@@ -1407,7 +1507,7 @@ onShow(() => {
 	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
 	font-weight: bold;
 	color: #fff;
-	margin-bottom: 20rpx;
+	margin-bottom: 8rpx;
 }
 
 .assets-grid {
@@ -1415,34 +1515,40 @@ onShow(() => {
 	grid-template-columns: 1fr 1fr;
 	gap: 20rpx;
 	margin-bottom: 0;
-	height: 192rpx;
+	height: 176rpx;
+	overflow: hidden;
 }
 
 .asset-card {
-	background: rgba(217, 156, 180, 0.3);
-
+	background-image: url(/static/rank/activity-support-icon/beijingkuang.png);
+	background-size: 100% 100%;
+	background-position: center;
 	border-radius: 20rpx;
-	padding: 24rpx 16rpx;
+	padding: 0 16rpx;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-
 	position: relative;
+	height: 192rpx;
 }
 
 .asset-icon {
-	width: 128rpx;
-	height: 128rpx;
-	margin-bottom: 12rpx;
+	width: 178rpx;
+	height: 178rpx;
+	position: absolute;
+	top: 60%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0.4;
 }
 
 .asset-text {
 	font-size: 32rpx;
 	color: #fff;
-	margin-bottom: 8rpx;
 	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
-
+	position: relative;
+	z-index: 1;
 }
 
 .arrow {
@@ -1457,15 +1563,17 @@ onShow(() => {
 
 /* 服务与工具按钮 */
 .service-buttons-container {
-	background: rgba(217, 156, 180, 0.3);
 	display: flex;
 	flex-direction: row;
-	justify-content: flex-start;
+	justify-content: space-between;
 	margin-bottom: 0;
 	flex-wrap: wrap;
 }
 
 .service-button {
+	background-image: url(/static/rank/activity-support-icon/djbeij.jpg);
+	background-size: 100% 100%;
+	background-position: center;
 	border-radius: 20rpx;
 	width: 136rpx;
 	height: 160rpx;
@@ -1473,12 +1581,10 @@ onShow(() => {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-
 	padding: 16rpx;
 	box-sizing: border-box;
 	position: relative;
 	margin-bottom: 16rpx;
-	margin-right: 16rpx;
 }
 
 .service-icon {
@@ -1527,7 +1633,10 @@ onShow(() => {
 	left: 0;
 	right: 0;
 	height: 8rpx;
-	background-color: rgba(252, 252, 252, 0.6);
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
 	border-radius: 8rpx;
 	width: calc(100% - 60rpx);
 	transform: translateX(30rpx);
@@ -1538,13 +1647,17 @@ onShow(() => {
 	width: 60%;
 	height: 112rpx;
 	line-height: 112rpx;
-	background: rgba(217, 156, 180, 0.3);
+	background: linear-gradient(to bottom right,
+			#F0E4B1 0%,
+			#F08399 50%,
+			#B94E73 100%);
 	border-radius: 40rpx;
 	font-size: 56rpx;
 	color: #fff;
 	font-weight: 500;
 	margin-top: 20rpx;
 	flex-shrink: 0;
+	opacity: 0.6;
 }
 
 
diff --git a/frontend/static/rank/activity-support-icon/beijingkuang1.png b/frontend/static/rank/activity-support-icon/beijingkuang1.png
index 85afdf1..28a0537 100644
Binary files a/frontend/static/rank/activity-support-icon/beijingkuang1.png and b/frontend/static/rank/activity-support-icon/beijingkuang1.png differ