Merge branch 'dev' of http://192.168.0.115:3000/bill/traffic-laser into dev

package.json

@@ -30,7 +30,8 @@
     "vue": "^3.2.47",
     "vue-cropper": "1.0.2",
     "vue-i18n": "^9.2.2",
-    "vue-router": "4.0.3"
+    "vue-router": "4.0.3",
+    "swiper": "^8.3.0"
   },
   "devDependencies": {
     "@types/node": "^18.15.11",

src/components/base/components/icon/iconfont/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe7b3;</span>
+                <div class="name">rb_y</div>
+                <div class="code-name">&amp;#xe7b3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7b4;</span>
+                <div class="name">rb_n</div>
+                <div class="code-name">&amp;#xe7b4;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe7ab;</span>
                 <div class="name">question</div>
                 <div class="code-name">&amp;#xe7ab;</div>
@@ -1014,9 +1026,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1692066010344') format('woff2'),
-       url('iconfont.woff?t=1692066010344') format('woff'),
-       url('iconfont.ttf?t=1692066010344') format('truetype');
+  src: url('iconfont.woff2?t=1692587913655') format('woff2'),
+       url('iconfont.woff?t=1692587913655') format('woff'),
+       url('iconfont.ttf?t=1692587913655') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -1043,6 +1055,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-rb_y"></span>
+            <div class="name">
+              rb_y
+            </div>
+            <div class="code-name">.icon-rb_y
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-rb_n"></span>
+            <div class="name">
+              rb_n
+            </div>
+            <div class="code-name">.icon-rb_n
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-question"></span>
             <div class="name">
               question
@@ -2484,6 +2514,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rb_y"></use>
+                </svg>
+                <div class="name">rb_y</div>
+                <div class="code-name">#icon-rb_y</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-rb_n"></use>
+                </svg>
+                <div class="name">rb_n</div>
+                <div class="code-name">#icon-rb_n</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-question"></use>
                 </svg>
                 <div class="name">question</div>

src/components/base/components/icon/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4084834 */
-  src: url('iconfont.woff2?t=1692066010344') format('woff2'),
-       url('iconfont.woff?t=1692066010344') format('woff'),
-       url('iconfont.ttf?t=1692066010344') format('truetype');
+  src: url('iconfont.woff2?t=1692587913655') format('woff2'),
+       url('iconfont.woff?t=1692587913655') format('woff'),
+       url('iconfont.ttf?t=1692587913655') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-rb_y:before {
+  content: "\e7b3";
+}
+
+.icon-rb_n:before {
+  content: "\e7b4";
+}
+
 .icon-question:before {
   content: "\e7ab";
 }

src/components/base/components/icon/iconfont/iconfont.json

@@ -6,6 +6,20 @@
   "description": "交通事故现场勘验系统",
   "glyphs": [
     {
+      "icon_id": "37011123",
+      "name": "rb_y",
+      "font_class": "rb_y",
+      "unicode": "e7b3",
+      "unicode_decimal": 59315
+    },
+    {
+      "icon_id": "37011122",
+      "name": "rb_n",
+      "font_class": "rb_n",
+      "unicode": "e7b4",
+      "unicode_decimal": 59316
+    },
+    {
       "icon_id": "36913105",
       "name": "question",
       "font_class": "question",

src/main.ts

@@ -15,7 +15,6 @@ import { router, setupRouter } from "@/router";
 import appConfig from "./appConfig";
 import { currentApp, setCurrentApp } from "@/store/app";
 import App from "./main.vue";
-
 const app = createApp(App);
 
 setCurrentApp(appConfig);

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/scene/TrackMeasure.vue

@@ -54,6 +54,7 @@ watchEffect(() => {
   transform: translateY(-50%);
   top: 50%;
   left: 15px;
+  z-index: 1000;
 
   .item {
     position: static;

src/views/scene/index.vue

@@ -14,7 +14,7 @@
         <div class="info-top-left" :class="{ full: viewStatus }">
           <Container @loaded="loaded = true" />
           <template v-if="loaded && !trackMode">
-            <Menus v-if="viewStatus"  @enter-child="childPage = true" @leave-child="childPage = false" />
+            <Menus v-if="viewStatus" @enter-child="childPage = true" @leave-child="childPage = false" />
             <BasePoints v-if="currentView" />
             <FixPoints />
             <Measures />
@@ -73,7 +73,7 @@ import ButtonPane from '@/components/button-pane/index.vue';
 import { customMap, disabledMap, useSDK } from '@/hook';
 import customSetup from '../../hook/custom';
 import UiIcon from '@/components/base/components/icon/index.vue';
-import { ref, watchEffect, computed, onMounted } from 'vue';
+import { ref, watchEffect, computed, onMounted, onActivated, nextTick } from 'vue';
 import { back } from '@/store/sync';
 import { trackMode } from '@/views/scene/trackMeasureWidth';
 import { currentView } from './currentScene';
@@ -108,7 +108,6 @@ const stopReg = watchEffect(() => {
 });
 const viewStatus = ref(false);
 const onScale = () => {
-  console.error(123)
   viewStatus.value = !viewStatus.value;
 };
 const goItem = (item) => {
@@ -164,6 +163,13 @@ onMounted(() => {
   layoutRef.value.style.height = screenHeight + 'px';
   document.body.style.height = screenHeight + 'px';
 });
+onActivated(async () => {
+  await nextTick();
+  let full = router.currentRoute.value.query.full;
+  if (full) {
+    viewStatus.value = true;
+  }
+});
 </script>
 
 <style scoped lang="scss">

src/views/scene/trackMeasureWidth.ts

@@ -13,7 +13,8 @@ export const trackMode = ref(false);
 
 export const trackMeasureWidth = async () => {
   trackMode.value = true;
-  await router.push({ name: writeRouteName.scene });
+  // await router.push({ name: writeRouteName.scene });
+  await router.push('/scene?full=1');
   const sdk = await useAsyncSDK();
 
   laserModeStack.push(ref(Mode.cloud));

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-four.vue

@@ -0,0 +1,266 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">六、对车辆驾驶人进行酒精含量、国家管制的精神药品和麻醉药品测试的结果以及提取血样、 尿样情况</p>
+          <table>
+            <tr>
+              <td>编号</td>
+              <td>姓名</td>
+              <td style="width: 170px">身份证号码</td>
+              <td>联系电话</td>
+              <td>交通方式</td>
+              <td style="width: 100px">酒精、 国家管制精神药品和麻醉药品测试结果</td>
+              <td style="width: 110px">是否抽血或提取尿样</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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <td><div contenteditable></div></td>
+            </tr>
+          </table>
+        </div>
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">七、肇事车辆驶离的方向、 车型、 车号、 车身颜色等情况</p>
+          <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>
+          </table>
+        </div>
+        <div class="table-body">
+          <div class="item column">
+            <span>八、现场采取强制措施情况</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+        <div class="table-body no-border">
+          <div class="item column">
+            <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 class="sign-box">
+          <div>
+            <span>当事人签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>见证人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>肆</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+
+  font-family: sr, st;
+
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+    .table-excel {
+      padding: 10px;
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        border: 1px solid #000;
+        tr {
+          // border-bottom: 1px solid #000;
+          &:last-of-type {
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+        td {
+          padding: 10px 14px;
+          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;
+          }
+        }
+      }
+    }
+    .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;
+        }
+      }
+    }
+    .table-body {
+      // border-top: 1px solid #000;
+      padding: 10px;
+      border-bottom: 1px solid #000;
+      &.no-border {
+        border-bottom: none;
+      }
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+        &.column {
+          flex-direction: column;
+          height: 130px;
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate-one.vue

@@ -0,0 +1,913 @@
+<!--  -->
+<template>
+  <!-- <MainPanel>
+    <template v-slot:header>
+      <Header title="道路交通事故现场勘查笔录" type="return">
+        <ui-button type="primary" width="96px" @click="getLayoutImage"> 完成 </ui-button>
+      </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>
+  <!-- </MainPanel> -->
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+import html2canvas from 'html2canvas';
+import { downloadImage, uploadImage } from '@/store/sync';
+import Message from '@/components/base/components/message/message.vue';
+import Header from '@/components/photos/header.vue';
+import MainPanel from '@/components/main-panel/index.vue';
+const layoutRef = ref<HTMLDivElement>();
+const downMode = ref(false);
+const getLayoutImage = async () => {
+  downMode.value = true;
+  await nextTick();
+  console.error(layoutRef.value);
+  const canvas = await html2canvas(layoutRef.value);
+  Message.success({ msg: '已保存至相册', time: 2000 });
+  downMode.value = false;
+  const blob = await new Promise<Blob>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.95));
+  await downloadImage(blob, '12312.jpg');
+  // return await uploadImage(blob);
+};
+const sceneTypes = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '现场勘查' },
+    { id: 2, title: '补充勘查' },
+  ],
+});
+const roadPartList = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '普通路段' },
+    { id: 2, title: '高架路段' },
+    { id: 3, title: '变窄路段' },
+    { id: 4, title: '窄路' },
+    { id: 5, title: '桥梁' },
+    { id: 6, title: '隧道' },
+    { id: 7, title: '路段进出处' },
+    { id: 8, title: '路侧险要路段' },
+    { id: 9, title: '其他特殊路段' },
+  ],
+});
+const roadSideList = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '三枝分叉口' },
+    { id: 2, title: '四枝分叉口' },
+    { id: 3, title: '多枝分叉口' },
+    { id: 4, title: '环形交叉口' },
+    { id: 5, title: '匝道口' },
+  ],
+});
+const cityRoadList = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '城市快速路' },
+    { id: 2, title: '一般城市道路' },
+    { id: 3, title: '单位小区自建路' },
+    { id: 4, title: '公共停车场' },
+    { id: 5, title: '公共广场' },
+    { id: 6, title: '其他路' },
+  ],
+});
+
+const administrativeLevel = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '国道' },
+    { id: 2, title: '省道' },
+    {
+      id: 3,
+      title: '县道',
+    },
+    {
+      id: 4,
+      title: '乡村道',
+    },
+    {
+      id: 5,
+      title: '其他',
+    },
+  ],
+});
+const checkLevel = (item, index) => {
+  item.check = item.options[index].id;
+};
+const technicalLevel = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '高速' },
+    { id: 2, title: '一级' },
+    {
+      id: 3,
+      title: '二级',
+    },
+    {
+      id: 4,
+      title: '三级',
+    },
+    {
+      id: 5,
+      title: '四级',
+    },
+    {
+      id: 6,
+      title: '等外',
+    },
+  ],
+});
+const weatherList = ref({
+  check: 0,
+  options: [
+    { id: 1, title: '晴' },
+    { id: 2, title: '阴' },
+    {
+      id: 3,
+      title: '多云',
+    },
+    {
+      id: 4,
+      title: '雨',
+    },
+    {
+      id: 5,
+      title: '雪',
+    },
+    {
+      id: 6,
+      title: '雾',
+    },
+    {
+      id: 7,
+      title: '冰雹',
+    },
+    {
+      id: 8,
+      title: '沙尘',
+    },
+    {
+      id: 9,
+      title: '霾',
+    },
+    {
+      id: 10,
+      title: '其他',
+    },
+  ],
+});
+
+const checkEnvironItem = (item, index, j_index) => {
+  environments.value[index].check = item.id;
+};
+const environments = ref([
+  {
+    id: 1,
+    title: '影响视线或行驶的障碍物：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 2,
+    title: '递路交通标志：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 3,
+    title: '道路交通标线：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 4,
+    title: '中央隔离设施：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 5,
+    title: '路侧防护设施：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '无' },
+      { id: 2, name: '有：' },
+    ],
+  },
+  {
+    id: 6,
+    title: '路面材料：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '沥青' },
+      { id: 2, name: '水泥' },
+      { id: 3, name: '砂石' },
+      { id: 4, name: '土路' },
+      { id: 5, name: '其他' },
+    ],
+  },
+  {
+    id: 7,
+    title: '路面状况：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '路面完好' },
+      { id: 2, name: '施工' },
+      { id: 3, name: '凹凸' },
+      { id: 4, name: '塌陷' },
+      { id: 5, name: '路障' },
+      { id: 6, name: '其他' },
+    ],
+  },
+  {
+    id: 8,
+    title: '路表状况：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '干燥' },
+      { id: 2, name: '潮湿' },
+      { id: 3, name: '积水' },
+      { id: 4, name: '漫水' },
+      { id: 5, name: '冰雪' },
+      { id: 6, name: '泥泞' },
+      { id: 7, name: '其他' },
+    ],
+  },
+  {
+    id: 9,
+    title: '照明情况：',
+    value: '',
+    check: 0,
+    options: [
+      { id: 1, name: '白天   夜间路灯照明' },
+      { id: 2, name: '有' },
+      { id: 3, name: '无' },
+    ],
+  },
+  {
+    id: 10,
+    title: '照明情况：',
+    value: '',
+    check: 0,
+    options: [],
+  },
+]);
+</script>
+<style lang="scss" scoped>
+div {
+  box-sizing: border-box;
+}
+.explorate {
+  color: #000;
+  font-size: 20px;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+
+  font-family: sr, st;
+
+  // padding: 80px 0 0 0;
+  > div {
+    // padding: 20px 50px 30px;
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+
+  &.downMode {
+    width: 1050px;
+    height: 1485px;
+    > div {
+      padding: 125px 100px 75px;
+    }
+  }
+}
+
+.wrapper {
+  margin: 0 auto;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: repeat(8, auto);
+  border: 1px solid #000;
+  font-size: 20px;
+  .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;
+      }
+    }
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid #000;
+    height: 35px;
+    .item {
+      margin-right: 60px;
+      &:last-of-type {
+        margin-right: 0;
+      }
+    }
+  }
+  .info {
+    display: grid;
+    grid-template-columns: 14% 86%;
+    grid-template-rows: repeat(1, 100%);
+    height: 35px;
+    > div {
+      border-bottom: 1px solid #000;
+      border-right: 1px solid #000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:last-of-type {
+        border-right: none;
+      }
+      &.input-box {
+        outline: none;
+        padding: 0 10px;
+        line-height: 35px;
+        text-align: center;
+      }
+    }
+  }
+  .environment {
+    padding: 10px;
+    .em-info-box {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 18px;
+        .check-box {
+          display: inline-block;
+          .check-item {
+            display: inline-block;
+            margin-right: 10px;
+            &:last-of-type {
+              margin-right: 0;
+            }
+          }
+        }
+        .input-box {
+          flex: 1;
+          display: inline-block;
+          border-bottom: 1px solid #000;
+          input {
+            width: 100%;
+            padding: 0 10px;
+          }
+        }
+      }
+    }
+  }
+  .weather {
+    display: grid;
+    grid-template-columns: 14% 86%;
+    grid-template-rows: repeat(1, 100%);
+    min-height: 35px;
+    border-bottom: 1px solid #000;
+    .name {
+      border-right: 1px solid #000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      padding: 5px;
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-right: 10px;
+        margin-bottom: 5px;
+        .input-box {
+          input {
+            border-bottom: 1px solid #000;
+          }
+        }
+      }
+    }
+  }
+  .time {
+    display: grid;
+    grid-template-columns: 14% 86%;
+    grid-template-rows: repeat(1, auto);
+    .name {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    > div {
+      border-bottom: 1px solid #000;
+      border-right: 1px solid #000;
+
+      &:last-of-type {
+        border-right: none;
+      }
+    }
+    .time-one {
+      // display: grid;
+      // grid-auto-flow: row;
+      // grid-template-columns: 66px;
+      // grid-template-rows: repeat(4, auto);
+      .road-info {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        border-bottom: 1px solid #000;
+        .road-name {
+          width: 66px;
+          box-sizing: border-box;
+          padding: 0 10px;
+        }
+        .road-msg {
+          flex: 1;
+          border-left: 1px solid #000;
+          > div {
+            min-height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+          }
+          .road-name-text {
+            width: 55%;
+            flex: 1;
+            padding: 0 10px;
+            outline: none;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .road-num {
+            width: 23.8%;
+            padding: 0 10px;
+            border-left: 1px solid #000;
+            border-right: 1px solid #000;
+          }
+          .road-num-text {
+            width: 20%;
+            padding: 0 10px;
+            flex: 1;
+            outline: none;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        > div {
+          min-height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+        }
+      }
+      .road-pos {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .road-pos-name {
+          width: 66px;
+          padding: 0 10px;
+        }
+        .pos-box {
+          // width: 100%;
+          flex: 1;
+
+          .pos-item {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1;
+            width: 100%;
+            border-left: 1px solid #000;
+            border-bottom: 1px solid #000;
+            &:last-of-type {
+              border-bottom: none;
+            }
+
+            .pos-item-name {
+              width: 120px;
+              padding: 0 10px;
+              border-right: 1px solid #000;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+            .pos-msg {
+              flex: 1;
+              display: flex;
+              align-items: center;
+              justify-content: flex-start;
+              &.desc {
+                outline: none;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 0 5px;
+                line-height: 54px;
+              }
+              .longitude {
+                display: inline-block;
+                width: 50%;
+                border-right: 1px solid #000;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 0 10px;
+                > div {
+                  flex: 1;
+                  height: 30px;
+                  outline: none;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                }
+              }
+              .latitude {
+                display: inline-block;
+                width: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 0 10px;
+                > div {
+                  flex: 1;
+                  height: 30px;
+                  outline: none;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                }
+              }
+            }
+          }
+        }
+      }
+      .road-type {
+        border-bottom: 1px solid #000;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        .road-type-name {
+          width: 66px;
+          padding: 0 10px;
+        }
+        .type-box {
+          // width: 100%;
+          flex: 1;
+
+          .type-item {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            flex: 1;
+            width: 100%;
+            border-left: 1px solid #000;
+            border-bottom: 1px solid #000;
+            &.city {
+              .type-item-name {
+                // border-right: 1px solid #000;
+              }
+              .item-info-box {
+                border-left: 1px solid #000;
+              }
+            }
+            &:last-of-type {
+              border-bottom: none;
+            }
+            .type-item-name {
+              width: 66px;
+              padding: 0 10px;
+            }
+            .item-msg {
+              flex: 1;
+              &.intersection {
+                min-height: 48px;
+                border-left: 1px solid #000;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 5px;
+                .item {
+                  margin-right: 5px;
+                  margin-bottom: 5px;
+                  // flex: 1;
+                  // display: flex;
+                  // align-items: center;
+                  // justify-content: flex-start;
+                }
+              }
+            }
+            > div {
+              // width: 100%;
+              // height: 56px;
+              .item-info {
+                width: 100%;
+
+                border-bottom: 1px solid #000;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                position: relative;
+                .item-info-name {
+                  width: 66px;
+                  height: 56px;
+                  // line-height: 56px;
+                  padding: 0 10px;
+                  border-right: 1px solid #000;
+                  border-left: 1px solid #000;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                }
+                .item-info-box {
+                  flex: 1;
+                  min-height: 56px;
+                  display: flex;
+                  align-items: center;
+                  justify-content: flex-start;
+                  padding: 5px;
+                  .item {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    margin-right: 2px;
+                    margin-bottom: 5px;
+                    &:last-of-type {
+                      margin-right: 0;
+                      display: flex;
+                      align-items: center;
+                      justify-content: flex-start;
+                      flex: 1;
+                    }
+                    .input-box {
+                      width: 10%;
+                      input {
+                        width: 100%;
+                        border-bottom: 1px solid #000;
+                      }
+                    }
+                  }
+                }
+                &:last-of-type {
+                  border-bottom: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.wrapper div {
+}
+</style>

src/views/tables/explorate-three.vue

@@ -0,0 +1,143 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-body">
+          <p style="margin-bottom: 20px; margin-top: 10px">五、现场痕迹物证的种类、形态、尺寸、位置以及固定或者提取情况</p>
+
+          <div class="item column">
+            <span>（一）地面痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（二）车体痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（三）人体痕迹：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>（四）物证：</span>
+            <div contenteditable></div>
+          </div>
+          <div class="item column">
+            <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 class="sign-box">
+          <div>
+            <span>当事人签名：</span>
+            <div contenteditable></div>
+          </div>
+          <div>
+            <span>见证人签名：</span>
+            <div contenteditable></div>
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>叁</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+</script>
+<style lang="scss" scoped>
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+
+  font-family: sr, st;
+
+  // padding: 80px 0 0 0;
+  > div {
+    // padding: 20px 50px 30px;
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+
+    .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;
+        }
+      }
+    }
+    .table-body {
+      margin-top: 10px;
+      padding: 0 10px 10px;
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+
+        &.column {
+          flex-direction: column;
+          height: 200px;
+          width: 100%;
+
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

src/views/tables/explorate-two.vue

@@ -0,0 +1,385 @@
+<!--  -->
+<template>
+  <div class="explorate">
+    <div>
+      <h2 class="title">道路交通事故现场勘查笔录(续页)</h2>
+
+      <div class="container">
+        <div class="table-header">
+          <p style="margin-bottom: 5px">二、现场监控设备情况</p>
+          <div class="table-header-info">
+            <div class="item" v-for="(i, index) in headerList.options" @click="checkOptions(headerList, index)">
+              <ui-icon :type="headerList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <span>{{ i.title }}</span>
+              <div v-if="i.id == 2" style="flex: 1"><input type="text" /></div>
+            </div>
+          </div>
+        </div>
+        <div class="table-body">
+          <p style="margin-bottom: 20px; margin-top: 10px">三、现场伤亡人员基本情况及救援</p>
+          <p style="margin-bottom: 10px">（一）伤亡人员基本情况；</p>
+          <div class="item">
+            <span>当场死亡：（</span>
+            <div contenteditable style="min-width: 10px"></div>
+            <span>）人；急救、医疗人员签名确认：</span>
+            <div style="flex: 1">
+              <input type="text" />
+            </div>
+          </div>
+          <div class="item">
+            <span>受伤：（</span>
+            <div contenteditable style="min-width: 10px"></div>
+            <span>）人。</span>
+          </div>
+          <div class="item column">
+            <span>伤亡人员去向：</span>
+            <div style="height: 60px; width: 100%" contenteditable></div>
+          </div>
+          <div class="item column">
+            <span>其他需求说明的情况：</span>
+            <div style="height: 60px; width: 100%" contenteditable></div>
+          </div>
+          <p>（二）救援简要情况：</p>
+
+          <div class="item" style="margin-top: 10px">
+            <span> 是否涉及危险物品：</span>
+            <div style="margin-right: 40px" v-for="(i, index) in isnotList.options" @click="checkOptions(isnotList, index)">
+              <ui-icon :type="isnotList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+              <span>{{ i.title }}</span>
+            </div>
+            <!-- <div style="margin-right: 40px">
+              <ui-icon type="rb_n"></ui-icon>
+              <span>是</span>
+            </div> -->
+            <div>名称：</div>
+            <div style="flex: 1">
+              <input type="text" />
+            </div>
+          </div>
+          <p style="margin-bottom: 5px">相关部门和人员到达情况：</p>
+          <div class="item half">
+            <template v-for="(i, index) in reachList.options">
+              <div v-if="index < 2" @click="checkOptions(reachList, index)">
+                <div style="display: inline-block">
+                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <span>{{ i.title }}</span>
+                </div>
+              </div>
+            </template>
+
+            <!-- <div>
+              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>消防</span></div>
+            </div> -->
+          </div>
+          <div class="item half">
+            <template v-for="(i, index) in reachList.options">
+              <div v-if="index >= 2" @click="checkOptions(reachList, index)">
+                <div style="display: inline-block">
+                  <ui-icon :type="reachList.check == i.id ? 'rb_y' : 'rb_n'"></ui-icon>
+                  <span>{{ i.title }}</span>
+                </div>
+              </div>
+            </template>
+            <!-- <div>
+              <div style="display: inline-block"><ui-icon type="rb_n"></ui-icon> <span>其他</span></div>
+            </div> -->
+          </div>
+        </div>
+        <div class="table-excel">
+          <p style="margin-bottom: 10px">四、现场事故车辆车型、牌号及车辆挡位 转向、灯光、仪表指针位置，汽车行驶记录仪、车载 事件数据记录仪、卫星定位装置等安装及使用情况</p>
+          <table>
+            <tr>
+              <td rowspan="2">编号</td>
+              <td rowspan="2">牌号</td>
+              <td rowspan="2">车辆类型</td>
+              <td rowspan="2">车辆档位</td>
+              <td rowspan="2">灯光开启情况</td>
+              <td rowspan="2">车速仪表指针位置</td>
+              <td colspan="3">车载设备安装使用情况（有，无）</td>
+            </tr>
+            <tr>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <td><div contenteditable></div></td>
+              <td><div contenteditable></div></td>
+            </tr>
+          </table>
+        </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 class="footer">
+        <span>共<span>肆</span>页</span>
+        <span>第<span>贰</span>页</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs, onBeforeMount, onMounted, nextTick } from 'vue';
+const checkOptions = (item, index) => {
+  item.check = item.options[index].id;
+};
+const headerList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '未发现',
+    },
+    {
+      id: 2,
+      title: '发现',
+    },
+  ],
+});
+const isnotList = ref({
+  check: 0,
+  options: [
+    {
+      id: 1,
+      title: '否',
+    },
+    {
+      id: 2,
+      title: '是',
+    },
+  ],
+});
+const reachList = 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;
+}
+.explorate {
+  color: #000;
+  width: 100%;
+  height: 100%;
+  // display: grid;
+
+  font-family: sr, st;
+
+  // padding: 80px 0 0 0;
+  > div {
+    // padding: 20px 50px 30px;
+  }
+  .title {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .container {
+    border: 1px solid #000;
+    font-size: 20px;
+    .table-excel {
+      padding: 10px;
+      table {
+        border-collapse: collapse;
+        border: 1px solid #000;
+        tr {
+          // border-bottom: 1px solid #000;
+          &:last-of-type {
+            td {
+              border-bottom: none;
+            }
+          }
+        }
+        td {
+          padding: 0 14px;
+          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;
+          }
+        }
+      }
+    }
+    .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;
+        }
+      }
+    }
+    .table-body {
+      border-top: 1px solid #000;
+      margin-top: 10px;
+      padding: 0 10px 10px;
+      border-bottom: 1px solid #000;
+      .item {
+        display: flex;
+        margin-bottom: 10px;
+        &.half {
+          align-items: center;
+          justify-content: space-between;
+          > div {
+            width: 50%;
+            flex-flow: row wrap;
+          }
+        }
+        &.column {
+          flex-direction: column;
+
+          > div {
+            outline: none;
+            height: 100%;
+          }
+        }
+        > div {
+          input {
+            width: 100%;
+            border-bottom: 1px solid #000;
+          }
+        }
+      }
+    }
+    .table-header {
+      padding: 0 10px;
+      .table-header-info {
+        padding-left: 50px;
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          width: 100%;
+          > div {
+            input {
+              width: 100%;
+              border-bottom: 1px solid #000;
+            }
+          }
+        }
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 60px;
+    margin-top: 10px;
+    > span {
+      > span {
+        margin: 0 24px;
+      }
+    }
+  }
+}
+</style>

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>