Temporary/pages/index/index.vue

<template>
	<view class="content">
		<!-- 标题栏 -->
		<view class="title-header-content">
			<!-- 右边放置一个时间 -->
			<view class="right-time">
				<text class="time-text">{{ currentTime }}</text>
			</view>
			<view class="header-section">
				<text class="header-title">检验信息屏</text>
			</view>
			<!-- 左边放一个设置按钮 -->
			<view class="left-config">
				<tui-icon name="setup" color="#0052a1" @click="openSetting"></tui-icon>

				<!-- 设置窗口 -->
				<tui-alert :show="showSetting" @click="showSetting=false;">
					<view>
						<tui-input placeholder="请输入显示人数" v-model="displayCount"></tui-input>
					</view>
				</tui-alert>


			</view>
		</view>

		<!-- 上半部分75vh - 已确认人员信息 -->
		<view class="top-section">
			<!-- 表头 -->
			<view class="section-header">
				<view class="row-heard"> 序号 </view>
				<view class="row-heard"> 体检号 </view>
				<view class="row-heard"> 姓名 </view>
				<view class="row-heard"> 性别 </view>
				<view class="row-heard"> 时间 </view>
			</view>
			<!-- 表身 -->
			<view class="table-body" v-for="(item, index) in displayCount">
				<view class="row-cloumn">{{ index + 1 }} </view>
				<view class="row-cloumn"> 12345678 </view>
				<view class="row-cloumn"> 吴二 </view>
				<view class="row-cloumn"> 男 </view>
				<view class="row-cloumn"> 2025-10-20 </view>
			</view>
		</view>

		<!-- 下半部分20vh - 未确认人员信息-->

		<view class="bottom-section">
			<view class="left-box">
				<view class="feces-box">
					<view class="feces-title-yes">
						大便已确认:<text class="feces-count-yes">100</text>
					</view>
					<view class="feces-title-no">
						大便未确认:<text class="feces-count-no">100</text>
					</view>
				</view>

				<view class="urination-box">
					<view class="urination-title-yes">
						小便已确认:<text class="urination-count-yes">100</text>
					</view>
					<view class="urination-title-no">
						小便未确认:<text class="urination-count-no">100</text>
					</view>
				</view>
			</view>

			<!-- 扫码框区域 -->
			<view class="right-box">
				<view class="input-box-right">
					<tui-input placeholder="请输入体检号" inputBorder="true" borderColor="#000" adjustPosition="false"
						isFillet="true" style="margin-top: 1vh;margin-left: 2vw;"></tui-input>
					<view class="sweep-box"><tui-icon name="sweep" style="margin-top: 1vh;" color="#0052A1"></tui-icon>
					</view>
				</view>

				<!-- 提示图 -->
				<view class="tip-box">
					<image src="/static/xjyj.png" style="width: 300px;height:250px" />
					<view class="tip-box-tipfont">
						请扫描或输入您的体检号
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		onUnmounted
	} from "vue";

	// 显示数量控制
	const displayCount = ref(15);

	// 实时时间
	const currentTime = ref("");

	// 更新时间函数
	const updateTime = () => {
		const now = new Date();
		currentTime.value = now.toLocaleString("zh-CN", {
			year: "numeric",
			month: "2-digit",
			day: "2-digit",
			hour: "2-digit",
			minute: "2-digit",
			second: "2-digit",
			hour12: false,
		});
	};

	let timer = null;

	onMounted(() => {
		updateTime();
		timer = setInterval(updateTime, 1000);
	});

	onUnmounted(() => {
		if (timer) {
			clearInterval(timer);
		}
	});


	const showSetting = ref(false)
	// 打开设置窗口
	async function openSetting() {
		console.log('打开设置')
		showSetting.value = true
	}
</script>

