Merge branch 'songjie/feature-20251023161635-首页' into milestone-20251031-简版功能开发

components/DeepMate.vue

@@ -8,7 +8,12 @@
 						<text class="deepmate-subtitle">您的市场最佳顾问~</text>
 					</view>
 					<view class="title-right">
-						<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image>
+						<view class="icon-container">
+							<view class="ripple-effect ripple-1"></view>
+							<view class="ripple-effect ripple-2"></view>
+							<view class="ripple-effect ripple-3"></view>
+							<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image>
+						</view>
 					</view>
 				</view>
 			</view>
@@ -195,4 +200,61 @@
 	width: 20px;
 	height: 20px;
 }
+
+.icon-container {
+	position: relative;
+	width: 50px;
+	height: 50px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #f0f8ff;
+}
+
+.deepmate-icon {
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	z-index: 5;
+}
+
+.ripple-effect {
+	position: absolute;
+	border-radius: 50%;
+	background: radial-gradient(circle, rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0.1) 70%);
+	animation-name: ripple;
+	animation-duration: 3s;
+	animation-timing-function: ease-out;
+	animation-iteration-count: infinite;
+}
+
+.ripple-1 {
+	width: 100%;
+	height: 100%;
+	animation-delay: 0s;
+}
+
+.ripple-2 {
+	width: 100%;
+	height: 100%;
+	animation-delay: 1s;
+}
+
+.ripple-3 {
+	width: 100%;
+	height: 100%;
+	animation-delay: 2s;
+}
+
+@keyframes ripple {
+	0% {
+		transform: scale(0.8);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(1.5);
+		opacity: 0;
+	}
+}
 </style>