feat: 表格

src/router/constant.ts

@@ -18,6 +18,7 @@ export const readyRouteName = {
   gena4: 'gena4',
   explorate: 'explorate',
   extract: 'extract',
+  identification: 'identification',
   demo: 'demo',
 } as const;
 
@@ -56,6 +57,7 @@ export const readyRouteMeta: RouteMetaRaw = {
   [readyRouteName.ask]: { title: '询问笔录' },
   [readyRouteName.explorate]: { title: '道路交通事故现场勘查笔录' },
   [readyRouteName.extract]: { title: '当事人血样（尿样）提取登记表' },
+  [readyRouteName.identification]: { title: '道路交通事故认定书（简易程序）' },
   [readyRouteName.demo]: { title: '表格' },
 };
 

src/router/info.ts

@@ -92,6 +92,12 @@ export const writeRoutesRaw: RoutesRaw<typeof modeFlags.LOGIN> = [
     component: () => import("@/views/tables/extract.vue"),
   },
   {
+    path: "/identification/:id",
+    name: readyRouteName.identification,
+    meta: readyRouteMeta.identification,
+    component: () => import("@/views/tables/identification.vue"),
+  },
+  {
     path: "/demo/:id",
     name: readyRouteName.demo,
     meta: readyRouteMeta.demo,

src/views/tables/author/author-one.vue

@@ -0,0 +1,157 @@
+<!--  -->
+<template>
+  <div class="author">
+    <h2 class="title">授权委托书</h2>
+    <div class="content">
+      <div class="item">
+        <span>委托人：</span>
+        <div class="input-box" style="width: 100px"><input /></div>
+        <span>性别：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>年龄：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>身份证号：</span>
+        <div class="input-box" style="flex: 1"><input /></div>
+      </div>
+      <div class="item">
+        <span>住址：</span>
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>联系方式：</span>
+        <div class="input-box"><input /></div>
+      </div>
+      <div class="item">
+        <span>委托人：</span>
+        <div class="input-box" style="width: 100px"><input /></div>
+        <span>性别：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>年龄：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>身份证号：</span>
+        <div class="input-box" style="flex: 1"><input /></div>
+      </div>
+      <div class="item">
+        <span>住址：</span>
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>联系方式：</span>
+        <div class="input-box"><input /></div>
+      </div>
+      <div class="item">
+        <span>委托人：</span>
+        <div class="input-box" style="width: 100px"><input /></div>
+        <span>性别：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>年龄：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>身份证号：</span>
+        <div class="input-box" style="flex: 1"><input /></div>
+      </div>
+      <div class="item">
+        <span>住址：</span>
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>联系方式：</span>
+        <div class="input-box"><input /></div>
+      </div>
+      <!--  -->
+
+      <div class="item" style="margin-top: 100px">
+        <span>受委托人姓名：</span>
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>性别：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>年龄：</span>
+        <div class="input-box" style="width: 60px"><input /></div>
+        <span>身份证号：</span>
+      </div>
+      <div class="item">
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>工作单位：</span>
+        <div class="input-box" style="width: 330px"><input /></div>
+        <span>住址及联系方式：</span>
+      </div>
+      <div class="item">
+        <div style="flex: 1" class="input-box"><input /></div>
+      </div>
+
+      <div class="item" style="margin-top: 120px">
+        <div style="text-indent: 2em">现委托上述受委托人参与：</div>
+        <div style="flex: 1" class="input-box"><input /></div>
+        <span>一案</span>
+      </div>
+      <div class="item">
+        <div>处理工作。</div>
+      </div>
+      <div class="item" style="margin-top: 100px">
+        <span>受托人：</span>
+        <div class="input-box"><input /></div>
+        <span>代理权限为：</span>
+      </div>
+
+      <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
+        <div style="display: inline-block">
+          <ui-icon :type="checkData.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+          <span>{{ i.title }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+};
+const checkData = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '一般代理。即代理为参与诉讼、调解，提供法律帮助。',
+    },
+    {
+      id: 2,
+      title: '特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。',
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+.input-box {
+  input {
+    width: 100%;
+    height: 100%;
+    border-bottom: 1px solid #000;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+}
+.author {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // font-family: sr, st;
+  font-family: SimHei-Regular, SimHei;
+  font-size: 24px;
+  font-weight: 400;
+  .title {
+    text-align: center;
+    margin-bottom: 70px;
+  }
+  .content {
+    .item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin-bottom: 20px;
+    }
+    .check-item {
+      margin-bottom: 30px;
+
+      span {
+        line-height: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/author/author-two.vue

@@ -0,0 +1,93 @@
+<!--  -->
+<template>
+  <div class="author">
+    <div class="content">
+      <div class="check-item" @click="checkOptions(checkData, index)" v-for="(i, index) in checkData.options">
+        <div style="display: inline-block">
+          <ui-icon :type="checkData.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+          <span>{{ i.title }}</span>
+        </div>
+      </div>
+
+      <div class="item" style="margin-top: 200px">
+        <span style="padding-left: 20px">委托人（签名）：</span>
+        <div style="flex: 1" contenteditable></div>
+      </div>
+      <div class="item" style="margin-top: 100px">
+        <span>受委托人（签名）：</span>
+        <div style="flex: 1" contenteditable></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+};
+const checkData = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '...',
+    },
+    {
+      id: 2,
+      title: '一般代理。即代理为参与诉讼、调解，提供法律帮助。',
+    },
+    {
+      id: 3,
+      title: '特别授权，代为起诉，陈述事实，参加辩论和调解，代为提出、承认、放弃或变更赔偿请求， 提起反诉或上诉，签收法律文书。',
+    },
+    {
+      id: 4,
+      title: '...',
+    },
+  ],
+});
+</script>
+<style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
+.input-box {
+  input {
+    width: 100%;
+    height: 100%;
+    border-bottom: 1px solid #000;
+    padding: 0 10px;
+    box-sizing: border-box;
+  }
+}
+.author {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // font-family: sr, st;
+  font-family: SimHei-Regular, SimHei;
+  font-size: 24px;
+  font-weight: 400;
+  .title {
+    text-align: center;
+    margin-bottom: 70px;
+  }
+  .content {
+    .item {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin-bottom: 20px;
+    }
+    .check-item {
+      margin-bottom: 30px;
+
+      span {
+        line-height: 30px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate-two.vue

@@ -20,7 +20,7 @@
           <p style="margin-bottom: 10px">（一）伤亡人员基本情况；</p>
           <div class="item">
             <span>当场死亡：（</span>
-            <div contenteditable style="width: 10px"></div>
+            <div contenteditable style="min-width: 10px"></div>
             <span>）人；急救、医疗人员签名确认：</span>
             <div style="flex: 1">
               <input type="text" />
@@ -28,7 +28,7 @@
           </div>
           <div class="item">
             <span>受伤：（</span>
-            <div contenteditable style="width: 10px"></div>
+            <div contenteditable style="min-width: 10px"></div>
             <span>）人。</span>
           </div>
           <div class="item column">

src/views/tables/explorate.vue

@@ -7,192 +7,6 @@
       </Header>
     </template>
 
-    <!-- <div class="explorate" :class="{ downMode }">
-      <div ref="layoutRef">
-        <h2 class="title">道路交通事故现场勘查笔录</h2>
-
-        <div class="container">
-          <div class="wrapper">
-            <div class="header">
-              <div class="item" v-for="(i, index) in sceneTypes.options" @click="checkLevel(sceneTypes, index)">
-                <ui-icon :type="sceneTypes.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                <span>{{ i.title }}</span>
-              </div>
-            </div>
-            <div class="info">
-              <div>勘查单位</div>
-              <div class="input-box" contenteditable></div>
-            </div>
-            <div class="info">
-              <div>勘查时间</div>
-              <div class="input-box" contenteditable></div>
-            </div>
-            <div class="info">
-              <div>事故时间</div>
-              <div class="input-box" contenteditable></div>
-            </div>
-            <div class="time">
-              <div class="name">事故地点</div>
-              <div class="time-one">
-                <div class="road-type">
-                  <div class="road-type-name">道路类型</div>
-                  <div class="type-box">
-                    <div class="type-item">
-                      <div class="type-item-name">公路</div>
-                      <div class="item-msg">
-                        <div class="item-info">
-                          <div class="item-info-name">技术等级</div>
-                          <div class="item-info-box">
-                            <div class="item" v-for="(i, index) in technicalLevel.options" @click="checkLevel(technicalLevel, index)">
-                              <ui-icon :type="technicalLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                              <span>{{ i.title }}</span>
-                            </div>
-                          </div>
-                        </div>
-                        <div class="item-info">
-                          <div class="item-info-name">行政等级</div>
-                          <div class="item-info-box">
-                            <div class="item" v-for="(i, index) in administrativeLevel.options" @click="checkLevel(administrativeLevel, index)">
-                              <ui-icon :type="administrativeLevel.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                              <span>{{ i.title }}</span>
-                              <div class="input-box" style="flex: 1" v-if="i.id == 5">
-                                <input type="text" />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="type-item city">
-                      <div class="type-item-name">城市道路</div>
-                      <div class="item-msg">
-                        <div class="item-info">
-                          <div class="item-info-box" style="flex-flow: row wrap">
-                            <div class="item" v-for="(i, index) in cityRoadList.options" @click="checkLevel(cityRoadList, index)">
-                              <ui-icon :type="cityRoadList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                              <span>{{ i.title }}</span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="road-type">
-                  <div class="road-type-name">路口路段类型</div>
-                  <div class="type-box">
-                    <div class="type-item">
-                      <div class="type-item-name">路口</div>
-                      <div class="item-msg intersection" style="min-height: 48px; flex-flow: row wrap">
-                        <div class="item" v-for="(i, index) in roadSideList.options" @click="checkLevel(roadSideList, index)">
-                          <ui-icon :type="roadSideList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                          <span>{{ i.title }}</span>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="type-item">
-                      <div class="type-item-name">路段</div>
-                      <div class="item-msg intersection" style="min-height: 60px; flex-flow: row wrap">
-                        <div class="item" v-for="(i, index) in roadPartList.options" @click="checkLevel(roadPartList, index)">
-                          <ui-icon :type="roadPartList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                          <span>{{ i.title }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="road-info">
-                  <div class="road-name">路名</div>
-                  <div class="road-msg">
-                    <div class="road-name-text" contenteditable></div>
-                    <div class="road-num">路号（公路）</div>
-                    <div class="road-num-text" contenteditable></div>
-                  </div>
-                </div>
-                <div class="road-pos">
-                  <div class="road-pos-name">位置</div>
-                  <div class="pos-box">
-                    <div class="pos-item">
-                      <div class="pos-item-name" style="height: 30px">卫星定位</div>
-                      <div class="pos-msg" style="height: 30px">
-                        <div class="longitude">
-                          <span>经度:</span>
-                          <div contenteditable></div>
-                        </div>
-                        <div class="latitude">
-                          <span>纬度:</span>
-                          <div contenteditable></div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class="pos-item">
-                      <div class="pos-item-name" style="height: 54px">地点描述</div>
-                      <div class="pos-msg desc" style="height: 54px" contenteditable></div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="weather">
-              <div class="name">天气</div>
-
-              <div style="flex-flow: row wrap">
-                <div class="item" v-for="(i, index) in weatherList.options" @click="checkLevel(weatherList, index)">
-                  <ui-icon :type="weatherList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                  <span>{{ i.title }}</span>
-                  <div class="input-box" v-if="i.id == 10">
-                    <input type="text" />
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="environment">
-              <div>
-                <p style="margin-bottom: 18px">一、事故现场道路环境</p>
-                <div class="em-info-box">
-                  <div class="info-item" v-for="(i, index) in environments">
-                    <span class="info-title">{{ i.title }}</span>
-                    <div class="check-box">
-                      <div class="check-item" v-for="(j, j_index) in i.options" @click="checkEnvironItem(j, index, j_index)">
-                        <ui-icon :type="i.check == j.id ? 'rb_y' : 'rb_n'"></ui-icon>
-                        <span>{{ j.name }}</span>
-                      </div>
-                    </div>
-                    <div class="input-box">
-                      <input type="text" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="sign-box">
-              <div>
-                <span>现场勘查人员签名：</span>
-                <div contenteditable></div>
-              </div>
-              <div>
-                <span>记录人签名：</span>
-                <div contenteditable></div>
-              </div>
-            </div>
-            <div class="sign-box">
-              <div>
-                <span>当事人签名：</span>
-                <div contenteditable></div>
-              </div>
-              <div>
-                <span>见证人签名：</span>
-                <div contenteditable></div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="footer">
-          <span>共<span>肆</span>页</span>
-          <span>第<span>壹</span>页</span>
-        </div>
-      </div>
-    </div> -->
     <div class="mySwiper">
       <div class="swiper-wrapper">
         <div class="swiper-slide" v-for="(i, index) in eleList">
@@ -207,6 +21,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import { router } from '@/router';
 import Swiper from 'swiper';
 import 'swiper/swiper.min.css';
 import html2canvas from 'html2canvas';
@@ -218,9 +33,21 @@ import one from './explorate-one.vue';
 import two from './explorate-two.vue';
 import three from './explorate-three.vue';
 import four from './explorate-four.vue';
-const eleList = ref([one, two, three, four]);
-// const layoutRef1 = ref<HTMLDivElement>();
-// const layoutRef2 = ref<HTMLDivElement>();
+
+import identification from './identification.vue';
+
+//授权委托书
+import authorOne from './author/author-one.vue';
+import authorTwo from './author/author-two.vue';
+
+// 血样提取
+import extract from './extract.vue';
+
+//遗留物品
+import legacy from './legacy.vue';
+// const eleList = ref([one, two, three, four]);
+// const eleList = ref([authorOne, authorTwo]);
+const eleList = ref([legacy]);
 
 const downMode = ref(false);
 const getLayoutImage = async () => {
@@ -260,7 +87,6 @@ onMounted(() => {
       },
     },
   });
-  console.error(swiper);
 });
 </script>
 <style lang="scss" scoped>
@@ -283,6 +109,9 @@ onMounted(() => {
         padding: 20px 50px 30px;
         &.downMode {
           padding: 125px 100px 75px;
+          width: 1050px;
+          height: 1485px;
+          box-sizing: border-box;
         }
         // height: 100%;
         // width: 100%;

src/views/tables/extract.vue

@@ -7,63 +7,71 @@
       <table>
         <tr>
           <td width="15%" colspan="2">姓名</td>
-          <td width="20%"></td>
+          <td width="20%"><input type="text" /></td>
           <td width="10%">性别</td>
-          <td width="5%"></td>
+          <td width="5%"><input type="text" /></td>
           <td width="20%">身份证号码</td>
-          <td width="30%" colspan="2"></td>
+          <td width="30%" colspan="2"><input type="text" /></td>
         </tr>
         <tr>
           <td width="15%" colspan="2">事故时间</td>
-          <td width="35%" colspan="3">2023年6月14日16时29分</td>
+          <td width="35%" colspan="3"><input type="text" /></td>
           <td width="20%">地点</td>
-          <td width="30%" colspan="2"></td>
+          <td width="30%" colspan="2"><input type="text" /></td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取时间</td>
-          <td colspan="6"></td>
+          <td colspan="6"><input type="text" /></td>
         </tr>
         <tr>
           <td colspan="2">血样（尿样)提取地点</td>
-          <td colspan="6"></td>
+          <td colspan="6"><input type="text" /></td>
         </tr>
         <tr>
           <td width="10%" rowspan="4" colspan="1">血样（尿样）提取人员填写</td>
           <td width="5%" rowspan="3">提取登记</td>
           <td colspan="3">A样本盛装容器编号</td>
-          <td></td>
+          <td><input type="text" /></td>
           <td width="10%">提取量</td>
-          <td>ml</td>
+          <td>
+            <div><input type="text" />ml</div>
+          </td>
         </tr>
         <tr>
           <td colspan="3">B样本盛装容器编号</td>
-          <td></td>
+          <td><input type="text" /></td>
           <td>提取量</td>
-          <td>ml</td>
+          <td>
+            <div><input type="text" />ml</div>
+          </td>
         </tr>
         <tr>
-          <td colspan="2">消毒名称</td>
-          <td colspan="1"></td>
+          <td colspan="1">消毒名称</td>
+          <td colspan="2"><input type="text" /></td>
           <td>密封方式</td>
-          <td colspan="2"></td>
+          <td colspan="2"><input type="text" /></td>
         </tr>
         <tr>
-          <td width="10%" colspan="3">提取人员单位</td>
-          <td></td>
+          <td width="10%" colspan="2">提取人员单位</td>
+          <td colspan="2"><input type="text" /></td>
           <td>提取人员（签名）</td>
-          <td colspan="2"></td>
+          <td colspan="2"><input type="text" /></td>
         </tr>
         <tr>
           <td>通知家属情况</td>
-          <td colspan="7"></td>
+          <td colspan="7"><input type="text" /></td>
         </tr>
         <tr>
           <td>被提取人（签名）</td>
-          <td colspan="2"></td>
+          <td colspan="2"><input type="text" /></td>
           <td>见证人（签名）</td>
-          <td colspan="2"></td>
+          <td colspan="2"><input type="text" /></td>
           <td>交通警察（签名）</td>
-          <td colspan="2"></td>
+          <td colspan="2"><input type="text" /></td>
+        </tr>
+        <tr>
+          <td>办案单位</td>
+          <td colspan="7"><input type="text" /></td>
         </tr>
       </table>
     </div>
@@ -90,15 +98,21 @@ const getLayoutImage = async () => {
 };
 </script>
 <style lang="scss" scoped>
+td[contenteditable] {
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+}
 .explorate {
   color: #000;
-  font-size: 18px;
-  padding: 10px 30px;
+  font-size: 20px;
+  // padding: 10px 30px;
   width: 100%;
   height: 100%;
   // display: grid;
   overflow: auto;
   font-family: sr, st;
+  box-sizing: border-box;
 
   .title {
     text-align: center;
@@ -107,34 +121,60 @@ const getLayoutImage = async () => {
   .container {
     table {
       width: 100%;
-      height: 100%;
+      // height: 100%;
       border-collapse: collapse;
+      border: 1px solid #000;
       tr {
+        &:last-of-type {
+          td {
+            border-bottom: none;
+          }
+        }
         td {
-          height: 40px;
-          border: 2px solid #000;
+          // height: 40px;
+          height: 110px;
           outline: none;
-          line-height: 24px;
-          padding: 0 14px;
+          // line-height: 24px;
+          padding: 0 5px;
           text-align: center;
-        }
-      }
-    }
-  }
-  &.downMode {
-    table {
-      border: 2px solid #000;
-      tr {
-        td {
-          border: none;
-          border-bottom: 1px solid #000;
           border-right: 1px solid #000;
+          border-bottom: 1px solid #000;
           &:last-of-type {
             border-right: none;
           }
+          > div {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            input {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+          }
+          }
+          input {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+          }
         }
       }
     }
   }
+  &.downMode {
+    // table {
+    //   border: 1px solid #000;
+    //   tr {
+    //     td {
+    //       border: none;
+    //       border-bottom: 1px solid #000;
+    //       border-right: 1px solid #000;
+    //       &:last-of-type {
+    //         border-right: none;
+    //       }
+    //     }
+    //   }
+    // }
+  }
 }
 </style>

src/views/tables/identification.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="identification">
+    <h2 class="title">道路交通事故认定书（简易程序）</h2>
+    <div class="num">
+      第
+      <div contenteditable></div>
+      号
+    </div>
+    <div class="table-layout">
+      <div class="msg-box">
+        <div class="name">事故时间</div>
+        <div class="input-box" style="flex: 1" contenteditable></div>
+        <div class="weather">天气</div>
+        <div class="input-box" style="width: 128px" contenteditable></div>
+      </div>
+      <div class="msg-box">
+        <div class="name">事故地点</div>
+        <div style="flex: 1" class="input-box" contenteditable></div>
+      </div>
+
+      <table>
+        <tr>
+          <td>当事人</td>
+          <td>驾驶证或身份证号码</td>
+          <td>联系方式</td>
+          <td>交通方式</td>
+          <td>机动车类型、牌号</td>
+          <td>保险公司</td>
+          <td>交强险凭证号</td>
+        </tr>
+        <tr>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+        </tr>
+        <tr>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+        </tr>
+        <tr>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+        </tr>
+        <tr>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+        </tr>
+        <tr>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+          <td><div contenteditable></div></td>
+        </tr>
+      </table>
+      <div class="respons">
+        <div class="name" style="width: 50px">交通事故事实及责任</div>
+        <div class="info">
+          <div style="margin-bottom: 10px" v-for="(i, index) in topList.options" @click="checkOptions(topList, index)">
+            <ui-icon :type="topList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+            <span>{{ i.title }}</span>
+          </div>
+          <div class="sign-box" style="margin-bottom: 40px">
+            <div style="flex: 1">
+              <span>当事人：</span>
+              <div style="flex: 1" contenteditable></div>
+            </div>
+            <div>
+              <span>（道路交通事故处理专用章）</span>
+            </div>
+          </div>
+          <div class="sign-box">
+            <span>交通警察：</span>
+            <div style="flex: 1" contenteditable></div>
+          </div>
+        </div>
+      </div>
+      <div class="result">
+        <div class="name">损害赔偿调解结果</div>
+        <div class="info">
+          <div class="sign-box" style="margin-bottom: 40px">
+            <div style="flex: 1">
+              <span>当事人：</span>
+              <div style="flex: 1" contenteditable></div>
+            </div>
+            <div>
+              <span>（道路交通事故处理专用章）</span>
+            </div>
+          </div>
+          <div class="sign-box">
+            <span>交通警察：</span>
+            <div style="flex: 1" contenteditable></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 10px; font-size: 18px">
+      <p>
+        当事人对交通事故认定有异议的，可以自道路交通事故认定书送达之日起三日内提出书面复核申请。同一事故的复核以一次为限。损害赔偿有争议的，当事人可以申诮人民调解委员会调解，或者向人民法院提起民事诉讼。
+      </p>
+      <p style="margin-top: 10px; font-size: 18px">注：此文书存档一份，交付各方当事人各一份。可使用无碳复写纸制作。</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted, defineEmits } from 'vue';
+import { router } from '@/router';
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+};
+const topList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '财产损失事故',
+    },
+    {
+      id: 2,
+      title: '受伤当事人伤势轻微，各方当事人一致同意适用简易程序处理',
+    },
+  ],
+});
+onMounted(() => {
+});
+</script>
+<style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
+.identification {
+  color: #000;
+  font-size: 20px;
+  width: 100%;
+  height: 100%;
+  font-family: sr, st;
+  overflow: auto;
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .num {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > div {
+      padding: 0 30px;
+    }
+  }
+  .table-layout {
+    border: 1px solid #000;
+    .input-box {
+      padding: 0 10px 10px;
+    }
+    .msg-box {
+      border-bottom: 1px solid #000;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      height: 40px;
+      .name {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 30px;
+        border-right: 1px solid #000;
+      }
+      .weather {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 30px;
+        border-right: 1px solid #000;
+        border-left: 1px solid #000;
+      }
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border-bottom: 1px solid #000;
+      tr {
+        // border-bottom: 1px solid #000;
+        &:last-of-type {
+          td {
+            border-bottom: none;
+          }
+        }
+      }
+      td {
+        padding: 5px 5px;
+        box-sizing: border-box;
+        text-align: center;
+        max-width: 11%;
+        height: 40px;
+        border-right: 1px solid #000;
+        border-bottom: 1px solid #000;
+        &:last-of-type {
+          border-right: none;
+        }
+        > div {
+          outline: none;
+        }
+      }
+    }
+    .respons {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      border-bottom: 1px solid #000;
+
+      .name {
+        width: 50px;
+        border-right: 1px solid #000;
+        padding: 30px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+      .info {
+        padding: 0 10px 10px;
+
+        flex: 1;
+        .sign-box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          > div {
+            display: flex;
+          }
+        }
+      }
+    }
+    .result {
+      display: flex;
+      align-items: flex-end;
+      justify-content: flex-start;
+      .name {
+        width: 50px;
+        border-right: 1px solid #000;
+        padding: 30px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+      }
+      .info {
+        padding: 0 10px 10px;
+
+        flex: 1;
+        .sign-box {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+          > div {
+            display: flex;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/tables/legacy.vue

@@ -0,0 +1,228 @@
+<!--  -->
+<template>
+  <div class="legacy">
+    <h2 class="title">当事人血样（尿样）提取登记表</h2>
+    <table>
+      <tr>
+        <td colspan="7" style="text-align: left">
+          <div><span>事故时间:</span><input type="text" /></div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="7" style="text-align: left">
+          <div><span>事故地点:</span><input type="text" /></div>
+        </td>
+      </tr>
+      <tr>
+        <td>编号</td>
+        <td>物品名称</td>
+        <td>数量</td>
+        <td>特征</td>
+        <td>领取人签名</td>
+        <td>领取时间</td>
+        <td>备注</td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+      <tr>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+        <td><div contenteditable></div></td>
+      </tr>
+    </table>
+    <div class="sign-box">
+      <div>
+        <span>当事人签名：</span>
+        <div contenteditable></div>
+      </div>
+      <div>
+        <span>交通警察（签名）：</span>
+        <div contenteditable></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref, toRefs, onBeforeMount, onMounted } from 'vue';
+</script>
+<style lang="scss" scoped>
+div[contenteditable] {
+  outline: none;
+}
+.legacy {
+  color: #000;
+  font-size: 20px;
+  width: 100%;
+  height: 100%;
+  font-family: sr, st;
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  table {
+    width: 100%;
+    // height: 100%;
+    border-collapse: collapse;
+    border: 1px solid #000;
+    box-sizing: border-box;
+    tr {
+      &:nth-of-type(1),
+      &:nth-of-type(2),
+      &:nth-of-type(3) {
+        td {
+          height: 60px;
+        }
+      }
+
+      &:last-of-type {
+        td {
+          border-bottom: none;
+        }
+      }
+      td {
+        height: 80px;
+        outline: none;
+        box-sizing: border-box;
+        padding: 0 10px;
+        text-align: center;
+        border-right: 1px solid #000;
+        border-bottom: 1px solid #000;
+        &:last-of-type {
+          border-right: none;
+        }
+        > div[contenteditable] {
+          width: 100%;
+          height: 100%;
+          line-height: 60px;
+        }
+      }
+    }
+  }
+  .sign-box {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    // border-top: 1px solid #000;
+    min-height: 40px;
+    > div {
+      width: 50%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      > div {
+        flex: 1;
+        height: 100%;
+        outline: none;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        line-height: 40px;
+      }
+    }
+  }
+}
+</style>