|
|
<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">00mmol / L</text> </view> </view> <view class="grid_box background2"> <text class="main_title">肌酸</text> <view class="capacity_btn"> <text class="unit">00mmol / L</text> </view> </view> <view class="grid_box background3"> <text class="main_title">肌酐</text> <view class="capacity_btn"> <text class="unit">00mmol / L</text> </view> </view> <view class="grid_box background4"> <text class="main_title">尿素</text> <view class="capacity_btn"> <text class="unit">00mmol / L</text> </view> </view> <view class="grid_box background5"> <text class="main_title">β-羟丁酸</text> <view class="capacity_btn"> <text class="unit">00mmol / L</text> </view> </view> <view class="grid_box background6"> <text class="main_title">L-谷氨酸</text> <view class="capacity_btn"> <text class="unit">00mmol / 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-乳酸 00mmol/L</text> </view> <view class="info bg2"> <text>肌酸 00mmol/L</text> </view> <view class="info bg3"> <text>肌酐 00mmol/L</text> </view> <view class="info bg4"> <text>尿素 00mmol/L</text> </view> <view class="info bg5"> <text>β-羟丁酸 00mmol/L</text> </view> <view class="info bg6"> <text>L-谷氨酸 00mmol/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() { // 就在加载的时候请求一次某人的数据 筛选最新一条放入第一个tab
// 历史数据渲染到第二个tab
// 数据中有username idcard 以及信息列表
uni.request({ url: 'https://www.example.com/request', //仅为示例,并非真实接口地址。
data: { text: 'uni.request' }, header: { 'custom-header': 'hello' //自定义请求头信息
}, success: (res) => { console.log(res.data); } }); }, 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; box-sizing: border-box; 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; display: flex; flex-direction: column; align-items: center; justify-content: 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>
|