GitBucket
4.23.0
Toggle navigation
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
hanfei
/
VueSharedPrinting
Browse code
han
master
1 parent
a8e4927
commit
0baed9bdb6bf789d645e32a6ea707554c17ddcff
hanfei
authored
on 24 May
Patch
Showing
2 changed files
src/components/global.vue
src/views/complete.vue
Ignore Space
Show notes
View
src/components/global.vue
<template> <div> <!-- 打印中提示--> <div class="dyzTip" v-if="DYZshow && DYZlist"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt="" /> <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0"> 小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。 </div> <!-- <div v-else class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div>--> <div v-else class="name">正在打印...</div> <!-- <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</div>--> <!-- <div class="flex-center name">您的资料打印中--> <!-- <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">第{{index+1}}份</span>--> <!-- {{ Progress.rate || '0%' }}</div>--> <div class="JDT"><span :style="'width:' + Progress.rate"></span></div> <!-- <div class="flex-center">您的资料打印中{{ Progress.rate || '0%' }}</div>--> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 提示--> <div class="tkTip flex-center" v-if="state.sta"> <div v-if="state.name">{{ state.name }}</div> <div style="width: 50%;margin-top: 3%;" v-if="state.name2">{{ state.name2 }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="src" logoBackgroundColor="white" ></VueQr> <p> <img @click="onChange('zfShow', false)" class="icon" src="../assets/demo10.png" alt="" /> </p> </div> </div> <!-- 页面加载中--> <div class="dyzTip" v-if="citeL.loadingSta.sta"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" viewbox="0 0 100 100" fill="#afb4db"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear second"> <svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear third"> <svg id="orange" viewbox="0 0 100 100" fill="#fedcbd"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <!-- 绘制圆形水珠 --> <div class="lil-circle"></div> <svg class="blur-circle"> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur> </filter> <circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle> </svg> </div> <!-- 文字 --> <div class="text">{{ citeL.loadingSta.name }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Wait4Printing.mp3" /> </audio> </div> </template> <script> import mqtt from 'mqtt/dist/mqtt' import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetTransactionStatus, getDeviceCode} from '@/api/bdResultApi' import alert from '../utils/alert' export default { name: 'global', components: { VueQr }, data() { return { client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: {}, numZt: 120, ztyc: false, citeL: { loadingSta: { sta: false, name: 'Loading' } } } }, created() { console.log(this.cite.ztyc) this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if (this.code == '') { this.toLoad() } }, 3000) }, methods: { onCloneZt() { this.numZt = 0 this.onNum() }, onNum() { if (this.numZt == 0) { this.cite.ztyc = false this.DYZshow = false this.DYZlist = [] } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, ddycztcx(code) { // 订单状态，进度查询 if (this.DYZshow) { setTimeout(() => { bdGetTransactionStatus({ code: code }).then(res => { console.log('bdGetTransactionStatus',res) if(res.status=='COMPLETE'||res.status=='CANCELED') { // 已完成，已取消 this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else{ if(res.status=='IN_PROGRESS') { // 进行中 if(!this.Progress.rate&&res.rate&&res.rate!=0) { this.Progress.rate = res.rate // if (res.rate == '99%') { // setTimeout(() => { // if (this.Progress.rate == '99%') { // this.Progress.rate = '100%' // } // }, 500) // } } }else if(res.status=='ABNORMAL'){ // 订单异常 if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } this.ddycztcx(code) } }) },1000) } }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.DYZshow = true // this.ddcx('20240110114509927498') // if(this.code) {return} getDeviceCode().then(res => { if(this.code=='') { this.cite.code = res.data this.code = res.data this.load() }else{ this.cite.code = res.data this.code = res.data } this.cite.loadingSta = { sta: false } }).catch(error => {alert(error,this)}) }, load() { if (this.cite.facility === '') { this.getDeviceByCode() } // 判断是否是广告屏 if (this.cite.name != 'advertising') { this.initMqtt() setInterval(() => { if (!this.state.sta && this.cite.state.sta) { let time = 3000 if(this.cite.state.name2) { time = 6000 } setTimeout(() => { this.cite.state.sta = false }, time) } this.state = this.cite.state }, 1000) } }, // 3秒查询订单状态 ddcx(code) { if(this.DYZshow) { setTimeout(()=>{ getTransactionStatus({ code: code }).then(res => { // 已完成，已取消，订单异常 // console.log('3秒查询订单状态',res) if(res=='COMPLETE'||res=='CANCELED') { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else if(res=='ABNORMAL') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true }else{ this.ddcx(code) } }).catch(error => { alert(error,this) if(error.response.status==500) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 } }) },3000) } }, initMqtt() { let code = 'tzdy-web::'+this.code // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: code, //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', e => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', error => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息', data) if (data.cmd == 'HEARTBEAT') { if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } // 判断异常语音 if (data.abnormalReason !== undefined) { this.cite.serveError = true } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO') { //小程序支付 this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // this.cite.url = data.payCodeUrl // if(this.cite.selectedFile.length<1) { // this.src = data.payCodeUrl // this.zfShow=true // } // 3秒查询订单状态 this.ddcx(data.code) // 订单状态，进度查询 this.ddycztcx(data.code) } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'PRINT') { //打印任务 // this.DYZshow = true // this.zfShow = false // this.DYZlist.push(data) // this.DYZlistNum = this.DYZlist.length } else if (data.cmd == 'PRINT_STATUS') { //打印任务完成 console.log(this.DYZlist) if (data.taskStatus == 'COMPLETE') { if (this.DYZlist.length > 1) { this.DYZlist.forEach((item, index) => { if (item.code == data.taskCode) { this.DYZlist.splice(index, 1) } }) } else { if (this.DYZshow) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.Progress = {} this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then(res => { this.cite.facility = res }).catch(error => {alert(error,this)}) } } } else if (data.taskStatus == 'INTERRUPT') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } } else if (data.cmd == 'PRINT_PROGRESS' && !this.cite.ztyc) { console.log(data) this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/' + this.code] this.client.subscribe(arr, { qos: 2 }, err => { if (!err) { // console.log(`消息订阅成功`) } else { // console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { if (this.code) { getDeviceByCode({ code: this.code }).then(res => { console.log(res) this.cite.facility = res this.getAdvertisement() }).catch(error => {alert(error,this)}) } }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if (this.cite.name == 'advertising') { name = 'AdvertisingScreen' } getAdvertisement({ deviceId: this.cite.facility.id, screen: name }).then(res => { // console.log(res) this.cite.advertisement = res || '' }).catch(error => {alert(error,this)}) }, play() { console.log(this.$refs.audio) // if (addr !== '') { // console.log('12') // let music = new Audio() // music = addr // this.$refs.audio.src = music // } this.$refs.audio.play() } } } </script> <style scoped lang="less"> .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -14.5rem; width: 38.56rem; height: 29rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 18rem; height: 3rem; margin: 1rem auto; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; } .JDT { width: 80%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; } } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style>
<template> <div> <!-- 打印中提示--> <div class="dyzTip" v-if="DYZshow && DYZlist"> <div class="curtain"></div> <div class="content"> <img src="../assets/printing.png" alt="" /> <div v-if="ztyc" class="flex-center" style="padding: 0 0.3rem; margin: 0"> 小天很抱歉通知您，您使用中的打印设备发生异常，请您联系客服人员（电话{{ cite.facility.servicePhone }}）为您处理订单善后事宜。 </div> <!-- <div v-else class="name">正在进行{{ DYZlist[0].printFileType=='PDF'?'文档':'照片' }}打印...</div>--> <div v-else class="name">正在打印...</div> <!-- <div class="flex-center">{{ DYZlist.length }}/{{ DYZlistNum }}</div>--> <!-- <div class="flex-center name">您的资料打印中--> <!-- <span v-for="(item,index) in DYZlist2" :key="index" :style="Progress.taskCode==item.code?'':'display:none;'">第{{index+1}}份</span>--> <!-- {{ Progress.rate || '0%' }}</div>--> <div class="JDT"><span :style="'width:' + Progress.rate"></span></div> <!-- <div class="flex-center">您的资料打印中{{ Progress.rate || '0%' }}</div>--> <div v-if="ztyc" class="btn flex-center" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div> </div> </div> <!-- 提示--> <div class="tkTip flex-center" v-if="state.sta"> <div v-if="state.name">{{ state.name }}</div> <div style="width: 50%;margin-top: 3%;" v-if="state.name2">{{ state.name2 }}</div> </div> <!-- 小程序支付--> <div class="dyzTip" v-if="zfShow"> <div class="curtain"></div> <div class="content content2"> <VueQr v-show="src" :auto-color="true" :dot-scale="1" :logo-src="require('@/assets/logo.png')" :logoMargin="0" :logoScale="0.2" :margin="0" :size="300" :text="src" logoBackgroundColor="white" ></VueQr> <p> <img @click="onChange('zfShow', false)" class="icon" src="../assets/demo10.png" alt="" /> </p> </div> </div> <!-- 页面加载中--> <div class="dyzTip" v-if="citeL.loadingSta.sta"> <div class="curtain"></div> <div class="loadingDH"> <!-- 绘制齿轮 --> <div class="load"> <div class="gear first"> <svg id="purple" viewbox="0 0 100 100" fill="#afb4db"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear second"> <svg id="pink" viewbox="0 0 100 100" fill="#FFB5C5"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <div class="gear third"> <svg id="orange" viewbox="0 0 100 100" fill="#fedcbd"> <path d="m88.22905,52.73842l12.66081,-6.69624c-0.24889,-2.48103 -0.7299,-4.88779 -1.33165,-7.25374l-14.06435,-1.94757c-1.21732,-2.93246 -2.82483,-5.65223 -4.71443,-8.14886l5.36114,-13.18525c-1.76284,-1.71922 -3.66664,-3.28664 -5.67042,-4.72891l-11.94246,7.49732c-2.80052,-1.47273 -5.81781,-2.59129 -8.98524,-3.30968l-4.31582,-13.37042c-1.22401,-0.09243 -2.44766,-0.19008 -3.69591,-0.19008s-2.46845,0.0954 -3.69613,0.19008l-4.27306,13.25199c-3.25234,0.69537 -6.33625,1.82692 -9.20876,3.31783l-11.75647,-7.38703c-2.00124,1.44227 -3.90496,3.0097 -5.66766,4.72891l5.2136,12.82104c-2.03201,2.60429 -3.73326,5.47776 -5.01105,8.57467l-13.62035,1.8837c-0.59921,2.36263 -1.08274,4.76684 -1.32906,7.25345l12.2246,6.46784c0.1385,3.4047 0.70298,6.7044 1.70254,9.8117l-9.22158,10.19626c1.07271,2.22493 2.26701,4.38264 3.64861,6.40699l13.5767,-2.91464c2.226,2.422 4.76215,4.54406 7.56029,6.29894l-0.51461,13.89098c2.22975,1.00564 4.54649,1.84729 6.93396,2.52003l8.5892,-11.04055c1.52399,0.19456 3.06723,0.3256 4.64128,0.3256c1.70519,0 3.37278,-0.15405 5.01352,-0.37947l8.63392,11.1018c2.39122,-0.67196 4.70444,-1.51356 6.93395,-2.51926l-0.52454,-14.14044c2.66699,-1.72661 5.08534,-3.79226 7.21739,-6.12444l13.92978,2.98893c1.38161,-2.02403 2.57607,-4.17945 3.64839,-6.40624l-9.52026,-10.5301c0.91453,-2.94323 1.42539,-6.05022 1.57412,-9.25513l0,0l0.00001,-0.00001zm-21.0432,16.08496l-6.00271,3.90775l-3.69207,-5.67259c-1.92067,0.73877 -3.98849,1.18799 -6.1683,1.18799c-9.52022,0 -17.23546,-7.71828 -17.23546,-17.23701c0,-9.51912 7.71525,-17.23441 17.23546,-17.23441c9.51773,0 17.2358,7.71529 17.2358,17.23441c0,4.75679 -1.92697,9.05688 -5.04179,12.17683l3.66907,5.63703z" ></path> </svg> </div> <!-- 绘制圆形水珠 --> <div class="lil-circle"></div> <svg class="blur-circle"> <filter id="blur"> <fegaussianblur in="SourceGraphic" stddeviation="13"></fegaussianblur> </filter> <circle cx="70" cy="70" r="66" fill="transparent" stroke="white" stroke-width="40" filter="url(#blur)"></circle> </svg> </div> <!-- 文字 --> <div class="text">{{ citeL.loadingSta.name }}</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Wait4Printing.mp3" /> </audio> </div> </template> <script> import mqtt from 'mqtt/dist/mqtt' import {getAdvertisement, getDeviceByCode, getTransactionStatus} from '@/api/resultApi' import VueQr from 'vue-qr' import {bdGetTransactionStatus, getDeviceCode} from '@/api/bdResultApi' import alert from '../utils/alert' export default { name: 'global', components: { VueQr }, data() { return { client: null, code: '', DYZshow: false, // 是否显示打印中 downloadPath: 'D:\\TZDYSHARE\\TEMPFILES\\', state: { name: '', sta: false }, src: '', zfShow: false, DYZlist: [], DYZlist2: [], DYZlistNum: 1, Progress: {}, numZt: 120, ztyc: false, citeL: { loadingSta: { sta: false, name: 'Loading' } } } }, created() { console.log(this.cite.ztyc) this.cite.loadingSta = { sta: true, name: '页面重启中，请稍后' } this.toLoad() setInterval(() => { if (this.cite != this.citeL) { this.citeL = this.cite } if (this.code == '') { this.toLoad() } }, 3000) }, methods: { onCloneZt() { this.numZt = 0 this.onNum() }, onNum() { if (this.numZt == 0) { this.cite.ztyc = false this.DYZshow = false this.DYZlist = [] } else { this.numZt = this.numZt - 1 setTimeout(() => { this.onNum() }, 1000) } this.ztyc = this.cite.ztyc }, onChange(name, val) { this[name] = val }, ddycztcx(code) { // 订单状态，进度查询 if (this.DYZshow) { setTimeout(() => { bdGetTransactionStatus({ code: code }).then(res => { // console.log('bdGetTransactionStatus',res) if(res.status=='COMPLETE'||res.status=='CANCELED') { // 已完成，已取消 this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else{ if(res.status=='IN_PROGRESS') { // 进行中 if(!this.Progress.rate) { this.Progress.rate = res.rate if (res.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 500) } } }else if(res=='ABNORMAL'){ // 订单异常 if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } this.ddycztcx(code) } }) },1000) } }, toLoad() { // this.cite.code = 'SNJ-XX-EPSON-X001-00001' // // this.cite.code = 'TZLC001' // this.code = this.cite.code // this.load() // this.cite.loadingSta = { // sta: false // } // this.DYZshow = true // this.ddcx('20240110114509927498') // if(this.code) {return} getDeviceCode().then(res => { if(this.code=='') { this.cite.code = res.data this.code = res.data this.load() }else{ this.cite.code = res.data this.code = res.data } this.cite.loadingSta = { sta: false } }).catch(error => {alert(error,this)}) }, load() { if (this.cite.facility === '') { this.getDeviceByCode() } // 判断是否是广告屏 if (this.cite.name != 'advertising') { this.initMqtt() setInterval(() => { if (!this.state.sta && this.cite.state.sta) { let time = 3000 if(this.cite.state.name2) { time = 6000 } setTimeout(() => { this.cite.state.sta = false }, time) } this.state = this.cite.state }, 1000) } }, // 3秒查询订单状态 ddcx(code) { if(this.DYZshow) { setTimeout(()=>{ getTransactionStatus({ code: code }).then(res => { // 已完成，已取消，订单异常 // console.log('3秒查询订单状态',res) if(res=='COMPLETE'||res=='CANCELED'||res=='ABNORMAL') { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.$router.push({ name: 'complete' }) }else{ this.ddcx(code) } }).catch(error => { alert(error,this) if(error.response.status==500) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 } }) },3000) } }, initMqtt() { let code = 'tzdy-web::'+this.code // 连接配置选项 let options = { connectTimeout: 4000, // 超时时间 // 认证信息 clientId: code, //不填默认随机生成一个ID username: 'admin', //用户名 password: 'public' //密码 } this.client = mqtt.connect('wss://mps.xlmalls.com:8084/mqtt', options) //调用连接的api //连接成功 this.client.on('connect', e => { console.log('连接成功', e) this.subscribes() }) //重连提醒 this.client.on('reconnect', error => { console.log('正在重连', error) }) //连接失败提醒 this.client.on('error', error => { console.log('连接失败', error) }) //接收消息 this.client.on('message', (topic, message) => { const data = JSON.parse(message) //接受到控制信号的数据 console.log('接收消息', data) if (data.cmd == 'HEARTBEAT') { if (data.deviceStatus == 'ABNORMAL' && this.DYZshow) { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } // 判断异常语音 if (data.abnormalReason !== undefined) { this.cite.serveError = true } else { this.cite.serveError = false } } else if (data.cmd == 'ORDER_INFO') { //小程序支付 this.DYZshow = true this.play() this.zfShow = false this.DYZlist = data.printTaskPushList this.DYZlist2 = data.printTaskPushList this.DYZlistNum = this.DYZlist.length // 提示语音 // this.cite.url = data.payCodeUrl // if(this.cite.selectedFile.length<1) { // this.src = data.payCodeUrl // this.zfShow=true // } // 3秒查询订单状态 this.ddcx(data.code) // 订单状态，进度查询 this.ddycztcx(data.code) } else if (data.cmd == 'LOGIN') { //登录 } else if (data.cmd == 'LOGOUT') { //登出 } else if (data.cmd == 'PRINT') { //打印任务 // this.DYZshow = true // this.zfShow = false // this.DYZlist.push(data) // this.DYZlistNum = this.DYZlist.length } else if (data.cmd == 'PRINT_STATUS') { //打印任务完成 console.log(this.DYZlist) if (data.taskStatus == 'COMPLETE') { if (this.DYZlist.length > 1) { this.DYZlist.forEach((item, index) => { if (item.code == data.taskCode) { this.DYZlist.splice(index, 1) } }) } else { if (this.DYZshow) { this.DYZshow = false this.DYZlist = [] this.DYZlistNum = 1 this.Progress = {} this.$router.push({ name: 'complete' }) getDeviceByCode({ code: this.code }).then(res => { this.cite.facility = res }).catch(error => {alert(error,this)}) } } } else if (data.taskStatus == 'INTERRUPT') { if (!this.cite.ztyc) { this.numZt = 120 this.onNum() } this.cite.ztyc = true } } else if (data.cmd == 'PRINT_PROGRESS' && !this.cite.ztyc) { console.log(data) this.Progress = data if (data.rate == '99%') { setTimeout(() => { if (this.Progress.rate == '99%') { this.Progress.rate = '100%' } }, 1500) } } }) }, //订阅多个主题 subscribes() { const arr = ['/tzdy/send/device/' + this.code] this.client.subscribe(arr, { qos: 2 }, err => { if (!err) { // console.log(`消息订阅成功`) } else { // console.log('消息订阅失败') } }) }, //获取设备信息 getDeviceByCode() { if (this.code) { getDeviceByCode({ code: this.code }).then(res => { console.log(res) this.cite.facility = res this.getAdvertisement() }).catch(error => {alert(error,this)}) } }, // 获取广告链接 getAdvertisement() { let name = 'DeviceScreen' if (this.cite.name == 'advertising') { name = 'AdvertisingScreen' } getAdvertisement({ deviceId: this.cite.facility.id, screen: name }).then(res => { // console.log(res) this.cite.advertisement = res || '' }).catch(error => {alert(error,this)}) }, play() { console.log(this.$refs.audio) // if (addr !== '') { // console.log('12') // let music = new Audio() // music = addr // this.$refs.audio.src = music // } this.$refs.audio.play() } } } </script> <style scoped lang="less"> .dyzTip { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 99; .curtain { background: #000; width: 100%; height: 100%; opacity: 0.3; } .content { position: absolute; left: 50%; margin-left: -19rem; top: 50%; margin-top: -14.5rem; width: 38.56rem; height: 29rem; background: #ffffff; border-radius: 1.25rem; overflow: hidden; img { width: 100%; } div { font-size: 1.38rem; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #323232; line-height: 1.88rem; margin-top: 1.3rem; } .name { font-size: 1rem; font-family: PingFang SC, PingFang SC; font-weight: 400; color: #323232; line-height: 1.38rem; text-align: left; padding: 0 3rem; } .btn { width: 18rem; height: 3rem; margin: 1rem auto; color: #fff; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1rem; } .JDT { width: 80%; margin: 1rem auto 0; height: 1rem; border-radius: 1rem; position: relative; border: 1px solid #323232; span { position: absolute; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); top: 0; left: 0; bottom: 0; } } } .content2 { background: transparent; height: auto; img { width: 18rem; } .icon { width: 3rem; margin-top: 3rem; } } } .tkTip { position: fixed; top: 5%; width: 100%; z-index: 99; div { background: rgba(51, 51, 51, 0.5); color: #fff; padding: 1rem 2rem; border-radius: 1rem; } } .loadingDH { position: absolute; top: 30%; width: 100%; .load { position: relative; margin: 3.125rem auto; width: 6.25rem; height: 5rem; .gear { position: absolute; z-index: -10; width: 2.5rem; height: 2.5rem; -webkit-animation: spin 5s infinite; animation: spin 5s infinite; } .second { left: 2.5rem; width: 5rem; height: 5rem; -webkit-animation: spin-reverse 5s infinite; animation: spin-reverse 5s infinite; } .third { top: 2.8125rem; left: -0.625rem; width: 3.75rem; height: 3.75rem; } @-webkit-keyframes spin { 50% { transform: rotate(360deg); } } @keyframes spin { 50% { transform: rotate(360deg); } } @-webkit-keyframes spin-reverse { 50% { transform: rotate(-360deg); } } @keyframes spin-reverse { 50% { transform: rotate(-360deg); } } .lil-circle { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0.625rem 0.125rem gray, 0 0 3.125rem white; width: 6.25rem; height: 6.25rem; opacity: 0.65; } .blur-circle { position: absolute; top: -1.1875rem; left: -1.1875rem; } } .text { color: lightgray; font-size: 1.125rem; font-family: 'Open Sans', sans-serif; text-align: center; padding-top: 3rem; } } </style>
Ignore Space
Show notes
View
src/views/complete.vue
<template> <!--打印完成--> <div class="complete"> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-margin-right': isVertical }]"> <img src="../assets/complete.png" alt="" /> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请从出纸口取走您的文件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt="" /> <span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Thank4UseWelComeback.mp3" /> </audio> </div> </template> <script> export default { name: 'complete', data() { return { num: 0, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if (n == -1) { return } else if (n < 10) { this.num = n + 1 setTimeout(() => { this.load() }, 1000) } else { // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, play() { this.$refs.audio.play() } } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .vertical-box { height: 90rem !important; width: 90%; justify-content: space-around; flex-direction: column; } .vertical-margin-right { margin-right: 0 !important; } </style>
<template> <!--打印完成--> <div class="complete"> <div :class="['box', 'flex-center', { 'vertical-box': isVertical }]"> <div :class="['left', { 'vertical-margin-right': isVertical }]"> <img src="../assets/complete.png" alt="" /> <div>打印完成</div> <div>感谢您使用天章自助打印服务</div> </div> <div class="right"> <div class="title flex-center">温馨提示</div> <div class="content">请您立刻时，从出纸口取走您的打印件，并带齐您的资料和所有随身物品。</div> <div class="tip" v-show="false"> <div>本次打印您将获得：</div> <div class="flex-center"> <img src="../assets/points.png" alt="" /> <span>28积分</span> </div> </div> <div class="btn flex-center" @click="skip('device')">回到首页</div> </div> </div> <audio ref="audio" class="aud"> <source src="../assets/audio/Thank4UseWelComeback.mp3" /> </audio> </div> </template> <script> export default { name: 'complete', data() { return { num: 0, isVertical: false } }, created() { this.isVertical = this.cite.isVertical }, mounted() { this.play() this.num = 0 this.load() }, destroyed() { // 销毁监听 // clearTimeout() this.num = -1 }, methods: { skip(href) { this.cite.fileNum = 0 this.$router.push({ name: href }) }, load() { let n = this.num if (n == -1) { return } else if (n < 10) { this.num = n + 1 setTimeout(() => { this.load() }, 1000) } else { // this.quit() // console.log('我触发的？complete',n) this.cite.fileNum = 0 this.$router.push({ name: 'device' }) } }, play() { this.$refs.audio.play() } } } </script> <style scoped lang="less"> .box { width: 114.06rem; height: 49.25rem; background: #ffffff; box-shadow: 0rem 0.31rem 0.63rem 0.06rem rgba(0, 0, 0, 0.14); border-radius: 1.63rem; margin: 3.75rem auto 0; font-size: 1.88rem; font-weight: bold; color: #323232; line-height: 2rem; .left { margin-right: 14.94rem; img { width: 26.88rem; margin-bottom: 5.06rem; } } .right { width: 42.13rem; text-align: left; .title { font-size: 2.88rem; font-weight: bold; color: #d41212; line-height: 4.06rem; } .content { font-size: 2.25rem; font-weight: bold; color: #323232; line-height: 3rem; margin: 2.94rem auto 6.25rem; } .tip { img { width: 7.38rem; margin-right: 1.13rem; } span { font-size: 2.13rem; font-weight: bold; color: #323232; line-height: 3rem; } } } .btn { width: 100%; height: 5.5rem; background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%); border-radius: 1.25rem; font-size: 1.88rem; font-weight: 400; color: #ffffff; line-height: 2.63rem; cursor: pointer; } } .vertical-box { height: 90rem !important; width: 90%; justify-content: space-around; flex-direction: column; } .vertical-margin-right { margin-right: 0 !important; } </style>
Show line notes below
GitBucket
4.23.0
GitBucket
4.23.0