warst/warst-h5/pages/attendanceClock/com/excessiveDce.vue

<template>
	<!--时间相差过大-->
	<view class="excessive">
		<view class="top-exc">
			<image src="@/static/images/com/empty.png"></image>
			<view class="main-tips">
				<view>你的手机时间与本地标准时间相差过大</view>
				<view>本地标准时间为{{ serverTime }}</view>
				<view>你的手机时间为{{ localTime }}</view>
			</view>
		</view>

		<view class="secondary-tips">
			<view>你可以进行一下尝试：</view>
			<view>在手机系统设置-通用-日期与时间里设置为自动</view>
			<view>或手动调整时间与本地最新时间一致</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'excessiveDce',
	props: {
		serverTime: String, //yyyy-mm-dd hh:MM:ss 服务器时间
		localTime: String, //yyyy-mm-dd hh:MM:ss 本地时间
	},
};
</script>

<style scoped lang="scss">
.excessive {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 6px;

	.top-exc {
		display: flex;
		flex-direction: column;
		align-items: center;

		.main-tips {
			text-align: center;
			line-height: 22px;
			font-size: 15px;
			color: $u-main-color;
			margin: 20rpx 0;
		}
	}

	.secondary-tips {
		font-size: 14px;
		color: $u-tips-color;
	}
}
</style>