✨ feat:

App.vue

@@ -22,6 +22,7 @@
 
 	/*每个页面公共 css */
 	@import '@/uni_modules/uni-scss/index.scss';
+	@import 'animate.css';
 
 	/* #ifndef APP-NVUE */
 	// 设置整个项目的背景色

components/user-card/index.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="user-card">
+		<!-- 背景图 -->
+		<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
+
+		<!-- 左上:姓名 + 职位 -->
+		<view class="user-header">
+			<view class="name-row">
+				<text class="user-name">{{ info.nickName || '用户' }}</text>
+				<text class="user-role">{{ info.postName || '职位' }}</text>
+			</view>
+			<text class="company-name">{{ info.companyName || '公司名称' }}</text>
+		</view>
+
+		<!-- 右上:头像 -->
+		<view class="avatar-wrapper">
+			<UserAvatar :src="info.avatar" :name="info.nickName" :size="142"
+				:badge-src="'/static/image/public/badge-icon.png'" :badge-size="56" />
+		</view>
+
+		<!-- 左下:联系方式 -->
+		<view class="user-contact">
+			<view class="contact-row" @click="onCall">
+				<uni-icons type="phone" :size="18" color="#666666"></uni-icons>
+				<text style="flex: none;" class="contact-text">{{ info.phonenumber || '暂无电话' }}</text>
+				<text v-if="info.phonenumber" class="call-btn">拨打</text>
+			</view>
+			<view class="contact-row">
+				<uni-icons type="email" :size="18" color="#666666"></uni-icons>
+				<text class="contact-text">{{ info.email || '暂无邮箱' }}</text>
+			</view>
+			<view class="contact-row">
+				<uni-icons type="location" :size="18" color="#666666"></uni-icons>
+				<text class="contact-text">{{ info.companyAddress || '暂无地址' }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import UserAvatar from '@/components/user-avatar/index.vue'
+
+	const props = defineProps({
+		info: {
+			type: Object,
+			default: () => ({})
+		}
+	})
+
+	const emit = defineEmits(['call'])
+
+	const onCall = () => {
+		if (props.info.phonenumber) {
+			uni.makePhoneCall({
+				phoneNumber: props.info.phonenumber
+			})
+		} else {
+			uni.showToast({
+				title: '暂无电话号码',
+				icon: 'none'
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.user-card {
+		position: relative;
+		z-index: 2;
+		width: 100%;
+		height: 400rpx;
+		box-sizing: border-box;
+		padding: 80rpx 40rpx 32rpx;
+		position: relative;
+
+		.user-card-bg {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 0;
+		}
+
+		view,
+		text {
+			position: relative;
+			z-index: 1;
+		}
+
+		.user-header {
+			.name-row {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.user-name {
+					font-size: 44rpx;
+					font-weight: 700;
+					color: #202020;
+					line-height: 1.2;
+				}
+
+				.user-role {
+					margin-left: 16rpx;
+					padding: 6rpx 16rpx;
+					background: rgba(68, 110, 255, 0.10);
+					border-radius: 8rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #446eff;
+				}
+			}
+
+			.company-name {
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #666666;
+				line-height: 1.4;
+			}
+		}
+
+		.avatar-wrapper {
+			position: absolute;
+			top: 74rpx;
+			right: 36rpx;
+			z-index: 2;
+		}
+
+		.user-contact {
+			margin-top: 32rpx;
+
+			.contact-row {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+				position: relative;
+
+				uni-icons {
+					margin-right: 12rpx;
+					flex-shrink: 0;
+				}
+
+				.contact-text {
+					font-size: 26rpx;
+					color: #666666;
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					flex: 1;
+				}
+
+				.call-btn {
+					flex-shrink: 0;
+					margin-left: 6rpx;
+					font-size: 20rpx;
+					color: #4080FF;
+					border-radius: 20rpx;
+					line-height: 1.6;
+				}
+			}
+		}
+
+	}
+</style>

package-lock.json

@@ -9,11 +9,11 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "animate.css": "^4.1.1",
         "pinia": "^2.1.7",
         "qrcode": "^1.5.3",
         "vue": "^3.4.21"
-      },
-      "devDependencies": {}
+      }
     },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
@@ -158,6 +158,12 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.34.tgz",
       "integrity": "sha512-24uqU4OIiX29ryC3MeWid/Xf2fa2EFRUVLb77nRhk+UrTVrh/XiGtFAFmJBAtBRbjwNdsPRP+jj/OL27Eg1NDA=="
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "build:mp-weixin": "uni build -p mp-weixin"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "pinia": "^2.1.7",
     "qrcode": "^1.5.3",
     "vue": "^3.4.21"

pages/index/index.vue

@@ -2,53 +2,20 @@
 	<scroll-view class="card-container" scroll-y @scroll="onScroll" :scroll-top="0">
 
 		<!-- 顶部背景 -->
-		<image class="top-bg" src="/static/image/home/top-bg.png" />
-		
-		<NavBar :title="'首页'" :show_back="false" :color="'#fff'" :fixed="true" :bgImg="'/static/image/home/top-bg.png'" :bg="'transparent'">
+
+		<NavBar :title="'首页'" :show_back="false" :color="'#fff'" :fixed="true" :bgImg="'/static/image/home/top-bg.png'"
+			:bg="'transparent'">
 			<template #left>
 				<!-- <view class="left-title">{{appName}}</view> -->
 			</template>
 		</NavBar>
-		<!-- 名片卡片 -->
-		<view class="page-top">
-			<view class="user-card" id="user-card">
-				<!-- 背景图 -->
-				<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
-
-				<!-- 左上:姓名 + 职位 -->
-				<view class="user-header">
-					<view class="name-row">
-						<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
-						<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
-					</view>
-					<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
-				</view>
-
-				<!-- 右上:头像 -->
-				<view class="avatar-wrapper">
-					<UserAvatar :src="cardInfo.avatar" :name="cardInfo.nickName" :size="142"
-						:badge-src="'/static/image/public/badge-icon.png'" :badge-size="56" />
-				</view>
-
-				<!-- 左下:联系方式 -->
-				<view class="user-contact">
-					<view class="contact-row" @click="makeCall">
-						<uni-icons type="phone" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.phonenumber || '暂无电话' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="email" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.email || '暂无邮箱' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="location" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.companyAddress || '暂无地址' }}</text>
-					</view>
-				</view>
-			</view>
+		<image class="top-bg" src="/static/image/home/top-bg.png" />
+		<!-- 名片卡片：果冻弹入 -->
+		<view class="page-top" :style="cardStyle">
+			<UserCard :info="cardInfo" @call="makeCall" />
 			<ShareButton />
 		</view>
