打卡

pages/index/clockIn/clockIn.vue

@@ -1,6 +1,7 @@
 <template>
 	<view class="clock">
 		<view class="clock-button">
+			<view class="clock-button-outer-animate"></view>
 			<view class="clock-button-outer">
 				<view class="clock-button-inner">
 					<view class="tips">
@@ -13,7 +14,8 @@
 		<view class="clock-tips">
 			<view class="clock-tips-content">
 				<u-icon name="checkmark-circle-fill" color="#0E9CFF" size="15"></u-icon>
-				<view>已经进入考勤范围，<view class="address">{{ address }}</view><text @click="positionLocation()">重新定位？</text></view>
+				<view>已经进入考勤范围，<view class="address">{{ address }}</view><text @click="positionLocation()">重新定位？</text>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -25,7 +27,10 @@
 		data() {
 			return {
 				currentTime: '',
-				qqMap: new QQMapWX({ key: 'CWWBZ-F2T36-ZQ6SU-EDL5X-Y3EUT-3HBIF', vm: this }),
+				qqMap: new QQMapWX({
+					key: 'CWWBZ-F2T36-ZQ6SU-EDL5X-Y3EUT-3HBIF',
+					vm: this
+				}),
 				address: ''
 			}
 		},
@@ -111,13 +116,37 @@
 
 			&-outer {
 				margin: 0 auto;
-				width: 270rpx;
-				height: 270rpx;
-				background-color: #98D4FE;
-				border-radius: 50%;
 				display: flex;
 				justify-content: center;
 				align-items: center;
+
+				&-animate {
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					margin-left: -135rpx;
+					margin-top: -135rpx;
+					width: 270rpx;
+					height: 270rpx;
+					background-color: #98D4FE;
+					border-radius: 50%;
+					z-index: -1;
+					animation: scaleUp 3s infinite;
+				}
+
+				@keyframes scaleUp {
+					0% {
+						transform: scale3d(0.8, 0.8, 0.8);
+					}
+
+					50% {
+						transform: scale3d(1.3, 1.3, 1.3);
+					}
+
+					100% {
+						transform: scale3d(0.8, 0.8, 0.8);
+					}
+				}
 			}
 
 			@keyframes example {
@@ -177,6 +206,7 @@
 			}
 		}
 	}
+
 	.address {
 		display: inline-block;
 		width: 200rpx;