warst/warst-h5/pages/attendanceClock/workContent/cannotClockIn.vue

<template>
	<!--未打上班卡,不在在时间范围内,不可打卡-->
	<view class="not-checked-in">
		<text class="running-time">{{ currentTime }}</text>
		<text class="location-name">{{ clockAddr }}</text>
		<c-button disabled type="primary" class="punch-clock-btn">
			<view class="dflex acenter">
				<text>{{ type === '0' ? '上班' : '下班' }}打卡</text>
				<image
					class="ml-15"
					style="width: 18px; height: 22px"
					src="@/static/images/attendanceClock/hand.png"
				></image>
			</view>
		</c-button>
		<view class="range-box">
			<image
				class="range-icon"
				src="@/static/images/attendanceClock/fail.png"
			></image>
			<text class="range-txt">当前不在打卡范围</text>
			<c-button type="text" class="ml-15" @click="reloadLocation">
				刷新定位
			</c-button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'cannotClockIn',
	props: {
		currentTime: String, // 当前时间
		clockAddr: String, // 地点名
		type: {
			default: '0', // 0上班，1下班
			type: String,
		},
	},
	methods: {
		reloadLocation() {
			this.$emit('reloadLocation');
		},
	},
};
</script>

<style scoped lang="scss">
.not-checked-in {
	display: flex;
	flex-direction: column;
	align-items: center;

	.range-box {
		display: flex;
		align-items: center;
	}

	.range-icon {
		width: 14px;
		height: 14px;
		margin-right: 10rpx;
	}

	.range-txt {
		font-size: 14px;
		color: #a6a9b0;
	}

	.running-time {
		font-size: 30px;
		color: #697c9d;
	}
	.location-name {
		font-style: 14px;
		color: #697c9d;
	}

	.punch-clock-btn {
		border-radius: 46rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 160px;
	}
}
</style>