<style>
	/* 主体容器 */
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		background: #0086d0;
	}

	.title-header-content {
		width: 100vw;
		display: flex;
		height: 3vh;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		border-bottom: 1rpx solid #56c3ef;
		background: linear-gradient(180deg, #bdebfc 0%, #ffffff 100%);
		padding: 0 20rpx;
	}

	.left-config {
		display: flex;
		width: 10vw;
		align-items: center;
		margin-left: 15vw;
		justify-content: start;
	}

	.right-time {
		display: flex;
		width: 25vw;
		align-items: center;
	}

	.time-text {
		font-size: 24px;
		color: #333;
		font-weight: bold;
	}

	/* 标题栏 */
	.header-section {
		width: 35vw;
		height: 5vh;
		display: flex;
		margin-bottom: 50rpx;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: #56c3ef;
		border-bottom-left-radius: 130rpx;
		border-bottom-right-radius: 130rpx;
		border-bottom: 1rpx solid #56c3ef;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
	}

	.header-title {
		font-size: 30px;
		font-weight: bold;
		margin-top: 2vh;
	}

	/* 上半部分 - 75vh */
	.top-section {
		width: 98vw;
		height: 65vh;
		background: white;
		margin-top: 50rpx;
		margin: 20rpx;
		border-radius: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		height: 3vh;
		background: #76d9fa;
		padding-bottom: 10rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.display-control {
		display: flex;
		align-items: center;
		gap: 10rpx;
	}

	.count-input {
		width: 80rpx;
		height: 40rpx;
		border: 1rpx solid #ddd;
		border-radius: 5rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.person-list {
		height: calc(60vh - 100rpx);
	}

	.person-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin: 10rpx 0;
		background: #f8f9fa;
		border-radius: 8rpx;
		border-left: 4rpx solid #007bff;
	}

	.person-id {
		width: 120rpx;
		font-weight: bold;
		color: #007bff;
	}

	.person-name {
		width: 120rpx;
		color: #333;
	}

	.person-gender {
		width: 60rpx;
		color: #666;
	}

	.person-time {
		width: 200rpx;
		color: #999;
		font-size: 24rpx;
	}

	/* 下半部分 - 30vh */
	.bottom-section {
		height: 28vh;
		display: flex;
		padding: 10rpx;
		width: 97vw;
		margin-left: 1vw;
		border: 1px solid #eee;
		border-radius: 30rpx;
		background: #fff;
	}

	/* 左部分 - 60vw */
	.left-section {
		width: 60vw;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
		padding-right: 10rpx;
	}

	.status-card {
		flex: 1;
		background: white;
		border-radius: 10rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.status-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 15rpx;
		text-align: center;
	}

	.status-numbers {
		display: flex;
		justify-content: space-around;
	}

	.unconfirmed,
	.confirmed {
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
	}

	.red {
		background: #ffebee;
		color: #d32f2f;
		border: 1rpx solid #ffcdd2;
	}

	.green {
		background: #e8f5e8;
		color: #388e3c;
		border: 1rpx solid #c8e6c9;
	}

	/* 右部分 - 40vw */
	.right-section {
		width: 40vw;
		padding-left: 10rpx;
	}

	.scan-section {
		height: 100%;
		background: white;
		border-radius: 10rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
	}

	.scan-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.scan-btn {
		background: #007bff;
		color: white;
		border: none;
		border-radius: 50rpx;
		padding: 20rpx 40rpx;
		font-size: 28rpx;
	}

	.scan-btn:active {
		background: #0056b3;
	}

	.scan-tip {
		font-size: 24rpx;
		color: #666;
		text-align: center;
	}

	.row-heard {
		width: 18vw;
		color: #0052a1;
		font-size: 28px;
		margin-left: 10rpx;
		font-weight: bold;
		text-align: center;
	}

	.table-body {
		width: 100%;
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.row-cloumn {
		width: 18vw;
		color: #0052a1;
		font-size: 28px;
		height: 3vh;
		text-align: center;
		margin-left: 10rpx;
		background: #f8f9fa;
		border-radius: 10rpx;
		padding: 10rpx;
	}

	.left-box {
		width: 45vw;
		height: 16vh;
		/* border: 2px dashed #000; */
		margin-top: 1vh;
		margin-left: 2vw;
		border-radius: 30rpx;
	}

	.urination-box {
		width: 100%;
		height: 45%;
		border: 2px dashed rgb(189, 189, 189);
		border-radius: 20rpx;
		margin-top: 1vh;
	}

	.feces-box {
		width: 100%;
		height: 45%;
		border: 2px dashed rgb(189, 189, 189);
		border-radius: 20rpx;
	}

	.feces-title-yes {
		text-align: center;
		font-size: 28px;
		height: 50%;
		font-size: 28px;
		font-weight: bold;
	}

	.feces-title-no {
		text-align: center;
		height: 50%;
		font-size: 28px;
		font-weight: bold;
	}

	.urination-title-yes {
		text-align: center;
		height: 50%;
		font-size: 28px;
		font-weight: bold;
	}

	.urination-title-no {
		text-align: center;
		height: 50%;
		font-size: 28px;
		font-weight: bold;
	}

	.feces-count-yes {
		font-size: 35px;
		font-weight: bold;
		color: green;
	}

	.feces-count-no {
		font-size: 35px;
		font-weight: bold;
		color: red;
	}

	.urination-count-yes {
		font-size: 35px;
		font-weight: bold;
		color: green;
	}

	.urination-count-no {
		font-size: 35px;
		font-weight: bold;
		color: red;
	}

	.right-box {
		border: 2px dashed rgb(189, 189, 189);
		border-radius: 20rpx;
		width: 45vw;
		height: 16vh;
		margin-top: 1vh;
		margin-left: 2vw;
	}


	.input-box-right {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.sweep-box {
		width: 20%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tip-box {
		display: flex;
		flex-direction: row;
	}

	.tip-box-tipfont {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}
</style>