<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>