|
|
|
|
@ -1,28 +1,28 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="app-container">
|
|
|
|
|
<div class="headTitle">京源生产监控平台</div>
|
|
|
|
|
<div class="time">{{
|
|
|
|
|
<!-- <div class="time">{{
|
|
|
|
|
time
|
|
|
|
|
}}
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<div v-for="(i, k) in title"
|
|
|
|
|
:style="'top:' + (titlePosition[k] && titlePosition[k].top || 0) + '%;left:' + (titlePosition[k] && titlePosition[k].left || 0) + '%'"
|
|
|
|
|
class="title"
|
|
|
|
|
>
|
|
|
|
|
class="title">
|
|
|
|
|
{{ i }}
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart1">
|
|
|
|
|
<Chart key="chart1" ref="chart1"></Chart>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart2">
|
|
|
|
|
<div v-for="(i,k) in 10" class="item">
|
|
|
|
|
<div style="top: 25%;left:5%" class="block">人员{{ k }}</div>
|
|
|
|
|
<div style="top: 50%;left:5%" class="block">工序：切割</div>
|
|
|
|
|
<div style="top: 75%;left:5%" class="block">产品计划数量：10000</div>
|
|
|
|
|
<div style="text-align: right;top: 25%;right:5%" class="block">8888</div>
|
|
|
|
|
<div style="text-align: right;top: 50%;right:5%" class="block">88%</div>
|
|
|
|
|
<div v-for="(i, k) in scrollTableData" class="item">
|
|
|
|
|
<div style="top: 25%;left:5%" class="block">人员：{{ i.userName }}</div>
|
|
|
|
|
<div style="top: 50%;left:5%" class="block">工序：{{i.processName}}</div>
|
|
|
|
|
<div style="top: 75%;left:5%" class="block">产品计划数量：{{i.planAmount}}</div>
|
|
|
|
|
<div style="text-align: right;top: 25%;right:5%" class="block">{{i.completeAmount}}</div>
|
|
|
|
|
<div style="text-align: right;top: 50%;right:5%" class="block">{{i.processPercentage}}</div>
|
|
|
|
|
<div style="text-align: right;top: 75%;right:5%;width: 50%;height: 0.8vw" class="block">
|
|
|
|
|
<el-progress :format="()=>{return ''}" :percentage="88"></el-progress>
|
|
|
|
|
<el-progress :format="() => { return '' }" :percentage="parseFloat(i.processPercentage)"></el-progress>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -31,18 +31,21 @@
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart4_1">
|
|
|
|
|
<!-- <Chart key="chart4_1" ref="chart4_1"></Chart>-->
|
|
|
|
|
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">10%<br>良率</div>
|
|
|
|
|
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.passRate)" :format="(e) => ` `"
|
|
|
|
|
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">{{ data1.passRate }}<br>良率</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart4_2">
|
|
|
|
|
<!-- <Chart key="chart4_2" ref="chart4_2"></Chart>-->
|
|
|
|
|
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">10%<br>不良率</div>
|
|
|
|
|
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.failureRate)" :format="(e) => ` `"
|
|
|
|
|
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">{{ data1.failureRate }}<br>不良率</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart4_3">
|
|
|
|
|
<!-- <Chart key="chart4_3" ref="chart4_3"></Chart>-->
|
|
|
|
|
<el-progress :width="12*vw" type="circle" :percentage="55" :format="(e)=>` `" :stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">10%<br>物料利用率</div>
|
|
|
|
|
<el-progress :width="12 * vw" type="circle" :percentage="parseFloat(data1.availableRate)" :format="(e) => ` `"
|
|
|
|
|
:stroke-width="vw" style="margin-top: 50%;margin-left: 50%;transform: translate(-50%,-50%)"></el-progress>
|
|
|
|
|
<div class="span">{{ data1.availableRate }}<br>物料利用率</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="chart5">
|
|
|
|
|
<Chart key="chart5" ref="chart5"></Chart>
|
|
|
|
|
@ -55,12 +58,9 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
|
|
import Chart from '@/components/board/Chart'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import {
|
|
|
|
|
deviceTimeCount,
|
|
|
|
|
dustAnalysis,
|
|
|
|
|
getDayProduction,
|
|
|
|
|
getHourProduction, getLineStatus, selectLatestWorkOrder,
|
|
|
|
|
workOrderProgress
|
|
|
|
|
} from '@/api/board/secondFloorProduction'
|
|
|
|
|
energyFourthFloorData, getLatestProductOrderWithPlans, getQualityAndAvailablePercentage
|
|
|
|
|
|
|
|
|
|
} from '@/api/board/fourthFloorProduction'
|
|
|
|
|
import { parseTime } from '@/utils/ruoyi'
|
|
|
|
|
|
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
|
|
@ -93,15 +93,15 @@ export default {
|
|
|
|
|
],
|
|
|
|
|
titlePosition: [
|
|
|
|
|
{
|
|
|
|
|
top: 11.3,
|
|
|
|
|
top: 11.8,
|
|
|
|
|
left: 5.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.3,
|
|
|
|
|
left: 75
|
|
|
|
|
top: 11.8,
|
|
|
|
|
left: 68.4
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 70.3,
|
|
|
|
|
top: 60,
|
|
|
|
|
left: 5.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -113,11 +113,11 @@ export default {
|
|
|
|
|
left: 75
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.3,
|
|
|
|
|
top: 11.8,
|
|
|
|
|
left: 30.5
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
top: 11.3,
|
|
|
|
|
top: 11.8,
|
|
|
|
|
left: 45
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -139,7 +139,14 @@ export default {
|
|
|
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
|
|
waitTime: 0
|
|
|
|
|
},
|
|
|
|
|
scrollTableData: []
|
|
|
|
|
|
|
|
|
|
scrollTableData: [],
|
|
|
|
|
data1: {
|
|
|
|
|
"passRate": "99.7%",
|
|
|
|
|
"failureRate": "0.3%",
|
|
|
|
|
"availableRate": "98.6%"
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
@ -156,152 +163,9 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getData() {
|
|
|
|
|
workOrderProgress().then(e => {
|
|
|
|
|
this.scrollTableData = e.data.map((v, k) => {
|
|
|
|
|
return {
|
|
|
|
|
no: k + 1,
|
|
|
|
|
orderCode: v.orderCode,
|
|
|
|
|
planAmount: v.planAmount,
|
|
|
|
|
completeAmount: v.completeAmount,
|
|
|
|
|
quantityAmount: parseFloat(v.planAmount) - parseFloat(v.completeAmount),
|
|
|
|
|
finishingRate: parseFloat(v.completeAmount) === 0 ? 0 : (parseFloat(v.completeAmount) / parseFloat(v.completeAmount)) * 100
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
tooltip: {},
|
|
|
|
|
radar: {
|
|
|
|
|
indicator: [
|
|
|
|
|
{ name: '打磨', max: 6500 },
|
|
|
|
|
{ name: '折弯', max: 16000 },
|
|
|
|
|
{ name: '组装', max: 30000 },
|
|
|
|
|
{ name: '下料', max: 38000 },
|
|
|
|
|
{ name: '机加', max: 52000 },
|
|
|
|
|
{ name: '1', max: 25000 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '时间',
|
|
|
|
|
type: 'radar',
|
|
|
|
|
// areaStyle: {normal: {}},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: [4300, 10000, 28000, 35000, 50000, 19000],
|
|
|
|
|
name: '时间'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
top: '10%',
|
|
|
|
|
left: '10%',
|
|
|
|
|
right: '10%',
|
|
|
|
|
bottom: '10%'
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
color: '#ffffff63'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff3',
|
|
|
|
|
width: 2
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [1,2,3]
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
color: '#ffffff63'
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: '40px',
|
|
|
|
|
barWidth: '40%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
1,
|
|
|
|
|
0,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#0a2ad7'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#138dd7'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
false
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
data:[11,22,3]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
barWidth: '40%',
|
|
|
|
|
barMaxWidth: '40px',
|
|
|
|
|
symbolSize: [5, '100%'],
|
|
|
|
|
symbolPosition: 'end',
|
|
|
|
|
symbolOffset: [3, 0],
|
|
|
|
|
barGap: '-100%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#138dd7'
|
|
|
|
|
},
|
|
|
|
|
data:[11,22,3]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
energyFourthFloorData().then(e=>{
|
|
|
|
|
this.$refs.chart5.setData({
|
|
|
|
|
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
|
|
|
|
// color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
|
|
|
|
|
grid: {
|
|
|
|
|
left: -100,
|
|
|
|
|
top: 50,
|
|
|
|
|
@ -409,34 +273,154 @@ export default {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data: e.rows.map(v=>{
|
|
|
|
|
return {
|
|
|
|
|
value: v.meterValue,
|
|
|
|
|
name: v.monitorName,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
getLatestProductOrderWithPlans().then(e=>{
|
|
|
|
|
this.scrollTableData = e.data.mesProductPlanList
|
|
|
|
|
this.$refs.chart1.setData({
|
|
|
|
|
tooltip: {},
|
|
|
|
|
radar: {
|
|
|
|
|
indicator: e.data.baseProcessInfoList.map(e => {
|
|
|
|
|
return {
|
|
|
|
|
name: e.processName,
|
|
|
|
|
max: 100
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '时间',
|
|
|
|
|
type: 'radar',
|
|
|
|
|
// areaStyle: {normal: {}},
|
|
|
|
|
data: [
|
|
|
|
|
{
|
|
|
|
|
value: 10,
|
|
|
|
|
name: "设备1",
|
|
|
|
|
value: e.data.baseProcessInfoList.map(e => parseFloat(e.processPercentage)),
|
|
|
|
|
name: '时间'
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
let chartData=e.data
|
|
|
|
|
this.$refs.chart3.setData({
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
top: '10%',
|
|
|
|
|
left: '10%',
|
|
|
|
|
right: '10%',
|
|
|
|
|
bottom: '10%'
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
color: '#ffffff63'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#fff3',
|
|
|
|
|
width: 2
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: ['计划', '实际', '差异']
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
margin: 10,
|
|
|
|
|
color: '#ffffff63'
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
type: 'dashed',
|
|
|
|
|
color: '#ffffff1f'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barMaxWidth: '40px',
|
|
|
|
|
barWidth: '40%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
|
|
|
|
color: new echarts.graphic.LinearGradient(
|
|
|
|
|
0,
|
|
|
|
|
0,
|
|
|
|
|
1,
|
|
|
|
|
0,
|
|
|
|
|
[
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#0a2ad7'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 5,
|
|
|
|
|
name: "设备2",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 15,
|
|
|
|
|
name: "设备3",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 25,
|
|
|
|
|
name: "设备4",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 20,
|
|
|
|
|
name: "设备5",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: 35,
|
|
|
|
|
name: "设备6",
|
|
|
|
|
},
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#138dd7'
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
false
|
|
|
|
|
)
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
data: [chartData.planAmount, chartData.completeAmount, chartData.planAmount-chartData.completeAmount]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
barWidth: '40%',
|
|
|
|
|
barMaxWidth: '40px',
|
|
|
|
|
symbolSize: [5, '100%'],
|
|
|
|
|
symbolPosition: 'end',
|
|
|
|
|
symbolOffset: [3, 0],
|
|
|
|
|
barGap: '-100%',
|
|
|
|
|
itemStyle: {
|
|
|
|
|
color: '#138dd7'
|
|
|
|
|
},
|
|
|
|
|
data: [chartData.planAmount, chartData.completeAmount, chartData.planAmount-chartData.completeAmount]
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
getQualityAndAvailablePercentage().then(e=>{
|
|
|
|
|
console.log(e)
|
|
|
|
|
this.data1 = e.data
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
@ -444,7 +428,6 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
|
|
|
|
.app-container {
|
|
|
|
|
background-image: url("../../../assets/board/productionBg4.jpg");
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
@ -454,6 +437,7 @@ export default {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
@ -565,6 +549,7 @@ export default {
|
|
|
|
|
width: 15%;
|
|
|
|
|
height: 31.5%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
@ -575,6 +560,7 @@ export default {
|
|
|
|
|
font-size: 1.5vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart4_2 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 63.3%;
|
|
|
|
|
@ -582,6 +568,7 @@ export default {
|
|
|
|
|
width: 15%;
|
|
|
|
|
height: 31.5%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
@ -592,6 +579,7 @@ export default {
|
|
|
|
|
font-size: 1.5vw;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.chart4_3 {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 63.3%;
|
|
|
|
|
@ -599,6 +587,7 @@ export default {
|
|
|
|
|
width: 15%;
|
|
|
|
|
height: 31.5%;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
.span {
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
夜笙歌
8 months ago