clockIn-wechat-uniapp-241018/pages/subPack/punchCard/punchCard.vue

<!-- 打卡 -->
<template>
	<view class="punch-card">
		<!-- 自定义导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
			title="打卡" @clickLeft="$utils.navigateBack" />

		<!-- 打卡图片 -->
		<view class="card-image">
			<image src="@/static/logo.png" mode="widthFix"></image>
		</view>

		<!-- 打卡详情 -->
		<view class="card-detail">
			<view class="card-detail-item">
				<uni-icons type="info-filled" size="25" color="#707070"></uni-icons>
				<view class="time">2024-12-12 12:12:12</view>
			</view>
			<view class="card-detail-item">
				<uni-icons type="location-filled" size="25" color="#707070"></uni-icons>
				<view class="address">长沙市雨花区德思勤城市广场</view>
			</view>
		</view>

		<!-- 提交打卡 -->
		<div @click="photo" class="btn">
			提交打卡
		</div>

	</view>
</template>

<script>
	export default {
		name: "punchCard",
		data() {
			return {

			}
		},
		methods: {
			// 返回人脸识别
			toHuman() {
				uni.navigateTo({
					url: "/pages/human/human"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.punch-card {

		// 打卡图片
		.card-image {
			display: flex;
			justify-content: center;
			margin: 30rpx 0rpx;

			image {
				width: 90%;
				border-radius: 30rpx;
			}
		}

		// 打卡详情
		.card-detail {
			width: 90%;
			margin: 30rpx auto;

			.card-detail-item {
				display: flex;
				align-items: center;
				margin-top: 10rpx;

				.time,
				.address {
					font-size: 30rpx;
					color: #707070;
					box-sizing: border-box;
					padding-left: 20rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		// 提交打卡
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 83%;
			background: $main-color;
			color: white;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 120rpx auto 0rpx auto;
		}
	}
</style>