1071 lines
25 KiB
Vue
1071 lines
25 KiB
Vue
<template>
|
||
<div class="box">
|
||
<div class="imgLeft">
|
||
<div
|
||
@click="goOne('1号生产线')"
|
||
:class="click1 == '1号生产线' ? 'active' : ''"
|
||
>
|
||
1号生产线
|
||
</div>
|
||
<div
|
||
@click="goOne('2号生产线')"
|
||
:class="click1 == '2号生产线' ? 'active' : ''"
|
||
>
|
||
2号生产线
|
||
</div>
|
||
<div
|
||
@click="goOne('3号生产线')"
|
||
:class="click1 == '3号生产线' ? 'active' : ''"
|
||
>
|
||
3号生产线
|
||
</div>
|
||
<div @click="goOne('配电室')" :class="click1 == '配电室' ? 'active' : ''">
|
||
配电室
|
||
</div>
|
||
</div>
|
||
|
||
<div class="imgRight">
|
||
<div
|
||
@click="goTwo('破碎系统')"
|
||
:class="click2 == '破碎系统' ? 'active' : ''"
|
||
>
|
||
破碎系统
|
||
</div>
|
||
<div
|
||
@click="goTwo('生料系统')"
|
||
:class="click2 == '生料系统' ? 'active' : ''"
|
||
>
|
||
生料系统
|
||
</div>
|
||
<div
|
||
@click="goTwo('回转窑系统')"
|
||
:class="click2 == '回转窑系统' ? 'active' : ''"
|
||
>
|
||
回转窑系统
|
||
</div>
|
||
<div
|
||
@click="goTwo('煤磨系统')"
|
||
:class="click2 == '煤磨系统' ? 'active' : ''"
|
||
>
|
||
煤磨系统
|
||
</div>
|
||
<div
|
||
@click="goTwo('水泥磨系统')"
|
||
:class="click2 == '水泥磨系统' ? 'active' : ''"
|
||
>
|
||
水泥磨系统
|
||
</div>
|
||
</div>
|
||
|
||
<div class="left" v-show="flag">
|
||
<img src="../../assets/img/标题/能源监测-电.png" class="title" />
|
||
<div class="qcssdh">
|
||
<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 id="qcssdh"></div>
|
||
</div>
|
||
<div class="qcydl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>全厂用电量</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div class="chartbox" v-for="item in list">
|
||
<span>{{ item.name }}</span>
|
||
<div class="bigBox">
|
||
<div
|
||
class="smallBox"
|
||
:style="{ width: `${35 * item.value}px` }"
|
||
></div>
|
||
</div>
|
||
<span>{{ item.value }}kWh</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="zjtpt">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>总降拓扑图</p>
|
||
</div>
|
||
<div class="imgBox1">
|
||
<el-image
|
||
v-for="item in arr"
|
||
:src="item.url"
|
||
:preview-src-list="item.srcList"
|
||
>
|
||
</el-image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right" v-show="flag">
|
||
<div class="yrfd">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>余热发电</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="yrfd"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ljfdl">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>垃圾发电量</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div id="ljfdl"></div>
|
||
</div>
|
||
</div>
|
||
<div class="qcsbydpm">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>全厂设备用电排名</p>
|
||
</div>
|
||
<div class="chartBox">
|
||
<div class="chartbox" v-for="item in list1">
|
||
<span>{{ item.name }}</span>
|
||
<div class="bigBox">
|
||
<div
|
||
class="smallBox"
|
||
:style="{ width: `${40 * item.value}px` }"
|
||
></div>
|
||
</div>
|
||
<span>{{ item.value }}kWh</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="area1">
|
||
<router-view />
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { RouterView } from "vue-router";
|
||
import * as echarts from "echarts";
|
||
import Viewer from "viewerjs";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "月",
|
||
click1: "",
|
||
click2: "",
|
||
flag: false,
|
||
option1: {
|
||
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: 20,
|
||
data: [200, 300, 500, 400, 334],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#00FF00",
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#21FF55", //折线颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
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: "单位: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",
|
||
name: "垃圾发电量",
|
||
symbolSize: 15,
|
||
data: [200, 300, 500, 400, 334],
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#43FFF4",
|
||
lineStyle: {
|
||
width: 5,
|
||
color: "#43FFF4", //折线颜色
|
||
},
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
list: [
|
||
{
|
||
name: "1号生产线",
|
||
value: "15.20",
|
||
},
|
||
{
|
||
name: "2号生产线",
|
||
value: "6.21",
|
||
},
|
||
{
|
||
name: "3号生产线",
|
||
value: "6.21",
|
||
},
|
||
{
|
||
name: "生活办公区",
|
||
value: "6.52",
|
||
},
|
||
],
|
||
list1: [
|
||
{
|
||
name: "回转窑",
|
||
value: "15.20",
|
||
},
|
||
{
|
||
name: "熟料收尘",
|
||
value: "6.21",
|
||
},
|
||
{
|
||
name: "篦冷机",
|
||
value: "6.21",
|
||
},
|
||
{
|
||
name: "生料收尘",
|
||
value: "6.52",
|
||
},
|
||
{
|
||
name: "生料磨",
|
||
value: "4.57",
|
||
},
|
||
{
|
||
name: "预热器",
|
||
value: "4.27",
|
||
},
|
||
{
|
||
name: "配电室",
|
||
value: "3.27",
|
||
},
|
||
],
|
||
arr: [
|
||
{
|
||
url: require("../../assets/tpt/总降电力室.png"),
|
||
srcList: [require("../../assets/tpt/总降电力室.png")],
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
initViewer() {
|
||
this.viewer = new Viewer(this.$el, {
|
||
inline: false,
|
||
button: true,
|
||
navbar: true,
|
||
title: false,
|
||
toolbar: true,
|
||
tooltip: true,
|
||
movable: false,
|
||
zoomable: true,
|
||
rotatable: false,
|
||
scalable: true,
|
||
transition: true,
|
||
fullscreen: true,
|
||
keyboard: true,
|
||
url(image) {
|
||
console.log(image.src);
|
||
return image.src;
|
||
},
|
||
ready() {
|
||
console.log("Viewer is ready");
|
||
},
|
||
});
|
||
},
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
sendMessageToCSharp(name) {
|
||
window.vuplex.postMessage({
|
||
type: "Tog",
|
||
message: `${name}_true`,
|
||
});
|
||
},
|
||
goOne(a) {
|
||
this.click2 = "";
|
||
this.click1 = a;
|
||
this.sendMessageToCSharp(this.click1);
|
||
if (this.click1 == "配电室") {
|
||
this.$router.replace(
|
||
"/area/nyjcd/pds",
|
||
() => {},
|
||
() => {}
|
||
);
|
||
} else {
|
||
this.$router.replace(
|
||
`/area/nyjcd/scx1?type=${this.click1}`,
|
||
() => {},
|
||
() => {}
|
||
);
|
||
}
|
||
},
|
||
goTwo(a) {
|
||
this.click1 = "";
|
||
this.click2 = a;
|
||
this.sendMessageToCSharp(this.click2);
|
||
this.$router.replace(
|
||
`/area/nyjcd/scx1?type=${this.click2}`,
|
||
() => {},
|
||
() => {}
|
||
);
|
||
},
|
||
//余热发电 3d
|
||
yrfd() {
|
||
const offsetX = 24; //bar宽
|
||
const offsetY = 8; //倾斜角度
|
||
// 绘制左侧面
|
||
const CubeLeft = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
// 会canvas的应该都能看得懂，shape是从custom传入的
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
// console.log(shape);
|
||
const c0 = [shape.x, shape.y];
|
||
const c1 = [shape.x - offsetX, shape.y - offsetY];
|
||
const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
|
||
const c3 = [xAxisPoint[0], xAxisPoint[1]];
|
||
ctx
|
||
.moveTo(c0[0], c0[1])
|
||
.lineTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制右侧面
|
||
const CubeRight = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const xAxisPoint = shape.xAxisPoint;
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [xAxisPoint[0], xAxisPoint[1]];
|
||
const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
|
||
const c4 = [shape.x + offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 绘制顶面
|
||
const CubeTop = this.$echarts.graphic.extendShape({
|
||
shape: {
|
||
x: 0,
|
||
y: 0,
|
||
},
|
||
buildPath: function (ctx, shape) {
|
||
const c1 = [shape.x, shape.y];
|
||
const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
|
||
// const c3 = [shape.x, shape.y - offsetX];
|
||
const c3 = [shape.x, shape.y - offsetY * 2];
|
||
const c4 = [shape.x - offsetX, shape.y - offsetY];
|
||
ctx
|
||
.moveTo(c1[0], c1[1])
|
||
.lineTo(c2[0], c2[1])
|
||
.lineTo(c3[0], c3[1])
|
||
.lineTo(c4[0], c4[1])
|
||
.closePath();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
this.$echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
this.$echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
this.$echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
let xAxisData = ["1月", "2月", "3月", "4月", "5月"];
|
||
let seriesData = [100, 200, 300, 400, 300];
|
||
//拿到最大值
|
||
const maxValue = Math.max(...seriesData);
|
||
|
||
let colorArr = [
|
||
["#04E886"],
|
||
["#0AE841", "rgba(56,231,197,1)"],
|
||
["#02C25F", "rgba(11,194,121,1)"],
|
||
];
|
||
let option = {
|
||
// legend: {
|
||
// // data: [
|
||
// // {
|
||
// // icon: "rect",
|
||
// // name: "余热发电",
|
||
// // },
|
||
// // ],
|
||
// textStyle: {
|
||
// color: "#fff",
|
||
// fontSize: "20px",
|
||
// },
|
||
// },
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
type: "shadow",
|
||
},
|
||
formatter: function (params, ticket, callback) {
|
||
const item = params[1];
|
||
return item.name + " : " + item.value;
|
||
},
|
||
},
|
||
grid: {
|
||
// 让图表占满容器
|
||
left: "5%",
|
||
right: "5%",
|
||
bottom: "0%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xAxisData,
|
||
axisLine: {
|
||
show: true,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
fontSize: 20,
|
||
color: "#fff",
|
||
margin: 15,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
name: "单位:t",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
},
|
||
// boundaryGap: ['20%', '20%'],
|
||
},
|
||
series: [
|
||
{
|
||
type: "custom",
|
||
name: "余热发电",
|
||
renderItem: (params, api) => {
|
||
const location = api.coord([api.value(0), api.value(1)]);
|
||
return {
|
||
type: "group",
|
||
children: [
|
||
{
|
||
type: "CubeLeft",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[1][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[1][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeRight",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[2][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[2][1],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
type: "CubeTop",
|
||
shape: {
|
||
api,
|
||
xValue: api.value(0),
|
||
yValue: api.value(1),
|
||
x: location[0],
|
||
y: location[1],
|
||
xAxisPoint: api.coord([api.value(0), 0]),
|
||
},
|
||
style: {
|
||
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: colorArr[0][0],
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: colorArr[0][0],
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: seriesData,
|
||
},
|
||
{
|
||
type: "bar",
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "top",
|
||
formatter: (e) => {
|
||
return e.value === maxValue ? e.value : "";
|
||
},
|
||
fontSize: 20,
|
||
color: "#09E83E",
|
||
offset: [0, -15],
|
||
},
|
||
},
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
tooltip: {},
|
||
data: seriesData,
|
||
},
|
||
],
|
||
};
|
||
this.defineEcharts("yrfd", option);
|
||
},
|
||
},
|
||
created() {
|
||
// if (window.vuplex) {
|
||
// addMessageListener();
|
||
// } else {
|
||
// window.addEventListener("vuplexready", addEventListener);
|
||
// }
|
||
// function addMessageListener() {
|
||
// window.vuplex.addEventListener("message", function (event) {
|
||
// let json = event.data;
|
||
// console.log("JSON received" + json);
|
||
// });
|
||
// }
|
||
},
|
||
watch: {
|
||
// 监听,当路由发生变化的时候执行
|
||
$route: {
|
||
handler(to, from) {
|
||
if (to.path == "/area/nyjcd") {
|
||
this.flag = true;
|
||
} else {
|
||
this.flag = false;
|
||
}
|
||
},
|
||
deep: true, // 深度观察监听
|
||
immediate: true, // 第一次初始化渲染就可以监听到
|
||
},
|
||
},
|
||
mounted() {
|
||
let dom = document.querySelector(".area1");
|
||
dom.style.pointerEvents = "none";
|
||
this.initViewer();
|
||
this.defineEcharts("qcssdh", this.option1);
|
||
// this.defineEcharts("yrfd", this.option2);
|
||
this.yrfd();
|
||
this.defineEcharts("ljfdl", this.option3);
|
||
},
|
||
beforeDestroy() {
|
||
if (this.viewer) {
|
||
this.viewer.destroy();
|
||
}
|
||
},
|
||
components: { RouterView },
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.area1 {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 400px;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.box {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding-top: 400px;
|
||
box-sizing: border-box;
|
||
background-color: transparent;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imgLeft {
|
||
z-index: 100;
|
||
position: absolute;
|
||
left: 1300px;
|
||
top: 1500px;
|
||
|
||
div {
|
||
width: 457px;
|
||
height: 140px;
|
||
text-align: center;
|
||
line-height: 140px;
|
||
color: #fff;
|
||
font-size: 50px;
|
||
font-weight: bold;
|
||
font-family: "FZZCHJW-1";
|
||
background-image: url("../../assets/nyjc/图层 11.png");
|
||
margin: 37px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url("../../assets/nyjc/图层 2.png");
|
||
}
|
||
}
|
||
|
||
.imgRight {
|
||
z-index: 100;
|
||
position: absolute;
|
||
right: 1300px;
|
||
top: 1300px;
|
||
|
||
div {
|
||
width: 457px;
|
||
height: 140px;
|
||
text-align: center;
|
||
line-height: 140px;
|
||
color: #fff;
|
||
font-size: 50px;
|
||
font-weight: bold;
|
||
background-image: url("../../assets/nyjc/组 277.png");
|
||
font-family: "FZZCHJW-1";
|
||
margin: 37px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url("../../assets/nyjc/组 276.png");
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.qcssdh {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.qcydl {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.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: 1000%;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
align-items: center;
|
||
display: flex;
|
||
margin-top: 100px;
|
||
|
||
.bigBox {
|
||
width: 661px;
|
||
height: 65px;
|
||
background-color: #273546;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 65px;
|
||
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) {
|
||
width: 231px;
|
||
}
|
||
|
||
span:nth-of-type(2) {
|
||
color: #10ff3c;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.zjtpt {
|
||
position: relative;
|
||
margin-top: 56px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.imgBox1 {
|
||
margin-top: 50px;
|
||
width: 1156px;
|
||
height: 500px;
|
||
pointer-events: all;
|
||
cursor: pointer;
|
||
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
width: 1237px;
|
||
height: 2500px;
|
||
margin-right: 61px;
|
||
background-image: url("../../assets/img/侧边.png");
|
||
padding-left: 59px;
|
||
padding-right: 45px;
|
||
box-sizing: border-box;
|
||
|
||
.yrfd {
|
||
position: relative;
|
||
margin-top: 130px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 50px;
|
||
|
||
#yrfd {
|
||
width: 1156px;
|
||
height: 600px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.ljfdl {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
|
||
.imgBox {
|
||
height: 93px;
|
||
width: 1156px;
|
||
|
||
p {
|
||
position: absolute;
|
||
color: #fff;
|
||
top: 20px;
|
||
left: 50px;
|
||
font-size: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
}
|
||
}
|
||
|
||
.chartBox {
|
||
margin-top: 50px;
|
||
|
||
#ljfdl {
|
||
width: 1156px;
|
||
height: 600px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qcsbydpm {
|
||
position: relative;
|
||
margin-top: 50px;
|
||
|
||
.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: 661px;
|
||
height: 26px;
|
||
background-color: #273546;
|
||
|
||
.smallBox {
|
||
width: 100px;
|
||
height: 26px;
|
||
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) {
|
||
width: 231px;
|
||
}
|
||
|
||
span:nth-of-type(2) {
|
||
color: #10ff3c;
|
||
margin-left: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|