parking_inspection/pages/index/clockIn/clockIn.vue

<template>
	<view class="clock">
		<view class="clock-button">
			<view class="clock-button-outer">
				<view class="clock-button-inner">
					<view class="tips">
						<view>上班打卡</view>
						<view>{{ currentTime }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="clock-tips">
			<view class="clock-tips-content">
				<u-icon name="checkmark-circle-fill" color="#0E9CFF" size="15"></u-icon>
				<view>已经进入考勤范围，潍坊软件园...<text>重新定位？</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: ''
			}
		},
		onShow() {
			this.currentDate();
		},
		onUnload() {
			if (this.formatDate) {
				clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
			}
		},
		methods: {
			currentDate() {
				setInterval(this.formatDate, 500);
			},
			formatDate() {
				let date = new Date();
				let year = date.getFullYear(); // 年
				let month = date.getMonth() + 1; // 月
				let day = date.getDate(); // 日
				let week = date.getDay(); // 星期
				let hour = date.getHours(); // 时
				hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
				let minute = date.getMinutes(); // 分
				minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
				let second = date.getSeconds(); // 秒
				second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
				this.currentTime = `${hour}:${minute}:${second}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock {
		&-button {
			position: relative;
			animation-name: example;
			animation-duration: 2s;
			animation-fill-mode: forwards;

			&-outer {
				margin: 0 auto;
				width: 270rpx;
				height: 270rpx;
				background-color: #98D4FE;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			@keyframes example {
				from {
					top: 0;
				}

				to {
					top: 286rpx;
				}
			}

			&-inner {
				width: 220rpx;
				height: 220rpx;
				background-color: #0E9CFF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;

				.tips {
					view {
						color: #f2f2f2;
						font-size: 34rpx;
						text-align: center;

						&:last-child {
							color: #ddd;
							font-size: 30rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		&-tips {
			text-align: center;
			margin-top: 320rpx;

			&-content {
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 24rpx;

				view {
					margin-left: 5rpx;

					text {
						color: #F4993A;
					}
				}
			}
		}
	}
</style>