ducha-qianduan/src/components/look_word/bdglmeeting.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;
          text-align: center;
          font-family: 'heiti'
        "
      >
        《团支部工作记录本》
      </p>
      <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="600"
        align="center"
        bordercolor="black"
        class="size"
      >
        <tbody  style="font-size: 16px;font-weight: 500;">
          <tr class="JR_tr">
            <th class="" colspan="2" >
              <h4 align="center"  style="font-size: 18px;font-weight: 500;font-family: 'kaiti'">
                团支部委员会会议
              </h4>
            </th>
          </tr>
          <tr class="JR_tr">
            <td
              width="110"
              class="JR_left"
              style="border-right: 1px dashed #fff;font-family: 'kaiti'"
            >
              <p align="center">&nbsp;&nbsp;时 &nbsp;间：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.convokeTime }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;地 &nbsp;点：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.address }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;主持人：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.compereRen }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;参加人：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.joinId }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;列席人：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.peopleIds }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;缺席人：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.absentIds }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;记录人：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
            >
              <p>{{ message.peopleJiLu }}</p>
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: 1px dashed #fff;font-family: 'kaiti'">
              <p align="center">&nbsp;&nbsp;议 &nbsp;题：</p>
            </td>
            <td
              class="JR_right"
              align="left"
              style="border-left: 1px dashed #999; padding-left: 20px;font-family: 'fangsong'"
              v-html="message.title"
            >
              <!-- <p>{{ message.title }}</p> -->
            </td>
          </tr>
          <tr class="JR_tr">
            <td class="JR_left" style="border-right: none;font-family: 'kaiti'">
              <p align="center">&nbsp; 内 &nbsp;容：</p>
            </td>
            <td
              align="left"
              style="border-left: none; padding-left: 20px;font-family: 'fangsong'"
              class="JR_right"
              v-html="message.contents"
            ></td>
          </tr>
</tbody>
      </table>
      <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="600"
        align="center"
        bordercolor="black"
        class="size"
        border-top="none"
      >
        <tbody>
          <tr class="JR_tr">
            <td
              colspan="2"
              class="JR_bottom"
              style="
                border-top: none;
                border-right: none;
                border-left: 1px solid black;
                font-family: 'heiti';
              "
            >
              <p style="text-align: right">主持人：</p>
            </td>
            <td style="width: 100px; border-top: none; border-left: none"></td>
          </tr>
          <tr class="JR_tr">
            <td
              colspan="2"
              class="JR_bottom"
              style="
                border-right: none;
                border-left: 1px solid black;
                font-family: 'heiti';
              "
            >
              <p style="text-align: right">记录人：</p>
            </td>
            <td style="width: 100px; border-left: none"></td>
          </tr>

          <tr class="JR_tr">
            <td
              colspan="2"
              class="JR_bottom"
              style="
                border-right: none;
                border-left: 1px solid black;
                font-family: 'heiti';
              "
            >
              <!--<p style=" text-align:right;padding-right: 10px;">　　　　年　　月　　日</p>-->
              <p style="text-align: right">时间：</p>
            </td>
            <td style="width: 100px; border-left: none"></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:
        ".size{width:99%};.JR_tr {height: 40px;};.JR_left{border-right:none;width: 120px;font-size: 1.331em; font-family: '楷体_GB2312';};.JR_right{border-left:0; font-size: 1.331em; font-family: 仿宋_GB2312;};.JR_bottom{border-left:0; font-size: 1.331em; font-family: 仿宋_GB2312; text-align: right}",
    };
  },
  methods: {
    daochu() {
      lookWord(this.title, "#contents", this.style);
    },
  },
};
</script>
<style scoped>
tbody {
  color: #fff;
  text-align: center;
}
tr:last-child {
  border-bottom: 1px solid;
}
.box1 {
  position: absolute;
  right: 30px;
  top: 80px;
  border: 1px solid rgb(129, 130, 131);
  border-radius: 5px;
}
</style>