1175 lines
31 KiB
Vue
1175 lines
31 KiB
Vue
<template>
|
|
<div class="n_container">
|
|
<div class="n_header">
|
|
<div class="n_header_h1">
|
|
<h1>晟华生产数</h1>
|
|
</div>
|
|
</div>
|
|
<div class="n_body_container">
|
|
<div class="n_body_container_wraper">
|
|
<div class="n_left_content">
|
|
<div class="item_wrap">
|
|
<div class="item_tip item_tip_bg_s">
|
|
<div class="item_tip_left">当日混料生产</div>
|
|
</div>
|
|
<div class="item_content">
|
|
<div id="home_echart_1" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_tip item_tip_bg_s">
|
|
<div class="item_tip_left">当日压制生产</div>
|
|
</div>
|
|
<div class="item_content">
|
|
<div id="home_echart_2" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="item_wrap">
|
|
<div class="item_tip item_tip_bg_s">
|
|
<div class="item_tip_left">当日成品情况</div>
|
|
</div>
|
|
<div class="item_content">
|
|
<div id="home_echart_3" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="n_right_content">
|
|
<div class="right_wrap">
|
|
<div class="machine_wrap hlj_s_wrap">
|
|
<div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine hlj_s">
|
|
<img src="../../../images/workshop/hlj_s.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap hlj_wrap">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine hlj">
|
|
<img src="../../../images/workshop/hlj.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap lz_wrap_1">
|
|
<div v-for="(e,i) in [1,2,3,4]" :key="i" class="sh_machine lz">
|
|
<img src="../../../images/workshop/lz.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap lz_wrap_2">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12]" :key="i" class="sh_machine lz">
|
|
<img src="../../../images/workshop/lz.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap lz_wrap_3">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13]" :key="i" class="sh_machine lz">
|
|
<img src="../../../images/workshop/lz.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap yyj_wrap_1">
|
|
<div class="sh_machine weilan">
|
|
<img src="../../../images/workshop/weilan_2.png" alt="">
|
|
</div>
|
|
<div class="sh_machine jzjcss">
|
|
<img src="../../../images/workshop/jzjcss_yellow.png" alt="">
|
|
</div>
|
|
<div class="sh_machine yyj">
|
|
<img src="../../../images/workshop/yyj_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine wzm"></div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot">
|
|
<img src="../../../images/workshop/robot_1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap yyj_wrap_2">
|
|
<div class="sh_machine weilan">
|
|
<img src="../../../images/workshop/weilan_1.png" alt="">
|
|
</div>
|
|
<div class="sh_machine jzjcss">
|
|
<img src="../../../images/workshop/jzjcss_yellow.png" alt="">
|
|
</div>
|
|
<div class="sh_machine yyj">
|
|
<img src="../../../images/workshop/yyj_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine wzm"></div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot">
|
|
<img src="../../../images/workshop/robot_1.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_1">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine weilan">
|
|
<img src="../../../images/workshop/weilan_3.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_3">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_4">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot">
|
|
<img src="../../../images/workshop/robot_2.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_2">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_3">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_4">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_3">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_2_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine weilan">
|
|
<img src="../../../images/workshop/weilan_4.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine robot">
|
|
<img src="../../../images/workshop/robot_3.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_2 cyj_wrap_4">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_1">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_2">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_3">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_4">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap yyj_wrap_3">
|
|
<div class="sh_machine yyj">
|
|
<img src="../../../images/workshop/yyj_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine wzm"></div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_1 cyj_wrap_5">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_1 cyj_wrap_6">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_1 cyj_wrap_7">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap cyj_wrap_1 cyj_wrap_8">
|
|
<div class="sh_machine cyj_1">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine cyj_2">
|
|
<img src="../../../images/workshop/cyj_1_gray.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_3">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
<div class="sh_machine kongtuopan_4">
|
|
<img src="../../../images/workshop/ktp.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap lz_wrap_4">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="i" class="lz" :class="{'mgt5': i === 2 || i === 6 || i === 10 || i === 14 || i === 18}">
|
|
<img src="../../../images/workshop/lz.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="machine_wrap mtp_wrap_1">
|
|
<div v-for="(e,i) in [1,2,3,4,5,6]" :key="i" class="mtp">
|
|
<img src="../../../images/workshop/mtp.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'one',
|
|
data () {
|
|
return {
|
|
myCharts1: '',
|
|
myCharts2: '',
|
|
myCharts3: ''
|
|
}
|
|
},
|
|
mounted () {
|
|
this.setEchart1()
|
|
this.setEchart2()
|
|
this.setEchart3()
|
|
},
|
|
methods: {
|
|
setEchart1 () {
|
|
let date = ['碾机1', '碾机2', '碾机3', '碾机4', '碾机5', '碾机6', '碾机7', '碾机8', '碾机9', '碾机10']
|
|
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
|
|
let option = {
|
|
grid: {
|
|
top: 50,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
lineHeight: 14
|
|
},
|
|
itemGap: 30.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#8FABBF'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 16
|
|
},
|
|
rotate: 50
|
|
},
|
|
data: date
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 2,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [8, 4],
|
|
dashOffset: 4,
|
|
color: '#8FABBF'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '产量',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(96,112,128,0.10)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: '#0E90FD',
|
|
opacity: 0.1
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data1
|
|
}
|
|
]
|
|
}
|
|
let echart = document.getElementById('home_echart_1')
|
|
if (this.myCharts1 !== '') {
|
|
this.myCharts1.dispose()
|
|
}
|
|
if (echart !== null) {
|
|
this.myCharts1 = this.$echarts.init(echart)
|
|
this.myCharts1.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
this.myCharts1.resize()
|
|
})
|
|
}
|
|
},
|
|
setEchart2 () {
|
|
let date = ['压机1', '压机2', '压机3', '压机4', '压机5', '压机6', '压机7', '压机8', '压机9', '压机10']
|
|
let data1 = ['500', '600', '700', '800', '500', '600', '700', '800', '900', '1000']
|
|
let data2 = ['50', '180', '70', '100', '50', '70', '100', '180', '100', '120']
|
|
let option = {
|
|
grid: {
|
|
top: 50,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
lineHeight: 14
|
|
},
|
|
itemGap: 30.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#8FABBF'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 16
|
|
},
|
|
rotate: 50
|
|
},
|
|
data: date
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 2,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [8, 4],
|
|
dashOffset: 4,
|
|
color: '#8FABBF'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '合格数',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#33CCCC',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(31,89,89,0.25)',
|
|
opacity: 0.25
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data1
|
|
},
|
|
{
|
|
name: '不合格数',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#B68845',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(134,98,45,0.25)',
|
|
opacity: 0.25
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data2
|
|
}
|
|
]
|
|
}
|
|
let echart = document.getElementById('home_echart_2')
|
|
if (this.myCharts2 !== '') {
|
|
this.myCharts2.dispose()
|
|
}
|
|
if (echart !== null) {
|
|
this.myCharts2 = this.$echarts.init(echart)
|
|
this.myCharts2.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
this.myCharts2.resize()
|
|
})
|
|
}
|
|
},
|
|
setEchart3 () {
|
|
let date = ['成品1', '成品2', '成品3', '成品4', '成品5']
|
|
let data1 = ['1500', '1600', '1700', '1800', '1500']
|
|
let data2 = ['450', '500', '700', '800', '500']
|
|
let data3 = ['50', '180', '60', '70', '50']
|
|
let option = {
|
|
grid: {
|
|
top: 50,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
icon: 'rect',
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
lineHeight: 14
|
|
},
|
|
itemGap: 30.86,
|
|
itemWidth: 14.16,
|
|
itemHeight: 7.38,
|
|
data: [{name: '库存数', itemStyle: {color: '#0E90FD'}}, {name: '合格入库', itemStyle: {color: '#33CCCC'}}, {name: '不合格入库', itemStyle: {color: '#EAAD24'}}]
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: '#8FABBF'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 16
|
|
}
|
|
// rotate: 50
|
|
},
|
|
data: date
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
splitNumber: 2,
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#8FABBF',
|
|
fontSize: 14
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: [8, 4],
|
|
dashOffset: 4,
|
|
color: '#8FABBF'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '弯头工段',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
barGap: '200%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(96,112,128,0.10)',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 0,
|
|
color: '#0E90FD',
|
|
opacity: 0.1
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data1
|
|
},
|
|
{
|
|
name: '综合工段',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
barGap: '200%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#33CCCC',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(31,89,89,0.25)',
|
|
opacity: 0.25
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data2
|
|
},
|
|
{
|
|
name: '成品工段',
|
|
type: 'bar',
|
|
barWidth: '8',
|
|
barGap: '200%',
|
|
itemStyle: {
|
|
normal: {
|
|
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: '#B68845',
|
|
opacity: 1
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgba(134,98,45,0.25)',
|
|
opacity: 0.25
|
|
}
|
|
])
|
|
}
|
|
},
|
|
data: data3
|
|
}
|
|
]
|
|
}
|
|
let echart = document.getElementById('home_echart_3')
|
|
if (this.myCharts3 !== '') {
|
|
this.myCharts3.dispose()
|
|
}
|
|
if (echart !== null) {
|
|
this.myCharts3 = this.$echarts.init(echart)
|
|
this.myCharts3.setOption(option)
|
|
window.addEventListener('resize', () => {
|
|
this.myCharts3.resize()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
@import '~@css/mixin'
|
|
.n_container
|
|
_wh(100%, 100%)
|
|
.n_header
|
|
_wh(100%, 8%)
|
|
_bis('../../../images/bg_header.jpg')
|
|
.n_header_h1
|
|
_wh(100%, 100%)
|
|
_fj(row, flex-end)
|
|
_bis('../../../images/top_left.png',auto,,right)
|
|
h1
|
|
_font(32px, 1, #fff,,right)
|
|
padding-bottom 2%
|
|
letter-spacing 6px
|
|
font-family "阿里妈妈数黑体" !important
|
|
margin-right -3px
|
|
.n_body_container
|
|
_wh(100%, 92%)
|
|
padding 40px 0 20px 20px
|
|
_bis('../../../images/bg_content.jpg')
|
|
.n_body_container_wraper
|
|
_wh(100%, 100%)
|
|
_fj(row)
|
|
.n_left_content
|
|
_wh(33%, 100%)
|
|
background-color #070b1c
|
|
.n_right_content
|
|
_wh(calc(67% - 16px), 100%)
|
|
.item_wrap
|
|
_wh(100%, 33%)
|
|
+.item_wrap
|
|
margin-top .5%
|
|
.item_tip
|
|
_wh(100%, 32px)
|
|
line-height 32px
|
|
padding 0 10px
|
|
.item_tip_bg_s
|
|
_bis('../../../images/bg_title_s.png')
|
|
.item_tip_left
|
|
_wh(60%, 100%)
|
|
font-family "SourceHanSansCN"
|
|
_font(18px, inherit, #fff, 700, left)
|
|
letter-spacing 2px
|
|
text-shadow 0 0 9px #159AFF
|
|
padding-left 34px
|
|
_bis('../../../images/bg_title_tip.png', 22px, 22px, left)
|
|
.item_content
|
|
_wh(100%, calc(100% - 32px))
|
|
padding 10px 5px
|
|
.right_wrap
|
|
position relative
|
|
z-index 1
|
|
_wh(100%, 100%)
|
|
// _bis('../../../images/workshop/workshop_l.png')
|
|
.machine_wrap
|
|
position absolute
|
|
z-index 2
|
|
.sh_machine
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
z-index 3
|
|
width 100%
|
|
img
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
z-index 4
|
|
_wh(100%, auto)
|
|
.hlj_s_wrap
|
|
width 4%
|
|
height 85.5%
|
|
top 14.5%
|
|
left 7%
|
|
.hlj_s
|
|
&:nth-child(2)
|
|
top 5.5%
|
|
&:nth-child(3)
|
|
top 11%
|
|
&:nth-child(4)
|
|
top 16.5%
|
|
.hlj_wrap
|
|
width 4%
|
|
height 66.5%
|
|
top 33%
|
|
left 14%
|
|
.hlj
|
|
&:nth-child(2)
|
|
top 6%
|
|
&:nth-child(3)
|
|
top 12.7%
|
|
&:nth-child(4)
|
|
top 18.6%
|
|
&:nth-child(5)
|
|
top 25.5%
|
|
&:nth-child(6)
|
|
top 31.5%
|
|
&:nth-child(7)
|
|
top 38.1%
|
|
&:nth-child(8)
|
|
top 44%
|
|
&:nth-child(9)
|
|
top 51%
|
|
&:nth-child(10)
|
|
top 57%
|
|
&:nth-child(11)
|
|
top 63.5%
|
|
&:nth-child(12)
|
|
top 69.5%
|
|
.lz_wrap_1
|
|
width 2%
|
|
height 84.6%
|
|
top 15.4%
|
|
left 22%
|
|
.lz
|
|
&:nth-child(2)
|
|
top 5.4%
|
|
&:nth-child(3)
|
|
top 11%
|
|
&:nth-child(4)
|
|
top 16.2%
|
|
.lz_wrap_2
|
|
width 2%
|
|
height 66.3%
|
|
top 33.7%
|
|
left 19%
|
|
.lz
|
|
&:nth-child(2)
|
|
top 6.1%
|
|
&:nth-child(3)
|
|
top 12.8%
|
|
&:nth-child(4)
|
|
top 18.5%
|
|
&:nth-child(5)
|
|
top 26%
|
|
&:nth-child(6)
|
|
top 31.5%
|
|
&:nth-child(7)
|
|
top 38.2%
|
|
&:nth-child(8)
|
|
top 43.9%
|
|
&:nth-child(9)
|
|
top 51%
|
|
&:nth-child(10)
|
|
top 56.8%
|
|
&:nth-child(11)
|
|
top 64%
|
|
&:nth-child(12)
|
|
top 69.5%
|
|
.lz_wrap_3
|
|
width 2%
|
|
height 94%
|
|
top 6%
|
|
left 35%
|
|
.lz
|
|
&:nth-child(2)
|
|
top 4%
|
|
&:nth-child(3)
|
|
top 6.55%
|
|
&:nth-child(4)
|
|
top 9.1%
|
|
&:nth-child(5)
|
|
top 14%
|
|
&:nth-child(6)
|
|
top 18%
|
|
&:nth-child(7)
|
|
top 20.5%
|
|
&:nth-child(8)
|
|
top 23%
|
|
&:nth-child(9)
|
|
top 40%
|
|
left 200%
|
|
&:nth-child(10)
|
|
top 44%
|
|
left 100%
|
|
&:nth-child(11)
|
|
top 54%
|
|
left 200%
|
|
&:nth-child(12)
|
|
top 76%
|
|
left 200%
|
|
&:nth-child(13)
|
|
top 86%
|
|
left 200%
|
|
.yyj_wrap_1
|
|
width 16%
|
|
height 14%
|
|
top 5.5%
|
|
left 48%
|
|
transform scale(0.9)
|
|
.yyj
|
|
width 28.22%
|
|
height 42%
|
|
left 30.5%
|
|
img
|
|
_wh(100%, 100%)
|
|
.wzm
|
|
_wh(50.9%, 46.95%)
|
|
background-color #d9d9d9
|
|
top auto
|
|
bottom 0
|
|
.jzjcss
|
|
width 22%
|
|
left 51%
|
|
top 11%
|
|
.weilan
|
|
width 49.1%
|
|
height 73%
|
|
left auto
|
|
right 0
|
|
top auto
|
|
bottom 0
|
|
.robot
|
|
width 24%
|
|
left 53%
|
|
top 54%
|
|
transform rotate(270deg)
|
|
.kongtuopan_1
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
left auto
|
|
bottom 6%
|
|
right 30%
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_2
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
left auto
|
|
bottom 6%
|
|
right 14%
|
|
transform rotate(180deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.yyj_wrap_2
|
|
width 16%
|
|
height 14%
|
|
top 19%
|
|
left 48%
|
|
transform scale(0.9)
|
|
.yyj
|
|
width 28.22%
|
|
height 42%
|
|
left 30.5%
|
|
img
|
|
_wh(100%, 100%)
|
|
.wzm
|
|
_wh(50.9%, 46.95%)
|
|
background-color #d9d9d9
|
|
top auto
|
|
bottom 0
|
|
.jzjcss
|
|
width 22%
|
|
left 51%
|
|
top 11%
|
|
.weilan
|
|
width 49.1%
|
|
height 73%
|
|
left auto
|
|
right 0
|
|
top auto
|
|
bottom 0
|
|
.robot
|
|
width 24%
|
|
left 72%
|
|
top 65%
|
|
transform rotate(90deg)
|
|
.kongtuopan_1
|
|
width 15%
|
|
height 13%
|
|
top 44%
|
|
left auto
|
|
right 15%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_2
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
left auto
|
|
bottom -10%
|
|
right 15%
|
|
transform rotate(-90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_wrap_1
|
|
width 11%
|
|
height 14%
|
|
top 37%
|
|
left 52.5%
|
|
.cyj_1
|
|
width 40%
|
|
height 48%
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_2
|
|
width 40%
|
|
height 48%
|
|
top auto
|
|
bottom 0
|
|
img
|
|
_wh(100%, 100%)
|
|
.weilan
|
|
_wh(60%, 70%)
|
|
left auto
|
|
right 0
|
|
top 15%
|
|
img
|
|
_wh(100%, 100%)
|
|
.robot
|
|
width 21%
|
|
top 46%
|
|
left auto
|
|
right 17%
|
|
.kongtuopan_1
|
|
width 15%
|
|
height 13%
|
|
top 29%
|
|
left auto
|
|
right 35%
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_2
|
|
width 15%
|
|
height 13%
|
|
top 29%
|
|
left auto
|
|
right 12%
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_3
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
left auto
|
|
right 35%
|
|
bottom 20%
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_4
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
left auto
|
|
right 12%
|
|
bottom 20%
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_wrap_2
|
|
width 11%
|
|
height 14%
|
|
top 52%
|
|
left 52.5%
|
|
.cyj_1
|
|
width 40%
|
|
height 48%
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_2
|
|
width 40%
|
|
height 48%
|
|
top auto
|
|
bottom 0
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_1
|
|
width 15%
|
|
height 13%
|
|
top 6%
|
|
left 44%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_2
|
|
width 15%
|
|
height 13%
|
|
top 31%
|
|
left 44%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_3
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
bottom 31%
|
|
left 44%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_4
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
bottom 4%
|
|
left 44%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_wrap_3
|
|
width 11%
|
|
height 9%
|
|
top 69%
|
|
left 52.5%
|
|
.cyj_1
|
|
width 37%
|
|
height 95%
|
|
img
|
|
_wh(100%, 100%)
|
|
.weilan
|
|
_wh(60%, 100%)
|
|
left auto
|
|
right 0
|
|
img
|
|
_wh(100%, 100%)
|
|
.robot
|
|
width 21%
|
|
top 36%
|
|
left 46%
|
|
.kongtuopan_1
|
|
width 15%
|
|
height 13%
|
|
top 29%
|
|
left auto
|
|
right 13%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_2
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
bottom 9%
|
|
left auto
|
|
right 13%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.cyj_wrap_4
|
|
top 80%
|
|
.yyj_wrap_3
|
|
width 16%
|
|
height 14%
|
|
top 19%
|
|
right 8%
|
|
transform scale(0.9)
|
|
.yyj
|
|
width 28.22%
|
|
left -7.5%
|
|
transform rotate(180deg)
|
|
height 42%
|
|
img
|
|
_wh(100%, 100%)
|
|
.wzm
|
|
_wh(50.9%, 46.95%)
|
|
background-color #d9d9d9
|
|
top auto
|
|
bottom 0
|
|
.cyj_wrap_5
|
|
left auto
|
|
right 12%
|
|
.cyj_wrap_6
|
|
left auto
|
|
right 12%
|
|
top 52%
|
|
.cyj_wrap_7
|
|
left auto
|
|
right 12%
|
|
top 69%
|
|
.cyj_wrap_8
|
|
left auto
|
|
right 12%
|
|
top 80%
|
|
.kongtuopan_3
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
bottom 31%
|
|
left -20%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.kongtuopan_4
|
|
width 15%
|
|
height 13%
|
|
top auto
|
|
bottom 4%
|
|
left -20%
|
|
transform rotate(90deg)
|
|
img
|
|
_wh(100%, 100%)
|
|
.lz_wrap_4
|
|
width 2%
|
|
height 63%
|
|
bottom 4%
|
|
left auto
|
|
right 7%
|
|
.lz
|
|
position relative
|
|
width 100%
|
|
height 4.4%
|
|
img
|
|
position absolute
|
|
_wh(100%, 100%)
|
|
.mgt5
|
|
margin-top 45%
|
|
.mtp_wrap_1
|
|
width 2.5%
|
|
top 9%
|
|
right 5%
|
|
.mtp
|
|
width 100%
|
|
img
|
|
_wh(100%, auto)
|
|
</style>
|