<template>
|
<view>
|
<div class="xx"></div>
|
<view class="box">
|
<image src="/static/img.png" style="width: 100%;height: 150px" />
|
<view style=" padding: 47px;">
|
<view style="display: flex;align-items: baseline;"><text class="title">车牌</text><text class="vlaue">粤B4598Z</text></view>
|
<view style="display: flex;align-items: baseline;"><text class="title">有效期</text><text class="vlaue">2023.02.22</text></view>
|
</view>
|
<tki-qrcode style="text-align: center"
|
cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
|
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import tkiBarcode from '@/components/tki-qrcode/tki-qrcode'
|
|
export default {
|
name: "index",
|
components:{
|
tkiBarcode
|
},
|
data(){
|
return {
|
val: "FB19A1650-100S",
|
ifShow: true,
|
size: 200, // 二维码大小
|
unit: 'upx', // 单位
|
background: '#000', // 背景色
|
foreground: '#ffffff', // 前景色
|
pdground: '#ffffff', // 角标色
|
icon: '', // 二维码图标
|
iconsize: 40, // 二维码图标大小
|
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
onval: false, // val值变化时自动重新生成二维码
|
loadMake: true, // 组件加载完成后自动生成二维码
|
src: '' // 二维码生成后的图片地址或base64
|
|
}
|
},
|
onLoad(){
|
uni.setNavigationBarTitle({ title: '车辆园区通行证',})
|
this.$refs.code39._makeCode()
|
}
|
}
|
</script>
|
|
<style scoped>
|
.box{
|
width: 78%;
|
background: white;
|
height: 500px;
|
border-radius: 5px;
|
margin: -100px auto 0;
|
}
|
.xx{
|
height: 0;
|
border-top: 144px solid #67a8fa;
|
border-right: 720px solid transparent;
|
}
|
.title{
|
color: #a6afc0;
|
font-size: 14px;
|
width: 76px;
|
flex:0 0 76px;
|
display: inline-block;
|
line-height: 32px;
|
}
|
.vlaue{
|
font-size: 14px;
|
|
}
|
</style>
|
