initinit
This commit is contained in:
775
src/pages/TaskScreen.vue
Normal file
775
src/pages/TaskScreen.vue
Normal file
@@ -0,0 +1,775 @@
|
||||
<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 () {
|
||||
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]
|
||||
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>
|
||||
Reference in New Issue
Block a user