tao.zhang/tianyi_DataV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增进待检颜色

Browse Source
This commit is contained in:
刘佳
2024-07-30 17:07:10 +08:00
parent 93d4deaa76
commit efbc6807a0
9 changed files with 611 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+3 -1
View File
@@ -46,7 +46,9 @@
"parser": "babel-eslint"
},
"rules": {
"no-unused-vars": "off"
"no-unused-vars": "off",
"no-debugger": "off",
"no-console": "off"
}
},
"browserslist": [
src/api/index.js
+1
View File
@@ -34,3 +34,4 @@ export function getEqpList() {
method: 'post',
})
}
src/assets/scss/tianyi.scss
+20
View File
@@ -13,3 +13,23 @@
.typeFo {
background-image: linear-gradient(red, darken(red, 20%));
}
.type0 {
background-image: linear-gradient(#849384, darken(#849384, 20%));
}
.type1 {
background-image: linear-gradient(#6acbf0, darken(#6acbf0, 20%));
}
.type2 {
background-image: linear-gradient(#35ff39, darken(#35ff39, 20%));
}
.type3 {
background-image: linear-gradient(#d3ff33, darken(#d3ff33, 20%));
}
.type4 {
background-image: linear-gradient(#ff7db7, darken(#ff7db7, 20%));
}
.type5 {
background-image: linear-gradient(red, darken(red, 20%));
}
src/utils/request.js
+1 -1
View File
@@ -2,7 +2,7 @@ import axios from 'axios'
const server = axios.create({
baseURL: "http://192.168.11.109", //配置请求的url
// baseURL: "http://tnb.tuotong-tech.com", //配置请求的url
timeout: 6000, //配置超时时间
timeout: 30000, //配置超时时间
headers:{}//配置请求头
})
// axios的拦截器
src/views/cpcView/index.vue
+156 -15
View File
@@ -1,20 +1,11 @@
<template>
<div class="box">
<div v-for="(item, index) of data" :key="index" class="box-x">
<!-- <div class="index">{{ index + 1 }}</div> -->
<!-- <div v-for="(it, ind) of item" :key="ind" class="item"
:class="it.type == 1 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 1">载具:LX001</div>
<div v-if="it.type == 1">物料:包装袋</div>
<div v-if="it.type == 1">数量:10</div>
</div>
</div> -->
<div v-for="(items, indexs) of data" :key="indexs">
<div class="title">{{ region[indexs] }}</div>
<div v-for="(item, index) of items" :key="index" class="box-x">
<div class="index">{{ index + 1 }}</div>
<div>
<div class="item-top">
<!-- <div class="item-x" v-if="item.type == 0"> </div> -->
<div v-for="(it, ind) of item" :key="ind" class="item-x"
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }">
@@ -29,6 +20,8 @@
</div>
</div>
</div>
</div>
</template>
<script>
@@ -38,8 +31,8 @@ export default {
name: 'yclView',
data() {
return {
data: []
data: [],
region: ['A', 'B', 'C']
}
},
created() {
@@ -61,8 +54,147 @@ export default {
getCpcList().then(res => {
console.log(res);
this.data = res.data.data || []
// console.log(this.data, 999);
let arr1 = []
let arr2 = []
// let arr3 = []
this.data.forEach(item => {
if (item[0].location_code.indexOf("A") !== -1) {
arr1.push(item)
}
if (item[0].location_code.indexOf("B") !== -1) {
arr2.push(item)
}
})
arr1 = this.formatFn(arr1, 'A')
arr2 = this.formatFn(arr2, 'B')
// arr3 = this.formatFn(arr3)
// this.data = [arr1, arr2, arr3]
this.data = [arr1, arr2]
console.log(this.data, 999);
}).finally(e => { loading.close(); })
},
formatFn(arr1, fig) {
let arr3 = []
arr1.forEach(item => {
item.forEach(it => {
if (!arr3.length) return arr3.push([it])
let fig = arr3.findIndex(value => value[0].location_code.slice(-2) == it.location_code.slice(-2))
if (fig < 0) {
arr3.push([it])
} else {
arr3[fig].push(it)
}
})
})
if (fig == 'A') {
const arrone = [4, 7, 11, 15, 19, 23, 27]
const arrtwo = [4, 5, 13, 19, 20]
arr3.forEach((item, index) => {
if (arrtwo.some(it => { return it == index + 1 })) {
arrone.forEach(it => {
item.splice(it, 0, { type: 4, location_code: '' })
})
}
if (17 == index + 1 || 18 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
}
if (21 == index + 1) {
item.splice(7, 0, { type: 4, location_code: '' })
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(19, 0, { type: 4, location_code: '' })
item.splice(23, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (22 == index + 1) {
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(19, 0, { type: 4, location_code: '' })
item.splice(23, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (27 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
item.splice(7, 0, { type: 4, location_code: '' })
}
if (28 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
item.splice(7, 0, { type: 4, location_code: '' })
item.splice(11, 0, { type: 4, location_code: '' })
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(19, 0, { type: 4, location_code: '' })
item.splice(23, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (index + 1 > 33) {
item.splice(0, 0, { type: 4, location_code: '' })
if (34 == index + 1) {
item.splice(7, 0, { type: 4, location_code: '' })
item.splice(11, 0, { type: 4, location_code: '' })
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (35 == index + 1) {
item.splice(7, 0, { type: 4, location_code: '' })
item.splice(11, 0, { type: 4, location_code: '' })
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(19, 0, { type: 4, location_code: '' })
item.splice(23, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (36 == index + 1 || 37 == index + 1) {
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (43 == index + 1) {
item.splice(7, 0, { type: 4, location_code: '' })
item.splice(11, 0, { type: 4, location_code: '' })
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(19, 0, { type: 4, location_code: '' })
item.splice(23, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
}
})
} else if (fig == 'B') {
arr3.sort((a, b) => a[0].location_code.slice(-2) - b[0].location_code.slice(-2))
const arrone = [5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const arrtwo = [6, 14, 21, 29, 30, 36, 44, 45]
const arrth = [4, 7, 11, 15, 19, 23, 27]
arr3.forEach((item, index) => {
if (arrone.some(it => { return it == index + 1 })) {
for (let i = 1; i < 5; i++) {
item.splice(0, 0, { type: 4, location_code: '' })
}
}
if (arrtwo.some(it => { return it == index + 1 })) {
arrth.forEach(it => {
item.splice(it, 0, { type: 4, location_code: '' })
})
if (index + 1 == 6 || index + 1 == 14) { item.splice(4, 1) }
}
if (4 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
}
if (12 == index + 1 || 13 == index + 1) {
item.splice(15, 0, { type: 4, location_code: '' })
}
if (15 == index + 1) {
item.splice(15, 0, { type: 4, location_code: '' })
item.splice(26, 0, { type: 4, location_code: '' })
}
if (27 == index + 1 || 28 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
item.splice(27, 0, { type: 4, location_code: '' })
}
if (37 == index + 1) {
item.splice(15, 0, { type: 4, location_code: '' })
}
if (46 == index + 1) {
item.splice(4, 0, { type: 4, location_code: '' })
}
})
}
return arr3
}
}
}
@@ -76,9 +208,17 @@ export default {
height: 860px;
margin: 30px;
overflow-y: scroll;
.title {
text-align: center;
font-size: 30px;
margin: 15px;
}
.box-x {
display: flex;
margin-bottom: 30px;
.index {
display: flex;
align-items: center;
@@ -86,6 +226,7 @@ export default {
width: 10px;
}
}
.item-x {
width: 50px;
height: 60px;
src/views/index.vue
+4
View File
@@ -57,6 +57,10 @@
<span class="react-after"></span>
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
</div>
<!-- <div class="react-right mr-4 react-l-s">
<span class="react-after"></span>
<span class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
</div> -->
</div>
</div>
src/views/yclView/index copy.vue
+241
View File
@@ -0,0 +1,241 @@
<template>
<div class="box">
<div v-for="(item, index) of data" :key="index" class="box-x">
<div class="index">{{ ab[index] }}</div>
<div>
<div class="item-top">
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
@mouseleave="mouseleave(it, $event)">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
<div v-if="it.type == 2">物料:{{ it.material_code }}</div>
<div v-if="it.type == 2">数量:{{ it.num }}</div>
</div>
</div>
</div>
<div class="item-bo">
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
@mouseleave="mouseleave(it, $event)">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
<div v-if="it.type == 2">物料:{{ it.material_code }}</div>
<div v-if="it.type == 2">数量:{{ it.num }}</div>
</div>
</div>
</div>
</div>
</div>
<div class="float" ref="float">
<div>库位编号：{{ this.mouseInfo.location_code }}</div>
<div>物料编码：{{ this.mouseInfo.material_code }}</div>
<div>数量：{{ this.mouseInfo.qty }}</div>
</div>
</div>
</template>
<script>
import { getYclList } from '@/api/index'
export default {
name: 'yclView',
data() {
return {
data: [],
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'],
mouseInfo: {}
}
},
created() {
this.getYclList()
},
mounted() {
},
beforeDestroy() {
},
methods: {
filterData(arr, key) {
return arr.filter(item => { return item.layers == key })
},
getYclList() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
getYclList().then(res => {
console.log(res);
this.data = res.data.data || []
this.data.forEach((item, index) => {
const arr = [1]
const arrone = [3, 7, 10, 13, 14, 17]
// const obj = { type: 1, location_code: '', layer: '1' }
if (arrone.some(it => { return it == index + 1 })) {
for (let i = 1; i < 3; i++) {
item.splice(8, 0, { type: 4, location_code: '', layers: i })
}
for (let i = 1; i < 3; i++) {
item.splice(24, 0, { type: 4, location_code: '', layers: i })
}
if (index + 1 !== 17) {
for (let i = 1; i < 3; i++) {
item.splice(50, 0, { type: 4, location_code: '', layers: i })
}
} else {
for (let i = 1; i < 3; i++) {
item.splice(57, 0, { type: 4, location_code: '', layers: i })
}
}
}
if (arr.some(it => { return it !== index + 1 })) {
let fig = false
if (index + 1 == 18) {
for (let i = 1; i < 3; i++) {
item.splice(37, 0, { type: 4, location_code: '', layers: i })
}
fig = true
}
for (let i = 1; i < 3; i++) {
if (fig) break
item.splice(36, 0, { type: 4, location_code: '', layers: i })
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
}
}
})
console.log(this.data, 99);
}).finally(e => { loading.close(); })
},
mouseenter(it, e) {
this.$refs.float.style.display = "block"
this.$refs.float.style.left = e.clientX / document.body.clientWidth * 100 + "%"
this.$refs.float.style.top = e.clientY / document.body.clientHeight * 100 + "%"
this.mouseInfo = it
console.log(it);
},
mouseleave(it, e) {
this.$refs.float.style.display = "none"
}
}
}
</script>
<style lang="scss" scoped>
$sysColor: rgba(85, 110, 255, 0.9);
@import '@/assets/scss/tianyi.scss';
.box {
width: 100%;
height: 860px;
margin: 30px;
overflow-y: scroll;
// margin-bottom: 20px;
.box-x {
display: flex;
margin-bottom: 40px;
.index {
display: flex;
align-items: center;
margin-right: 30px;
width: 10px;
}
}
.item-x {
width: 48px;
height: 60px;
margin-right: 5px;
// margin-bottom: 5px;
color: rgba(0, 0, 0, .5);
display: inline-grid;
position: relative;
border-radius: 8%;
// div {
// text-align: center;
// line-height: 18px;
// // display: inline-grid;
// }
.lists {
// text-align: center;
line-height: 10px;
width: 100%;
font-size: 7px;
// height: 100%;
// display: flex;
// justify-content: center;
// flex-direction: column;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
div {
text-align: center;
}
}
}
.item-top {
border-bottom: 2px solid $sysColor;
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
// padding-bottom: 5px;
padding-left: 5px;
// margin-bottom: 5px;
// div {
// position: relative;
// }
// div:nth-child(18):before {
// width: 45px;
// height: 125px;
// content: "";
// border: solid 2px rgba(85, 110, 255, 0.9);
// padding: 2px;
// margin: 0 10px 0 0;
// position: absolute;
// top: 110%;
// left: 160%;
// transform: translate(-50%, -50%);
// }
}
.item-bo {
border-left: 2px solid $sysColor;
border-right: 2px solid $sysColor;
padding-top: 5px;
padding-left: 5px;
}
.float {
width: 200px;
// height: 240px;
background-color: antiquewhite;
position: fixed;
top: 0;
left: 0;
// background-color: rgb(44, 43, 43);
background: -webkit-linear-gradient(top, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)66%, rgba(0,0,0,0)99%);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
}
}
</style>
src/views/yclView/index.vue
+171 -34
View File
@@ -1,58 +1,81 @@
<template>
<div class="box">
<div class="loadbox" v-if="loadboxV">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div v-for="(item, index) of data" :key="index" class="box-x">
<div class="index">{{ ab[index] }}</div>
<div>
<div class="item-top">
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x "
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }">
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x "
:class="`type${it.status}`"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
@mouseleave="mouseleave(it, $event)">
<div class="lists">
<div>{{ it.location_code }}</div>
<!-- <div>载具:LX001</div>
<div>物料:包装袋</div>
<div>数量:10</div> -->
<div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
<div v-if="it.type == 2">物料:{{ it.material_code }}</div>
<!-- <div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div> -->
<div v-if="it.type == 2">{{ it.material_code }}</div>
<div v-if="it.type == 2">{{ it.material_name }}</div>
<div v-if="it.type == 2">数量:{{ it.num }}</div>
</div>
</div>
</div>
<div class="item-bo">
<div v-for="(it, ind) of filterData(item, '2')" :key="ind" class="item-x"
:class="it.type == 2 ? 'typeOne' : it.type == 0 ? 'typeTwo' : 'typeTh'"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }">
<div v-for="(it, ind) of filterData(item, '1')" :key="ind" class="item-x"
:class="`type${it.status}`"
:style="{ 'opacity': it.type == 4 ? '0' : '1' }" @mouseenter.stop="mouseenter(it, $event)"
@mouseleave="mouseleave(it, $event)">
<div class="lists">
<div>{{ it.location_code }}</div>
<div v-if="it.type == 2 || it.type == 1">载具:{{ it.carry_code }}</div>
<div v-if="it.type == 2">物料:{{ it.material_code }}</div>
<div v-if="it.type == 2">{{ it.material_code }}</div>
<div v-if="it.type == 2">{{ it.material_name }}</div>
<div v-if="it.type == 2">{{ it.code_batch }}</div>
<div v-if="it.type == 2">数量:{{ it.num }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="float" ref="float">
<div>库位编号：{{ this.mouseInfo.location_code }}</div>
<div>物料编码：{{ this.mouseInfo.material_code }}</div>
<div>物料批次：{{ this.mouseInfo.code_batch }}</div>
<div>数量：{{ this.mouseInfo.qty }}</div>
<div>载具编号：{{ this.mouseInfo.carry_code }}</div>
</div> -->
</div>
</template>
<script>
// 0 空库（包括已锁定）
// 1 空载具码垛
// 2 合格品
// 3 待检
// 4 让步接受
// 5 不合格
import { getYclList } from '@/api/index'
export default {
name: 'yclView',
data() {
return {
data: [],
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T']
ab: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'],
mouseInfo: {},
loadboxV: false
}
},
created() {
this.getYclList()
this.timer = setInterval(this.getYclListLoad, 30000);
},
mounted() {
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
filterData(arr, key) {
@@ -80,27 +103,30 @@ export default {
for (let i = 1; i < 3; i++) {
item.splice(24, 0, { type: 4, location_code: '', layers: i })
}
if (index + 1 !== 17) {
// if (index + 1 !== 17) {
// for (let i = 1; i < 3; i++) {
// item.splice(50, 0, { type: 4, location_code: '', layers: i })
// }
// } else {
// for (let i = 1; i < 3; i++) {
// item.splice(50, 0, { type: 4, location_code: '', layers: i })
// }
// }
for (let i = 1; i < 3; i++) {
item.splice(50, 0, { type: 4, location_code: '', layers: i })
}
} else {
for (let i = 1; i < 3; i++) {
item.splice(57, 0, { type: 4, location_code: '', layers: i })
}
}
}
if (arr.some(it => { return it !== index + 1 })) {
let fig = false
if (index + 1 == 18) {
// let fig = false
// if (index + 1 == 18) {
// for (let i = 1; i < 3; i++) {
// item.splice(37, 0, { type: 4, location_code: '', layers: i })
// }
// fig = true
// }
for (let i = 1; i < 3; i++) {
item.splice(37, 0, { type: 4, location_code: '', layers: i })
}
fig = true
}
for (let i = 1; i < 3; i++) {
if (fig) break
// if (fig) break
item.splice(36, 0, { type: 4, location_code: '', layers: i })
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
// item.splice(36, 0, { type: 4, location_code: '', layers: i })
@@ -109,6 +135,46 @@ export default {
})
console.log(this.data, 99);
}).finally(e => { loading.close(); })
},
mouseenter(it, e) {
// this.$refs.float.style.display = "block"
// this.$refs.float.style.left = e.clientX / document.body.clientWidth * 100 + "%"
// this.$refs.float.style.top = e.clientY / document.body.clientHeight * 100 + "%"
// this.mouseInfo = it
// console.log(it);
},
mouseleave(it, e) {
// this.$refs.float.style.display = "none"
},
// 定时器重复加载
getYclListLoad() {
this.loadboxV = true
getYclList().then(res => {
console.log(res);
this.data = res.data.data || []
this.data.forEach((item, index) => {
const arr = [1]
const arrone = [3, 7, 10, 13, 14, 17]
if (arrone.some(it => { return it == index + 1 })) {
for (let i = 1; i < 3; i++) {
item.splice(8, 0, { type: 4, location_code: '', layers: i })
}
for (let i = 1; i < 3; i++) {
item.splice(24, 0, { type: 4, location_code: '', layers: i })
}
for (let i = 1; i < 3; i++) {
item.splice(50, 0, { type: 4, location_code: '', layers: i })
}
}
if (arr.some(it => { return it !== index + 1 })) {
for (let i = 1; i < 3; i++) {
item.splice(36, 0, { type: 4, location_code: '', layers: i })
}
}
})
console.log(this.data, 99);
}).finally(e => { this.loadboxV = false })
}
}
}
@@ -140,11 +206,11 @@ $sysColor: rgba(85, 110, 255, 0.9);
}
.item-x {
width: 48px;
height: 60px;
width: 51px;
height: 70px;
margin-right: 5px;
// margin-bottom: 5px;
color: rgba(0, 0, 0, .5);
color: rgba(0, 0, 0);
display: inline-grid;
position: relative;
border-radius: 8%;
@@ -158,7 +224,7 @@ $sysColor: rgba(85, 110, 255, 0.9);
// text-align: center;
line-height: 10px;
width: 100%;
font-size: 7px;
font-size: 8px;
// height: 100%;
// display: flex;
// justify-content: center;
@@ -208,7 +274,78 @@ $sysColor: rgba(85, 110, 255, 0.9);
padding-left: 5px;
}
.float {
width: 220px;
// height: 240px;
background-color: antiquewhite;
position: fixed;
top: 0;
left: 0;
// background-color: rgb(44, 43, 43);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1)0%, rgba(0, 0, 0, 0.5)66%, rgba(0, 0, 0, 0)99%);
color: #fff;
// text-align: center;
border-radius: 6px;
padding: 10px;
}
// 加载动画
.loadbox {
position: relative;
width: 90px;
height: 50px;
// margin: 50px auto;
position: fixed;
top: 40px;
right: 20px;
}
.loadbox span {
position: absolute;
width: 20px;
height: 20px;
background: #3498db;
opacity: 0.5;
border-radius: 100%;
animation: anim 1s infinite ease-in-out;
}
.loadbox> :nth-child(2) {
left: 20px;
animation-delay: 0.2s;
}
.loadbox> :nth-child(3) {
left: 40px;
animation-delay: 0.4s;
}
.loadbox> :nth-child(4) {
left: 60px;
animation-delay: 0.6s;
}
.loadbox> :nth-child(5) {
left: 80px;
animation-delay: 0.8s;
}
@keyframes anim {
0% {
opacity: 0.3;
transform: translateY(0px);
}
50% {
opacity: 1;
transform: translateY(-10px);
background: #64dbe3;
}
100% {
opacity: 0.3;
transform: translateY(0px);
}
}
}
</style>