update adjust
This commit is contained in:
lb
parent
1bcd216487
commit
4e0f88c5ea
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑底温度 -->
|
||||
<Container usage="Charts">
|
||||
<SubContainer title="窑底温度" icon="oil" padding="17px">
|
||||
<SubContainer title="窑底温度" icon="oil" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<LineChart key="1" id="line-chart-7" class="flex-1" :config="chartConfig" />
|
||||
<div class="vertical-line"></div>
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 风机运行情况 -->
|
||||
<Container usage="Table">
|
||||
<SubContainer title="风机运行情况" icon="docs" padding="17px">
|
||||
<SubContainer title="风机运行情况" icon="docs" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<table class="table-1 flex-1 align-start">
|
||||
<thead>
|
||||
@ -114,8 +114,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 1px;
|
||||
border-spacing: adjust(1px);
|
||||
}
|
||||
|
||||
// tr, td, th {
|
||||
@ -134,7 +134,7 @@ table {
|
||||
// }
|
||||
|
||||
.t-row {
|
||||
height: 13.88px;
|
||||
height: adjust(13.88px);
|
||||
}
|
||||
|
||||
.align-start {
|
||||
@ -142,8 +142,8 @@ table {
|
||||
}
|
||||
|
||||
thead > tr th {
|
||||
font-size: 8px;
|
||||
padding: 1px 3px;
|
||||
font-size: adjust(8px);
|
||||
padding: adjust(1px) adjust(3px);
|
||||
font-weight: 400;
|
||||
background: #044a8446;
|
||||
}
|
||||
@ -153,8 +153,8 @@ tbody > tr:nth-child(odd) {
|
||||
}
|
||||
|
||||
tbody > tr td {
|
||||
font-size: 7px;
|
||||
padding: 1px 6px;
|
||||
font-size: adjust(7px);
|
||||
padding: adjust(1px) adjust(6px);
|
||||
font-weight: 400;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 天然气流量 -->
|
||||
<Container usage="Charts">
|
||||
<SubContainer title="天然气流量" icon="oil" padding="17px">
|
||||
<SubContainer title="天然气流量" icon="oil" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<LineChart key="1" id="line-chart-3" class="flex-1" :config="chartConfig" />
|
||||
<div class="vertical-line"></div>
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
|
||||
@ -22,9 +22,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
// .history-temp {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
// }
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
@ -35,8 +34,8 @@ h3 {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(10px);
|
||||
letter-spacing: adjust(1px);
|
||||
color: #52fff8;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑炉进口水温 -->
|
||||
<Container usage="NumberAndChart">
|
||||
<SubContainer title="窑炉进口水温" icon="inWater" padding="17px">
|
||||
<SubContainer title="窑炉进口水温" icon="inWater" padding="34px">
|
||||
<div class="pic" style=""></div>
|
||||
<div class="content flex flex-col">
|
||||
<div class="realtime">
|
||||
@ -52,10 +52,10 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
top: adjust(24px);
|
||||
right: 0;
|
||||
width: w(386px);
|
||||
height: h(364px);
|
||||
width:adjust(w(386px));
|
||||
height: adjust(h(364px));
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -63,9 +63,9 @@ export default {
|
||||
}
|
||||
|
||||
.wave {
|
||||
transform: translateX(-16px);
|
||||
width: w(793px);
|
||||
height: h(72px);
|
||||
transform: translateX(adjust(-16px));
|
||||
width: adjust(w(793px));
|
||||
height: adjust(h(72px));
|
||||
background: url(../../assets/inwater.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@ -81,29 +81,29 @@ export default {
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: 12px 0;
|
||||
padding-left: 14px;
|
||||
margin: adjust(12px) 0;
|
||||
padding-left: adjust(14px);
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
margin-right: adjust(5px);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: Ubuntu, monospace, sans-serif !important;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(20px);
|
||||
letter-spacing: adjust(1px);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px 0;
|
||||
margin-left: adjust(24px);
|
||||
margin-bottom: adjust(10px);
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(22px);
|
||||
letter-spacing: adjust(1px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
@ -115,8 +115,8 @@ export default {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
height: 4px;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 100%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑炉压力 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉压力" icon="docs" padding="17px">
|
||||
<SubContainer title="窑炉压力" icon="docs" padding="34px">
|
||||
<div class="pressure flex flex-col flex-start">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
@ -46,17 +46,17 @@ export default {
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: 12px 0;
|
||||
margin: adjust(12px) 0;
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
margin-right: adjust(4px);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: sans-serif;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(20px);
|
||||
letter-spacing: adjust(1px);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
@ -65,10 +65,10 @@ export default {
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 12px 0;
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(23px);
|
||||
letter-spacing: adjust(1px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
@ -80,8 +80,8 @@ export default {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
height: 4px;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 100%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑炉运行时间 -->
|
||||
<Container usage="NumberOrDate">
|
||||
<SubContainer title="窑炉运行时间" icon="clock" padding="17px">
|
||||
<SubContainer title="窑炉运行时间" icon="clock" padding="34px">
|
||||
<div class="flex flex-col">
|
||||
<div class="time flex flex-center">
|
||||
<DigitalBox
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: 12px 0;
|
||||
margin: adjust(12px) 0;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
@ -48,14 +48,14 @@ export default {
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.text {
|
||||
padding: 12px 0;
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: 23px;
|
||||
letter-spacing: 4px;
|
||||
font-size: adjust(23px);
|
||||
letter-spacing: adjust(4px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
@ -67,8 +67,8 @@ export default {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 12%;
|
||||
bottom: 10px;
|
||||
height: 4px;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 76%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 油流量 -->
|
||||
<Container usage="Charts">
|
||||
<SubContainer title="油流量" icon="oil" padding="17px">
|
||||
<SubContainer title="油流量" icon="oil" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
|
||||
<div class="vertical-line"></div>
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑炉出口水温 -->
|
||||
<Container usage="NumberAndChart">
|
||||
<SubContainer title="窑炉出口水温" icon="inWater" padding="17px">
|
||||
<SubContainer title="窑炉出口水温" icon="inWater" padding="34px">
|
||||
<div class="pic" style=""></div>
|
||||
<div class="content flex flex-col">
|
||||
<div class="realtime">
|
||||
@ -52,10 +52,10 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
top: adjust(24px);
|
||||
right: 0;
|
||||
width: w(386px);
|
||||
height: h(364px);
|
||||
width: adjust(w(386px));
|
||||
height: adjust(h(364px));
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -63,9 +63,9 @@ export default {
|
||||
}
|
||||
|
||||
.wave {
|
||||
transform: translateX(-16px);
|
||||
width: w(793px);
|
||||
height: h(72px);
|
||||
transform: translateX(adjust(-16px));
|
||||
width: adjust(w(793px));
|
||||
height: adjust(h(72px));
|
||||
background: url(../../assets/inwater.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
@ -81,29 +81,29 @@ export default {
|
||||
|
||||
.time {
|
||||
// background: #eee;
|
||||
margin: 12px 0;
|
||||
padding-left: 14px;
|
||||
margin: adjust(12px) 0;
|
||||
padding-left: adjust(14px);
|
||||
}
|
||||
|
||||
.time--item:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
margin-right: adjust(5px);
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: Ubuntu, monospace, sans-serif !important;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(20px);
|
||||
letter-spacing: adjust(1px);
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: inline-block;
|
||||
margin-left: 24px;
|
||||
margin-bottom: 10px;
|
||||
padding: 12px 0;
|
||||
margin-left: adjust(24px);
|
||||
margin-bottom: adjust(10px);
|
||||
padding: adjust(12px) 0;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
letter-spacing: 1px;
|
||||
font-size: adjust(22px);
|
||||
letter-spacing: adjust(1px);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
user-select: none;
|
||||
@ -115,8 +115,8 @@ export default {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
height: 4px;
|
||||
bottom: adjust(10px);
|
||||
height: adjust(4px);
|
||||
width: 100%;
|
||||
/* 渐变色 */
|
||||
background: radial-gradient(
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 窑顶温度 -->
|
||||
<Container usage="Charts">
|
||||
<SubContainer title="窑顶温度" icon="oil" padding="17px">
|
||||
<SubContainer title="窑顶温度" icon="oil" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<LineChart key="1" id="line-chart-5" class="flex-1" :config="chartConfig" />
|
||||
<div class="vertical-line"></div>
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<!-- 锡槽温度 -->
|
||||
<Container usage="Charts">
|
||||
<SubContainer title="锡槽温度" icon="oil" padding="17px">
|
||||
<SubContainer title="锡槽温度" icon="oil" padding="34px">
|
||||
<div class="tables flex" style="height: 100%">
|
||||
<LineChart key="1" id="line-chart-9" class="flex-1" :config="chartConfig" />
|
||||
<div class="vertical-line"></div>
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
margin: 0 3px;
|
||||
width: 3px;
|
||||
margin: 0 adjust(3px);
|
||||
width: adjust(3px);
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
#6fe2ff,
|
||||
|
||||
@ -27,21 +27,21 @@ export default {
|
||||
.table-status {
|
||||
/* font-family: Ubuntu, sans-serif !important; */
|
||||
color: #3984ff;
|
||||
padding-left: 10px;
|
||||
padding-left: adjust(10px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table-status::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 2px;
|
||||
left: adjust(1px);
|
||||
top: adjust(2px);
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 100px;
|
||||
width: adjust(4px);
|
||||
height: adjust(4px);
|
||||
border-radius: adjust(100px);
|
||||
background: #3984ff;
|
||||
box-shadow: 0px 0px 2px 2px rgba(39, 96, 255, 0.5);
|
||||
box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(39, 96, 255, 0.5);
|
||||
}
|
||||
|
||||
.invalid {
|
||||
@ -50,6 +50,6 @@ export default {
|
||||
|
||||
.invalid::after {
|
||||
background: #ff0c0c;
|
||||
box-shadow: 0px 0px 2px 2px rgba(255, 39, 39, 0.5);
|
||||
box-shadow: 0px 0px adjust(2px) adjust(2px) rgba(255, 39, 39, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -27,6 +27,10 @@ echarts.use([
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
function adjust(v) {
|
||||
return v * 2
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "BarChart",
|
||||
props: {
|
||||
@ -50,10 +54,10 @@ export default {
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: 28,
|
||||
left: 28,
|
||||
bottom: 18,
|
||||
right: 12,
|
||||
top: adjust(28),
|
||||
left: adjust(28),
|
||||
bottom: adjust(18),
|
||||
right: adjust(12),
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
@ -62,7 +66,6 @@ export default {
|
||||
.map((_, index) => index + 1),
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
// width: 1,
|
||||
color: "#5982b2a0",
|
||||
},
|
||||
},
|
||||
@ -71,8 +74,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
fontSize: 7,
|
||||
lineHeight: 1,
|
||||
fontSize: adjust(7),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
@ -80,7 +83,7 @@ export default {
|
||||
name: "单位/℃",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: 8,
|
||||
fontSize: adjust(8),
|
||||
align: "right",
|
||||
},
|
||||
axisLine: {
|
||||
@ -95,8 +98,8 @@ export default {
|
||||
axisLabel: {
|
||||
formatter: "{value} ℃",
|
||||
color: "#fff9",
|
||||
fontSize: 7,
|
||||
lineHeight: 1,
|
||||
fontSize: adjust(7),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -117,10 +120,10 @@ export default {
|
||||
return v;
|
||||
}),
|
||||
type: "bar",
|
||||
barWidth: 4,
|
||||
barWidth: adjust(4),
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 6,
|
||||
fontSize: adjust(6),
|
||||
color: "#eee8",
|
||||
position: "top",
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="line-chart__wrapper">
|
||||
<div class="line-chart__custom-legend flex">
|
||||
<span>产线1 - 产线5</span>
|
||||
<ul style="margin-left: 8px; padding-left: 8px" class="flex">
|
||||
<ul style="" class="flex">
|
||||
<li>产线1</li>
|
||||
<li>产线2</li>
|
||||
<li>产线3</li>
|
||||
@ -39,12 +39,16 @@ echarts.use([
|
||||
CanvasRenderer,
|
||||
]);
|
||||
|
||||
function adjust(v) {
|
||||
return v * 2;
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "LineChart",
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'line-chart'
|
||||
default: "line-chart",
|
||||
},
|
||||
config: {
|
||||
type: Object,
|
||||
@ -78,16 +82,16 @@ export default {
|
||||
methods: {
|
||||
init() {
|
||||
if (!this.chart)
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart = echarts.init(document.getElementById(this.id));
|
||||
this.chart.setOption({
|
||||
// title: {
|
||||
// text: "ECharts 入门示例",
|
||||
// },
|
||||
grid: {
|
||||
top: 32,
|
||||
left: 32,
|
||||
bottom: 24,
|
||||
right: 12,
|
||||
top: adjust(32),
|
||||
left: adjust(32),
|
||||
bottom: adjust(24),
|
||||
right: adjust(12),
|
||||
},
|
||||
// tooltip: {
|
||||
// trigger: "axis",
|
||||
@ -112,8 +116,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#ffffff",
|
||||
fontSize: 6,
|
||||
lineHeight: 1,
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
@ -121,7 +125,7 @@ export default {
|
||||
name: "单位/m³",
|
||||
nameTextStyle: {
|
||||
color: "#fff9",
|
||||
fontSize: 6,
|
||||
fontSize: adjust(6),
|
||||
// lineHeight: 6,
|
||||
// height: 6,
|
||||
// padding: 0,
|
||||
@ -139,8 +143,8 @@ export default {
|
||||
},
|
||||
axisLabel: {
|
||||
color: "#fff9",
|
||||
fontSize: 6,
|
||||
lineHeight: 1,
|
||||
fontSize: adjust(6),
|
||||
lineHeight: adjust(1),
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
@ -156,9 +160,9 @@ export default {
|
||||
name: Math.random(),
|
||||
type: "line",
|
||||
symbol: "circle",
|
||||
symbolSize: 3,
|
||||
symbolSize: adjust(3),
|
||||
lineStyle: {
|
||||
width: "1",
|
||||
width: adjust(1),
|
||||
},
|
||||
areaStyle: {
|
||||
// color: {
|
||||
@ -203,17 +207,17 @@ export default {
|
||||
|
||||
::-webkit-scrollbar {
|
||||
// display: none;
|
||||
height: 2px;
|
||||
height: adjust(2px);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
height: adjust(2px);
|
||||
border-radius: adjust(2px);
|
||||
background: #ccc3;
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar-track {
|
||||
// height: 1px;
|
||||
// height: adjust(1px);
|
||||
// background: blue;
|
||||
// }
|
||||
|
||||
@ -222,7 +226,12 @@ li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
min-width: 20px;
|
||||
min-width: adjust(20px);
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: adjust(8px);
|
||||
padding-left: adjust(8px);
|
||||
}
|
||||
|
||||
li {
|
||||
@ -232,11 +241,11 @@ li {
|
||||
li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: -6px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 1px;
|
||||
top: adjust(2px);
|
||||
left: adjust(-6px);
|
||||
width: adjust(4px);
|
||||
height: adjust(4px);
|
||||
border-radius: adjust(1px);
|
||||
background: #eee6;
|
||||
}
|
||||
|
||||
@ -273,31 +282,31 @@ li:nth-child(10)::before {
|
||||
|
||||
ul {
|
||||
flex: 1;
|
||||
width: 144px;
|
||||
width: adjust(154px);
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 2px;
|
||||
padding-bottom: adjust(2px);
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.line-chart__wrapper {
|
||||
position: relative;
|
||||
background: #7771;
|
||||
border-radius: 3px;
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: inset 0 0 10px 2px rgba($color: #fff, $alpha: 0.1);
|
||||
border-radius: adjust(3px);
|
||||
backdrop-filter: blur(adjust(2px));
|
||||
box-shadow: inset 0 0 adjust(10px) adjust(2px) rgba($color: #fff, $alpha: 0.1);
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
width: adjust(1px);
|
||||
}
|
||||
|
||||
.line-chart__custom-legend {
|
||||
position: absolute;
|
||||
top: -13px;
|
||||
top: adjust(-13px);
|
||||
right: 0;
|
||||
font-size: 7px;
|
||||
font-size: adjust(7px);
|
||||
font-family: Ubuntu, sans-serif;
|
||||
// background: #fff2;
|
||||
padding: 0;
|
||||
|
||||
@ -35,34 +35,34 @@ export default {
|
||||
.digit-box {
|
||||
// height: h(80px);
|
||||
// width: w(64px);
|
||||
height: h(80px);
|
||||
width: w(56px);
|
||||
height: adjust(h(80px));
|
||||
width: adjust(w(56px));
|
||||
color: white;
|
||||
background: url(../../assets/digit.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 2px;
|
||||
padding: adjust(2px);
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.digit {
|
||||
font-family: "站酷庆科黄油体", sans-serif;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
font-size: adjust(32px);
|
||||
line-height: adjust(39px);
|
||||
}
|
||||
|
||||
.zhHans {
|
||||
font-size: 18px;
|
||||
line-height: 48px;
|
||||
font-size: adjust(18px);
|
||||
line-height: adjust(48px);
|
||||
}
|
||||
|
||||
.another-hw {
|
||||
height: h(72px);
|
||||
width: w(62px);
|
||||
height: adjust(h(72px));
|
||||
width: adjust(w(62px));
|
||||
}
|
||||
|
||||
.another-hw.digit {
|
||||
font-size: 32px;
|
||||
line-height: 32px;
|
||||
font-size: adjust(32px);
|
||||
line-height: adjust(32px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -56,38 +56,39 @@ export default {
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.small-box-2 {
|
||||
padding: 14px;
|
||||
padding: adjust(14px);
|
||||
// border: 1px solid gray;
|
||||
box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
|
||||
border-radius: 6px;
|
||||
// box-shadow: inset 0 0 15px rgba($color: #fff, $alpha: 0.285);
|
||||
box-shadow: inset 0 0 30px rgba($color: #fff, $alpha: 0.285);
|
||||
border-radius: adjust(6px);
|
||||
user-select: none;
|
||||
// width: w(465px);
|
||||
// height: h(200px);
|
||||
width: w(528px);
|
||||
height: h(240px);
|
||||
// width: adjust(w(465px));
|
||||
// height: adjust(h(200px));
|
||||
width: adjust(w(528px));
|
||||
height: adjust(h(240px));
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
width: h(128px);
|
||||
height: h(128px);
|
||||
width: adjust(h(128px));
|
||||
height: adjust(h(128px));
|
||||
}
|
||||
|
||||
.info {
|
||||
font-family: "微软雅黑", Helvicate, sans-serif;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-size: adjust(16px);
|
||||
opacity: 0.7;
|
||||
// line-height: 12px;
|
||||
letter-spacing: 1px;
|
||||
// line-height: adjust(12px);
|
||||
letter-spacing: adjust(1px);
|
||||
font-weight: 400;
|
||||
color: hsla(0, 0%, 100%, 0.9);
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
line-height: 29px;
|
||||
font-size: adjust(30px);
|
||||
line-height: adjust(29px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
width="adjust(64px)"
|
||||
height="adjust(64px)"
|
||||
viewBox="0 0 95 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
width="adjust(64px)"
|
||||
height="adjust(64px)"
|
||||
viewBox="0 0 94 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
width="adjust(64px)"
|
||||
height="adjust(64px)"
|
||||
viewBox="0 0 95 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
width="adjust(64px)"
|
||||
height="adjust(64px)"
|
||||
viewBox="0 0 122 122"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<svg
|
||||
width="64px"
|
||||
height="64px"
|
||||
width="adjust(64px)"
|
||||
height="adjust(64px)"
|
||||
viewBox="0 0 94 96"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@ -31,12 +31,14 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.isolate-area-1 {
|
||||
display: flex;
|
||||
|
||||
> .small-box-2:not(:last-child) {
|
||||
margin: {
|
||||
right: 15px;
|
||||
right: adjust(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,8 +45,8 @@ export default {
|
||||
|
||||
.number-or-date {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(375px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(375px));
|
||||
background: url(../../assets/box-number.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@ -54,8 +54,8 @@ export default {
|
||||
|
||||
.tables {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(528px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(528px));
|
||||
background: url(../../assets/box-table.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@ -63,8 +63,8 @@ export default {
|
||||
|
||||
.charts {
|
||||
display: inline-block;
|
||||
width: w(1580px);
|
||||
height: h(520px);
|
||||
width: adjust(w(1580px));
|
||||
height: adjust(h(520px));
|
||||
background: url(../../assets/box-chart.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
@ -72,8 +72,8 @@ export default {
|
||||
|
||||
.number-and-chart {
|
||||
display: inline-block;
|
||||
width: w(800px);
|
||||
height: h(931px);
|
||||
width: adjust(w(800px));
|
||||
height: adjust(h(931px));
|
||||
background: url(../../assets/box-right.png);
|
||||
background-position: 0 0; /** top left */
|
||||
background-size: 100% 100%;
|
||||
|
||||
@ -24,29 +24,29 @@ export default {
|
||||
header {
|
||||
background: url(../../assets/header.png) center/contain no-repeat;
|
||||
background-size: 105%;
|
||||
height: h(280px);
|
||||
width: $actual_width;
|
||||
height: adjust(h(280px));
|
||||
width: adjust($actual_width);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: adjust(20px);
|
||||
|
||||
.header--logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: adjust(56px);
|
||||
height: adjust(56px);
|
||||
background: url(../../assets/logo.png) center/contain no-repeat;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-left: 20px;
|
||||
font-size: 35px;
|
||||
// line-height: 100px;
|
||||
margin-left: adjust(20px);
|
||||
font-size: adjust(35px);
|
||||
// line-height: adjust(100px);
|
||||
// background: #eee;
|
||||
user-select: none;
|
||||
letter-spacing: 8px;
|
||||
letter-spacing: adjust(8px);
|
||||
font-weight: 600;
|
||||
// color: #6bf2ff;
|
||||
color: $main-color;
|
||||
@ -57,19 +57,19 @@ header {
|
||||
|
||||
.header--wing {
|
||||
left: 0;
|
||||
bottom: 10px;
|
||||
height: h(78px);
|
||||
bottom: adjust(10px);
|
||||
height: adjust(h(78px));
|
||||
}
|
||||
|
||||
.company {
|
||||
margin-left: w(1420px);
|
||||
width: w(1460px);
|
||||
margin-left: adjust(w(1420px));
|
||||
width: adjust(w(1460px));
|
||||
background: url("../../assets/company.png") center/cover no-repeat;
|
||||
}
|
||||
|
||||
.datetime {
|
||||
margin-left: w(6050px);
|
||||
width: w(1407px);
|
||||
margin-left: adjust(w(6050px));
|
||||
width: adjust(w(1407px));
|
||||
background: url("../../assets/date.png") center/cover no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,27 +1,11 @@
|
||||
<template>
|
||||
<main class="">
|
||||
<div class="eq-main absolute">
|
||||
<!-- style="
|
||||
position: absolute;
|
||||
top: 224px;
|
||||
left: 59px;
|
||||
transform: scale(1, 1.05);
|
||||
width: 360px;
|
||||
height: 100px;
|
||||
" -->
|
||||
<div
|
||||
class="video-bottom"
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 151px;
|
||||
left: 64px;
|
||||
transform: scale(1.02, 1.05);
|
||||
"
|
||||
>
|
||||
<div class="video-bottom" style="">
|
||||
<video
|
||||
id="1"
|
||||
preload="auto"
|
||||
height="100"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
@ -30,20 +14,12 @@
|
||||
></video>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="video-bottom"
|
||||
style="
|
||||
position: absolute;
|
||||
top: 131px;
|
||||
left: 72px;
|
||||
transform: scale(1.02, 1.05);
|
||||
"
|
||||
>
|
||||
<div class="video-top" style="">
|
||||
<video
|
||||
id="2"
|
||||
class="video-top"
|
||||
preload="auto"
|
||||
height="100"
|
||||
height="200"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
@ -51,10 +27,9 @@
|
||||
src="../../assets/videos/fire-to-bottom.mp4"
|
||||
></video>
|
||||
</div>
|
||||
<!-- style="position: absolute; top: 0; left: 0; transform: scale(1, 1.05) width: 360px; height: 100px;" -->
|
||||
</div>
|
||||
|
||||
<AreaOne style="position: absolute; top: 160px; left: 1588px" />
|
||||
<AreaOne class="area-one" />
|
||||
|
||||
<div class="absolute left kiln-runtime">
|
||||
<KilnRuntime />
|
||||
@ -139,73 +114,93 @@ main {
|
||||
// background: #eee2;
|
||||
}
|
||||
|
||||
.area-one {
|
||||
position: absolute;
|
||||
top: adjust(160px);
|
||||
left: adjust(1588px);
|
||||
}
|
||||
|
||||
.video-bottom {
|
||||
position: absolute;
|
||||
bottom: adjust(153.5px);
|
||||
left: adjust(63.5px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.video-top {
|
||||
position: absolute;
|
||||
top: adjust(64px);
|
||||
left: adjust(35px);
|
||||
transform: scale(1.02, 1.02);
|
||||
}
|
||||
|
||||
.eq-main {
|
||||
width: w(7150px);
|
||||
height: h(960px);
|
||||
width: adjust(w(7150px));
|
||||
height: adjust(h(960px));
|
||||
background: url(../../assets/eq.png) no-repeat;
|
||||
background-size: 100%;
|
||||
top: 170px;
|
||||
left: 380px;
|
||||
top: adjust(170px);
|
||||
left: adjust(380px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.eq-main::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 1000px;
|
||||
top: 164px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
right: adjust(1000px);
|
||||
top: adjust(164px);
|
||||
width: adjust(150px);
|
||||
height: adjust(150px);
|
||||
background: url(../../assets/mirror.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.kiln-runtime {
|
||||
top: h(200px);
|
||||
left: w(60px);
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.kiln-pressure {
|
||||
top: h(610px);
|
||||
left: w(60px);
|
||||
top: adjust(h(610px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.fan-runtime {
|
||||
top: h(1020px);
|
||||
left: w(60px);
|
||||
top: adjust(h(1020px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.oil-flow {
|
||||
top: h(1588px);
|
||||
left: w(60px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(60px));
|
||||
}
|
||||
|
||||
.gas-flow {
|
||||
top: h(1588px);
|
||||
left: w(1660px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(1660px));
|
||||
}
|
||||
.top-temp {
|
||||
top: h(1588px);
|
||||
left: w(3260px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(3260px));
|
||||
}
|
||||
.bottom-temp {
|
||||
top: h(1588px);
|
||||
left: w(4860px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(4860px));
|
||||
}
|
||||
.ou-temp {
|
||||
top: h(1588px);
|
||||
left: w(6460px);
|
||||
top: adjust(h(1588px));
|
||||
left: adjust(w(6460px));
|
||||
}
|
||||
.in-water {
|
||||
top: h(200px);
|
||||
left: w(8096px);
|
||||
top: adjust(h(200px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.out-water {
|
||||
top: h(1177px);
|
||||
left: w(8096px);
|
||||
top: adjust(h(1177px));
|
||||
left: adjust(w(8096px));
|
||||
// left: w(5096px);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -31,17 +31,19 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
iconClass: {
|
||||
clock: 'icon-clock',
|
||||
docs: 'icon-docs',
|
||||
oil: 'icon-oil',
|
||||
inWater: 'icon-water-in'
|
||||
}
|
||||
clock: "icon-clock",
|
||||
docs: "icon-docs",
|
||||
oil: "icon-oil",
|
||||
inWater: "icon-water-in",
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
@import "../../assets/styles/functions";
|
||||
|
||||
.sub-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -49,9 +51,9 @@ export default {
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-right: 8px;
|
||||
height: adjust(16px);
|
||||
width: adjust(16px);
|
||||
margin-right: adjust(8px);
|
||||
}
|
||||
|
||||
.icon-clock {
|
||||
@ -75,9 +77,9 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
/* margin: 12px 0; */
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
/* margin: 12px 0; */
|
||||
margin-bottom: adjust(12px);
|
||||
font-size: adjust(16px);
|
||||
color: #72f2ff;
|
||||
font-family: sans-serif;
|
||||
user-select: none;
|
||||
|
||||
@ -28,8 +28,8 @@ export default {
|
||||
.home-view {
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
height: $actual_height;
|
||||
width: $actual_width;
|
||||
height: adjust($actual_height);
|
||||
width: adjust($actual_width);
|
||||
overflow: hidden;
|
||||
background: url(../assets/bg.png) center/cover no-repeat ;
|
||||
color: white;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user