工作253:页面布局--考勤页面

<view v-if="current==1" style="display: flex;flex-direction: column;justify-content: center;
">
			<view style="display: flex;justify-content: center;">
				<u-icon name="arrow-left" style="margin-right: 24rpx;"></u-icon>
				<text>2020.10.12</text>
				<u-icon name="arrow-right" style="margin-left: 24rpx;"></u-icon>
			</view style="display: flex;justify-content: center;">
			<view style="margin:40rpx 0 0 30rpx;width: 690rpx;height: 210rpx;background: #FFFFFF;box-shadow: 0px 0px 16px #F0F0F0;display: flex;flex-direction: column;">
				<view style="display: flex;">
				<view style="margin:52rpx 0 0 34rpx;width: 20rpx;height: 20rpx;border-radius: 20rpx;background: #F29100;"></view>
				<text style="margin:41rpx 0 0 34rpx;font-size: 30rpx;">上班打卡</text>
				<view style="margin:34rpx 0 0 34rpx;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 style="display: flex;">
				<view style="margin:52rpx 0 0 34rpx;width: 20rpx;height: 20rpx;border-radius: 20rpx;background: #2B85E4;"></view>
				<text style="margin:41rpx 0 0 34rpx;font-size: 30rpx;">下班迟到</text>
				<view style="margin:34rpx 0 0 34rpx;width: 150rpx;height: 56rpx;border:5rpx solid #2B85E4;text-align: center;line-height: 46rpx;">
					<text style="color:#2B85E4;font-size: 28rpx;">迟到</text>
				</view>
				</view>
			</view>
		</view>

运行结果