✨ feat:

pages/splash/splash.vue

@@ -1,30 +1,12 @@
 <template>
 	<view class="splash-container">
-		<view class="splash-bg-1"></view>
-		<view class="splash-bg-2"></view>
 		<view class="logo-section">
 			<view class="logo-wrapper">
-				<view class="logo-glow"></view>
 				<image class="logo-icon" src="/static/image/public/logo.png" mode="aspectFit"></image>
+				<view class="shine"></view>
+				<view class="spin-dot"></view>
 			</view>
 			<text class="app-name">{{appName}}</text>
-			<text class="app-slogan">您的客户关系管理助手</text>
-		</view>
-		<view class="loading-section">
-			<text class="loading-text">
-				正在加载
-				<view class="loading-dots">
-					<view class="dot dot1"></view>
-					<view class="dot dot2"></view>
-					<view class="dot dot3"></view>
-				</view>
-			</text>
-		</view>
-		<view class="version-info">
-			<text class="version-text">{{version}}</text>
-			<view class="version-text">
-				浙江舒博特网络科技有限公司提供技术支持
-			</view>
 		</view>
 	<!-- 隐藏的 Canvas 用于生成名片快照 -->
 	<canvas id="posterCanvas" type="2d"
@@ -34,8 +16,6 @@
 	<view class="hidden-canvas-box">
 		<canvas id="qrPosterCanvas" type="2d" style="width: 600px; height: 700px;"></canvas>
 	</view>
-	
-
 	</view>
 </template>
 
@@ -58,15 +38,12 @@
 	import {
 		getCurrentConfig
 	} from '@/config/index.js'
-	const loadingText = ref('正在加载...')
 	let appName = ref('')