-		<view class="card-content">
+		<view class="card-content" :style="contentCardStyle">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -66,6 +33,7 @@
 <script setup>
 	import {
 		ref,
+		computed,
 		onMounted
 	} from 'vue'
 	import {
@@ -76,6 +44,7 @@
 	import EmptyState from '@/components/empty-state/index.vue'
 	import ShareButton from '@/components/shareButton/index.vue'
 	import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
+	import UserCard from '@/components/user-card/index.vue'
 	import {
 		useUserStore
 	} from '@/store/modules/user.js'
@@ -91,6 +60,36 @@
 		cardImage
 	} = storeToRefs(userStore)
 	let appName = ref('')
+
+	// 入场动画状态
+	const pageReady = ref(false)
+	const contentReady = ref(false)
+
+	onMounted(() => {
+		// 页面挂载后立即触发名片动画
+		requestAnimationFrame(() => {
+			pageReady.value = true
+		})
+		// 名片动画快结束时触发内容动画
+		setTimeout(() => {
+			contentReady.value = true
+		}, 400)
+	})
+
+	// 名片卡片：淡入 + 轻微放大
+	const cardStyle = computed(() => ({
+		opacity: pageReady.value ? 1 : 0,
+		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20rpx)',
+		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+	}))
+
+	// 企业简介：从底部淡入滑入
+	const contentCardStyle = computed(() => ({
+		opacity: contentReady.value ? 1 : 0,
+		transform: contentReady.value ? 'translateY(0)' : 'translateY(40rpx)',
+		transition: 'all 0.45s ease-out',
+	}))
+
 	onShareAppMessage(() => {
 		return {
 			path: 'pages/splash/splash?userId=' + cardInfo.value.userId,
@@ -112,18 +111,8 @@
 		}
 	}
 
-	const makeCall = () => {
-		if (cardInfo.value.phonenumber) {
-			uni.makePhoneCall({
-				phoneNumber: cardInfo.value.phonenumber
-			})
-		} else {
-			uni.showToast({
-				title: '暂无电话号码',
-				icon: 'none'
-			})
-		}
-	}
+	// 拨打电话交由 UserCard 组件内部处理，这里只是留空以备后续扩展
+	const makeCall = () => {}
 </script>
 
 <style lang="scss" scoped>
@@ -213,99 +202,8 @@
 
 	.page-top {
 		margin: 0 24rpx 24rpx;
-
-		.user-card {
-			position: relative;
-			z-index: 2;
-			width: 100%;
-			height: 400rpx;
-			box-sizing: border-box;
-			padding: 80rpx 40rpx 32rpx;
-			position: relative;
-
-			.user-card-bg {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				z-index: 0;
-			}
-
-			view,
-			text {
-				position: relative;
-				z-index: 1;
-			}
-
-			.user-header {
-				.name-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-
-					.user-name {
-						font-size: 44rpx;
-						font-weight: 700;
-						color: #202020;
-						line-height: 1.2;
-					}
-
-					.user-role {
-						margin-left: 16rpx;
-						padding: 6rpx 16rpx;
-						background: rgba(68, 110, 255, 0.10);
-						border-radius: 8rpx;
-						font-size: 24rpx;
-						font-weight: 500;
-						color: #446eff;
-					}
-				}
-
-				.company-name {
-					font-size: 28rpx;
-					font-weight: 500;
-					color: #666666;
-					line-height: 1.4;
-				}
-			}
-
-			.avatar-wrapper {
-				position: absolute;
-				top: 74rpx;
-				right: 36rpx;
-				z-index: 2;
-			}
-
-			.user-contact {
-				margin-top: 32rpx;
-
-				.contact-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-				
-
-					/* 溢出部分用省略号代替 */
-					uni-icons {
-						margin-right: 12rpx;
-						flex-shrink: 0;
-					}
-
-					.contact-text {
-						font-size: 26rpx;
-						color: #666666;
-						overflow: hidden;
-						/* 隐藏溢出的内容 */
-						white-space: nowrap;
-						/* 强制文本在一行内显示 */
-						text-overflow: ellipsis;
-					}
-				}
-			}
-
-		}
-
+		position: relative;
+		z-index: 2;
 	}
 
 	// 名片内容区域

