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

<template>
	<!--未打上班卡,在时间范围内,可打卡-->
	<view class="not-checked-in">
		<text class="running-time">{{ currentTime }}</text>
		<c-button
			type="primary"
			class="punch-clock-btn"
			@click="handleClick"
		>
			<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/success.png"
			></image>
			<text class="range-txt">您已进入打卡范围</text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'clockableView',
	props: {
		currentTime: String,
		type: {
			default: '0', // 0上班，1下班
			type: String,
		},
	},
	methods: {
		handleClick() {
			this.$emit('punchClock', this.type); //0上班，1下班
		},
	},
};
</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;
	}

	.punch-clock-btn {
		border-radius: 46rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 160px;
		box-shadow: 0px 2px 6px 0px rgba(34, 83, 234, 0.42);
	}
}
</style>