-	let version = ref('')
 	// 页面加载
 
 	onMounted(async () => {
 		const config = await getCurrentConfig()
 		appName.value = config.appName
-		version.value = config.appVersion
 	})
 	onLoad((options) => {
 		initApp(options?.userId)
@@ -77,7 +54,6 @@
 	 */
 	const initApp = async (userId = null) => {
 		try {
-			loadingText.value = '检查登录状态...'
 			const loginToggle = isLogin() || !!userId
 			if (!loginToggle) {
 				console.log('未登录，token 不存在')
@@ -95,8 +71,6 @@
 				uni.reLaunch({
 					url: !!userId ? '/pages/mine/userCard' : '/pages/index/index'
 				})
-				// await userStore.queryCardQrcode(userId)
-
 			} else {
 				clearUserInfo()
 				uni.reLaunch({
@@ -124,37 +98,11 @@
 <style lang="scss" scoped>
 	.splash-container {
 		min-height: 100vh;
-		background: linear-gradient(135deg, #4A90E2 0%, #6FB3F2 50%, #87CEEB 100%);
-		// background-color: #fff;
-		position: relative;
-		overflow: hidden;
+		background-color: #ffffff;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		justify-content: center;
-		padding: 0 40rpx;
-
-		.splash-bg-1 {
-			position: absolute;
-			top: -20%;
-			left: -10%;
-			width: 60%;
-			height: 60%;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
-			border-radius: 50%;
-			animation: floatBg1 8s ease-in-out infinite;
-		}
-
-		.splash-bg-2 {
-			position: absolute;
-			bottom: -20%;
-			right: -10%;
-			width: 70%;
-			height: 70%;
-			background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
-			border-radius: 50%;
-			animation: floatBg2 10s ease-in-out infinite;
-		}
+		padding-top: 35vh;
 	}
 
 	// Logo 区域
@@ -162,206 +110,128 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-bottom: 120rpx;
-		position: relative;
-		z-index: 10;
 
 		.logo-wrapper {
 			position: relative;
-			width: 240rpx;
-			height: 240rpx;
+			width: 125rpx;
+			height: 125rpx;
+			border-radius: 50%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-
-			.logo-glow {
+			border: 1px solid #F1F1F1;
+			&::after {
+				content: '';
 				position: absolute;
-				top: 50%;
-				left: 50%;
-				transform: translate(-50%, -50%);
-				width: 280rpx;
-				height: 280rpx;
-				background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
+				top: -6rpx;
+				left: -6rpx;
+				right: -6rpx;
+				bottom: -6rpx;
 				border-radius: 50%;
-				animation: logoGlow 3s ease-in-out infinite;
-			}
-
-			.logo-icon {
-				width: 200rpx;
-				height: 200rpx;
-				border-radius: 44rpx;
-				background: rgba(255, 255, 255, 0.95);
-				box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15),
-					0 0 40rpx rgba(255, 255, 255, 0.3);
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				animation: logoFloat 3s ease-in-out infinite;
-				position: relative;
+				background: linear-gradient(135deg,
+					rgba(255, 255, 255, 0.6) 0%,
+					rgba(255, 255, 255, 0) 40%,
+					rgba(255, 255, 255, 0) 60%,
+					rgba(255, 255, 255, 0.2) 100%);
+				pointer-events: none;
 				z-index: 2;
 			}
-		}
 
-		.app-name {
-			font-size: 48rpx;
-			font-weight: 600;
-			color: #ffffff;
-			margin-top: 48rpx;
-			letter-spacing: 3rpx;
-			text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
-		}
-
-		.app-slogan {
-			font-size: 26rpx;
-			color: rgba(255, 255, 255, 0.85);
-			margin-top: 20rpx;
-			letter-spacing: 1rpx;
-			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-		}
-	}
-
-	// 加载动画
-	.loading-section {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		position: relative;
-		z-index: 10;
-
-		.loading-text {
-			font-size: 28rpx;
-			color: rgba(255, 255, 255, 0.95);
-			letter-spacing: 2rpx;
-			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			background: rgba(255, 255, 255, 0.15);
-			padding: 20rpx 40rpx;
-			border-radius: 40rpx;
-			backdrop-filter: blur(10rpx);
-			box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
-
-			.loading-dots {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin-left: 8rpx;
-				height: 20rpx;
+			// 亮光扫过动效
+			.shine {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				overflow: hidden;
+				z-index: 3;
+				pointer-events: none;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: -50%;
+					left: -50%;
+					width: 200%;
+					height: 200%;
+					background: linear-gradient(
+						135deg,
+						transparent 0%,
+						transparent 35%,
+						rgba(255, 255, 255, 0.5) 45%,
+						transparent 55%,
+						transparent 100%
+					);
+					animation: shineSweep 2s ease-in-out infinite;
+				}
+			}
 
-				.dot {
+			// 小圆点沿边框转圈
+			.spin-dot {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				border-radius: 50%;
+				z-index: 4;
+				pointer-events: none;
+				animation: spinDotRotate 2s linear infinite;
+
+				&::before {
+					content: '';
+					position: absolute;
+					top: -8rpx;
+					left: 50%;
 					width: 12rpx;
 					height: 12rpx;
+					background: #4080FF;
 					border-radius: 50%;
-					background-color: #ffffff;
-					margin: 0 4rpx;
-					opacity: 0.4;
-					box-shadow: 0 0 15rpx rgba(255, 255, 255, 0.5);
-				}
-
-				.dot1 {
-					animation: loadingDot 1.4s ease-in-out infinite;
-				}
-
-				.dot2 {
-					animation: loadingDot 1.4s ease-in-out 0.2s infinite;
+					transform: translateX(-50%);
 				}
+			}
 
-				.dot3 {
-					animation: loadingDot 1.4s ease-in-out 0.4s infinite;
-				}
+			.logo-icon {
+				border-radius: 50%;
+				width: 88rpx;
+				height: 88rpx;
+				position: relative;
+				z-index: 1;
 			}
 		}
-	}
 
-	// 版本信息
-	.version-info {
-		position: absolute;
-		bottom: 80rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		z-index: 10;
-		background: rgba(255, 255, 255, 0.1);
-		padding: 20rpx 40rpx;
-		border-radius: 32rpx;
-		backdrop-filter: blur(10rpx);
-		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
-		border: 1rpx solid rgba(255, 255, 255, 0.2);
-
-		.version-text {
-			font-size: 22rpx;
-			color: rgba(255, 255, 255, 0.7);
-			text-align: center;
-			line-height: 1.6;
-			text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		.app-name {
+			font-size: 28rpx;
+			color: #333333;
+			margin-top: 28rpx;
 		}
 	}
 
-	// 动画
-	@keyframes logoFloat {
-
-		0%,
-		100% {
-			transform: translateY(0) scale(1);
+	// 亮光扫过动效
+	// 小圆点沿圆边旋转
+	@keyframes spinDotRotate {
+		0% {
+			transform: rotate(0deg);
 		}
-
-		50% {
-			transform: translateY(-15rpx) scale(1.02);
-		}
-	}
-
-	@keyframes logoGlow {
-
-		0%,
 		100% {
-			opacity: 0.5;
-			transform: translate(-50%, -50%) scale(1);
-		}
-
-		50% {
-			opacity: 0.8;
-			transform: translate(-50%, -50%) scale(1.1);
+			transform: rotate(360deg);
 		}
 	}
 
-	@keyframes loadingDot {
-
-		0%,
-		80%,
-		100% {
-			transform: scale(0.8);
-			opacity: 0.4;
+	@keyframes shineSweep {
+		0% {
+			transform: translateX(-100%) translateY(-100%) rotate(-20deg);
 		}
-
-		40% {
-			transform: scale(1.2);
-			opacity: 1;
-		}
-	}
-
-	@keyframes floatBg1 {
-
-		0%,
-		100% {
-			transform: translate(0, 0) scale(1);
+		20% {
+			transform: translateX(0%) translateY(0%) rotate(-20deg);
 		}
-
-		50% {
-			transform: translate(30rpx, -30rpx) scale(1.05);
+		40% {
+			transform: translateX(100%) translateY(100%) rotate(-20deg);
 		}
-	}
-
-	@keyframes floatBg2 {
-
-		0%,
 		100% {
-			transform: translate(0, 0) scale(1);
-		}
-
-		50% {
-			transform: translate(-30rpx, 30rpx) scale(1.08);
+			transform: translateX(100%) translateY(100%) rotate(-20deg);
 		}
 	}
 
@@ -374,4 +244,4 @@
 		height: 1px;
 		overflow: hidden;
 	}
-</style>
+</style>