physical_examination_front/src/views/booklist/index.vue

<template>
  <basic-container style="max-height:800px;overflow:hidden;">
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
      :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @search-change="searchChange"
      @search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange"
      @refresh-change="refreshChange" @on-load="onLoad">
      <template slot-scope="{row}" slot="examDate">
        <div v-for="item1 in row.details.map(item => item.period + item.timeFrame)" :key="item1">{{ item1 }}</div>
      </template>
      <template slot-scope="{row}" slot="examPro">
        <div v-for="item1 in row.details.map(item => item.project)" :key="item1">{{ item1 }}</div>
      </template>
      <template slot-scope="{row}" slot="apmStatus">
        <div v-for="item1 in row.details.map(item => item.apmStatus)" :key="item1">
          <el-tag size="small" :type="item1 == 3 ? 'success' : item1 == 2 ? 'warning' : item1 == 3 ? 'danger' : 'info'">
            {{
  item1 == 3 ? '已报道' : item1 == 2 ? '未报道' : item1 == 1 ? '已取消' : '未报到'
            }}
          </el-tag>
        </div>
      </template>
      <template slot-scope="{row}" slot="menu">
        <el-button type="text" @click="handleRegister(row)"
          :disabled="(row.details.find(item => item.apmStatus == 2) && Date.parse(new Date(row.apmDay.substring(0,10) + ' 23:59:59')) > Date.parse(new Date(systemTime))) ? false : true">预约报道</el-button>
      </template>
    </avue-crud>
    <el-drawer :wrapperClosable="false" :visible.sync="isRegister" :append-to-body="true" :direction="direction" class="my-info-dialog"
      custom-class="register_box" @close="closeDraw">
      <div slot="title" class="title_box">
        <div class="title_txt">
          <div class="txt">预约人报道信息</div>
        </div>
        <div class="sub_txt">通过身份证、医保卡刷卡识别报道</div>
      </div>
      <div style="padding:0 40px;">
        <div class="tip_box">
          <img v-show="regData.resStatus == 1" src="~@/assets/image/succ.png" alt="">
          <img v-show="regData.resStatus == 0" src="~@/assets/image/fail.png" alt="">
          <!-- <img v-show="regData.resStatus == 3" src="~@/assets/image/warn.png" alt=""> -->
          <div class="tip_txt" :class="regData.resStatus == 0 ? 'fail_txt' : ''">
            {{ regData.resStatus == 1 ? '报道成功' : '报道失败' }}</div>
        </div>
        <div class="tips_txt">{{ regData.resMsg }}</div>
        <div class="account_mess">
          <div class="mess_tit">账号信息</div>
          <div class="mess_box">
            <div class="left_box" :class="regData.resStatus == 0 ? 'fail_box' : ''">
              <div class="acc_text">姓名</div>
              <div class="acc_txt">{{ regData.resData ? regData.resData.cupName : '' }}</div>
            </div>
            <div class="right_box" :class="regData.resStatus == 0 ? 'fail_right' : ''">
              <div class="acc_box">
                <div class="acc_text">身份证号</div>
                <div class="acc_txt">{{ regData.resData ? regData.resData.cupCardNo : '' }}</div>
              </div>
              <div class="acc_box">
                <div class="acc_text">联系方式</div>
                <div class="acc_txt">{{ regData.resData ? regData.resData.cupPhone : '' }}</div>
              </div>
              <div class="img_box">
                <img v-show="regData.status == 1" src="~@/assets/image/succ_img.png" alt="">
                <img v-show="regData.status == 0" src="~@/assets/image/fail_img.png" alt="">
                <!-- <img v-show="regData.status == 3" src="~@/assets/image/warn_img.png" alt=""> -->
              </div>
            </div>
          </div>
        </div>
        <div class="account_mess">
          <div class="mess_tit">体检信息</div>
          <div class="mess_box reg_box">
            <div class="left_box">
              <div class="acc_text">体检项目</div>
              <div class="acc_txt" v-for="item in regData.resData ? regData.resData.details : []" :key="item">{{
                item.project
              }}</div>
              <!-- <div class="acc_txt">{{ regData.resData.details.map(item => item.project) }}</div> -->
            </div>
            <div class="right_box">
              <div class="acc_box">
                <div class="acc_text">预约时间</div>
                <div class="acc_txt" v-for="item in regData.resData ? regData.resData.details : []" :key="item">
                  {{ regData.resData ? regData.resData.apmDay.substring(0, 10) : '' }} {{ item.period }}{{ item.timeFrame }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn" v-print="printObj" v-show="regData.resStatus == 1">
          签到并打印
        </div>
        <!-- <div class="btn" v-print="printObj">
          签到并打印
        </div> -->
        <div class="btn" v-show="regData.resStatus == 0" @click="closeDraw">
          关闭
        </div>
      </div>
    </el-drawer>
    <!-- 打印 -->
    <div style="margin-left:-9999px;height:1000pt;">
      <div id="pintHtml" class="prin_table"
        style="font-family: SimSun;font-size:12px;letter-spacing: 2px;line-height:16px;display: inline-block;overflow: hidden;">
        <div style="line-height:40px;font-size:22pt;text-align:center;">机动车驾驶人身体条件证明</div>
        <table border="1" cellspacing="3">
          <tr>
            <td rowspan="6" style="text-align:center;width:26px;">申<br />请<br />人<br />填<br />报<br />事<br />项</td>
            <td rowspan="4" style="text-align:center;width:26px;">申<br />请<br />人<br />信<br />息</td>
            <td style="width:60px;text-align:center;">姓 名</td>
            <td colspan="3" style="text-align:center;">{{ regData.resData ? regData.resData.cupName : '' }}</td>
            <td style="text-align:center;">性别</td>
            <td style="text-align:center;">{{ calcSex(regData.resData.cupCardNo) }}</td>
            <td colspan="4" style="text-align:center;">出生日期</td>
            <td colspan="7" style="text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.substring(6, 14) : ''
            }}</td>
            <td colspan="3" style="text-align:center;">国 籍</td>
            <td colspan="5" style="text-align:center;"></td>
          </tr>
          <tr>
            <td style="text-align:center;">身份证<br />明名称</td>
            <td colspan="4"></td>
            <td style="text-align:center;">号 码</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(0) : ''
            }}</td>
            <td colspan="2" style="width:36px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(1) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(2) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(3) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(4) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(5) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(6) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(7) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(8) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(9) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(10) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(11) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(12) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(13) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo ? regData.resData.cupCardNo.charAt(14) : ''
            }}</td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo && regData.resData.cupCardNo.length >
                15 ? regData.resData.cupCardNo.charAt(15) : ''
            }}
            </td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo && regData.resData.cupCardNo.length >
                15 ? regData.resData.cupCardNo.charAt(16) : ''
            }}
            </td>
            <td style="width:20px;text-align:center;">{{
              regData.resData.cupCardNo && regData.resData.cupCardNo.length >
                15 ? regData.resData.cupCardNo.charAt(17) : ''
            }}
            </td>
          </tr>
          <tr>
            <td colspan="3" style="width:100px;text-align:center;">
              <div style="letter-spacing:1px;">申请 / 已具有的</div>
              <div style="letter-spacing:4px;">准驾车型代号</div>
            </td>
            <td colspan="3"></td>
            <td colspan="4" style="text-align:center;">档案编号</td>
            <td colspan="9"></td>
            <td colspan="6" rowspan="4" style="text-align:center;">
              <div style="padding-top:40px;">照片</div>
              <div style="padding-top:70px;">（医疗机构章）</div>
            </td>
          </tr>
          <tr>
            <td style="text-align:center;">邮寄<br />地址</td>
            <td colspan="5"></td>
            <td style="text-align:center;" colspan="4">联系电话</td>
            <td colspan="9"></td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center;">申<br />告<br />事<br />项</td>
            <td colspan="19">本人如实申告 □具有 □不具有 下列疾病或者情况</td>
          </tr>
          <tr>
            <td colspan="19">□器质性心脏病 <span style="margin-left:50px">□癫&nbsp;&nbsp;痫</span>
              <span style="margin-left:50px">□美尼尔氏症</span>
              <span style="margin-left:50px">□眩&nbsp;&nbsp;晕</span>
              <span style="margin-left:50px">□癔</span>病
              <span style="margin-left:60px">□震颤麻痹</span>
              <span style="margin-left:60px">□精神病</span>
              <span style="margin-left:60px">□痴呆</span>
              <div>□影响肢体活动的神经系统疾病等妨碍安全驾驶病</div>
              <div>□三年内有吸食、注射毒品行为或者解除强制隔离戒毒措施未满三年、或者长期服用依赖性精神药品成瘾尚未戒除</div>
              <div>上述申告为本人真实情况和真实意思表示，如果不属实本人自愿承担相应的法律责任。</div>
            </td>
          </tr>
          <tr>
            <td rowspan="10" colspan="2" style="text-align:center;">医<br />疗<br />机<br />构<br />填<br />写<br />事<br />项
            </td>
            <td style="text-align:center;">身高（cm）</td>
            <td colspan="2"></td>
            <td style="text-align:center;">辨色力</td>
            <td colspan="3" style="text-align:center;">
              <span style="letter-spacing:3px;">红绿色盲</span><br />
              □有 □无
            </td>
            <td colspan="4" style="text-align:center;">医生<br />备注</td>
            <td colspan="15"></td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center;">视<br />力</td>
            <td colspan="2" style="text-align:center;">左眼</td>
            <td rowspan="2" style="text-align:center;">是否矫正</td>
            <td colspan="2" style="text-align:center;">
              □是 □否
            </td>
            <td style="text-align:center;" rowspan="2">单<br />眼<br />视<br />力<br />障<br />碍</td>
            <td colspan="5"></td>
            <td style="text-align:center;" rowspan="2">医<br />生<br />备<br />注</td>
            <td colspan="12" rowspan="2"></td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center;">右眼</td>
            <td colspan="2" style="text-align:center;">
              □是 □否
            </td>
            <td colspan="5"></td>
          </tr>
          <tr>
            <td style="text-align:center;" rowspan="2">听<br />力</td>
            <td colspan="2" style="text-align:center;">左耳</td>
            <td colspan="3" style="text-align:center;">□不合格 □合格<br />□佩戴助听装置</td>
            <td rowspan="2" style="text-align:center;">医<br />生<br />备<br />注</td>
            <td colspan="18"></td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center;">右耳</td>
            <td colspan="3" style="text-align:center;">□不合格 □合格<br />□佩戴助听装置</td>
            <td colspan="18"></td>
          </tr>
          <tr>
            <td style="text-align:center;">躯干和<br />颈部</td>
            <td colspan="10" style="text-align:center;">
              <span style="letter-spacing:3px;">运动功能障碍</span><br />
              □有 □无
            </td>
            <td colspan="3" style="text-align:center;">医生<br />备注</td>
            <td colspan="14"></td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center;">上肢</td>
            <td colspan="2" style="text-align:center;">左上肢</td>
            <td colspan="10">
              <div>□不合格<span style="margin-left:30px;">□合格</span></div>
              <div>□手指末节残缺</div>
              <div>□左手三指健全，双手手掌完整</div>
              <div>□符合申请C5条件</div>
            </td>
            <td rowspan="4" colspan="4" style="text-align:center;">
              双下肢缺<br />失或者丧<br />失运动功<br />能障碍是<br />否能够自<br />主坐立
              <div style="padding-top:30px;">□有 □无</div>
            </td>
            <td rowspan="4" style="text-align:center;">医<br />生<br />备<br />注</td>
            <td rowspan="4" colspan="10"></td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center;">右上肢</td>
            <td colspan="10">
              <div>□不合格<span style="margin-left:30px;">□合格</span></div>
              <div>□手指末节残缺</div>
              <div>□右手拇指残缺</div>
              <div>□符合申请C5条件</div>
            </td>
          </tr>
          <tr>
            <td rowspan="2" style="text-align:center;">下肢</td>
            <td colspan="2" style="text-align:center;">左下肢</td>
            <td colspan="10">
              <div>□不合格<span style="margin-left:30px;">□合格</span></div>
            </td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center;">右下肢</td>
            <td colspan="10">
              <div>□不合格<span style="margin-left:30px;">□合格</span></div>
              <div>□不合格但可自主坐立</div>
            </td>
          </tr>
          <tr>
            <td colspan="3" style="text-align:center;">申请方式</td>
            <td colspan="29">
              <span style="padding-left:50px;">□本人申请</span>
              <span style="padding-left:100px;">□委托<span
                  style="display:inline-block;width:200px;border-bottom:1px solid #000;"></span>代理申请</span>
            </td>
          </tr>
          <tr>
            <td colspan="3" rowspan="2" style="text-align:center;">委托代理人信息</td>
            <td style="text-align:center;">姓名</td>
            <td colspan="6"></td>
            <td colspan="4" style="text-align:center;">身份证明<br />名称</td>
            <td colspan="5"></td>
            <td colspan="2" style="text-align:center;">号码</td>
            <td colspan="8"></td>
          </tr>
          <tr>
            <td style="text-align:center;">联系地址</td>
            <td colspan="15"></td>
            <td colspan="2" style="text-align:center;">电话</td>
            <td colspan="8"></td>
          </tr>
          <tr>
            <td colspan="33" style="padding:8px 3px;">
              备注：《机动车驾驶人身体条件证明》自体检之日起6个月内有效。
            </td>
          </tr>
          <tr>
            <td colspan="33" style="padding:10px 3px;font-size:14px;">
              <div style="display:inline-block;width:30%;">申请人签字：</div>
              <div style="display:inline-block;width:30%;">医生签字：</div>
              <div style="display:inline-block;width:30%;">代理人签字：</div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </basic-container>
