<template>
<div>
<!-- 打印中提示-->
<div v-if="DYZshow && DYZlist" class="dyzTip">
<div class="curtain"></div>
<div class="content">
<img alt="" src="../assets/printing.png"/>
<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 v-if="djsM.total<1" class="JDT"><span :style="'width:' + Progress.rate"></span></div>
<div v-else class="JDT"><span :style="'width:' + djsM.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 v-if="state.sta" class="tkTip flex-center">
<div v-if="state.name">{{ state.name }}</div>
<div v-if="state.name2" style="width: 50%;margin-top: 3%;">{{ state.name2 }}</div>
</div>
<!-- 敏感词提示-->
<div v-if="mgcData.show" class="dyzTip flex-center">
<div class="curtain"></div>
<div class="content" style="margin-top: 0;top: 20%;height: auto;">
<div class="name flex-center" style="font-size: 1.5rem;line-height: 2rem;">{{ mgcData.re }}</div>
<div class="btn flex-center" style="margin: 2rem auto;" @click="onCloneZt()">我已知晓({{ numZt }}秒)</div>
</div>
</div>
<!-- 小程序支付-->
<div v-if="zfShow" class="dyzTip">
<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 alt="" class="icon" src="../assets/demo10.png" @click="onChange('zfShow', false)"/>
</p>
</div>
</div>
<!-- 页面加载中-->
<div v-if="citeL.loadingSta.sta" class="dyzTip">
<div class="curtain"></div>
<div class="loadingDH">
<!-- 绘制齿轮 -->
<div class="load">
<div class="gear first">
<svg id="purple" fill="#afb4db" viewbox="0 0 100 100">
<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" fill="#FFB5C5" viewbox="0 0 100 100">
<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" fill="#fedcbd" viewbox="0 0 100 100">
<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" fill="transparent" filter="url(#blur)" r="66" stroke="white"
stroke-width="40"></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 {bdGetPrintOrderPush, 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: {
rate: '0%'
},
djsM: {
num: 0,
total: 0,
rate: '0%'
},
numZt: 120,
ztyc: false,
citeL: {
loadingSta: {
sta: false,
name: 'Loading'
}
},
mgcData: {
show: false,
re: '尊敬的用户您好，打印系统智慧引擎检测到要打印的文件中可能包含一些敏感信息或内容，打印请求即将转入快速审核通道。稍后请您留意手机小程序-个人中心-打印记记录的订单详情，系统审核通过即分配取件码。凭借取件码，可以稍后在任意一台打印服务终端上通过'
}
}
},
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 = []
this.mgcData = {
show: false,
re: ''
}
} 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 = '20240326-066184'
// this.cite.code = 'TZLC001'
// this.code = this.cite.code
// this.load()
// this.cite.loadingSta = {
// sta: false
// }
// this.DYZshow = true
// this.addTime()
// 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)
}
},
// 加时间进度条
addTime() {
setTimeout(() => {
if (this.djsM.total > this.djsM.num) {
this.djsM.num = this.djsM.num + 1
this.djsM.rate = (this.djsM.num / this.djsM.total) * 100 + '%'
this.addTime()
}
}, 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 => {
this.subscribes()
if (e.cmd !== 'connack') {
console.log('连接成功', e)
}
})
//重连提醒
this.client.on('reconnect', error => {
console.log('正在重连')
if (error) {
console.log('正在重连', error)
}
})
//连接失败提醒
this.client.on('error', error => {
console.log('连接失败')
if (error) {
console.log('连接失败', error)
}
setTimeout(() => {
console.log('尝试重新连接')
this.client.connect();
}, 5000); // 5秒后尝试重新连接
})
//接收消息
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) {
// this.cite.serveError = true
this.cite.serveError = false
} else {
this.cite.serveError = false
}
} else if (data.cmd == 'ORDER_INFO' || data.cmd == 'START_ORDER') {
//小程序支付
if (this.DYZshow) {
return
}
this.DYZshow = true
this.play()
this.zfShow = false
this.DYZlist = data.printTaskPushList
this.DYZlist2 = data.printTaskPushList
this.DYZlistNum = this.DYZlist.length
let timeN = 0
data.printTaskPushList.forEach(item => {
if (item.time) {
timeN = timeN + parseFloat(item.time)
}
})
this.djsM = {
num: 0,
total: timeN,
rate: '0%'
}
console.log('进度条', this.djsM)
if (timeN > 0) {
this.addTime()
}
// 提示语音
// 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 == 'RECOGNITION') {
//敏感词，内容 需审核
// console.log('触发提示mgc')
this.mgcData = {
show: true,
re: data.audit
}
this.numZt = 30
this.onNum()
} 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)
// 判断弹框是否显示
if (!this.DYZshow) {
this.orderPush()
}
this.Progress = data
if (data.rate == '99%') {
setTimeout(() => {
if (this.Progress.rate == '99%') {
this.Progress.rate = '100%'
}
}, 1500)
}
}
})
},
orderPush() {
bdGetPrintOrderPush().then(data => {
console.log('bdGetPrintOrderPush', data)
if (data.code) {
this.DYZshow = true
this.play()
this.zfShow = false
this.DYZlist = data.printTaskPushList
this.DYZlist2 = data.printTaskPushList
this.DYZlistNum = this.DYZlist.length
// 提示语音
// 3秒查询订单状态
this.ddcx(data.code)
// 订单状态，进度查询
this.ddycztcx(data.code)
}
})
},
//订阅多个主题
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 lang="less" scoped>
.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;
overflow: hidden;
span {
position: absolute;
background: linear-gradient(132deg, #52a39d 0%, #a1c553 50%, #81d012 100%);
top: 0;
left: 0;
bottom: 0;
transition: 1s ease-in-out;
}
}
}
.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>
