This commit is contained in:
Melete 2023-11-04 12:52:19 +08:00
parent 73d18b8eea
commit 775fe04413
5 changed files with 38 additions and 7 deletions

BIN
src/assets/ditu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 MiB

View File

@ -18,6 +18,7 @@
.CenterData { .CenterData {
position: absolute; position: absolute;
background: #fff4;
width: 2472px; width: 2472px;
height: 240px; height: 240px;
z-index: 2; z-index: 2;
@ -25,6 +26,7 @@
.V3DBG { .V3DBG {
position: absolute; position: absolute;
background: #f004;
width: 2472px; width: 2472px;
height: 640px; height: 640px;
z-index: 1; z-index: 1;
@ -32,10 +34,11 @@
} }
.V3DBorder { .V3DBorder {
background: #00f3;
width: 100%; width: 100%;
height: 486px; height: 486px;
margin-top: 160px; margin-top: 160px;
background: url('../assets/3D.png'); // background: url('../assets/3D.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -48,3 +51,16 @@
} }
} }
} }
.bgDitu {
position: fixed;
z-index: -1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: #f003; */
background: url(../assets/ditu.png) no-repeat;
background-position: -800px 0;
background-size: 100%;
}

View File

@ -36,6 +36,7 @@ export default function Home({ active }) {
return ( return (
<div className="Main"> <div className="Main">
{active != '总览' && <div className="bgDitu"></div>}
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
<div <div
className="left-side" className="left-side"

View File

@ -15,6 +15,7 @@ function EnergyAnalysis(props) {
console.log('[rendering...] 加载 能耗分析页面'); console.log('[rendering...] 加载 能耗分析页面');
return ( return (
<div className={cls.grid}> <div className={cls.grid}>
<div className={cls.bgDitu}></div>
<div className={cls.vgrid + ' col-1'}> <div className={cls.vgrid + ' col-1'}>
<SmokeHandle /> <SmokeHandle />
<Oxygen /> <Oxygen />

View File

@ -3,8 +3,22 @@
justify-content: center; justify-content: center;
gap: 24px; gap: 24px;
grid-template-columns: 900px 900px 16px 900px 900px; grid-template-columns: 900px 900px 16px 900px 900px;
/* grid-template-rows: 128px 389px 389px; */ /* grid-template-rows: 128px 389px 389px; */
height: 100%; height: 100%;
/* overflow: hidden; */
}
.bgDitu {
position: fixed;
z-index: -1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: #f003; */
background: url(../../assets/ditu.png) no-repeat;
background-position: -800px 0;
background-size: 100%;
} }
.vgrid { .vgrid {
@ -38,9 +52,8 @@
background: url(../../assets/line.png) 0 60% no-repeat; background: url(../../assets/line.png) 0 60% no-repeat;
} }
.oxygen {
.oxygen {} }
.no { .no {
}
}