fix: 大屏组件开发

xinkeaboard-admin/src/pages/statistics/bigscreen/components/Overview.js

@@ -0,0 +1,58 @@
+import React from "react";
+import styles from "../styles/overview.less";
+
+class OverView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {}
+
+  componentDidUpdate(prevProps) {}
+
+  render() {
+    return (
+      <div className={styles.overview}>
+        <img className={styles.overview_bg} src={require("../../../../assets/bigscreen/overview-bg.png")} />
+        <span className={styles.overview_title}>平台数据汇总</span>
+        <div className={styles.overview_content}>
+          <div className={styles.overview_content_item}>
+            <img
+              src={require("../../../../assets/bigscreen/member.png")}
+            />
+            <div className={styles.item_value}>123456</div>
+            <div className={styles.item_label}>用户总数</div>
+          </div>
+          <div className={styles.overview_content_item}>
+            <img
+              className={styles.item_img}
+              src={require("../../../../assets/bigscreen/dis.png")}
+            />
+
+            <div className={styles.item_value}>123456</div>
+            <div className={styles.item_label}>订单总数</div>
+          </div>
+          <div className={styles.overview_content_item}>
+            <img
+              src={require("../../../../assets/bigscreen/store.png")}
+            />
+
+            <div className={styles.item_value}>123456</div>
+            <div className={styles.item_label}>商品总数</div>
+          </div>
+          <div className={styles.overview_content_item}>
+            <img
+              src={require("../../../../assets/bigscreen/dis.png")}
+            />
+
+            <div className={styles.item_value}>123456</div>
+            <div className={styles.item_label}>访问总数</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OverView;

xinkeaboard-admin/src/pages/statistics/bigscreen/index.js

@@ -3,6 +3,7 @@ import styles from "./index.less";
 import PanelBlock from "./components/PanelBlock";
 import HeaderContent from "./components/HeadContent";
 import WordCloud from "@/components/WordCloud";
+import OverView from "./components/Overview";
 
 class BigScreen extends React.Component {
   constructor(props) {
@@ -136,12 +137,14 @@ class BigScreen extends React.Component {
               {/* <PanelBlock height="200px" /> */}
               <PanelBlock />
               <PanelBlock />
-              <PanelBlock height="400px" />
+              <PanelBlock/>
             </div>
 
             {/* 中间 */}
             <div className={styles.contentPanelCenter}>
-              <PanelBlock height="350px" />
+              <PanelBlock height="456px">
+                <OverView></OverView>
+              </PanelBlock>
               <PanelBlock />
               <PanelBlock height="500px" flexDirection="row">
                 <PanelBlock />

xinkeaboard-admin/src/pages/statistics/bigscreen/styles/overview.less

@@ -0,0 +1,56 @@
+.overview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .overview_bg {
+    width: 960px;
+    height: 120px;
+  }
+
+  .overview_title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    font-weight: bold;
+    font-size: 64px;
+    color: #fff;
+  }
+
+  .overview_content {
+    flex: 1;
+    height: 100%;
+    width: 100%;
+    display: flex;
+
+    .overview_content_item {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    
+        .item_img {
+            width: 172px;
+            height: 240px;
+        }
+    
+        .item_value {
+            font-size: 48px;
+            font-weight: bold;
+            color: #fff;
+            margin-bottom: 8px;
+        }
+    
+        .item_label {
+            font-size: 24px;
+            color: #fff;
+        }
+    }
+  }
+}