From c887d307387cedabad5a24ff1c03c86c3a8be2f0 Mon Sep 17 00:00:00 2001
From: zheng020 <zheng02007@163.com>
Date: Wed, 20 May 2026 14:47:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AF=A6=E7=BB=86=E9=A1=B5=E7=BB=99?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=B7=BB=E5=8A=A03D=E7=BF=BB=E8=BD=AC?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/pages/asset-detail/asset-detail.vue | 44 ++++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/asset-detail/asset-detail.vue b/frontend/pages/asset-detail/asset-detail.vue
index 38f2615..424405b 100644
--- a/frontend/pages/asset-detail/asset-detail.vue
+++ b/frontend/pages/asset-detail/asset-detail.vue
@@ -956,6 +956,7 @@ onUnmounted(() => {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	perspective: 800px;
 }
 
 .card-wrapper {
@@ -963,6 +964,41 @@ onUnmounted(() => {
 	width: 352rpx;
 	height: 520rpx;
 	margin-bottom: 32rpx;
+	animation: card-3d-flip 15s ease-in-out infinite;
+	transform-origin: center center;
+}
+
+.card-wrapper::after {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 131, 153, 0.7) 30deg, transparent 60deg);
+	opacity: 0;
+	animation: card-glint 15s ease-in-out infinite;
+	pointer-events: none;
+	border-radius: 48rpx;
+	mix-blend-mode: overlay;
+}
+
+@keyframes card-3d-flip {
+	0% {
+		transform: rotateY(0deg);
+	}
+	20% {
+		transform: rotateY(-30deg);
+	}
+	50% {
+		transform: rotateY(30deg);
+	}
+	80% {
+		transform: rotateY(0deg);
+	}
+	100% {
+		transform: rotateY(0deg);
+	}
 }
 
 .card-wrapper--lenticular {
@@ -977,7 +1013,7 @@ onUnmounted(() => {
 	width: 78%;
 	height: 96%;
 	border-radius: 64rpx;
-	transform: translate(-50%, -50%) rotate(-10deg);
+	transform: translate(-50%, -50%) ;
 	z-index: 2;
 	overflow: hidden;
 }
@@ -997,7 +1033,7 @@ onUnmounted(() => {
 	position: absolute;
 	z-index: 3;
 	overflow: hidden;
-	transform: rotate(-10deg);
+	/* transform: rotate(-10deg); */
 }
 
 .card-badge {
@@ -1007,7 +1043,7 @@ onUnmounted(() => {
 	width: 120rpx;
 	height: 120rpx;
 	z-index: 4;
-	transform: rotate(-10deg);
+	/* transform: rotate(-10deg); */
 }
 
 .card-frame {
@@ -1017,7 +1053,7 @@ onUnmounted(() => {
 	width: 100%;
 	height: 100%;
 	z-index: 2;
-	transform: rotate(-10deg);
+	/* transform: rotate(-10deg); */
 
 }