|
|
<template>
|
|
|
<div class="showreport">
|
|
|
<div class="top">
|
|
|
<van-row class="title">
|
|
|
<van-col span="6">姓名：</van-col>
|
|
|
<van-col span="18">张三</van-col>
|
|
|
</van-row>
|
|
|
<van-row class="title">
|
|
|
<van-col span="6">性别：</van-col>
|
|
|
<van-col span="18">男</van-col>
|
|
|
</van-row>
|
|
|
<van-row class="title">
|
|
|
<van-col span="6">身份证：</van-col>
|
|
|
<van-col span="18">131122115511555111</van-col>
|
|
|
</van-row>
|
|
|
<van-row class="button">
|
|
|
<van-col span="8"><RouterLink to="/showReport"><van-button size="small" plain>查询体检结果</van-button></RouterLink></van-col>
|
|
|
<van-col span="8"><RouterLink to="/healthCertificate"><van-button size="small" plain>查看健康证</van-button></RouterLink></van-col>
|
|
|
<van-col span="8"><van-button size="small" plain>下载报告</van-button></van-col>
|
|
|
</van-row>
|
|
|
<div class="title1">北京市从业人员体检结果</div>
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
<van-row style="margin-top: 20px;color: #9e9e9e;">
|
|
|
<van-col span="4"></van-col>
|
|
|
<van-col span="16">项目</van-col>
|
|
|
<van-col span="4">结果</van-col>
|
|
|
</van-row>
|
|
|
<van-row v-for="(item, index) in list" :key="index" class="list">
|
|
|
<van-col v-if="item.value == '无'" span="4"><van-icon name="checked" color="#4dde79" size="20px" /></van-col>
|
|
|
<van-col v-if="item.value == '有'" span="4"><van-icon name="warning" color="#de554d" size="20px" /></van-col>
|
|
|
<van-col span="16">{{ item.name }}</van-col>
|
|
|
<van-col v-if="item.value == '无'" span="4"><span style="color: #ccc;">无</span></van-col>
|
|
|
<van-col v-if="item.value == '有'" span="4">有</van-col>
|
|
|
</van-row>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import { RouterLink } from 'vue-router';
|
|
|
|
|
|
let list = [
|
|
|
{
|
|
|
name: "细菌性痢疾",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "伤寒和副伤赛",
|
|
|
value: "有"
|
|
|
}, {
|
|
|
name: "病毒性肝炎(甲型、戌型)",
|
|
|
value: "有"
|
|
|
}, {
|
|
|
name: "活动性肺结核",
|
|
|
value: "无"
|
|
|
},
|
|
|
{
|
|
|
name: "化脓性或渗出性皮肤病",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "手部真菌感染性疾病(如手癣、指甲癣等)",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "霍乱",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "阿米巴性痢疾",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "手部湿疹",
|
|
|
value: "无"
|
|
|
}, {
|
|
|
name: "手部的银屑病或者鳞屑",
|
|
|
value: "无"
|
|
|
},
|
|
|
]
|
|
|
</script>
|
|
|
<style scoped >
|
|
|
.showreport {
|
|
|
height: 100vh;
|
|
|
background: radial-gradient(circle at top center, #33cdc9 30%, #e3e3e3, transparent 2%);
|
|
|
padding-top: 20px;
|
|
|
}
|
|
|
|
|
|
.title1 {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
background-color: #fff;
|
|
|
padding: 10px 40px;
|
|
|
border-radius: 20px;
|
|
|
box-shadow: 0px 5px 5px #add2d1;
|
|
|
color: #333;
|
|
|
|
|
|
transform: translateY(20px);
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
|
|
|
.top {
|
|
|
color: #ffffff;
|
|
|
background-color: #33cdc9;
|
|
|
border: 1px solid #fff;
|
|
|
margin: auto 10px;
|
|
|
border-radius: 20px;
|
|
|
padding: 20px 20px 0px 20px;
|
|
|
|
|
|
|
|
|
}
|
|
|
.top .button {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
|
|
|
.top .button .van-col {
|
|
|
padding-left: 10px;
|
|
|
padding-right: 10px;
|
|
|
}
|
|
|
|
|
|
.top .button .van-button {
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.top .title {
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
font-weight: 900;
|
|
|
text-align: right;
|
|
|
margin-top: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.top .title .van-col:last-child {
|
|
|
text-align: left;
|
|
|
padding-left: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
.bottom {
|
|
|
background-color: #fff;
|
|
|
padding: 20px;
|
|
|
|
|
|
|
|
|
}
|
|
|
.bottom .list {
|
|
|
margin-top: 10px;
|
|
|
padding-bottom: 10px;
|
|
|
border-bottom: 1px dotted #ddd;
|
|
|
}
|
|
|
</style> |