工作257:uni--页面--打卡成功

<template>
	<view >
		<view class="title" style="display: flex;flex-direction: column;">
			<view style="display: flex;">
			<u-image style="margin: 50rpx 0 0 30rpx;" width="54rpx" height="54rpx" src="./dui.png"></u-image>
			<text style="margin: 50rpx 0 0 24rpx;font-size: 36rpx;color: #333333;">打卡成功!</text>
			</view>
			<view style="display: flex;">
			<text style="margin: 10rpx 0 0 108rpx;font-size: 30rpx;color: #666666;">8:15已经打卡</text>
			<view style="margin:0 0 0 24rpx;width: 150rpx;height: 56rpx;border:5rpx solid #F29100;text-align: center;line-height: 46rpx;">
				<text style="color:#F29100;font-size: 28rpx;">打卡成功</text>
			</view>
			</view>
		</view>
		<view style="width: 100%;height: 248rpx;display: flex;flex-direction: column;">
			<text style="margin:30rpx 0 0 30rpx;font-size: 30rpx;">为本次打卡标记一下吧</text>
			<view style="display: flex;">
			<view style="margin:30rpx 0 0 30rpx;width: 150rpx;height: 56rpx;border:5rpx solid #C0C4CC;text-align: center;line-height: 46rpx;">
				<text style="color:#C0C4CC;font-size: 28rpx;">正常打卡</text>
			</view>
			<view style="margin:30rpx 0 0 24rpx;width: 150rpx;height: 56rpx;border:5rpx solid #C0C4CC;text-align: center;line-height: 46rpx;">
				<text style="color:#C0C4CC;font-size: 28rpx;">请假</text>
			</view>
			<view style="margin:30rpx 0 0 24rpx;width: 150rpx;height: 56rpx;border:5rpx solid #C0C4CC;text-align: center;line-height: 46rpx;">
				<text style="color:#C0C4CC;font-size: 28rpx;">外勤</text>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date'
			}
		},
		methods: {

		}
	}
</script>

<style>
.title{
	width: 100%;
	height: 240rpx;
	background: #FFFFFF;
}
</style>

运行结果