Merge branch 'master' of http://git.umayle.com:2023/liulonglong/shuinichang_
This commit is contained in:
unknown
commit
ea781ef6bb
|
|
@ -16,15 +16,15 @@ const routes = [
|
||||||
},
|
},
|
||||||
// 负荷管理
|
// 负荷管理
|
||||||
{
|
{
|
||||||
path:"/fhgl",
|
path: "/fhgl",
|
||||||
name:"fhgl",
|
name: "fhgl",
|
||||||
component:()=>import("@/views/Zhou/FHGL.vue")
|
component: () => import("@/views/Zhou/FHGL.vue"),
|
||||||
},
|
},
|
||||||
// 可调负荷
|
// 可调负荷
|
||||||
{
|
{
|
||||||
path:"/kdfh",
|
path: "/kdfh",
|
||||||
name:"kdfh",
|
name: "kdfh",
|
||||||
component:()=>import("@/views/Zhou/KDFH.vue")
|
component: () => import("@/views/Zhou/KDFH.vue"),
|
||||||
},
|
},
|
||||||
// 能效管理
|
// 能效管理
|
||||||
{
|
{
|
||||||
|
|
@ -42,6 +42,11 @@ const routes = [
|
||||||
name: "nyjcd",
|
name: "nyjcd",
|
||||||
component: () => import("../views/lll/NYJCD.vue"),
|
component: () => import("../views/lll/NYJCD.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "/nyjc",
|
||||||
|
name: "nyjc",
|
||||||
|
component: () => import("../views/lll/NYJC.vue"),
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,868 @@
|
||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="left">
|
||||||
|
<img src="../../assets/img/标题/能源监测.png" class="title" />
|
||||||
|
<div class="qcydl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>全厂用电量</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res == '年' ? 'active' : ''" @click="res = '年'"
|
||||||
|
>年</span
|
||||||
|
>
|
||||||
|
<span :class="res == '月' ? 'active' : ''" @click="res = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res == '日' ? 'active' : ''" @click="res = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>今日用电量</span><span>870</span><span>kWh</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="qcydl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="qcysl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>全厂用水量</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res1 == '年' ? 'active' : ''" @click="res1 = '年'"
|
||||||
|
>年</span
|
||||||
|
>
|
||||||
|
<span :class="res1 == '月' ? 'active' : ''" @click="res1 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res1 == '日' ? 'active' : ''" @click="res1 = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>今日用水量</span><span>870</span><span>t</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="qcysl"></div>
|
||||||
|
</div>
|
||||||
|
<div class="qcyml">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>全厂用煤量</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res2 == '年' ? 'active' : ''" @click="res2 = '年'"
|
||||||
|
>年</span
|
||||||
|
>
|
||||||
|
<span :class="res2 == '月' ? 'active' : ''" @click="res2 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res2 == '日' ? 'active' : ''" @click="res2 = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="tip">
|
||||||
|
<span>今日用煤量</span><span>870</span><span>t</span><span>↑</span>
|
||||||
|
</div>
|
||||||
|
<div id="qcyml"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="qcssdh">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>全厂实时电荷</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res3 == '年' ? 'active' : ''" @click="res3 = '年'"
|
||||||
|
>年</span
|
||||||
|
>
|
||||||
|
<span :class="res3 == '月' ? 'active' : ''" @click="res3 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res3 == '日' ? 'active' : ''" @click="res3 = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="qcssdh"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tpfl">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>碳排放量</p>
|
||||||
|
</div>
|
||||||
|
<div class="data">
|
||||||
|
<span :class="res4 == '年' ? 'active' : ''" @click="res4 = '年'"
|
||||||
|
>年</span
|
||||||
|
>
|
||||||
|
<span :class="res4 == '月' ? 'active' : ''" @click="res4 = '月'"
|
||||||
|
>月</span
|
||||||
|
>
|
||||||
|
<span :class="res4 == '日' ? 'active' : ''" @click="res4 = '日'"
|
||||||
|
>日</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div id="tpfl"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="scydpm">
|
||||||
|
<div class="imgBox">
|
||||||
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
|
<p>生产用电排名</p>
|
||||||
|
</div>
|
||||||
|
<div class="chartBox">
|
||||||
|
<div class="chartbox" v-for="item in list">
|
||||||
|
<div class="bigBox">
|
||||||
|
<div class="smallBox" :style="{ width: `${0.5 * item.value}px` }">
|
||||||
|
{{ item.name }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span style="color: #43fff1">{{ item.value }}kWh</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
res: "月",
|
||||||
|
res1: "月",
|
||||||
|
res2: "月",
|
||||||
|
res3: "月",
|
||||||
|
res4: "月",
|
||||||
|
option1: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "用电量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:kWh",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "用电量",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#019BEC",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#019BEC", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option2: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "用水量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
name: "用水量",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#43FFF4",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#43FFF4", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option3: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "用煤量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
name: "用煤量",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#09E83E",
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: "top", //在上方显示
|
||||||
|
value: "max",
|
||||||
|
textStyle: {
|
||||||
|
//数值样式
|
||||||
|
color: "#09E83E",
|
||||||
|
fontSize: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option4: {
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:kW",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "line",
|
||||||
|
symbol: "circle",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#21FF55",
|
||||||
|
lineStyle: {
|
||||||
|
width: 5, //折线宽度
|
||||||
|
color: "#21FF55", //折线颜色
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
option5: {
|
||||||
|
legend: {
|
||||||
|
data: [{ icon: "rect", name: "碳排放量" }],
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: "20px",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: ["1月", "2月", "3月", "4月", "5月"],
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
name: "单位:t",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
padding: 10,
|
||||||
|
},
|
||||||
|
min: 0,
|
||||||
|
max: 500,
|
||||||
|
interval: 100, // 指定刻度间隔
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
// top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
name: "碳排放量",
|
||||||
|
symbolSize: 15,
|
||||||
|
data: [280, 350, 120, 270, 290],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#11C3FF",
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: "top", //在上方显示
|
||||||
|
value: "max",
|
||||||
|
textStyle: {
|
||||||
|
//数值样式
|
||||||
|
color: "#11C3FF",
|
||||||
|
fontSize: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
name: "1号生产线",
|
||||||
|
value: "1520",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "3号生产线",
|
||||||
|
value: "927",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "2号生产线",
|
||||||
|
value: "628",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
defineEcharts(dom, option) {
|
||||||
|
var chartDom = document.getElementById(dom);
|
||||||
|
var myChart = this.$echarts.init(chartDom);
|
||||||
|
myChart.setOption(option);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.defineEcharts("qcydl", this.option1);
|
||||||
|
this.defineEcharts("qcysl", this.option2);
|
||||||
|
this.defineEcharts("qcyml", this.option3);
|
||||||
|
this.defineEcharts("qcssdh", this.option4);
|
||||||
|
this.defineEcharts("tpfl", this.option5);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped lang="less">
|
||||||
|
.box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 400px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 1237px;
|
||||||
|
height: 2500px;
|
||||||
|
margin-left: 61px;
|
||||||
|
background-image: url("../../assets/img/侧边.png");
|
||||||
|
padding-left: 59px;
|
||||||
|
padding-right: 45px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.title {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 60px;
|
||||||
|
}
|
||||||
|
.qcydl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #00a8ff;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #00a8ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#qcydl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qcysl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #43fff4;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #43fff4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#qcysl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.qcyml {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 56px;
|
||||||
|
.tip {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 110px;
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
span:nth-of-type(2) {
|
||||||
|
color: #09e83e;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
span:nth-of-type(4) {
|
||||||
|
color: #09e83e;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#qcyml {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 1237px;
|
||||||
|
height: 2500px;
|
||||||
|
margin-right: 61px;
|
||||||
|
background-image: url("../../assets/img/侧边.png");
|
||||||
|
padding-left: 59px;
|
||||||
|
padding-right: 45px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.qcssdh {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 150px;
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#qcssdh {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tpfl {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 150px;
|
||||||
|
|
||||||
|
.data {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
font-family: "DOUYU";
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
right: 0;
|
||||||
|
top: 120px;
|
||||||
|
z-index: 1;
|
||||||
|
span {
|
||||||
|
width: 122px;
|
||||||
|
height: 38px;
|
||||||
|
margin: 10px;
|
||||||
|
display: block;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%,
|
||||||
|
rgba(152, 207, 230, 0.3) 100%,
|
||||||
|
rgba(33, 76, 124, 0.3) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#tpfl {
|
||||||
|
width: 1155px;
|
||||||
|
height: 600px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.scydpm {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 150px;
|
||||||
|
|
||||||
|
.imgBox {
|
||||||
|
height: 93px;
|
||||||
|
width: 1156px;
|
||||||
|
p {
|
||||||
|
position: absolute;
|
||||||
|
color: #fff;
|
||||||
|
top: 20px;
|
||||||
|
left: 50px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: "MicrosoftYaHei";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chartBox {
|
||||||
|
width: 1155px;
|
||||||
|
margin-top: 50px;
|
||||||
|
.chartbox {
|
||||||
|
width: 100%;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 40px;
|
||||||
|
.bigBox {
|
||||||
|
width: 924px;
|
||||||
|
height: 96px;
|
||||||
|
background-color: #273546;
|
||||||
|
.smallBox {
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 96px;
|
||||||
|
line-height: 96px;
|
||||||
|
text-indent: 20px;
|
||||||
|
background: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(1, 191, 249, 1) 20%,
|
||||||
|
rgba(68, 161, 201, 1) 100%,
|
||||||
|
rgba(42, 196, 243, 1) 20%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
span:nth-of-type(1) {
|
||||||
|
color: #43fff1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -353,7 +353,7 @@ export default {
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 500px;
|
padding-top: 400px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -39,7 +39,7 @@ export default {
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 500px;
|
padding-top: 400px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
||||||
|
|
@ -494,7 +494,7 @@ export default {
|
||||||
.box {
|
.box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 500px;
|
padding-top: 400px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue