627 lines
26 KiB
Vue
627 lines
26 KiB
Vue
<template>
|
||
<el-container class="dashboard">
|
||
<el-header class="header">
|
||
<div style="font-weight: bold; font-family:'myfont';font-size:32px">10车间生产数据看板</div>
|
||
<div style="font-size: 14px;margin-top:18px">{{currentDay}} {{ currentTime }}</div>
|
||
</el-header>
|
||
<el-main>
|
||
<el-row style="height: 60%" :gutter="10">
|
||
<el-col :xs="24" :md="10" style="height: 100%;">
|
||
<el-row style="height: 38%;" :gutter="10">
|
||
<el-col :xs="8" :md="8">
|
||
<div class="box">
|
||
<div class="boxtitle bgimg">
|
||
<div class="boxlabel">今日任务</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<div class="boxmain flex_center bigdata border">
|
||
<span>ZB2</span>
|
||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :md="8">
|
||
<div class="box">
|
||
<div class="boxtitle bgimg">
|
||
<div class="boxlabel">昨日合格</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<div class="boxmain flex_center bigdata border">
|
||
<span>ZJ2</span>
|
||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="8" :md="8">
|
||
<div class="box">
|
||
<div class="boxtitle bgimg">
|
||
<div class="boxlabel">累计合格</div>
|
||
</div>
|
||
<div style="height: 4px;"></div>
|
||
<div class="boxmain flex_center bigdata border">
|
||
<span>ZT2</span>
|
||
<span style="color: #fef000;margin-left: 10px;font-weight:bold;font-family:electronicFont">130</span>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="height:2%"></div>
|
||
<el-row style="height:60%">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">人员到岗
|
||
</div>
|
||
</div>
|
||
<div style="height: 2px;"></div>
|
||
<div class="boxmain" id="scrollContainer1">
|
||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight1"
|
||
:rowData="listData1test" :titleData="liData1" :refValue="refValue1"
|
||
></scScrollTavle>
|
||
</div>
|
||
</div>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :xs="24" :md="14" style="height: 100%;">
|
||
<div class="box" :dur="20">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">任务进度</div>
|
||
</div>
|
||
<div style="height: 2px;"></div>
|
||
<div class="boxmain" id="scrollContainer2">
|
||
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight2"
|
||
:rowData="listData2test" :titleData="liData2" :refValue="refValue2"></scScrollTavle>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<div style="height: 1%"></div>
|
||
<el-row style="height:39%" :gutter="10">
|
||
<el-col :xs="24" :md="9">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">全年生产统计</div>
|
||
</div>
|
||
<div class="boxmain" id="chart1">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :md="9">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div class="boxlabel">本月合格率统计</div>
|
||
</div>
|
||
<div class="boxmain" id="chart2">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="24" :md="6">
|
||
<div class="box">
|
||
<div class="boxtitle">
|
||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||
</div>
|
||
<div class="boxmain" id="chart3">
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
import scScrollTavle from '@/components/scScrollTable.vue';
|
||
function deepCopy(obj) {
|
||
return JSON.parse(JSON.stringify(obj));
|
||
}
|
||
export default {
|
||
components: {scScrollTavle},
|
||
data() {
|
||
return {
|
||
basicOption: {
|
||
backgroundColor: '',
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
label: {
|
||
backgroundColor: '#6a7985'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
icon: "stack",
|
||
right: 0,
|
||
data: [{
|
||
backgroundColor: 'rgb(1,235,239)',
|
||
name: '棒',
|
||
itemStyle: {
|
||
// color:'rgb(1,235,239)',
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}])
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}, {
|
||
name: '管',
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}],
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
}
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
// saveAsImage: {}
|
||
}
|
||
},
|
||
grid: {
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
nameTextStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
name: "合格率(%)",
|
||
type: 'value',
|
||
nameTextStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: 'dashed', //y轴分割线类型
|
||
color: 'rgba(102,102,102,0.9)',
|
||
width: 1,
|
||
},
|
||
},
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '棒',
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color:'#ffffff',
|
||
fontSize:8
|
||
},
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}])
|
||
},
|
||
data: [140, 232, 101, 264, 90, 340, 250, 232, 101, 264, 90, 340]
|
||
},
|
||
{
|
||
name: '管',
|
||
type: 'bar',
|
||
stack: 'Ad',
|
||
barWidth: 30,
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'insideTop',
|
||
color:'#000'
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [5, 5, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
},
|
||
data: [120, 282, 111, 234, 220, 340, 310, 282, 111, 234, 220, 340]
|
||
},
|
||
]
|
||
},
|
||
containerHeight1:100,
|
||
containerHeight2:100,
|
||
table1Visible:false,
|
||
table2Visible:false,
|
||
refValue1:'moocBox1',
|
||
refValue2:'moocBox2',
|
||
liData1: ['姓名', '岗位', '班次', '状态'],
|
||
listData1test: [
|
||
[{elType:'primary',value:"王丽丽"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"张小飞"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"李青"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"白梦遥"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"于诗曼"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"马亮德"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"赵蒙斯"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"钱广源"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"到岗"}],
|
||
[{elType:'primary',value:"孙蕾"},{elType:'primary',value:"成型人"},{elType:'primary',value:"白班"},{elType:'tag',value:"未到岗"}],
|
||
],
|
||
liData2: ['序号','产品名称', '型号', '计划开始时间', '计划结束时间','完成进度', '产量','状态'],
|
||
listData2test: [
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:90},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:100},{elType:'primary',value:368},{elType:'tag',value:30}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
[{elType:'primary',value:"光纤预制管"},{elType:'primary',value:"ZJ2"},{elType:'primary',value:"2023-11-10"},{elType:'primary',value:"2023-11-10"}, {elType:'progress',value:80},{elType:'primary',value:368},{elType:'tag',value:40}],
|
||
],
|
||
speed: 2000,
|
||
myScroll: null,
|
||
iliHeight: 30,
|
||
time: null,
|
||
delay: 20,
|
||
start_date:'',
|
||
end_date:'',
|
||
|
||
dayInterval:null,
|
||
chartInterval1: null,
|
||
chartInterval2: null,
|
||
chartInterval3: null,
|
||
stateOption:{
|
||
30:'生产中',
|
||
40:'已完成'
|
||
},
|
||
currentTime:'',
|
||
currentDay:'',
|
||
|
||
}
|
||
},
|
||
mounted() {
|
||
//表格table1的显示
|
||
this.containerHeight1 = document.getElementById('scrollContainer1').clientHeight;
|
||
this.table1Visible = true;
|
||
//表格table2的显示
|
||
this.containerHeight2 = document.getElementById('scrollContainer2').clientHeight;
|
||
this.table2Visible = true;
|
||
|
||
let chart1Option = deepCopy(this.basicOption)
|
||
let chart1 = this.setChart("chart1", chart1Option);
|
||
|
||
let index1 = 0
|
||
this.chartInterval1 = setInterval(function () {
|
||
if (index1 < chart1Option.series[0].data.length) {
|
||
chart1.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||
chart1.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index1 });
|
||
chart1.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index1 });
|
||
index1++;
|
||
} else {
|
||
index1 = 0;
|
||
}
|
||
}, 3000);
|
||
let chart2Option = deepCopy(this.basicOption);
|
||
chart2Option.xAxis = {
|
||
type: 'category',
|
||
boundaryGap: true,
|
||
data: ['1日','2日', '3日', '4日', '5日', '6日', '7日', '8日','9日','10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日','19日','20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日'],
|
||
nameTextStyle: {
|
||
color: '#ffffff'
|
||
},
|
||
axisLabel: {
|
||
color: '#ffffff'
|
||
},
|
||
};
|
||
chart2Option.legend = {
|
||
icon: "stack",
|
||
right: 0,
|
||
data: [{
|
||
backgroundColor: 'rgb(250,205,0)',
|
||
name: '合格率',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}
|
||
])
|
||
},
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}],
|
||
};
|
||
chart2Option.series=[{
|
||
name: '合格率',
|
||
type: 'line',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 1, color: 'rgb(1,235,239)'
|
||
},
|
||
showSymbol: false,
|
||
areaStyle: {
|
||
opacity: 0.8,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(1,235,239)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(5, 158, 163)'
|
||
}
|
||
])
|
||
},
|
||
emphasis: {
|
||
focus: 'series'
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: 'top',
|
||
color:'#fff'
|
||
},
|
||
itemStyle: {
|
||
borderRadius: [2, 2, 0, 0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgb(250,205,0)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgb(254,129,0)'
|
||
}
|
||
])
|
||
},
|
||
data: [40, 60, 52, 64, 70, 53, 50,40, 32, 62, 64, 90, 50, 50,56, 49, 66, 64, 70, 58, 50,40, 59, 60, 64, 90, 40, 50, 70, 50]
|
||
}];
|
||
let chart2 = this.setChart("chart2", chart2Option);
|
||
let index2 = 0
|
||
this.chartInterval2 = setInterval(function () {
|
||
if (index2 < chart2Option.series[0].data.length) {
|
||
chart2.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||
chart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index2 });
|
||
chart2.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index2 });
|
||
index2++;
|
||
} else {
|
||
index2 = 0;
|
||
}
|
||
}, 3000);
|
||
|
||
let chart3Option ={
|
||
backgroundColor: '',
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top:'bottom',
|
||
},
|
||
series: [
|
||
{
|
||
name: '完成率',
|
||
type: 'pie',
|
||
radius: '50%',
|
||
itemStyle: {
|
||
borderRadius: 2
|
||
},
|
||
center: ['50%', '45%'],
|
||
data: [
|
||
{ value: 1, name: '椭圆弯曲' },
|
||
{ value: 3, name: '大小头' },
|
||
{ value: 0, name: '偏壁' },
|
||
{ value: 5, name: '结石气线' },
|
||
{ value: 200, name: '合格' },
|
||
],
|
||
emphasis: {
|
||
itemStyle: {
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
let chart3 = this.setChart("chart3", chart3Option);
|
||
let index3 = 0
|
||
this.chartInterval3 = setInterval(function () {
|
||
if (index3 < chart3Option.series[0].data.length) {
|
||
chart3.dispatchAction({ type: 'downplay', seriesIndex: 0 });
|
||
chart3.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: index3 });
|
||
chart3.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index3 });
|
||
index3++;
|
||
} else {
|
||
index3 = 0;
|
||
}
|
||
}, 3000);
|
||
this.showTime()
|
||
this.dayInterval = setInterval(()=>{
|
||
this.showTime()
|
||
},1000)
|
||
},
|
||
methods: {
|
||
showTime(){
|
||
this.currentTime = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||
this.currentDay = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
},
|
||
setChart(name, option = null) {
|
||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||
if (myChart == undefined) {
|
||
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||
}
|
||
if (option == null) {
|
||
option = Object.assign({}, this.basicOption)
|
||
}
|
||
|
||
setTimeout(() => {
|
||
try {
|
||
myChart.setOption(option);
|
||
} catch (error) { }
|
||
}, 500)
|
||
return myChart
|
||
},
|
||
//任务进度
|
||
getMtask(){
|
||
let that = this;
|
||
let obj ={};
|
||
that.$API.pm.mtask.list.req(obj).then((res) => {
|
||
console.log('任务进度:',res);
|
||
debugger;
|
||
});
|
||
},
|
||
//生产线
|
||
getProductLine(){
|
||
let that = this;
|
||
let obj ={
|
||
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
|
||
};
|
||
//车间生产按月统计 1月1号-----12月1号
|
||
that.$API.bi.dataset.exec.req('lineMonth', obj).then((res1) => {
|
||
console.log('车间生产按月统计:',res1);
|
||
debugger;
|
||
});
|
||
let obj2 ={
|
||
query: {start_date:that.start_date,end_date:that.end_date,dept_name: "10车间"},
|
||
};
|
||
//生产车间按日统计 本月合格率统计&昨日合格统计 ///11月1号-----11月30号
|
||
that.$API.bi.dataset.exec.req('lineDay', obj2).then((res3) => {
|
||
console.log('生产车间按日统计:',res3);
|
||
debugger;
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
@font-face {
|
||
font-family: 'myfont'; /* 字体名称 */
|
||
src: url('../../style/youShe.ttf'); /* 字体文件相对路径 */
|
||
}
|
||
.dashboard {
|
||
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
|
||
color: #fff;
|
||
font-family: "Microsoft Yahei" !important;
|
||
}
|
||
.header {
|
||
background: url("/public/img/photon_header.png");
|
||
border-bottom: none;
|
||
background-size: 100% 100%;
|
||
font-size: 26px;
|
||
display: block;
|
||
height: 80px;
|
||
color: rgb(149, 255, 255);
|
||
font-family: 'Microsoft Yahei';
|
||
text-align: center;
|
||
padding: 12px 0px;
|
||
}
|
||
.box {
|
||
background: rgba(10, 63, 68, 0.5);
|
||
height: 100%;
|
||
}
|
||
.boxtitle {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
display: flex;
|
||
height: 36px;
|
||
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335), rgba(11, 101, 140, 0.451));
|
||
}
|
||
.bgimg {
|
||
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
||
background-size: 140% 100%;
|
||
}
|
||
.boxlabel {
|
||
margin-left: 6px;
|
||
font-size: 18px;
|
||
margin-top: 6px
|
||
}
|
||
|
||
.boxmain {
|
||
height: calc(100% - 40px);
|
||
}
|
||
|
||
@media screen and (max-width: 800px) {
|
||
.boxmain {
|
||
height: 200px;
|
||
}
|
||
}
|
||
.flex_center {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center
|
||
}
|
||
.border {
|
||
border: 1px dashed #49bcf7;
|
||
}
|
||
|
||
.bigdata {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.title{
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
}
|
||
.marquee_top{
|
||
transition: all 0.5s ease-in-out;
|
||
margin-top: -26px;
|
||
}
|
||
.totall{
|
||
color: #fff;
|
||
background-color: rgb(10, 63, 68);
|
||
}
|
||
.rollData{
|
||
background-color: rgb(10, 39, 50);
|
||
}
|
||
.rollData:nth-of-type(2n+1){
|
||
background-color: rgb(0, 59, 81);
|
||
}
|
||
</style> |