pages/mine/card.vue

@@ -9,45 +9,11 @@
 			</template>
 		</NavBar>
 		<!-- 名片卡片 -->
-		<view class="page-top">
-			<view class="user-card" id="user-card">
-				<!-- 背景图 -->
-				<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
-
-				<!-- 左上:姓名 + 职位 -->
-				<view class="user-header">
-					<view class="name-row">
-						<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
-						<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
-					</view>
-					<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
-				</view>
-
-				<!-- 右上:头像 -->
-				<view class="avatar-wrapper">
-					<UserAvatar :src="cardInfo.avatar" :name="cardInfo.nickName" :size="142"
-						:badge-src="'/static/image/public/badge-icon.png'" :badge-size="56" />
-				</view>
-
-				<!-- 左下:联系方式 -->
-				<view class="user-contact">
-					<view class="contact-row" @click="makeCall">
-						<uni-icons type="phone" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.phonenumber || '暂无电话' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="email" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.email || '暂无邮箱' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="location" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.companyAddress || '暂无地址' }}</text>
-					</view>
-				</view>
-			</view>
+		<view class="page-top" :style="cardStyle">
+			<UserCard :info="cardInfo" @call="makeCall" />
 			<ShareButton />
 		</view>
-		<view class="card-content">
+		<view class="card-content" :style="contentCardStyle">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -57,6 +23,7 @@
 <script setup>
 	import {
 		ref,
+		computed,
 		onMounted
 	} from 'vue'
 	import NavBar from '@/components/nav-bar/index.vue'
@@ -64,6 +31,7 @@
 	import EmptyState from '@/components/empty-state/index.vue'
 	import ShareButton from '@/components/shareButton/index.vue'
 		import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
