1043 lines
24 KiB
Vue
1043 lines
24 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>
|
||
<tpt ref="tpt" :url="url"></tpt>
|
||
<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>
|
||
<tab :list="arr" :defaultValue="res" v-model="selectValue"></tab>
|
||
|
||
<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">
|
||
<img :src="url" alt="" srcset="" @click="$refs.tpt.open()" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right" v-show="flag">
|
||
<div class="yrfd">
|
||
<div class="imgBox">
|
||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||
<p>余热发电</p>
|
||
<img
|
||
src="../../assets/nyjc/余热发电.png"
|
||
alt=""
|
||
class="img1"
|
||
@click="
|
||
sendMessageToCSharp({
|
||
type: 'video',
|
||
message: '余热发电动画',
|
||
})
|
||
"
|
||
/>
|
||
</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>
|
||
<img
|
||
src="../../assets/nyjc/垃圾发电.png"
|
||
alt=""
|
||
class="img1"
|
||
@click="
|
||
sendMessageToCSharp({
|
||
type: 'video',
|
||
message: '垃圾发电动画',
|
||
})
|
||
"
|
||
/>
|
||
</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 tpt from "../../components/tpt.vue";
|
||
import tab from "../../components/tab.vue";
|
||
export default {
|
||
data() {
|
||
return {
|
||
res: "月",
|
||
arr: ["年", "月", "日"],
|
||
click1: "",
|
||
click2: "",
|
||
selectValue: "月",
|
||
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",
|
||
},
|
||
],
|
||
url: require("../../assets/tpt/总降电力室.png"),
|
||
};
|
||
},
|
||
methods: {
|
||
defineEcharts(dom, option) {
|
||
var chartDom = document.getElementById(dom);
|
||
var myChart = this.$echarts.init(chartDom);
|
||
myChart.setOption(option);
|
||
},
|
||
sendMessageToCSharp(obj) {
|
||
window.vuplex.postMessage(obj);
|
||
},
|
||
goOne(a) {
|
||
this.click2 = "";
|
||
this.click1 = a;
|
||
this.sendMessageToCSharp({
|
||
type: "Tog",
|
||
message: `${this.click1}_true`,
|
||
});
|
||
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({
|
||
type: "Tog",
|
||
message: `${this.click2}_true`,
|
||
});
|
||
this.$router.replace(
|
||
`/area/nyjcd/scx1?type=${this.click2}`,
|
||
() => {},
|
||
() => {}
|
||
);
|
||
},
|
||
//余热发电 3d
|
||
yrfd() {
|
||
let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
|
||
let yaxisData = [90, 80, 100, 70, 65];
|
||
|
||
const offsetX = 20;
|
||
const offsetY = 10;
|
||
// 绘制左侧面
|
||
const CubeLeft = 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 = 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 = 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 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();
|
||
},
|
||
});
|
||
// 注册三个面图形
|
||
echarts.graphic.registerShape("CubeLeft", CubeLeft);
|
||
echarts.graphic.registerShape("CubeRight", CubeRight);
|
||
echarts.graphic.registerShape("CubeTop", CubeTop);
|
||
|
||
const option = {
|
||
legend: {
|
||
data: [
|
||
{
|
||
name: "余热发电量",
|
||
textStyle: {
|
||
color: "white",
|
||
fontSize: 20,
|
||
},
|
||
itemStyle: {
|
||
color: "#0DFC4A", // 图例图标的颜色
|
||
},
|
||
},
|
||
],
|
||
},
|
||
// tooltip: {
|
||
// trigger: "axis",
|
||
// axisPointer: {
|
||
// type: "shadow",
|
||
// },
|
||
// // formatter: function (params) {
|
||
// // const item = params[1]
|
||
// // return item.name + ' : ' + item.value
|
||
// // }
|
||
// },
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
data: xaxisData,
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
axisTick: {
|
||
show: true,
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
splitArea: false,
|
||
name: "单位:kWh",
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
padding: 10,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: "#CEDDF2",
|
||
},
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2A353F",
|
||
type: "dashed",
|
||
},
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
},
|
||
interval: 0, //代表显示所有x轴标签显示
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
name: "余热发电量",
|
||
type: "custom",
|
||
markPoint: {
|
||
data: [
|
||
{
|
||
type: "max",
|
||
name: "Max",
|
||
symbolOffset: [-20, 0],
|
||
itemStyle: {
|
||
color: "transparent", // 标注点颜色
|
||
},
|
||
// label 用于设置标注点上的文本标签样式
|
||
label: {
|
||
color: "#0BE73B", // 文本颜色
|
||
fontSize: 25,
|
||
},
|
||
},
|
||
],
|
||
},
|
||
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: "#09E63A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#39E7C7",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#00C35A",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#09C379",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
{
|
||
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: "#05E6A5",
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "#12DE63",
|
||
},
|
||
]),
|
||
},
|
||
},
|
||
],
|
||
};
|
||
},
|
||
data: yaxisData,
|
||
},
|
||
],
|
||
};
|
||
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.defineEcharts("qcssdh", this.option1);
|
||
// this.defineEcharts("yrfd", this.option2);
|
||
this.yrfd();
|
||
this.defineEcharts("ljfdl", this.option3);
|
||
},
|
||
|
||
components: { RouterView, tpt, tab },
|
||
};
|
||
</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;
|
||
background-image: url(../../assets/img/左遮罩.png),
|
||
url(../../assets/img/右遮罩.png);
|
||
justify-content: space-between;
|
||
position: relative;
|
||
pointer-events: all;
|
||
}
|
||
|
||
.imgLeft {
|
||
z-index: 100;
|
||
position: absolute;
|
||
left: 1300px;
|
||
top: 1500px;
|
||
|
||
div {
|
||
width: 540px;
|
||
height: 147px;
|
||
text-align: center;
|
||
line-height: 147px;
|
||
color: #fff;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
padding-left: 88px;
|
||
box-sizing: border-box;
|
||
font-family: "FZZCHJW-1";
|
||
background-image: url("../../assets/nyjc/左默认.png");
|
||
margin: 37px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url("../../assets/nyjc/左选中.png");
|
||
}
|
||
}
|
||
|
||
.imgRight {
|
||
z-index: 100;
|
||
position: absolute;
|
||
right: 1300px;
|
||
top: 1300px;
|
||
|
||
div {
|
||
width: 550px;
|
||
height: 147px;
|
||
text-align: center;
|
||
line-height: 147px;
|
||
color: #fff;
|
||
font-size: 40px;
|
||
font-weight: bold;
|
||
padding-right: 108px;
|
||
box-sizing: border-box;
|
||
background-image: url("../../assets/nyjc/右默认.png");
|
||
background-size: cover;
|
||
font-family: "FZZCHJW-1";
|
||
margin: 37px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active {
|
||
background-image: url("../../assets/nyjc/右选中.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;
|
||
position: fixed;
|
||
left: 0;
|
||
|
||
.title {
|
||
margin-top: 15px;
|
||
margin-left: 60px;
|
||
}
|
||
|
||
.qcssdh {
|
||
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";
|
||
}
|
||
}
|
||
|
||
#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: 100%;
|
||
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";
|
||
}
|
||
.img1 {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 20px;
|
||
left: 250px;
|
||
}
|
||
}
|
||
|
||
.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";
|
||
}
|
||
.img1 {
|
||
position: absolute;
|
||
cursor: pointer;
|
||
top: 20px;
|
||
left: 250px;
|
||
}
|
||
}
|
||
|
||
.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>
|