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

<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>