✨ feat:

App.vue

@@ -14,7 +14,8 @@
 </script>
 
 <style lang="scss">
-	view,scroll-view {
+	view,
+	scroll-view {
 		margin: 0;
 		padding: 0;
 		box-sizing: border-box;
@@ -36,4 +37,13 @@
 		color: #333;
 		padding: 10px;
 	}
-</style>
+
+	.activeCard {
+		will-change: transform;
+		backface-visibility: hidden;
+		-webkit-backface-visibility: hidden;
+		transform-style: preserve-3d;
+		transform: none !important;
+		transition: all 0.3s cubic-bezier(.68, -0.55, .265, 1.55);
+	}
+</style>

pages/index/index.vue

@@ -11,11 +11,11 @@
 		</NavBar>
 		<image class="top-bg" src="/static/image/home/top-bg.png" />
 		<!-- 名片卡片：果冻弹入 -->
-		<view class="page-top" :style="cardStyle">
+		<view class="page-top" :class="{activeCard:pageIn}">
 			<UserCard :info="cardInfo" @call="makeCall" />
 			<ShareButton />
 		</view>
-		<view class="card-content" :style="contentCardStyle">
+		<view class="card-content" :class="{activeCard:pageIn}">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -63,35 +63,9 @@
 
 	// 入场动画状态
 	const pageIn = ref(false)
-	const contentIn = ref(false)
-
-	// 名片卡片：默认可见，过渡由 onMounted 触发
-	const cardStyle = computed(() => ({
-		opacity: '1',
-		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
-		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
-	}))
-
-	// 企业简介：从底部淡入
-	const contentCardStyle = computed(() => ({
-		opacity: '1',
-		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
-		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
-	}))
 
 	onMounted(() => {
-		// 先同步设偏移位置（transition: none 无动画）
-		pageIn.value = false
-		contentIn.value = false
-		// 强制刷新后改为目标值，transition 生效
-		const trigger = () => {
-			pageIn.value = true
-		}
-		// 用两次 setTimeout 0 确保浏览器完成样式计算再触发
-		setTimeout(trigger, 30)
-		setTimeout(() => {
-			contentIn.value = true
-		}, 350)
+		pageIn.value = true
 	})
 
 	onShareAppMessage(() => {
@@ -140,6 +114,7 @@
 		z-index: 1;
 	}
 
+
 	// 顶部背景区域
 	.header-bg {
 		background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
@@ -208,8 +183,11 @@
 		margin: 0 24rpx 24rpx;
 		position: relative;
 		z-index: 2;
+		transform: scale(0.78);
 	}
 
+
+
 	// 名片内容区域
 	.card-content {
 		margin: 0 24rpx;
@@ -220,8 +198,11 @@
 		position: relative;
 		bottom: 24rpx;
 		z-index: 2;
+		transform:translateY(150rpx);
 	}
 
+
+
 	// 隐藏的 canvas 容器
 	.hidden-canvas-box {
 		position: fixed;

pages/mine/card.vue

@@ -9,11 +9,11 @@
 			</template>
 		</NavBar>
 		<!-- 名片卡片 -->
-		<view class="page-top" :style="cardStyle">
+		<view class="page-top">
 			<UserCard :info="cardInfo" @call="makeCall" />
 			<ShareButton />
 		</view>
-		<view class="card-content" :style="contentCardStyle">
+		<view class="card-content" >
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -23,7 +23,6 @@
 <script setup>
 	import {
 		ref,
-		computed,
 		onMounted
 	} from 'vue'
 	import NavBar from '@/components/nav-bar/index.vue'
@@ -61,28 +60,9 @@
 
 	// 入场动画
 	const pageIn = ref(false)
-	const contentIn = ref(false)
-
-	const cardStyle = computed(() => ({
-		opacity: '1',
-		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
-		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
-	}))
-
-	const contentCardStyle = computed(() => ({
-		opacity: '1',
-		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
-		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
-	}))
 
 	onMounted(() => {
-		// 初始：偏移位置（无动画）
-		pageIn.value = false
-		contentIn.value = false
-		// 30ms 后触发名片动画
-		setTimeout(() => { pageIn.value = true }, 30)
-		// 350ms 后触发内容动画
-		setTimeout(() => { contentIn.value = true }, 350)
+		pageIn.value = true
 	})
 
 	const makeCall = () => {
@@ -200,4 +180,6 @@
 		bottom: 24rpx;
 		z-index: 2;
 	}
+
+
 </style>

pages/mine/userCard.vue

@@ -9,10 +9,10 @@
 			</template>
 		</NavBar>
 		<!-- 名片卡片 -->
-		<view class="page-top" :style="cardStyle">
+		<view class="page-top" :class="{activeCard:pageIn}">
 			<UserCard :info="cardInfo" @call="makeCall" />
 		</view>
-		<view class="card-content" :style="contentCardStyle">
+		<view class="card-content" :class="{activeCard:pageIn}">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -30,7 +30,6 @@
 <script setup>
 	import {
 		ref,
-		computed,
 		onMounted
 	} from 'vue'
 	import NavBar from '@/components/nav-bar/index.vue'
@@ -59,28 +58,9 @@
 
 	// 入场动画
 	const pageIn = ref(false)
-	const contentIn = ref(false)
-
-	const cardStyle = computed(() => ({
-		opacity: '1',
-		transform: pageIn.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
-		transition: pageIn.value ? 'all 0.55s cubic-bezier(0.34, 1.3, 0.64, 1)' : 'none',
-	}))
-
-	const contentCardStyle = computed(() => ({
-		opacity: '1',
-		transform: contentIn.value ? 'translateY(0)' : 'translateY(40px)',
-		transition: contentIn.value ? 'all 0.45s ease-out' : 'none',
-	}))
 
 	onMounted(() => {
-		// 初始：偏移位置（无动画）
-		pageIn.value = false
-		contentIn.value = false
-		// 30ms 后触发名片动画
-		setTimeout(() => { pageIn.value = true }, 30)
-		// 350ms 后触发内容动画
-		setTimeout(() => { contentIn.value = true }, 350)
+		pageIn.value = true
 	})
 
 	onShareAppMessage(() => {
@@ -189,6 +169,7 @@
 		margin: 0 24rpx 24rpx;
 		position: relative;
 		z-index: 2;
+		transform: scale(0.78);
 	}
 	// 名片内容区域
 	.card-content {
@@ -199,7 +180,10 @@
 		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.04);
 		position: relative;
 		z-index: 2;
+		transform: translateY(150rpx);
 	}
+
+
 	// 隐藏的 canvas 容器
 	.hidden-canvas-box {
 		position: fixed;