gold-field/pages/index/index.vue

<template>
	<view class="main_content">
		<view class="header_info">
			<view class="info_container">
				<view class="name_wrap">
					<image src="/static/user.png" class="name_logo"></image>
					<text class="name">姓名 : 张三</text>
				</view>
				<view class="idcard_wrap">
					<image src="/static/card.png" class="card_logo"></image>
					<text class="card_number">身份证号 : 123456202301010000</text>
				</view>
			</view>
		</view>
		<view class="grid_layout content" v-if="activeTab == 0">
			<view class="grid_box background1">
				<text class="main_title">L-乳酸</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
			<view class="grid_box background2">
				<text class="main_title">CRE-肌酸</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
			<view class="grid_box background3">
				<text class="main_title">CR-肌酐</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
			<view class="grid_box background4">
				<text class="main_title">尿素</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
			<view class="grid_box background5">
				<text class="main_title">β-羟丁酸</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
			<view class="grid_box background6">
				<text class="main_title">L-谷氨酸</text>
				<view class="capacity_btn">
					<text class="unit">00mg / L</text>
				</view>
			</view>
		</view>
		<view class="content" v-if="activeTab == 1">
			<view class="card_wrap" v-for="item in 10" :key="item">
				<view class="time_wrap">
					<image src="/static/time.png" class="time_logo"></image>
					<text class="date">2023-07-01</text>
					<text class="time">14:20</text>
				</view>
				<view class="info_grid">
					<view class="info bg1">
						<text>L-乳酸  00mg/L</text>
					</view>
					<view class="info bg2">
						<text>CRE-肌酸  00mg/L</text>
					</view>
					<view class="info bg3">
						<text>CR-肌酐  00mg/L</text>
					</view>
					<view class="info bg4">
						<text>尿素  00mg/L</text>
					</view>
					<view class="info bg5">
						<text>β-羟丁酸 00mg/L</text>
					</view>
					<view class="info bg6">
						<text>L-谷氨酸  00mg/L</text>
					</view>
				</view>
			</view>
		</view>
		<view class="footer_tab">
			<view :class="activeTab == 0 ? 'btn active' : 'btn'" @click="changeActiveTab(0)">
				<image src="/static/result.png" class="result_logo"></image>
				<text class="font_btn">当前结果</text>
			</view>
			<view :class="activeTab == 1 ? 'btn active' : 'btn'" @click="changeActiveTab(1)">
				<image src="/static/data.png" class="history_logo"></image>
				<text class="font_btn">历史数据</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 0
		}
	},
	onLoad() {

	},
	methods: {
		changeActiveTab(activeTab) {
			this.activeTab = activeTab
		}
	}
}
</script>

<style lang="less">
	.main_content{
		background: #f6f6f6;
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		.header_info{
			padding: 20rpx;
			.info_container{
				width: 100%;
				background: #fff;
				padding: 22rpx 38rpx;
				box-sizing: border-box;
				border-radius: 40rpx;
				align-items: center;
				justify-content: space-between;
				display: flex;
				.name_wrap{
					display: flex;
					align-items: center;
					.name_logo{
						width: 30rpx;
						height: 35rpx;
					}
					.name{
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 0.03em;
						color: #000000;
						margin-left: 16rpx;
					}
				}
				.idcard_wrap{
					display: flex;
					align-items: center;
					.card_logo{
						width: 38rpx;
						height: 29rpx;
					}
					.card_number{
						font-size: 24rpx;
						font-weight: 500;
						letter-spacing: 0.03em;
						margin-left: 13rpx;
						color: #BBBBBB;
					}
				}
			}
		}
		.content{
			flex: 1;
			padding: 20rpx;
			padding-top: 0;
			overflow: scroll;
			.card_wrap{
				padding: 20rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 19rpx;
				margin-bottom: 20rpx;
				&:last-child{
					margin-bottom: 0;
				}
				.time_wrap{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.time_logo{
						width: 32rpx;
						height: 32rpx;
					}
					.date{
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #BBBBBB;
						margin-left: 18rpx;
						margin-right: 24rpx;
					}
					.time{
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #BBBBBB;
					}
				}
				.info_grid{
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-template-rows: repeat(3, 1fr);
					column-gap: 20rpx;
					row-gap: 10rpx;
					.info{
						padding: 18rpx 0;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 26rpx;
						font-weight: 500;
						letter-spacing: 0.06em;
						color: #151515;
						border-radius: 8rpx;
					}
					.bg1{
						background: rgba(97, 43, 235, 0.06);
					}
					.bg2{
						background: rgba(97, 43, 235, 0.06);
					}
					.bg3{
						background: rgba(24, 164, 240, 0.06);
					}
					.bg4{
						background: rgba(24, 164, 240, 0.06);
					}
					.bg5{
						background: rgba(246, 170, 18, 0.06);
					}
					.bg6{
						background: rgba(246, 170, 18, 0.06);
					}
				}
			}
		}
		.grid_layout{
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: repeat(3, 1fr);
			column-gap: 20rpx;
			row-gap: 20rpx;
			.grid_box{
				border-radius: 19rpx;
				padding: 77rpx 0 88rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-sizing: border-box;
				.main_title{
					font-size: 60rpx;
					font-weight: bold;
					letter-spacing: 0.1em;
					color: #FFFFFF;
					margin-bottom: 25rpx;
				}
				.capacity_btn{
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 10rpx 40rpx;
					border-radius: 60rpx;
					background: rgba(255, 255, 255, 0.1);
					.unit{
						white-space: nowrap;
						font-size: 40rpx;
						font-weight: normal;
						letter-spacing: 0em;
						color: #FFFFFF;
					}
				}
			}
			.background1{
				background: #612BEB;
			}
			.background2{
				background: #7540FD;
			}
			.background3{
				background: #18A4F0;
			}
			.background4{
				background: #1ACEEA;
			}
			.background5{
				background: #F6AA12;
			}
			.background6{
				background: #FDC030;
			}
		}
		.footer_tab{
			padding: 19rpx 59rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn{
				display: flex;
				align-items: center;
				padding: 22rpx 55rpx;
				justify-content: space-between;
				box-sizing: border-box;
				.result_logo{
					height: 28rpx;
					width: 25rpx;
				}
				.history_logo{
					width: 32rpx;
					height: 28rpx;
				}
				.font_btn{
					font-size: 26rpx;
					font-weight: 500;
					letter-spacing: 0em;
					color: #151515;
					margin-left: 16rpx;
				}
			}
			.active{
				background: #F6F6F6;
				border-radius: 42rpx;
			}
		}
	}
</style>