shenweishi/pages/Health_monitor/urinometer.vue

<template>
	<view class="urinometer">
		<view class="content">
			<img class="bg_picture" style="" src="@/static/urinometer/1.png" alt="" />
			<view class="content_top" style="">
				<view class="top_text">
					<text>已连接</text>/
					<text>未连接</text>
				</view>
				<view class="top_box" style="">
					<img class="top_box_img" style="" src="@/static/urinometer/3.png" alt="" />
				</view>
				<view class="top_center" @click="result_click">
					扫码查看结果
				</view>
				<view class="top_time" style="">
					最新检测记录:2024-08-01 8:29:00
				</view>
			</view>
			<view class="content_bottom" >
				<view class="bottom_box" v-for="(item, index) in contentarr" :key="index" @click="network_click(item.id)">
					<view class="bottom_img-box">
						<img class='bottom_img' style="" :src="item.url" alt="" />
					</view>
					<view class="bottom_text-box">
						<view class="">{{item.title}}</view>
						<view class="bottom_text">{{item.text}}</view>
					</view>
				</view>
				<!-- <view class="" style="display:flex;background: ghostwhite;padding: 10px;border-bottom: 1px solid gainsboro;">
					<view class="" style="width: 20%;">
						<img style="width: 84rpx;height: 84rpx;" src="@/static/urinometer/9.png" alt="" />
					</view>
					<view class="" style="width: 79%;">
						<view class="">健康工具</view>
						<view class="">肾小球滤过率计算器，尿毒症风险预测等</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				contentarr:[{id:1,url:'../../static/urinometer/8.png',title:'检测记录',text:'查看历史检测记录及趋势'},
							{id:2,url:'../../static/urinometer/9.png',title:'健康工具',text:'肾小球滤过率计算器，尿毒症风险预测等'},
							{id:3,url:'../../static/urinometer/10.png',title:'购买设备',text:'购买设备和试纸'},
							{id:4,url:'../../static/urinometer/11.png',title:'设备配网',text:'为设备配置网络连接'},
							{id:5,url:'../../static/urinometer/12.png',title:'操作手册',text:'设备操作步骤说明'},
							{id:6,url:'../../static/urinometer/13.png',title:'检测项目',text:'尿检试纸检测项目说明'},
							{id:7,url:'../../static/urinometer/14.png',title:'删除设备',text:'解绑该账号与设备的关联'},
				]
			}
		},
		methods: {
			result_click(){
				
			},
			getBluetoothAdapterState() {
			    
			    
			},
			network_click(val){
				if(val == 4){
					wx.navigateTo({
						// Health_monitor/components/network
						url:"/pages/Health_monitor/components/network"
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.urinometer{
		.content{
			.bg_picture{
				width: 100%;
			}
			.content_top{
				width: 80%;
				height: 440rpx;
				background:white;
				position: absolute;
				top: 40rpx;
				left:10%;
				margin: 0 auto;
				text-align: center;
				padding: 10rpx;
				border-radius: 20rpx;
				.top_text{
					line-height: 60rpx;
				}
				.top_box{
					margin: 20rpx 0;
					line-height: 100rpx;
					.top_box_img{
						width: 95rpx;
						height: 93rpx;
					}
				}
				.top_center{
					line-height: 60rpx;
					font-size: 14px;
					color: gray;
				}
				.top_time{
					margin: 20rpx 0;
					line-height: 30px;
					background: ghostwhite;
					border-radius: 50rpx;
					font-size: 12px;
				}
			}
			.content_bottom{
				margin-top: 20rpx;
				.bottom_box{
					display:flex;
					background: ghostwhite;
					padding: 20rpx;
					border-bottom: 2rpx solid gainsboro;
					.bottom_img-box{
						width: 20%;text-align: center;
						.bottom_img{
							width: 84rpx;
							height: 84rpx;
						}
					}
					.bottom_text-box{
						width: 79%;
						.bottom_text{
							font-size: 24rpx;
							color: gray;
						}
					}
				}
			}
		}
	}
</style>