traffic-laser/src/views/tables/legacy.vue

<!--  -->
<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: 80px;
          // 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>