update rightbar

This commit is contained in:
lb 2023-07-02 10:28:47 +08:00
bovenliggende ba472e6574
commit 54b3cce498
6 gewijzigde bestanden met toevoegingen van 52 en 51 verwijderingen

Bestand weergeven

@ -1,4 +1,8 @@
import cls from './index.module.less';
import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
const EnergyCostChart = (props) => {
const options = {

Bestand weergeven

@ -1,4 +1,9 @@
import cls from './index.module.less';
import cls from './index.module.css';
import { randomInt } from '../../../../utils';
import * as echarts from 'echarts';
import { Switch, Radio } from 'antd';
import ReactECharts from 'echarts-for-react';
const SmokeTrendChart = (props) => {
const options = {

Bestand weergeven

@ -1,17 +1,17 @@
.EnergyCostChart {
.energyCostChart {
margin-top: 12px;
height: 1px;
flex: 1;
padding-top: 8px;
background: #ae27276a;
}
.EnergyCostChart .titleBar {
.energyCostChart .titleBar {
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.EnergyCostChart .titleBar h2 {
.energyCostChart .titleBar h2 {
margin: 0;
font-size: 18px;
line-height: 32px;
@ -19,17 +19,17 @@
color: #52fff8;
}
.EnergyCostChart .titleBar .legend {
.energyCostChart .titleBar .legend {
display: flex;
align-items: center;
}
.EnergyCostChart .titleBar .legend * {
.energyCostChart .titleBar .legend * {
font-size: 14px;
line-height: 14px;
color: #dff1fe;
}
.EnergyCostChart .titleBar .legend ul {
.energyCostChart .titleBar .legend ul {
display: flex;
margin: 0;
margin-left: 8px;
@ -37,12 +37,12 @@
list-style: none;
align-items: center;
}
.EnergyCostChart .titleBar .legend ul li {
.energyCostChart .titleBar .legend ul li {
position: relative;
margin: 4px;
padding-left: 16px;
}
.EnergyCostChart .titleBar .legend ul li::before {
.energyCostChart .titleBar .legend ul li::before {
content: '';
position: absolute;
left: 2px;
@ -53,15 +53,15 @@
border-radius: 2px;
}
.EnergyCostChart .titleBar .legend ul li:first-child::before {
.energyCostChart .titleBar .legend ul li:first-child::before {
background-color: #ffd160;
}
.EnergyCostChart .titleBar .legend ul li:nth-child(2)::before {
.energyCostChart .titleBar .legend ul li:nth-child(2)::before {
background-color: #12fff5;
}
.EnergyCostChart .titleBar .legend ul li:nth-child(3)::before {
.energyCostChart .titleBar .legend ul li:nth-child(3)::before {
background-color: #2760ff;
}

Bestand weergeven

@ -1,27 +1,27 @@
import React from 'react'
import React from 'react';
import Chart1 from './Chart1'
import Chart2 from './Chart2'
import Chart3 from './Chart3'
import Chart1 from './Chart1';
import Chart2 from './Chart2';
import Chart3 from './Chart3';
// import RightChart2 from './Chart2'
import SmokeHandle from './SmokeHandle';
import EnergyCost from './EnergyCost';
//
import RightChart2 from './Chart2'
// import RightChart2 from './Chart2'
// import RightChart3 from './Chart3'
import RightChart3 from './Chart3'
import './index.less'
import cls from './index.module.less';
export default function index() {
return (
<div className='RightBorder'>
<Chart1 />
<Chart2 />
<Chart3 />
</div>
)
return (
<div className={cls.rightBar}>
<div className={cls.demoFloat}>
<EnergyCost />
<SmokeHandle />
</div>
<Chart1 />
<Chart2 />
<Chart3 />
</div>
);
}

Bestand weergeven

@ -1,18 +0,0 @@
.RightBorder {
width: 625px;
height: 966px;
margin-left: 24px;
display: flex;
flex-direction:column;
justify-content: flex-start;
.RightBorder1 {
width: 440px;
height: 340px;
}
.RightBorder2 {
width: 850px;
height: 305px;
margin-left: 25px;
}
}

Bestand weergeven

@ -0,0 +1,10 @@
.rightBar {
}
.demoFloat {
position: fixed;
top: 100px;
right: 600px;
background: #77777737;
z-index: 10000;
}