样式修改

shuishen

2021-11-03 d448ee0d570eb02379c288721642972adaba6d15

样式修改

 src/views/securityGuard/securityCertificate.vue

@@ -1,6 +1,8 @@
<template>
  <div class="securityCertificate" id="securityCertificate">
    <div class="security_main" ref="securityCertificate">
    <div class="securityCertificate"
         id="securityCertificate">
        <div class="security_main"
             ref="securityCertificate">
      <!-- 标题 -->
      <div class="security_main_backImge no-print"></div>
      <div class="security_main-title no-print">
@@ -21,14 +23,16 @@
      <!-- 内容 -->
      <div class="security_m_r_imgs no-print">
        <div v-if="!data.avatar">暂无照片</div>
        <img :src="data.avatar" alt="" v-else />
                <img :src="data.avatar"
                     alt=""
                     v-else />
      </div>
      <div class="security_m_l_titleName widt">{{ data.realName }}</div>
      <div class="security_m_l_titlepaperTimenian widt">
        {{ data.paperTime.slice(0, 4) }}
                {{ year }}
      </div>
      <div class="security_m_l_titlepaperTimeyue widt">
        {{ data.paperTime.slice(5, 7) }}
                {{ month }}
      </div>
      <!-- <div class="security_m_l_titlepaperTimeri">
        {{ data.paperTime.slice(8, 10) }}
@@ -46,8 +50,10 @@
      </div>
      <div class="security_m_r_o_rightcardid">{{ data.cardid }}</div>
    </div>
    <span slot="footer" class="dialog-footer no-print PrintBut">
      <el-button type="primary" @click="Print">打 印</el-button>
        <span slot="footer"
              class="dialog-footer no-print PrintBut">
            <el-button type="primary"
                       @click="Print">打 印</el-button>
    </span>
  </div>
</template>
@@ -55,10 +61,26 @@
<script>
import dictVertical from "../util/demo/dict-vertical.vue";
export default {
    data () {
        return {
            year: null,
            month: null
        }
    },
  components: { dictVertical },
  props: ["data"],
    created () {

        var time = this.getNewTime()
        this.year = time[0]
        this.month = time[1]
    },
  methods: {
    Print() {
            if (this.data.address == '' || this.data.address == null) {
                this.$message({ message: '请完善地址信息', type: 'warning' })
                return
            }
      var printDom = document.getElementById("securityCertificate");
      printDom.style.position = "fixed";
      printDom.style.top = "-26%";
@@ -70,6 +92,18 @@
      printDom.style.left = "0";
      printDom.style.width = "100%";
      printDom.style.height = "auto";
        },
        getNewTime () {
            var nowTime = new Date()

            var oneHoursAgo = new Date(new Date(nowTime).getTime() - 1 * 60 * 60 * 1000)
            var oneHoursAgoY = oneHoursAgo.getFullYear()
            var oneHoursAgoM = oneHoursAgo.getMonth() + 1 < 10 ? '0' + (oneHoursAgo.getMonth() + 1) : oneHoursAgo.getMonth() + 1

            /**
             * @return 返回1小时，2小时，3小时，4小时，24小时
             */
            return [oneHoursAgoY, oneHoursAgoM]
    },
  },
};
@@ -85,6 +119,9 @@
  align-items: center;
  justify-content: center;
  flex-direction: column;
    font-family: 'SimSun' !important;
    font-size: 18px !important;
    font-weight: bold !important;
}
.security_main {
  width: 630px;
@@ -107,7 +144,6 @@
  top: $upTop;
  left: 39px;
  line-height: 45px;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 3px;
}
@@ -116,7 +152,6 @@
  position: absolute;
  top: $downTop;
  left: 32px;
  font-size: 16px;
  line-height: 40px;
}
//证件编号 &nbsp;
@@ -124,8 +159,6 @@
  position: absolute;
  top: 421px;
  left: 32px;
  font-size: 24px;
  font-weight: 500;
}

$rightLeft: 343px;
@@ -138,18 +171,15 @@
  position: absolute;
  top: $downTop;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
  font-weight: 500;
}
//出生年月
.security_m_r_b {
  position: absolute;
  top: $downTop + $lineHigeht * 1;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
@@ -159,7 +189,6 @@
  position: absolute;
  top: $downTop + $lineHigeht * 2;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
@@ -169,7 +198,6 @@
  position: absolute;
  top: $downTop + $lineHigeht * 4;
  left: $rightLeft;
  font-size: $rightFontSize;
  width: $rightWidth;
  text-align: justify;
  text-align-last: justify;
@@ -196,8 +224,6 @@
  top: 13px;
  left: 44px;
  line-height: 45px;
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 3px;
}
//发证时间
@@ -207,34 +233,27 @@
  position: absolute;
  top: $timeTop;
  left: 25px;
  font-size: 18px;
  line-height: 40px;
  // font-weight: 500;
}
//月
.security_m_l_titlepaperTimeyue {
  position: absolute;
  top: $timeTop;
  left: 75px;
  font-size: 18px;
  line-height: 40px;
  // font-weight: 500;
}
//日
.security_m_l_titlepaperTimeri {
  position: absolute;
  top: $timeTop;
  left: 164px;
  font-size: 18px;
  line-height: 40px;
  // font-weight: 500;
}
//证件编号
.security_m_l_downsecuritynumber {
  position: absolute;
  top: 357px; //整体高度
  left: 54px;
  font-size: 17px;
}

//内容
@@ -244,36 +263,28 @@
  position: absolute;
  top: $downTop + 2px;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
  // font-weight: 500;
}
// 生日
.security_m_r_o_rightbirthday {
  position: absolute;
  top: $downTop + $lineHigeht * 1;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
  // font-weight: 500;
}
// 地址
.security_m_r_o_rightaddress {
  position: absolute;
  top: $downTop + $lineHigeht * 2 -5px;
  left: $centerLeft;
  font-size: 15px;
  width: 160px;
  // font-weight: 500;
}
// 身份证
.security_m_r_o_rightcardid {
  position: absolute;
  top: $downTop + $lineHigeht * 4 +8px;
  left: $centerLeft;
  font-size: $rightFontSize;
  // width: $rightWidth;
  // font-weight: 500;
}
//背景图
.security_main_backImge {
@@ -285,6 +296,5 @@
  background-repeat: no-repeat;
}
// .widt{
//   font-weight: 550;
// }
</style>