ducha-qianduan/src/components/look_word/bdglsecrecy.vue

<template>
  <div>
    <el-button class="box1" @click="daochu">导出</el-button>

    <div class="word" id="contents">
      <p
        style="
          font-size: 16pt;
          font-weight: 600;
          margin-botttom: 30px;
          color: black;
          font-family: 'heiti';
          text-align: center;
        "
      >
        《网络、移动电话、涉密载体使用管理登记本》
      </p>
      <!-- <div class="fTitle">网络、移动电话、涉密载体使用管理登记本</div> -->
      <table
        border="1"
        style="
          border-collapse: collapse;
          border: none;
          mso-border-left-alt: 0.5pt solid windowtext;
          mso-border-top-alt: 0.5pt solid windowtext;
          mso-border-right-alt: 0.5pt solid windowtext;
          mso-border-bottom-alt: 0.5pt solid windowtext;
          mso-border-insideh: 0.5pt solid windowtext;
          mso-border-insidev: 0.5pt solid windowtext;
          mso-padding-alt: 0pt 0pt 0pt 0pt;
          width: 930px;
        "
        bordercolor="black"
        class="size"
      >
        <!--<p align="center" style="font-size: 14pt;font-weight: bold;">网络/移动电话/涉密载体登记本</p>-->
        <tbody style="font-size: 16px; font-weight: 500">
          <tr class="JR_tr">
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">种类（名称）</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">型号</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">编号</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">密级</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">责任人</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">使用人</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">批准人</p>
            </td>
            <td
              valign="center"
              style="width: 90px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">
                使用起止 <br />
                时间
              </p>
            </td>
            <td
              valign="center"
              style="width: 106px; font-family: 'heiti'"
              class="JR_left"
            >
              <p align="center" style="margin: 5px 0">移交（出借）时间</p>
            </td>
          </tr>
          <tr class="JR_tr" v-for="(item, i) in message" :key="i + ' '">
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.kind }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.version }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.number }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.confidential }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.peopleName }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.people1Name }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.people2Name }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <!--<p align="center">2022-01-18<br>2022-01-18</p>-->
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.startTime }}
              </p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; font-family: 'fangsong'">
                {{ item.hindOverTime }}<br />
                (移交/出售)
              </p>
            </td>
          </tr>
          <tr class="JR_tr" v-for="(item1, i1) in num" :key="i1 + ''">
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0; height: 40px"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <!--<p align="center">2022-01-20<br>2022-01-20</p>-->
              <p align="center" style="margin: 5px 0"></p>
            </td>
            <td valign="center" class="JR_right">
              <p align="center" style="margin: 5px 0">
                <br />
              </p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import { lookWord } from "@/utils/look_word.js";
import "@/utils/lodJs.js";
export default {
  name: "bdgleven",
  props: ["message"],
  data() {
    return {
      title: "网络、移动电话、涉密载体使用管理登记本",
      style:
        "font-weight: 550;.size{width:860px !important};.JR_tr {height: 40px;};.JR_left{font-size: 1.211em; font-family: '楷体_GB2312';};.JR_right{ font-size: 1.1em; font-family: 仿宋_GB2312;};.JR_bottom{border-left:0; font-size: 1.331em; font-family: 仿宋_GB2312; text-align: right}",
      num: 0,
    };
  },
  created() {
    if (this.message.length >= 6) {
      this.num = 0;
    } else {
      this.num = 6 - this.message.length;
    }
  },
  methods: {
    daochu() {
      lookWord(this.title, "#contents", this.style, true);
    },
  },
};
</script>
<style scoped>
tbody {
  color: #fff;
  text-align: center;
}
tr:last-child {
  border-bottom: 1px solid;
}
::v-deep .contents {
  width: 1047px !important;
}
.box1 {
  position: absolute;
  right: 30px;
  top: 80px;
  border: 1px solid rgb(129, 130, 131);
  border-radius: 5px;
}
</style>