update bottomBar

src/components/BottomBar/BottomBarItem/index.jsx

@@ -0,0 +1,14 @@
+import cls from './index.module.css';
+import Container from '../../Container';
+
+function BottomBarItem(props) {
+	return (
+		<Container
+			icon={props.icon}
+			title={props.title}
+			className={`${cls.bottomBarItem} ${props.className}`}
+		>
+			{props.children}
+		</Container>
+	);
+}

src/components/BottomBar/BottomBarItem/index.module.css

@@ -0,0 +1,4 @@
+.bottomBarItem {
+    background: url(../../../assets/bg-bottom-item.png) no-repeat;
+    background-size: 100% 100%;
+}

src/components/BottomBar/FaultTotal/index.jsx

@@ -0,0 +1,12 @@
+import cls from './index.module.css';
+import BottomBarItem from '../BottomBarItem';
+
+function FaultTotal(props) {
+	return (
+		<BottomBarItem icon="chart" title="产线缺陷统计" className={cls.faultTotal}>
+			产线缺陷统计 堆叠图 颜色 上下legend 日周月年
+		</BottomBarItem>
+	);
+}
+
+export default FaultTotal;

src/components/BottomBar/FaultType/index.jsx

@@ -0,0 +1,16 @@
+import cls from './index.module.css';
+import BottomBarItem from '../BottomBarItem';
+
+function FaultType(props) {
+	return (
+		<BottomBarItem
+			icon="puzzle"
+			title="产线当日缺陷分类"
+			className={cls.faultType}
+		>
+			产线当日缺陷分类 - 环形图 左右 legend - 产线1-5
+		</BottomBarItem>
+	);
+}
+
+export default FaultType;

src/components/BottomBar/gasi/index.jsx

@@ -0,0 +1,12 @@
+import cls from './index.module.css';
+import BottomBarItem from '../BottomBarItem';
+
+function GasI(props) {
+	return (
+		<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
+			助燃风流量 - linechart - 当前流量 - 0 legends - 1 line
+		</BottomBarItem>
+	);
+}
+
+export default GasI;

src/components/BottomBar/gasii/index.jsx

@@ -0,0 +1,12 @@
+import cls from './index.module.css';
+import BottomBarItem from '../BottomBarItem';
+
+function GasI(props) {
+	return (
+		<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
+			天然气流量 - linechart - 当前流量 - 2 legends - 2 lines
+		</BottomBarItem>
+	);
+}
+
+export default GasI;

src/components/BottomBar/index.jsx

@@ -1,20 +1,24 @@
-import React from 'react'
+import React from 'react';
-import { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react';
-import { motion } from 'framer-motion'
+import { motion } from 'framer-motion';
-import Chart1 from './Chart1'
+import Chart1 from './Chart1';
-import Chart2 from './Chart2'
+import Chart2 from './Chart2';
-import Chart3 from './Chart3'
+import Chart3 from './Chart3';
-import Chart4 from './Chart4'
+import Chart4 from './Chart4';
 
-import './index.less'
+import './index.less';
+import cls from './index.module.css';
 
 export default function index() {
-    return (
+	return (
-        <div className='ButtonBorder'>
+		<>
-            <Chart1 />
+			<div className="ButtonBorder">
-            <Chart2 />
+				<Chart1 />
-            <Chart3 />
+				<Chart2 />
-            <Chart4 />
+				<Chart3 />
-        </div>
+				<Chart4 />
-    )
+			</div>
+			<div className={cls.bottomBar}></div>
+		</>
+	);
 }

src/components/BottomBar/index.less

@@ -1,8 +1,16 @@
 .ButtonBorder {
-  width: 100%;
+	// width: 100%;
-  height: 100%;
+	// height: 100%;
-  
+
-  display: flex;
+	display: flex;
-  flex-direction: row;
+	flex-direction: row;
-  justify-content: space-around;
+	justify-content: space-around;
+
+	position: fixed;
+	bottom: 0px;
+	left: 200px;
+
+	z-index: 10000;
+
+	background-color: #000;
 }

src/components/BottomBar/index.module.css

@@ -0,0 +1,3 @@
+.bottomBar {
+    background-color: #0004;
+}

src/components/Container.jsx

@@ -23,6 +23,15 @@ const Container = (props) => {
 		case 'smoke':
 			icon.current = IconSmoke;
 			break;
+		case 'chart':
+			icon.current = IconSmoke;
+			break;
+		case 'puzzle':
+			icon.current = IconSmoke;
+			break;
+		case 'pause':
+			icon.current = IconSmoke;
+			break;
 	}
 
 	return (

src/pages/index.less

@@ -12,7 +12,6 @@
 		flex-direction: row;
 
 		.Center {
-			background: #ce862f69;
 			margin-top: 21px;
 			margin-left: 24px;
 			padding: 1px;