+	import UserCard from '@/components/user-card/index.vue'
 	import {
 		useUserStore
 	} from '@/store/modules/user.js'
@@ -90,6 +58,28 @@
 	});
 
 	let appName = ref('')
+
+	// 入场动画
+	const pageReady = ref(false)
+	const contentReady = ref(false)
+
+	onMounted(() => {
+		requestAnimationFrame(() => { pageReady.value = true })
+		setTimeout(() => { contentReady.value = true }, 400)
+	})
+
+	const cardStyle = computed(() => ({
+		opacity: pageReady.value ? 1 : 0,
+		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
+		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+	}))
+
+	const contentCardStyle = computed(() => ({
+		opacity: contentReady.value ? 1 : 0,
+		transform: contentReady.value ? 'translateY(0)' : 'translateY(40px)',
+		transition: 'all 0.45s ease-out',
+	}))
+
 	const makeCall = () => {
 		if (cardInfo.value.phonenumber) {
 			uni.makePhoneCall({
@@ -190,97 +180,6 @@
 
 	.page-top {
 		margin: 0 24rpx 24rpx;
-
-		.user-card {
-			position: relative;
-			z-index: 2;
-			width: 100%;
-			height: 400rpx;
-			box-sizing: border-box;
-			padding: 80rpx 40rpx 32rpx;
-			position: relative;
-
-			.user-card-bg {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				z-index: 0;
-			}
-
-			view,
-			text {
-				position: relative;
-				z-index: 1;
-			}
-
-			.user-header {
-				.name-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-
-					.user-name {
-						font-size: 44rpx;
-						font-weight: 700;
-						color: #202020;
-						line-height: 1.2;
-					}
-
-					.user-role {
-						margin-left: 16rpx;
-						padding: 6rpx 16rpx;
-						background: rgba(68, 110, 255, 0.10);
-						border-radius: 8rpx;
-						font-size: 24rpx;
-						font-weight: 500;
-						color: #446eff;
-					}
-				}
-
-				.company-name {
-					font-size: 28rpx;
-					font-weight: 500;
-					color: #666666;
-					line-height: 1.4;
-				}
-			}
-
-			.avatar-wrapper {
-				position: absolute;
-				top: 74rpx;
-				right: 36rpx;
-				z-index: 2;
-			}
-
-			.user-contact {
-				margin-top: 32rpx;
-
-				.contact-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-
-					uni-icons {
-						margin-right: 12rpx;
-						flex-shrink: 0;
-					}
-
-					.contact-text {
-						font-size: 26rpx;
-						color: #666666;
-						overflow: hidden;
-						/* 隐藏溢出的内容 */
-						white-space: nowrap;
-						/* 强制文本在一行内显示 */
-						text-overflow: ellipsis;
-					}
-				}
-			}
-
-		}
-
 	}
 
 	// 名片内容区域

pages/mine/userCard.vue

@@ -9,44 +9,10 @@
 			</template>
 		</NavBar>
 		<!-- 名片卡片 -->
-		<view class="page-top">
-			<view class="user-card" id="user-card">
-				<!-- 背景图 -->
-				<image class="user-card-bg" src="/static/image/home/usecard-bg.png" />
-
-				<!-- 左上:姓名 + 职位 -->
-				<view class="user-header">
-					<view class="name-row">
-						<text class="user-name">{{ cardInfo.nickName || '用户' }}</text>
-						<text class="user-role">{{ cardInfo.postName || '职位' }}</text>
-					</view>
-					<text class="company-name">{{ cardInfo.companyName || '公司名称' }}</text>
-				</view>
-
-				<!-- 右上:头像 -->
-				<view class="avatar-wrapper">
-					<UserAvatar :src="cardInfo.avatar" :name="cardInfo.nickName" :size="142"
-						:badge-src="'/static/image/public/badge-icon.png'" :badge-size="56" />
-				</view>
-
-				<!-- 左下:联系方式 -->
-				<view class="user-contact">
-					<view class="contact-row" @click="makeCall">
-						<uni-icons type="phone" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.phonenumber || '暂无电话' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="email" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.email || '暂无邮箱' }}</text>
-					</view>
-					<view class="contact-row">
-						<uni-icons type="location" :size="18" color="#666666"></uni-icons>
-						<text class="contact-text">{{ cardInfo.companyAddress || '暂无地址' }}</text>
-					</view>
-				</view>
-			</view>
+		<view class="page-top" :style="cardStyle">
+			<UserCard :info="cardInfo" @call="makeCall" />
 		</view>
