/*
 * @Author: zhp
 * @Date: 2024-08-23 13:56:11
 * @LastEditTime: 2024-09-18 10:54:39
 * @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={{ height: '422px',marginTop: '24px' }}>
	          <LeftBottomForecast/>
			</div>
        </motion.div>
      <motion.div
          className={cls.leftBarRight}
          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>
	
	);
}