修改

src/components/Modules/KilnOptimize/forecastRightSide/contextFile.jsx

@@ -0,0 +1,10 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-30 15:22:59
+ * @LastEditTime: 2024-08-30 15:22:59
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import React from'react';
+
+export const ValueContext = React.createContext();

src/components/Modules/KilnOptimize/forecastRightSide/index.jsx

@@ -0,0 +1,53 @@
+/*
+ * @Author: zhp
+ * @Date: 2024-08-23 13:56:11
+ * @LastEditTime: 2024-08-30 16:30:35
+ * @LastEditors: zhp
+ * @Description: 
+ */
+import React, { useContext } from'react';
+import KilnTopForecast from '../components/KilnTopForecast';
+import KilnBottomForecast from '../components/KilnBottomForecast';
+import KilnMiddleForecast from '../components/KilnMiddleForecast';
+import LeftBottomForecast from '../components/leftBottomForecast';
+import LeftTopForecast from '../components/leftTopForecast';
+import LeftMiddleForecast from '../components/leftMiddleForecast';
+import { motion } from 'framer-motion';
+import { ValueContext } from './contextFile';
+import cls from './index.module.scss';
+
+export default function Index() {
+  return (
+    <div className={cls.forecast}>
+     <motion.div
+          className={cls.leftBar}
+          initial={{ opacity: 0, position: 'absolute' }}
+          animate={{ opacity: 1, position: 'relative' }}
+          exit={{ opacity: 0, position: 'relative' }}
+          transition={{ type: 'tween' }}
+      >
+        <div style={{ height: '200px', marginTop: '24px'  }}>
+          <LeftTopForecast/>
+			</div>
+        <div style={{ height: '261px', marginTop: '24px' }}>
+			    <LeftMiddleForecast />
+        </div>
+        <div style={{ flex: 1,marginTop: '24px' }}>
+	          <LeftBottomForecast/>
+			</div>
+        </motion.div>
+      <motion.div
+          className={cls.leftBar}
+          initial={{ opacity: 0, position: 'absolute' }}
+          animate={{ opacity: 1, position: 'relative' }}
+          exit={{ opacity: 0, position: 'relative' }}
+          transition={{ type: 'tween' }}
+        >
+          <KilnTopForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+          <KilnMiddleForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+          <KilnBottomForecast style={{ flex: 1, width: '100%', marginTop: '24px' }} />
+        </motion.div>
+    </div>
+	
+	);
+}

src/components/Modules/KilnOptimize/forecastRightSide/index.module.scss

@@ -0,0 +1,14 @@
+.leftBar {
+	width: 501px;
+	height: 966px;
+	// margin-left: 40px;
+
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.forecast{
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+}