-		<view class="card-content">
+		<view class="card-content" :style="contentCardStyle">
 			<!-- 企业简介 -->
 			<CompanyIntroduce></CompanyIntroduce>
 		</view>
@@ -64,6 +30,7 @@
 <script setup>
 	import {
 		ref,
+		computed,
 		onMounted
 	} from 'vue'
 	import NavBar from '@/components/nav-bar/index.vue'
@@ -71,6 +38,7 @@
 	import EmptyState from '@/components/empty-state/index.vue'
 	import ShareButton from '@/components/shareButton/index.vue'
 	import CompanyIntroduce from '@/components/companyIntroduce/index.vue'
+	import UserCard from '@/components/user-card/index.vue'
 	import {
 		useUserStore
 	} from '@/store/modules/user.js'
@@ -88,7 +56,28 @@
 		cardImage
 	} = storeToRefs(userStore)
 	let appName = ref('')
-	
+
+	// 入场动画
+	const pageReady = ref(false)
+	const contentReady = ref(false)
+
+	onMounted(() => {
+		requestAnimationFrame(() => { pageReady.value = true })
+		setTimeout(() => { contentReady.value = true }, 400)
+	})
+
+	const cardStyle = computed(() => ({
+		opacity: pageReady.value ? 1 : 0,
+		transform: pageReady.value ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(-20px)',
+		transition: 'all 0.5s cubic-bezier(0.34, 1.3, 0.64, 1)',
+	}))
+
+	const contentCardStyle = computed(() => ({
+		opacity: contentReady.value ? 1 : 0,
+		transform: contentReady.value ? 'translateY(0)' : 'translateY(40px)',
+		transition: 'all 0.45s ease-out',
+	}))
+
 	onShareAppMessage(() => {
 		return {
 			userName: '小程序',
@@ -193,96 +182,6 @@
 	}
 	.page-top {
 		margin: 0 24rpx 24rpx;
-		.user-card {
-			position: relative;
-			z-index: 2;
-			width: 100%;
-			height: 400rpx;
-			box-sizing: border-box;
-			padding: 80rpx 40rpx 32rpx;
-			position: relative;
-		
-			.user-card-bg {
-				position: absolute;
-				top: 0;
-				left: 0;
-				width: 100%;
-				height: 100%;
-				z-index: 0;
-			}
-		
-			view,
-			text {
-				position: relative;
-				z-index: 1;
-			}
-		
-			.user-header {
-				.name-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-		
-					.user-name {
-						font-size: 44rpx;
-						font-weight: 700;
-						color: #202020;
-						line-height: 1.2;
-					}
-		
-					.user-role {
-						margin-left: 16rpx;
-						padding: 6rpx 16rpx;
-						background: rgba(68, 110, 255, 0.10);
-						border-radius: 8rpx;
-						font-size: 24rpx;
-						font-weight: 500;
-						color: #446eff;
-					}
-				}
-		
-				.company-name {
-					font-size: 28rpx;
-					font-weight: 500;
-					color: #666666;
-					line-height: 1.4;
-				}
-			}
-		
-			.avatar-wrapper {
-				position: absolute;
-				top: 74rpx;
-				right: 36rpx;
-				z-index: 2;
-			}
-		
-			.user-contact {
-				margin-top: 32rpx;
-		
-				.contact-row {
-					display: flex;
-					align-items: center;
-					margin-bottom: 16rpx;
-		
-					uni-icons {
-						margin-right: 12rpx;
-						flex-shrink: 0;
-					}
-		
-					.contact-text {
-						font-size: 26rpx;
-						color: #666666;
-						overflow: hidden;
-						/* 隐藏溢出的内容 */
-						white-space: nowrap;
-						/* 强制文本在一行内显示 */
-						text-overflow: ellipsis;
-					}
-				}
-			}
-		
-		}
-		
 	}
 	// 名片内容区域
 	.card-content {