add some pics

src/components/模块组件/总览/CenterTop/RightTable/index.jsx

@@ -46,7 +46,7 @@ function replaceStyle(Arr, opencity) {
 class Chart1 extends Component {
 	render() {
 		return (
-			<div className="CenterChart1itemDetailBorder">
+			<div className="CenterChart1itemDetailBorder" style={{ opacity: 0.75 }}>
 				<h2 className="CenterChart1itemTXT"> 当前产线生产规格</h2>
 				<div className="CenterChart1itemContainer">
 					<span className="CenterFormitemDetailBorderLine1"></span>

src/pages/index.less

@@ -15,10 +15,11 @@
 			margin: 22px;
 			width: 2472px;
 			height: 940px;
+			position: relative;
 
 			.CenterData {
 				position: absolute;
-				background: #fff4;
+				// background: #fff4;
 				width: 2472px;
 				height: 240px;
 				z-index: 2;
@@ -34,13 +35,14 @@
 			}
 
 			.V3DBorder {
-				background: #00f3;
+				// background: #00f3;
 				width: 100%;
 				height: 486px;
 				margin-top: 160px;
 				// background: url('../assets/3D.png');
-				background-size: 100% 100%;
+				background: url('../assets/moxing.png') no-repeat;
-				background-repeat: no-repeat;
+				background-position: 50% 50%;
+				background-size: 170% 200%;
 			}
 
 			.Button {
@@ -64,3 +66,28 @@
 	background-position: -800px 0;
 	background-size: 100%;
 }
+
+.bgOverview {
+	position: fixed;
+	z-index: -1000;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	/* background: #f003; */
+	background: url(../assets/wave.png) no-repeat;
+	background-position: 0 0;
+	background-size: 100%;
+}
+
+.bgFire {
+	position: absolute;
+	top: 16%;
+	left: 2%;
+	width: 100%;
+	height: 100%;
+	/* background: #f003; */
+	background: url('../assets/moxing.png') no-repeat;
+	background-position: 50% 50%;
+	background-size: 170% 200%;
+}

src/pages/总览/index.jsx

@@ -11,7 +11,7 @@ import QualityCheckLeft from '../../components/模块组件/质检统计/LeftSid
 import FireCheckRight from '../../components/模块组件/退火监测/RightSide';
 import QualityCheckRight from '../../components/模块组件/质检统计/RightSide';
 
-import V3DBG from '../../assets/V3DBG.png';
+// import V3DBG from '../../assets/V3DBG.png';
 
 const KilnTotalRight = (props) => {
 	return (
@@ -36,7 +36,8 @@ export default function Home({ active }) {
 
 	return (
 		<div className="Main">
-			{active != '总览' && <div className="bgDitu"></div>}
+			{active != '窑炉总览' && <div className="bgDitu"></div>}
+			{active == '窑炉总览' && <div className="bgOverview"></div>}
 			<AnimatePresence mode="wait">
 				<div
 					className="left-side"
@@ -56,16 +57,26 @@ export default function Home({ active }) {
 			<div className="Center">
 				{active == '窑炉总览' && (
 					<>
-						<div className="CenterData">
+						<AnimatePresence>
-							<CenterTopData />
+							<motion.div
-						</div>
+								key="center-top"
-						<img src={V3DBG} alt="图片加载错误" className="V3DBG" />
+								className="CenterData"
-						<div className="V3DBorder"></div>
+								initial={{ visibility: 'hidden' }}
-						<div className="Button">
+								animate={{ visibility: 'visible' }}
+							>
+								<CenterTopData />
+							</motion.div>
+						</AnimatePresence>
+						<div key="v3d" className="V3DBorder"></div>
+						<div key="bottom-bar" className="Button">
 							<BottomBar />
 						</div>
 					</>
 				)}
+
+				{active == '退火监测' && <div className="bgFire"></div>}
+
+				{active == '质检统计' && <div className="bgFire"></div>}
 			</div>
 
 			{active == '窑炉总览' && <RightBar key="right-bar" />}