|
|
@@ -8,84 +8,99 @@
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
|
|
|
<style>
|
|
|
- * {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ * {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ border-collapse: collapse;
|
|
|
+ margin: 10px auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ th,
|
|
|
+ tr,
|
|
|
+ td {
|
|
|
+ border: 1px solid #000;
|
|
|
+ border-collapse: collapse;
|
|
|
+ padding: 6px 5px;
|
|
|
+ page-break-inside: avoid;
|
|
|
+ }
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ thead {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ thead tr {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ thead tr th {
|
|
|
+ border: none;
|
|
|
+ border-collapse: separate;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textAlign,
|
|
|
+ th {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textRight {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
|
|
|
- table {
|
|
|
- border-collapse: collapse;
|
|
|
- margin: 10px auto;
|
|
|
- }
|
|
|
+ h3 {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxPosition {
|
|
|
+ display: inline-flex;
|
|
|
+ float: inline-end;
|
|
|
+ }
|
|
|
|
|
|
- th,
|
|
|
- tr,
|
|
|
- td {
|
|
|
- border: 1px solid #000;
|
|
|
- border-collapse: collapse;
|
|
|
- padding: 6px 5px;
|
|
|
- page-break-inside: avoid;
|
|
|
- }
|
|
|
- h3 {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
+ .checkBox {
|
|
|
+ display: flex;
|
|
|
+ /* justify-content: end; */
|
|
|
+ }
|
|
|
|
|
|
- thead {
|
|
|
- border: none;
|
|
|
- }
|
|
|
- thead tr {
|
|
|
- border: none;
|
|
|
- }
|
|
|
- thead tr th {
|
|
|
- border: none;
|
|
|
- border-collapse: separate;
|
|
|
- }
|
|
|
+ .box {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ border: 1px solid black;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 15px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
|
|
|
- .textAlign,
|
|
|
- th {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .box:not(:last-child)::after {
|
|
|
+ content: "/";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 100%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ padding: 0 5px;
|
|
|
+ }
|
|
|
|
|
|
- h3 {
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .boxPosition {
|
|
|
- display: inline-flex;
|
|
|
- }
|
|
|
- .checkBox {
|
|
|
- display: flex;
|
|
|
- /* justify-content: end; */
|
|
|
- }
|
|
|
- .box {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- display: inline-block;
|
|
|
- border: 1px solid black;
|
|
|
- text-align: center;
|
|
|
- line-height: 14px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .box:not(:last-child) {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- .box:not(:last-child)::after {
|
|
|
- content: "/";
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 90%;
|
|
|
- transform: translateY(-50%);
|
|
|
- padding: 0 5px;
|
|
|
- }
|
|
|
- @page {
|
|
|
- margin-top: 1.4cm; /* 设置其他页的上边距为2cm */
|
|
|
- margin-bottom: 1.2cm; /* 设置其他页的下边距为2cm */
|
|
|
- }
|
|
|
+ @page {
|
|
|
+ margin-top: 1.4cm;
|
|
|
+ /* 设置其他页的上边距为2cm */
|
|
|
+ margin-bottom: 1.2cm;
|
|
|
+ /* 设置其他页的下边距为2cm */
|
|
|
+ }
|
|
|
|
|
|
- @page :first {
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 10mm; /* 设置第一页的下边距为2cm */
|
|
|
- }
|
|
|
+ @page :first {
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 10mm;
|
|
|
+ /* 设置第一页的下边距为2cm */
|
|
|
+ }
|
|
|
|
|
|
input {
|
|
|
border-bottom: 1px solid #000;
|
|
|
@@ -101,7 +116,7 @@
|
|
|
.boxDiagnosisTime {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
- display: inline-block;
|
|
|
+ display: inline-flex;
|
|
|
border: 1px solid black;
|
|
|
text-align: center;
|
|
|
line-height: 16px;
|
|
|
@@ -109,12 +124,8 @@
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
- .boxDiagnosisTime:not(:last-child)::after {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 100%;
|
|
|
- transform: translateY(-50%);
|
|
|
- padding: 0 5px;
|
|
|
+ .slash {
|
|
|
+ display: inline;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
@@ -141,7 +152,7 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
</td>
|
|
|
- <td class="textAlign">出生日期</td>
|
|
|
+ <td class="textAlign" style="width: 80px;">出生日期</td>
|
|
|
<td class="textAlign" id="birthday"></td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
@@ -179,15 +190,10 @@
|
|
|
<tr>
|
|
|
<td colspan="2" class="textAlign">血型</td>
|
|
|
<td colspan="5"><span> 1 A 型 2 B 型 3 O 型 4 AB 型 5 不详 / RH：1 阴性 2 阳性 3 不详</span>
|
|
|
- <div class="boxPosition">
|
|
|
- <span id="rh" class="box">
|
|
|
- <!-- 使用JavaScript生成10个方框 -->
|
|
|
- <span>/</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
<div class="boxPosition">
|
|
|
<span id="bloodType" class="box">
|
|
|
- <!-- 使用JavaScript生成10个方框 -->
|
|
|
+ </span>
|
|
|
+ <span id="rh" class="box">
|
|
|
</span>
|
|
|
</div>
|
|
|
|
|
|
@@ -267,38 +273,50 @@
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td rowspan="4" class="textAlign">既往史</td>
|
|
|
- <td class="textAlign">疾病</td>
|
|
|
+ <td class="textAlign" style="width: 40px;">疾病</td>
|
|
|
<td colspan="5"><span> 1 无 2 高血压 3 糖尿病 4 冠心病 5 慢性阻塞性肺疾病 6 恶性肿瘤<input
|
|
|
id="historyPreviousDiseaseMalignancy" type="text" disabled> 7 脑卒中
|
|
|
8 严重精神障碍 9 结核病 10 肝炎 11 其他法定传染病 <br /> 12 职业病<input
|
|
|
id="historyPreviousDiseaseOccupationalDisease" type="text" disabled> 13 其他<input
|
|
|
id="historyPreviousDiseaseOther" type="text" disabled>
|
|
|
<br /><br />
|
|
|
- <span> <span id="diseaseDuration1" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration1Year">
|
|
|
- </span>年<span id="diseaseDuration1Month">
|
|
|
- </span>月</span>
|
|
|
- /<span> <span id="diseaseDuration2" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration2Year">
|
|
|
- </span>年<span id="diseaseDuration2Month">
|
|
|
- </span>月</span>
|
|
|
- /<span> <span id="diseaseDuration3" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration3Year">
|
|
|
- </span>年<span id="diseaseDuration3Month">
|
|
|
- </span>月</span>
|
|
|
- <br /><br />
|
|
|
- <span> <span id="diseaseDuration4" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration4Year">
|
|
|
- </span>年<span id="diseaseDuration4Month">
|
|
|
- </span>月</span>
|
|
|
- /<span> <span id="diseaseDuration5" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration5Year">
|
|
|
- </span>年<span id="diseaseDuration5Month">
|
|
|
- </span>月</span>
|
|
|
- /<span> <span id="diseaseDuration6" class="boxDiagnosisTime">
|
|
|
- </span>确诊时间<span id="diseaseDuration6Year">
|
|
|
- </span>年<span id="diseaseDuration6Month">
|
|
|
- </span>月</span>
|
|
|
+ <div style="white-space: nowrap;">
|
|
|
+ <div id="diseaseDuration1" class="boxDiagnosisTime">
|
|
|
+ </div> <span>
|
|
|
+ 确诊时间<span id="diseaseDuration1Year">
|
|
|
+ </span>年<span id="diseaseDuration1Month">
|
|
|
+ </span>月
|
|
|
+ </span>
|
|
|
+ / <div id="diseaseDuration2" class="boxDiagnosisTime">
|
|
|
+ </div><span>
|
|
|
+ 确诊时间<span id="diseaseDuration2Year">
|
|
|
+ </span>年<span id="diseaseDuration2Month">
|
|
|
+ </span>月
|
|
|
+ </span>
|
|
|
+ / <div id="diseaseDuration3" class="boxDiagnosisTime">
|
|
|
+ </div><span>
|
|
|
+ 确诊时间<span id="diseaseDuration3Year">
|
|
|
+ </span>年<span id="diseaseDuration3Month">
|
|
|
+ </span>月
|
|
|
+ </span>
|
|
|
+ <br /><br />
|
|
|
+ <div id="diseaseDuration4" class="boxDiagnosisTime">
|
|
|
+ </div><span>
|
|
|
+ 确诊时间<span id="diseaseDuration4Year">
|
|
|
+ </span>年<span id="diseaseDuration4Month">
|
|
|
+ </span>月
|
|
|
+ </span>
|
|
|
+ / <div id="diseaseDuration5" class="boxDiagnosisTime">
|
|
|
+ </div><span>
|
|
|
+ 确诊时间<span id="diseaseDuration5Year">
|
|
|
+ </span>年<span id="diseaseDuration5Month">
|
|
|
+ </span>月
|
|
|
+ </span>
|
|
|
+ / <div id="diseaseDuration6" class="boxDiagnosisTime">
|
|
|
+ </div><span>确诊时间<span id="diseaseDuration6Year">
|
|
|
+ </span>年<span id="diseaseDuration6Month">
|
|
|
+ </span>月</span>
|
|
|
+ </div>
|
|
|
</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
@@ -344,29 +362,29 @@
|
|
|
<td colspan="2" rowspan="3" class="textAlign">家族史</td>
|
|
|
<td class="textAlign">父亲</td>
|
|
|
<td colspan="2" style="white-space: nowrap;">
|
|
|
- <div id="father" data-param="6" style="display: inline-block;">
|
|
|
+ <div id="father" data-param="6" style="display: inline-flex;">
|
|
|
</div>
|
|
|
- <input id="fatherOther" type="text" disabled style="display: inline-block;">
|
|
|
+ <input id="fatherOther" type="text" disabled style="display: inline-flex;">
|
|
|
</td>
|
|
|
<td class="textAlign">母亲</td>
|
|
|
<td style="white-space: nowrap;">
|
|
|
- <div id="mother" class="checkBox" data-param="6" style="display: inline-block;">
|
|
|
+ <div id="mother" class="checkBox" data-param="6" style="display: inline-flex;">
|
|
|
</div>
|
|
|
- <input id="motherOther" type="text" disabled style="display: inline-block;">
|
|
|
+ <input id="motherOther" type="text" disabled style="display: inline-flex;">
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td class="textAlign">兄弟姐妹</td>
|
|
|
<td colspan="2" style="white-space: nowrap;">
|
|
|
- <div id="sibling" data-param="6" class="checkBox" style="display: inline-block;">
|
|
|
+ <div id="sibling" data-param="6" class="checkBox" style="display: inline-flex;">
|
|
|
</div>
|
|
|
- <input id="siblingOther" type="text" disabled style="display: inline-block;">
|
|
|
+ <input id="siblingOther" type="text" disabled style="display: inline-flex;">
|
|
|
</td>
|
|
|
<td class="textAlign">子女</td>
|
|
|
<td style="white-space: nowrap;">
|
|
|
- <div id="children" class="checkBox" data-param="6" style="display: inline-block;">
|
|
|
+ <div id="children" class="checkBox" data-param="6" style="display: inline-flex;">
|
|
|
</div>
|
|
|
- <input id="childrenOther" type="text" disabled style="display: inline-block;">
|
|
|
+ <input id="childrenOther" type="text" disabled style="display: inline-flex;">
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
@@ -607,4 +625,4 @@
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
-</html>
|
|
|
+</html>
|
