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

<template>
	<!--不在考勤组-->
	<view class="not-group-box">
		<view class="show-clock" v-if="showClock">
			<nGroupStep v-bind="$attrs" v-on="$listeners"></nGroupStep>
		</view>
		<view class="not-set-rule" v-else>
			<image
				class="ng-image"
				src="@/static/images/attendanceClock/not-group.png"
			></image>
			<view class="ng-tips"> 未设置打卡规则 </view>
			<c-button
				type="text"
				class="continue-btn"
				@click="showClock = true"
			>
				仍要打卡
			</c-button>
		</view>
	</view>
</template>

<script>
import nGroupStep from './nGroupStep.vue';
export default {
	name: 'notGroup',
	components: {
		nGroupStep,
	},
	watch: {
		'$attrs.current': {
			handler(val) {
				this.showClock = !!val;
			},
			immediate: true,
		},
	},
	data() {
		return {
			showClock: false,
		};
	},
};
</script>

<style scoped lang="scss">
.not-group-box {
	padding: 20rpx;
	.not-set-rule {
		display: flex;
		flex-direction: column;
		align-items: center;
		.ng-image {
			width: 247px;
			height: 247px;
		}
		.ng-tips {
			color: #152f62;
			font-size: 14px;
		}

		.continue-btn {
			margin-top: 150rpx;
			margin-bottom: 40rpx;
		}
	}
}
</style>