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>
网友评论