776 lines
21 KiB
Vue
776 lines
21 KiB
Vue
<template>
|
||
<section>
|
||
<t-header title="混合料厂配粉任务看板"></t-header>
|
||
<div class="goods_shelves">
|
||
<div class="yard-wrap">
|
||
<div class="content_left">
|
||
<div class="content_l_item_1">
|
||
<div class="item_1">
|
||
<div class="item_inner_l">
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">工令号</p>
|
||
<p class="item_txt_2">{{obj1.workorder_code}}</p>
|
||
</div>
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">批次</p>
|
||
<p class="item_txt_2">{{obj1.pcsn}}</p>
|
||
</div>
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">重量</p>
|
||
<p class="item_txt_2">{{obj1.masterbucket_qty}} KG</p>
|
||
</div>
|
||
</div>
|
||
<div class="item_inner_l">
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">产品</p>
|
||
<p class="item_txt_2">{{obj1.material_code}}</p>
|
||
</div>
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">配粉槽</p>
|
||
<p class="item_txt_2">{{obj1.storagevehicle_code}}</p>
|
||
</div>
|
||
<div class="item_txt">
|
||
<p class="item_txt_1">已配粉</p>
|
||
<p class="item_txt_2">{{obj1.put_qty}} KG</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_2">
|
||
<div id="echart_d1" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="content_l_item_2">
|
||
<div class="tip_item">
|
||
<p>任务列表</p>
|
||
<div class="tip_item_bg1"></div>
|
||
<div class="tip_item_bg2"></div>
|
||
</div>
|
||
<div class="item_3">
|
||
<ul class="scroll_tab_1">
|
||
<li>序号</li>
|
||
<li>产品</li>
|
||
<li>批次</li>
|
||
<li>重量</li>
|
||
<li>已配粉</li>
|
||
<li>单位</li>
|
||
<li>开始时间</li>
|
||
<li>结束时间</li>
|
||
</ul>
|
||
<div class="scroll_container_1">
|
||
<vue-seamless-scroll :data="array2" :class-option="defaultOption1">
|
||
<ul class="content-block-scroll-ul_1">
|
||
<li v-for="(e, i) in array2" :key="i" :class="['fcgreen', 'fcred', 'fcwhite'][Number(e.color_flag) - 1]">
|
||
<div>{{i + 1}}</div>
|
||
<div>{{e.material_code}}</div>
|
||
<div>{{e.pcsn}}</div>
|
||
<div>{{e.workorder_qty}}</div>
|
||
<div>{{e.product_qty}}</div>
|
||
<div>{{e.unit_name}}</div>
|
||
<div>{{e.start_time}}</div>
|
||
<div>{{e.end_time}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_right">
|
||
<div class="content_r_item_1" :class="{'content_r_item_1_a': obj2.flag === '1'}">
|
||
<div class="item_4">
|
||
<span class="span1">当前物料</span>
|
||
<span>{{obj2.seq_no}}</span>
|
||
<span>{{obj2.material_code}}</span>
|
||
<span>{{obj2.material_name}}</span>
|
||
<span>{{obj2.total_qty}}KG</span>
|
||
</div>
|
||
<div class="item_4 item_5">
|
||
<span class="span1">已配/剩余</span>
|
||
<span class="span2">
|
||
<div class="progress-bar">
|
||
<div class="progress-bar__outer">
|
||
<div class="progress-bar__inner progress-bar__inner_l" :style="'width: ' + Number(obj2.put_qty) * 100 /(Number(obj2.put_qty) + Number(obj2.need_qty)) + '%'">
|
||
<div class="progress-bar__innerText">{{obj2.put_qty}}</div>
|
||
</div>
|
||
<div class="progress-bar__inner progress-bar__inner_r" :style="'width: ' + Number(obj2.need_qty) * 100 /(Number(obj2.put_qty) + Number(obj2.need_qty)) + '%'">
|
||
<div class="progress-bar__innerText">{{obj2.need_qty}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<div class="item_4">
|
||
<span class="span1">当前桶</span>
|
||
<span>{{obj2.bucketunique}}</span>
|
||
<span>{{obj2.bucket_material_code}}</span>
|
||
<span>{{obj2.pcsn}}</span>
|
||
<span>{{obj2.storage_qty}}KG</span>
|
||
</div>
|
||
<div class="item_4 item_7">
|
||
<span class="span1">需出重量</span>
|
||
<span>{{obj2.needout_qty}}KG</span>
|
||
<span class="span1">称重重量</span>
|
||
<span>{{obj2.putfit_qty}}KG</span>
|
||
<span>
|
||
<div v-if="obj2.flag === '0'" class="circle">
|
||
<div class="small-circle bggreen"></div>
|
||
<div class="big-circle bggreen"></div>
|
||
</div>
|
||
<div v-if="obj2.flag === '1'" class="circle">
|
||
<div class="small-circle bgred"></div>
|
||
<div class="big-circle bgred"></div>
|
||
</div>
|
||
</span>
|
||
</div>
|
||
<div v-if="obj2.flag === '1'" class="item_4 item_8">
|
||
<span>{{obj2.msg}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="content_r_item_2" :class="{'content_r_item_2_a': obj2.flag === '1'}">
|
||
<div class="item_6">
|
||
<ul class="scroll_tab_2">
|
||
<li>序号</li>
|
||
<li>货位</li>
|
||
<li>托盘号</li>
|
||
<li>桶号</li>
|
||
<li>重量</li>
|
||
<li>单位</li>
|
||
<li>批次</li>
|
||
</ul>
|
||
<div class="scroll_container_2">
|
||
<vue-seamless-scroll :data="array3" :class-option="defaultOption2">
|
||
<ul class="content-block-scroll-ul_2">
|
||
<li v-for="(e, i) in array3" :key="i">
|
||
<div>{{i + 1}}</div>
|
||
<div>{{e.struct_code}}</div>
|
||
<div>{{e.storagevehicle_code}}</div>
|
||
<div>{{e.bucketunique}}</div>
|
||
<div>{{e.storage_qty}}</div>
|
||
<div>{{e.qty_unit_name}}</div>
|
||
<div>{{e.pcsn}}</div>
|
||
</li>
|
||
</ul>
|
||
</vue-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import THeader from '@components/header.vue'
|
||
import {queryInfo1, queryInfo2, queryInfo3, queryInfo4} from '@js/getData2.js'
|
||
export default {
|
||
name: 'TaskScreen',
|
||
components: {
|
||
THeader
|
||
},
|
||
data () {
|
||
return {
|
||
interTime: this.$store.getters.setTime,
|
||
timer: null,
|
||
obj1: {},
|
||
array1: [],
|
||
array2: [],
|
||
obj2: {},
|
||
array3: [],
|
||
timeOut: null,
|
||
myCharts: ''
|
||
}
|
||
},
|
||
computed: {
|
||
defaultOption1 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
},
|
||
defaultOption2 () {
|
||
return {
|
||
step: 0.4, // 数值越大速度滚动越快
|
||
limitMoveNum: 11, // 开始无缝滚动的数据量 this.dataList.length
|
||
hoverStop: true, // 是否开启鼠标悬停stop
|
||
direction: 1, // 0向下 1向上 2向左 3向右
|
||
openWatch: true, // 开启数据实时监控刷新dom
|
||
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
||
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
||
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
this._queryInfo1()
|
||
this._queryInfo2()
|
||
this._queryInfo3()
|
||
this._queryInfo4()
|
||
this.refresh()
|
||
},
|
||
beforeDestroy () {
|
||
window.clearInterval(this.timer)
|
||
},
|
||
methods: {
|
||
refresh () {
|
||
this.timer = setInterval(() => {
|
||
this._queryInfo1()
|
||
this._queryInfo2()
|
||
this._queryInfo3()
|
||
this._queryInfo4()
|
||
}, this.interTime)
|
||
},
|
||
async _queryInfo1 () {
|
||
let id = ''
|
||
if (this.$store.getters.equipId) {
|
||
id = this.$store.getters.equipId
|
||
}
|
||
let res = await queryInfo1(id)
|
||
if (res.code === '1') {
|
||
this.obj1 = res.content
|
||
this.array1 = [...res.rows]
|
||
window.clearInterval(this.timeOut)
|
||
this.setEchart1()
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
async _queryInfo2 () {
|
||
let id = ''
|
||
if (this.$store.getters.equipId) {
|
||
id = this.$store.getters.equipId
|
||
}
|
||
let res = await queryInfo2(id)
|
||
if (res.code === '1') {
|
||
this.array2 = [...res.rows]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
async _queryInfo3 () {
|
||
let id = ''
|
||
if (this.$store.getters.equipId) {
|
||
id = this.$store.getters.equipId
|
||
}
|
||
let res = await queryInfo3(id)
|
||
if (res.code === '1') {
|
||
this.obj2 = res.content
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
async _queryInfo4 () {
|
||
let id = ''
|
||
if (this.$store.getters.equipId) {
|
||
id = this.$store.getters.equipId
|
||
}
|
||
let res = await queryInfo4(id)
|
||
if (res.code === '1') {
|
||
this.array3 = [...res.rows]
|
||
} else {
|
||
this.Dialog(res.desc)
|
||
}
|
||
},
|
||
setEchart1 () {
|
||
let rate = []
|
||
this.array1.map(el => {
|
||
rate.push(el.rate)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 60,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
borderColor: '#ffffff',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
top: 0,
|
||
right: 0,
|
||
textStyle: {
|
||
color: '#ffffff',
|
||
fontSize: 16,
|
||
lineHeight: 20
|
||
},
|
||
itemGap: 20,
|
||
itemHeight: 8,
|
||
data: ['已出重量', '总重量']
|
||
},
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 5 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: '#586473'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: this.array1.map((it) => it.material_name)
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: '#586473'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '已出重量',
|
||
type: 'bar',
|
||
// stack: '数量',
|
||
barWidth: '30',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#09bcb7'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#8bd46e'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: this.array1.map((it) => Number(it.put_qty)),
|
||
label: {
|
||
show: false,
|
||
// formatter: (params) => {
|
||
// if (Number(rate[params.dataIndex]) !== 0) {
|
||
// return rate[params.dataIndex] + '%'
|
||
// } else {
|
||
// return ''
|
||
// }
|
||
// },
|
||
position: 'top',
|
||
distance: 0,
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
},
|
||
{
|
||
name: '总重量',
|
||
type: 'bar',
|
||
// stack: '数量',
|
||
barWidth: '30',
|
||
barGap: '-100%',
|
||
zlevel: -1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: '#fccb05'
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#f5804d'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: this.array1.map((it) => Number(it.total_qty).toFixed(4)),
|
||
label: {
|
||
show: true,
|
||
formatter: (params) => {
|
||
var index = params.dataIndex
|
||
var str = '' + params.value + '\n\n' + '占比: ' + rate[index] + '%'
|
||
return str
|
||
},
|
||
position: 'top',
|
||
offset: 0,
|
||
fontSize: 16,
|
||
color: '#fff'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_d1')
|
||
this.myCharts = this.$echarts.init(echart)
|
||
this.myCharts.setOption(option)
|
||
this.autoMove(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts.resize()
|
||
})
|
||
},
|
||
autoMove (option) {
|
||
this.timeOut = setInterval(() => {
|
||
if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
|
||
option.dataZoom[0].endValue = 5
|
||
option.dataZoom[0].startValue = 0
|
||
} else {
|
||
option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
|
||
option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
|
||
}
|
||
this.myCharts.setOption(option)
|
||
}, 2000)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.goods_shelves
|
||
_wh(100%, calc(100% - .75rem))
|
||
padding .1rem
|
||
.yard-wrap
|
||
_wh(100%, 100%)
|
||
clear both
|
||
.content_left
|
||
float left
|
||
_wh(51%, 100%)
|
||
overflow hidden
|
||
.content_right
|
||
float right
|
||
_wh(48%, 100%)
|
||
border .03rem solid #68efef
|
||
padding 0 .2rem
|
||
overflow hidden
|
||
.content_l_item_1
|
||
_wh(100%, 47%)
|
||
padding .2rem
|
||
_bis('../assets/images/bg1.png', 100%, 100%)
|
||
.content_l_item_2
|
||
_wh(100%, 50%)
|
||
margin-top 3%
|
||
padding .2rem
|
||
_bis('../assets/images/bg1.png', 100%, 100%)
|
||
.content_r_item_1
|
||
_wh(100%, 2.15rem)
|
||
padding .2rem
|
||
margin-top .2rem
|
||
_bis('../assets/images/bg2.png', 100%, 100%)
|
||
.content_r_item_1_a
|
||
height 2.75rem
|
||
.item_1
|
||
_wh(100%, 1.2rem)
|
||
clear both
|
||
overflow hidden
|
||
.item_inner_l
|
||
float left
|
||
width 50%
|
||
.item_txt
|
||
width 100%
|
||
_fj(flex-start)
|
||
.item_txt_1
|
||
width 1rem
|
||
_font(.2rem, .40rem, #fff)
|
||
.item_txt_2
|
||
_font(.28rem, .40rem, $yellow)
|
||
padding-left .1rem
|
||
.item_2
|
||
_wh(100%, calc(100% - 1.2rem))
|
||
.tip_item
|
||
position relative
|
||
height .4rem
|
||
// _bis('../assets/images/tip.png', 1.5rem, .08rem, left, bottom)
|
||
p
|
||
_font(.2rem, .4rem, #fff)
|
||
.tip_item_bg1
|
||
position absolute
|
||
bottom -.04rem
|
||
left 0
|
||
_wh(.08rem, .08rem)
|
||
background-color #53cdf9
|
||
transform rotate(45deg)
|
||
.tip_item_bg2
|
||
position absolute
|
||
bottom -.015rem
|
||
left .03rem
|
||
_wh(.78rem, .03rem)
|
||
background-color #53cdf9
|
||
.item_3
|
||
_wh(100%, calc(100% - .4rem))
|
||
padding-top .2rem
|
||
.scroll_tab_1
|
||
li
|
||
float left
|
||
width 10%
|
||
_font(.18rem,.4rem,#3da1ff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
background-color #041e43
|
||
box-sizing border-box
|
||
&:nth-child(1)
|
||
width 5%
|
||
&:nth-child(2)
|
||
width 17%
|
||
&:nth-child(3)
|
||
width 10%
|
||
&:nth-child(7), &:nth-child(8)
|
||
width 19%
|
||
.content-block-scroll-ul_1
|
||
li
|
||
_wh(100%, .4rem)
|
||
&:nth-child(even)
|
||
background-color #041e43
|
||
// &:nth-child(1) div, &:nth-child(2) div
|
||
// color $green
|
||
// &:nth-child(3) div
|
||
// color $red
|
||
.content-block-scroll-ul_1
|
||
li
|
||
div
|
||
float left
|
||
_wh(10%, inherit)
|
||
_fj(center)
|
||
font-size .17rem
|
||
line-height .2rem
|
||
text-align center
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
&:nth-child(1)
|
||
width 5%
|
||
&:nth-child(2)
|
||
width 17%
|
||
&:nth-child(3)
|
||
width 10%
|
||
&:nth-child(7)
|
||
width 19%
|
||
&:nth-child(8)
|
||
width 19%
|
||
.content-block-scroll-ul_1 .fcgreen div
|
||
color $green
|
||
.content-block-scroll-ul_1 .fcred div
|
||
color $red
|
||
.content-block-scroll-ul_1 .fcwhite div
|
||
color #fff
|
||
.scroll_tab_2
|
||
_wh(100%, .4rem)
|
||
background-color #0e3758
|
||
li
|
||
float left
|
||
width 10%
|
||
_font(.18rem,.4rem,#76c0ff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(1)
|
||
width 6%
|
||
&:nth-child(3)
|
||
width 10%
|
||
&:nth-child(4)
|
||
width 25%
|
||
&:nth-child(5)
|
||
width 17%
|
||
&:nth-child(6)
|
||
width 12%
|
||
&:nth-child(7)
|
||
width 20%
|
||
.scroll_container_1
|
||
width 100%
|
||
height calc(100% - .3rem)
|
||
overflow hidden
|
||
.scroll_container_2
|
||
width 100%
|
||
height calc(100% - .4rem)
|
||
overflow hidden
|
||
.content-block-scroll-ul_2
|
||
li
|
||
div
|
||
float left
|
||
width 10%
|
||
_font(.18rem,.5rem,#76c0ff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
border-right .01rem solid #0e3758
|
||
border-bottom .01rem solid #0e3758
|
||
&:last-child
|
||
border-right none
|
||
&:nth-child(1)
|
||
width 6%
|
||
&:nth-child(3)
|
||
width 10%
|
||
&:nth-child(4)
|
||
width 25%
|
||
&:nth-child(5)
|
||
width 17%
|
||
&:nth-child(6)
|
||
width 12%
|
||
&:nth-child(7)
|
||
width 20%
|
||
.item_4
|
||
_wh(100%, .4rem)
|
||
_fj()
|
||
span
|
||
display block
|
||
_wh(20%, .4rem)
|
||
padding 0 .05rem
|
||
_font(.22rem, .4rem, $orange,,right)
|
||
overflow hidden
|
||
&:nth-child(1)
|
||
width 10%
|
||
&:nth-child(3)
|
||
width 30%
|
||
text-align left
|
||
&:nth-child(5)
|
||
width 19%
|
||
&:nth-child(2)
|
||
width 28%
|
||
text-align left
|
||
&:nth-child(4)
|
||
width 13%
|
||
.span1
|
||
_font(.16rem, .4rem, #fff,,)
|
||
.item_5
|
||
margin .05rem 0
|
||
span
|
||
&:nth-child(2)
|
||
width 90%
|
||
.span2
|
||
_wh(79%, .4rem)
|
||
vertical-align top
|
||
.progress-bar
|
||
_wh(100%, 100%)
|
||
.progress-bar__outer
|
||
height 100%
|
||
border-radius 100px
|
||
background-color #ebeef5
|
||
overflow hidden
|
||
position relative
|
||
vertical-align middle
|
||
.progress-bar__inner
|
||
position absolute
|
||
top 0
|
||
width 0
|
||
height 100%
|
||
text-align center
|
||
line-height 1
|
||
white-space nowrap
|
||
transition width .6s ease
|
||
.progress-bar__inner_l
|
||
left 0
|
||
background-color $green
|
||
border-top-left-radius 100px
|
||
border-bottom-left-radius 100px
|
||
transition all .3s linear
|
||
.progress-bar__inner_r
|
||
right 0
|
||
background-color $yellow
|
||
border-top-right-radius 100px
|
||
border-bottom-right-radius 100px
|
||
.progress-bar__innerText
|
||
display inline-block
|
||
vertical-align middle
|
||
_font(.24rem, .4rem, #000)
|
||
margin 0 .05rem
|
||
.content_r_item_2
|
||
_wh(100%, calc(100% - 2.75rem))
|
||
margin .2rem 0
|
||
.content_r_item_2_a
|
||
height calc(100% - 2.15rem)
|
||
.item_6
|
||
_wh(100%, 100%)
|
||
padding .1rem
|
||
border .01rem solid #114880
|
||
.item_7
|
||
margin-top .05rem
|
||
span
|
||
&:nth-child(2), &:nth-child(4)
|
||
width 30%
|
||
color $green
|
||
text-align left
|
||
&:nth-child(3)
|
||
width 10%
|
||
&:last-child
|
||
width 15%
|
||
overflow visible
|
||
.item_8
|
||
margin-top .2rem
|
||
span
|
||
&:nth-child(1)
|
||
color $red
|
||
width 100%
|
||
text-align center
|
||
.circle
|
||
position relative
|
||
float right
|
||
_wh(.4rem, .4rem)
|
||
.small-circle
|
||
border-radius 50%
|
||
_wh(.2rem, .2rem)
|
||
position absolute
|
||
left 50%
|
||
top 50%
|
||
transform translate3d(-50%, -50%, 0)
|
||
z-index 100
|
||
.big-circle
|
||
position absolute
|
||
_wh(100%, 100%)
|
||
border-radius 50%
|
||
animation twinkling 1s infinite ease-in-out
|
||
animation-fill-mode both
|
||
z-index 99
|
||
@keyframes twinkling {
|
||
0% {
|
||
opacity 0.2
|
||
transform scale(1)
|
||
}
|
||
50% {
|
||
opacity 0.5
|
||
transform scale(1.12)
|
||
}
|
||
100% {
|
||
opacity 0.2
|
||
transform scale(1)
|
||
}
|
||
}
|
||
.bggreen
|
||
background-color $green
|
||
.bgred
|
||
background-color $red
|
||
</style>
|