From 60616fcb0e640e6b989ac37779b726082ece9f03 Mon Sep 17 00:00:00 2001 From: lb Date: Sun, 2 Jul 2023 10:55:10 +0800 Subject: [PATCH] update energy --- src/assets/Icon/RightChart1Icon2.png | Bin 162 -> 0 bytes src/components/Container.jsx | 4 + .../EnergyCostChart/index.module.css | 23 ++- src/components/RightBar/EnergyCost/index.jsx | 32 ++-- .../RightBar/EnergyCost/index.module.less | 13 +- .../substitutionCharts/Chart1/index.jsx | 157 +++++++++--------- src/pages/global.less | 12 ++ 7 files changed, 133 insertions(+), 108 deletions(-) delete mode 100644 src/assets/Icon/RightChart1Icon2.png diff --git a/src/assets/Icon/RightChart1Icon2.png b/src/assets/Icon/RightChart1Icon2.png deleted file mode 100644 index fbb3b08518abf61465bb4258becb3e58a0e91a07..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 162 zcmeAS@N?(olHy`uVBq!ia0vp^&Oj{5$P6R{1Q{0sDaPU;cPGZ1Cw1z99L@rd$YKTt zZeb8+WSBKa0w~B9;1l8sq>GD-?arl^0$EHYL4Lsu|Dz`=Z3XhwJzX3_D&{07G&KJg z_`q)cn!!bof6meW43m#eckmZ86aOIaiCu<);qgpYUbmu&6M { let icon = useRef(null); @@ -15,6 +16,9 @@ const Container = (props) => { case 'good': // 良品率 icon.current = IconGood; break; + case 'charger': + icon.current = IconCharger; + break; } return ( diff --git a/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css b/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css index 1b915ba..9cbe438 100644 --- a/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css +++ b/src/components/RightBar/EnergyCost/EnergyCostChart/index.module.css @@ -1,17 +1,16 @@ -.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 +18,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 +36,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 +52,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; } diff --git a/src/components/RightBar/EnergyCost/index.jsx b/src/components/RightBar/EnergyCost/index.jsx index 47cfa78..74276c7 100644 --- a/src/components/RightBar/EnergyCost/index.jsx +++ b/src/components/RightBar/EnergyCost/index.jsx @@ -6,22 +6,26 @@ import EnergyCostChart from './EnergyCostChart'; function EnergyCost(props) { return ( -
-
- 余 热 发 电 - 922kwh -
-
-
水 耗 量 : 32Km³
-
天 然 气 I : 83m³
-
电 耗 量 : 52Km³
-
天 然 气 II: 32m³
+
+
+
+ 余 热 发 电 + 922kwh +
+
+
水 耗 量 : 32Km³
+
天 然 气 I : 83m³
+
电 耗 量 : 52Km³
+
天 然 气 II: 32m³
+
+ + + +
- - - - ); } diff --git a/src/components/RightBar/EnergyCost/index.module.less b/src/components/RightBar/EnergyCost/index.module.less index c2172cc..a4c998c 100644 --- a/src/components/RightBar/EnergyCost/index.module.less +++ b/src/components/RightBar/EnergyCost/index.module.less @@ -1,9 +1,16 @@ .energyCost { - background: #b730305c; + background: url(../../../assets/energy.png) no-repeat; + background-size: 100% 100%; + width: 626px; } .cost__info { + margin-top: 8px; margin-bottom: 12px; + + div { + flex-grow: 1; + } } .info__item { @@ -19,6 +26,10 @@ user-select: none; } +.hAuto { + height: auto; +} + .info__item_groups { margin-left: 8px; display: grid; diff --git a/src/components/RightBar/substitutionCharts/Chart1/index.jsx b/src/components/RightBar/substitutionCharts/Chart1/index.jsx index d3a5642..4a80882 100644 --- a/src/components/RightBar/substitutionCharts/Chart1/index.jsx +++ b/src/components/RightBar/substitutionCharts/Chart1/index.jsx @@ -1,100 +1,95 @@ - import React, { useEffect } from 'react'; import styled from 'styled-components'; -import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png' +// import RightChart1Icon2 from '../../../../assets/Icon/RightChart1Icon2.png' -import Chart1 from './Chart1.jsx' - -import './index.less' +import Chart1 from './Chart1.jsx'; +import './index.less'; //#52FFF8 - function Index(props) { + const switchColor = (index) => { + switch (index) { + case 1: + return '#52FFF8'; + case 2: + return '#49B2FF'; + case 3: + return '#FFB94D'; + default: + return '#fff'; + } + }; + let Border = styled.div` + width: 74px; + height: 24px; + margin-top: 50px; + overflow: hidden; + `; - const switchColor = (index) => { + // background: url(${RightChart1Icon2}); + let Ion2 = styled.div` + width: 100%; + height: 100%; + float: left; + background-repeat: no-repeat; + transform: translatex(-82px); + filter: drop-shadow(82px 1px ${switchColor(props.index)}); + `; - switch (index) { - case 1: return '#52FFF8'; - case 2: return '#49B2FF'; - case 3: return '#FFB94D'; - default: return '#fff' - } - } + //最大值75 + let Stuff = styled.div` + float: left; + margin-top: -17.5px; + transform: translatex(3px); + width: ${58}%; + height: 12px; + background: linear-gradient(to right, #051226, ${switchColor(props.index)}); + `; + //中间三条gap的位置 + let Gap1 = styled.div` + // float:left; + margin-top: 6px; + transform: translatex(15px); + position: absolute; + width: 2px; + height: 13px; + background-color: #051226; + `; - let Border = styled.div` - width: 74px; - height: 24px; - margin-top:50px; - overflow: hidden; - ` + const Gap2 = styled(Gap1)` + transform: translatex(29px); + `; + const Gap3 = styled(Gap1)` + transform: translatex(45px); + `; - - let Ion2 = styled.div` - width: 100%; - height: 100%; - float:left; - background: url(${RightChart1Icon2}); - background-repeat: no-repeat; - transform: translatex(-82px); - filter:drop-shadow(82px 1px ${switchColor(props.index)}); - ` - - //最大值75 - let Stuff = styled.div` - float:left; - margin-top:-17.5px; - transform: translatex(3px); - width:${58}%; - height: 12px; - background: linear-gradient(to right,#051226,${switchColor(props.index)}) - ` - - - //中间三条gap的位置 - - let Gap1 = styled.div` - // float:left; - margin-top:6px; - transform: translatex(15px); - position:absolute; - width: 2px; - height:13px; - background-color: #051226; - ` - - const Gap2 = styled(Gap1)` - transform: translatex(29px); - `; - - const Gap3 = styled(Gap1)` - transform: translatex(45px); - `; - - - return ( - -
-
- -
-
-

{props.name}

- - - - - - - -
-
- ); + return ( +
+
+ +
+
+

{props.name}

+ + + + + + + +
+
+ ); } export default Index; diff --git a/src/pages/global.less b/src/pages/global.less index e690b77..3bb4efc 100644 --- a/src/pages/global.less +++ b/src/pages/global.less @@ -14,6 +14,10 @@ justify-content: start; } +.justify-center { + justify-content: center; +} + .justify-start { justify-content: center; } @@ -22,6 +26,10 @@ align-items: center; } +.self-stretch { + align-self: stretch; +} + .w-full { width: 100%; } @@ -33,3 +41,7 @@ .h-half { height: 50%; } + +.h-auto { + height: auto; +}