</template>

<script>
import {
  getList,
  queryBookDetail,
  getStatus,
  getSystemTime
} from "@/api/booklist/booklist";
import { mapGetters } from "vuex";
import print from "vue-print-nb";
import { calcSex } from "../../util/util";
import { dateFormat } from "../../util/date";
import {Base64} from 'js-base64';

export default {
  data() {
    return {
      printObj: {
        id: 'pintHtml',
      },
      showPrint: false,
      form: {},
      query: {},
      loading: true,
      parentId: 0,
      direction: 'rtl',
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      isRegister: false,
      option: {
        height: 'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        dialogType: 'drawer',
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        column: [
          {
            label: "体检人姓名",
            prop: "cupName",
          },
          {
            label: "身份证号码",
            prop: "cupCardNo",
            searchLabelWidth: 100,
            search: true
          },
          {
            label: "体检项目",
            prop: "project",
            type: "select",
            hide: true,
            search: true,
            viewDisplay:false,
            dicUrl:'/api/blade-system/dict-biz/get-hc-project',
            props: {
              label: 'dictValue',
              value: 'dictValue'
            },
          },
          {
            label: "联系方式",
            prop: "cupPhone",
          },
          {
            label: "预约时间",
            prop: "releaseTimeRange",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            search: true,
            hide: true,
            searchValue:dateFormat(new Date()),
            searchClearable: false,
          },
          {
            label: "预约日期",
            prop: "apmDay",
            html: true,
            formatter: value => {
              return `<div>${value.apmDay.substring(0, 10)}</div>`
            }
          },
          {
            label: "预约时间",
            prop: "examDate",
            slot: true
          },
          {
            label: "预约项目",
            prop: "examPro",
            slot: true
          },
          {
            label: "状态",
            prop: "apmStatus",
            slot: true,
          },
        ]
      },
      data: [],
      regData: {
        resData: {}
      },
      systemTime: ''
    };
  },
  directives: {
    print
  },

  computed: {
    ...mapGetters(["userInfo", "permission", "systemTime"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
  },
  created() {
    // this.getCard()
  },
  mounted() {
    getSystemTime().then(res => {
      this.systemTime = res.data.data
    })
  },
  methods: {
    //计算性别
    calcSex(cardNo) {
      // console.log('sex', calcSex(cardNo));
      return calcSex(cardNo);
    },
    // 获取身份证后打开弹窗
    getCard(number) {
      number = '3702120000618034X';
      this.option.column.find(item => item.label == '身份证号码').searchValue = number
    },
    handleRegister(row) {
      // console.log('13',row)
      let ids = []
      row.details.map(item => {
        ids.push(item.id)
      })
      let val = ids.join(',');
      getStatus(val).then(res => {
        res.data.data.resData.cupCardNo = res.data.data.resData.cupCardNo.length > 18 ? Base64.decode(res.data.data.resData.cupCardNo) : res.data.data.resData.cupCardNo;
        res.data.data.resData.cupName = res.data.data.resData.cupName.length > 7 ? Base64.decode(res.data.data.resData.cupName) : res.data.data.resData.cupName;
        res.data.data.resData.cupPhone = res.data.data.resData.cupPhone.length > 11 ? Base64.decode(res.data.data.resData.cupPhone) : res.data.data.resData.cupPhone;
        // console.log('12',res.data);
        this.regData = res.data.data;
        this.isRegister = true
      })

    },
    beforeOpen(done, type) {
      done();
    },
    beforeClose(done) {
      done();
    },
    searchReset(params,done) {
      params.releaseTimeRange = dateFormat(new Date(),'yyyy-MM-dd');
      this.query = params;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    closeDraw() {
      this.isRegister = false
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {

      this.loading = true;
      const { releaseTimeRange, cupCardNo } = this.query;
      let values = {
        ...params,
        ...this.query
      };
      console.log(this.query)
      console.log(releaseTimeRange)
      if (releaseTimeRange) {
        values = {
          ...values,
          startTime: releaseTimeRange,
          endTime: releaseTimeRange,
        };
      } else {
        values.startTime = dateFormat(new Date(),'yyyy-MM-dd');
        values.endTime = dateFormat(new Date(),'yyyy-MM-dd');
      }
      values.createDept = this.userInfo.dept_id;
      values.cupCardNo = cupCardNo ? Base64.encode(cupCardNo) : '';
      console.log(values)
      this.loading = true;
      getList(page.currentPage, page.pageSize, values).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        data.records.map(item => {
          item.cupCardNo = item.cupCardNo.length > 18 ? Base64.decode(item.cupCardNo) : item.cupCardNo;
          item.cupName = item.cupName.length > 7 ? Base64.decode(item.cupName) : item.cupName;
          item.cupPhone = item.cupPhone.length > 11 ? Base64.decode(item.cupPhone) : item.cupPhone;
        })
        this.data = data.records;
        this.loading = false;
      });
    },
  }
};
</script>

<style lang="scss" scoped>

</style>
<style lang="scss">
.el-drawer__wrapper {
  .register_box {
    width: 800px !important;
    // padding: 0 40px;

    .title_box {
      // padding: 0 40px;
      // margin-top: 40px;

      .title_txt {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt {
          color: rgba(0, 0, 0, .85);
          font-weight: 500;
          line-height: 24px;

        }

        .img_box {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }

      .sub_txt {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }

    .tip_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px 0 20px 0;

      .img {
        width: 30px;
        height: 30px;
      }

      .tip_txt {
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #00B578;
        margin-left: 10px;
      }

      .fail_txt {
        color: #F93A4A;
      }

      .warn_txt {
        color: #FF6010;
      }
    }

    .tips_txt {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #F93A4A;
    }

    .tips_warn {
      color: #FF6010;
    }

    .fail_tip {
      color: #FF6010;
    }

    .account_mess {
      .mess_tit {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 40px 0 20px 0;
      }

      .mess_box {
        width: 100%;
        min-height: 123px;
        background: #F5F6FA;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
          width: 25%;
          margin-left: 30px;

          .acc_text {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 14px;
          }

          .acc_txt {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #00B578;
          }
        }

        .fail_box {
          .acc_txt {
            color: #333333;
          }
        }

        .warn_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          display: flex;
          width: 75%;
          align-items: center;
          justify-content: space-between;

          .acc_box {
            .acc_text {
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom: 14px;
            }

            .acc_txt {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00B578;
            }
          }
        }

        .fail_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }

        .warn_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }
      }

      .reg_box {
        justify-content: start;

        .left_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          .acc_box {
            .acc_txt {
              color: #333333;
            }

            .acc_warn {
              color: #FF6010;
            }
          }
        }

      }
    }

    .btn {
      width: 151px;
      height: 50px;
      background: #1677FF;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #FFFFFF;
      cursor: pointer;
      margin-top: 50px;

    }
  }

  .prin_table table tr td {
    padding: 4px 0;
  }
}
</style>