标签：条形码 vue 3rem top barcode 二维码 nbsp position font

<template>
<section style="height: 100vh;"  class="bg">
  <div class="cardtype"><i class="pos fa fa-diamond fa-lg" :style="{color: '#FFFFFF'}"></i> {{VipInfo.VipCardTypeName}}</div>
  <div class="container">
    <!-- 条形码 -->
    <div class="barcode">
      <barcode :value="barcode" :options="barcode_option" tag="svg"></barcode>
      <span class="txt">
        <span>{{barcode1}}</span>&nbsp;&nbsp;
        <span>{{barcode2}}</span>&nbsp;&nbsp;
        <span>{{barcode3}}</span>&nbsp;&nbsp;
        <span>{{barcode4}}</span>
      </span>
    </div>
    <!-- 二维码 -->
    <qrcode class="qrCode" :url="barcode" :wid="180" :hei="180" :imgwid="40" :imghei="40"></qrcode>
  </div>
  <div class="claim">
    <i class="pos fa fa-info-circle fa-lg" :style="{color: '#FFFFFF'}"></i>
    &nbsp;如果付款失败，请点击刷新&nbsp;
    <i class="pos fa fa-refresh fa-lg" :style="{color: '#FFFFFF'}"></i>
  </div> 
</section>
</template>

<script>
import qrcode from 'vue_qrcodes'
export default {
  components: { qrcode },
  data() {
    return {
      VipInfo: '',
      barcode: '888888888888888888',
      barcode1: '',
      barcode2: '',
      barcode3: '',
      barcode4: '',
      barcode_option: {
        // format: 'CODE128',
        displayValue: false,
        background: 'transparent',
        width: '2px',
        height: '80px',
        fontOptions: 'bold',
        fontSize: '32px'
      },
      icon: ''
    }
  },
  mounted() {
    var tmp = window.sessionStorage.getItem('VipInfo')
    if (tmp) {
      this.VipInfo = JSON.parse(tmp)
    }
    // this.barcode = this.$route.params.barcode
    this.barcode1 = this.barcode.substr(0, 4)
    this.barcode2 = this.barcode.substr(4, 4)
    this.barcode3 = this.barcode.substr(8, 4)
    this.barcode4 = this.barcode.substr(12, 6)
  },
  methods: {
  }
}
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(#47C9EB, #367CF7);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}
.cardtype {
  color: white;
  font-size: .3rem;
  text-align: center;
  line-height: .3rem;
  margin-top: .5rem;
}
.container {
  margin: .5rem .5rem .3rem;
  padding-bottom: .6rem;
  border-radius: .1rem;
  background-color: white;
}
/* 条形码 */
svg {
  width: 96%;
  position: relative;
  display: block;
  top: -0.01rem;
  margin: 0 auto;
}
.barcode {
  position:relative;
  top: .5rem;
}
/* 会员码 */
.txt {
  display: block;
  text-align: center;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  font-weight: 700;
  font-size: .3rem;
}
/* 二维码 */
.qrCode{
  position: relative;
  margin-top: 1.3rem;
  left: calc(50% - 90px);
}
.claim {
  
  color: white;
  text-align: center;
  font-size: .3rem;
}
.fa-info-circle::before, .fa-refresh::before {
  font: normal normal normal .4rem/1 FontAwesome!important;
}
</style>

标签：条形码,vue,3rem,top,barcode,二维码,nbsp,position,font
来源： https://www.cnblogs.com/mobaiyu/p/11974918.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。