web-achieve/src/views/adminCenter/adminCate/parts/one copy.vue

<template>
  <div id="one">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top" id="demo">
          <el-form ref="form" :model="form" label-width="100px">
            <el-col :span="24" class="title">
              吉林省科技成果评价证书
            </el-col>
            <el-col :span="24" class="num">
              <p>吉发号[<el-input v-model="form.basic.jf_num"></el-input>]第<el-input v-model="form.basic.jf_nums"></el-input>号</p>
            </el-col>
            <el-col :span="24" class="info">
              <el-col :span="24" class="infoMess">
                <span>成果名称：</span>
                <el-input v-model="form.basic.achieve_name"></el-input>
              </el-col>
              <el-col :span="24" class="infoMess">
                <span>完成单位（盖章）：</span>
                <el-input v-model="form.basic.apply_company"></el-input>
              </el-col>
              <el-col :span="24" class="infoMess">
                <span>完成人（签字）：</span>
                <el-input v-model="form.basic.contacts"></el-input>
              </el-col>
            </el-col>
            <el-col :span="24" class="date">
              <p>
                申请评价日期：<span>{{ getDate('yyyy') }}年</span><span>{{ getDate('MM') }}月</span><span>{{ getDate('DD') }}日</span>
              </p>
            </el-col>
            <el-col :span="24" class="make">
              <p>吉林省发明协会</p>
              <p>二0一八年十二月制</p>
            </el-col>
          </el-form>
        </el-col>
        <el-col :span="24" class="down">
          <el-button type="primary" size="mini" @click="next">下一步</el-button>
          <el-button type="primary" size="mini" @click="handleDown">下载</el-button>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import htmlToPdf from '@/unit/htmlToPdf.js';
const moment = require('moment');
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'one',
  props: {
    form: { type: Object },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    getDate(date) {
      if (date == 'yyyy') {
        return moment().format('YYYY');
      } else if (date == 'MM') {
        return moment().format('MM');
      } else if (date == 'DD') {
        return moment().format('DD');
      }
    },
    next() {
      this.$emit('next');
    },
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector('#demo'), '测试');
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding: 0 28%;
  .top {
    width: 700px;
    height: 990px;
    // border: 1px solid #ccc;
    padding: 0 15px;
    .title {
      font-size: 45px;
      text-align: center;
      font-weight: bold;
      padding: 120px 0 0 0;
      font-family: cursive;
      margin: 0 0 30px 0;
    }
    .num {
      text-align: center;
      margin: 0 0 90px 0;
      p {
        font-size: 24px;
        font-family: cursive;
      }
      /deep/.el-input {
        width: 10%;
      }
      /deep/.el-input__inner {
        border: none;
        border-bottom: 2px solid #000;
        border-radius: 0;
        font-size: 20px;
        padding: 0 0;
        text-align: center;
      }
    }
    .info {
      padding: 0 40px;
      .infoMess {
        height: 40px;
        line-height: 40px;
        margin: 10px 0;
        span {
          display: inline-block;
          width: 37%;
          height: 45px;
          line-height: 45px;
          font-size: 24px;
          font-family: cursive;
        }
        /deep/.el-input {
          width: 63%;
        }
        /deep/.el-input__inner {
          border: none;
          border-bottom: 2px solid #000;
          border-radius: 0;
          font-size: 20px;
          line-height: 45px;
          height: 45px;
        }
      }
    }
    .date {
      height: 45px;
      line-height: 45px;
      margin: 60px 0 0 0;
      font-size: 25px;
      padding: 0 40px;
      font-family: cursive;
      span {
        display: inline-block;
        height: 45px;
        line-height: 45px;
        padding: 0 10px;
      }
    }
    .make {
      margin: 220px 0 0 0;
      text-align: center;
      p {
        font-size: 20px;
        padding: 5px 0;
      }
    }
  }
  .down {
    margin: 15px 0 0 0;
    text-align: center;
  }
}
</style>