7、显示健康码页

card.html
在登录页基础上改造即可

    <style>
        /* body加背景色 
    设置字体大小*/
        body {
            margin: 0;
            background-color: #007FC6;
            font-size: 12px;
        }

        /* 头部设置高度和背景颜色 
     顶部固定定位*/
        .navbar-header {
            width: 100%;
            height: 36px;
            background-color: #F8F8F8;
            position: fixed;
            top: 0;
        }

        /* 整个form的样式 flex垂直布局*/
        .login-form {
            width: 40%;
            margin: 50px auto;
            background-color: #F5F5F5;
            display: flex;
            flex-direction: column;
            /*垂直布局 */
            align-items: center;
            /* 各子项居中 两侧留边*/
            justify-content: space-around;
            /*垂直方向分散布局*/
        }

        .base-info {
            width: 90%;
            color: white;
            background-color: #008000;
        }

        .img-info {
            margin: 20px;
            width: 90%;
            border: 1px solid gray;
        }
        .img1{
            width:300px;
            heitht:300px;
            margin:0 auto;
            /*border:1px solid red;*/
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="navbar-header">
            <img src="imgs/logo.png" style="width: 170px;margin-left: 100px;margin-top:10px" />
            <span>欢迎使用个人电子码</span>
        </div>
        <div class="login-form">
            <h2>显示个人电子码</h2>
            <div class="base-info">
                <p>姓名：<span id="name"></span></p>
                <p>身份证号码：<span id="idcard"></span></p>
                <p>健康码：<span id="cardColor"></span></p>
                <p>手机号码：<span id="telephone"></span></p>
                <p>车牌号：<span id="carNo"></span></p>
                <p>住址：<span id="location"></span></p>
            </div>
            <div class="img-info">
                <p style="padding: 10px 20px;">
                    请主动出示，配合检查；并做好自身防护工作，码色会根据您的健康申报由当地政府根据相关政策及时更新。
                </p>
                <div class="img1">
                <img id="img" src="" alt="请登录">
                </div>
                <!-- 初始不显示，获取二维码图片后再显示 -->
                <p style="padding: 10px 20px;text-align: center;display: none" id="info">
                    <span id="time"></span>
                </p>
                <h3 style="text-align: center;font-weight: bold;">文明创建同参于 科学防控共受益</h3>
            </div>
        </div>
    </div>
</body>