feat: 增加大屏框架结构

xinkeaboard-admin/src/pages/sysset/bigscreen/layout/head/HeadContent.js → xinkeaboard-admin/src/pages/sysset/bigscreen/components/HeadContent.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "dva";
-import styles from "../../styles/header_content.less";
+import styles from "../styles/header_content.less";
 
 class HeaderContent extends React.Component {
   componentDidMount() {

xinkeaboard-admin/src/pages/sysset/bigscreen/components/PanelBlock.js

@@ -4,11 +4,12 @@ import styles from "../styles/panel_block.less";
 
 class PanelBlock extends React.Component {
   render() {
-    const { title, height, children } = this.props;
+    const { title, flexDirection, height, children } = this.props;
 
     const style = {
       height: height || undefined,
       flex: height ? "unset" : 1,
+      flexDirection: flexDirection ?? 'column'
     };
 
     return (

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styles from "./index.less";
 import PanelBlock from "./components/PanelBlock";
-import HeaderContent from "./layout/head/HeadContent";
+import HeaderContent from "./components/HeadContent";
 
 class BigScreen extends React.Component {
   constructor(props) {
@@ -135,31 +135,23 @@ class BigScreen extends React.Component {
               {/* <PanelBlock height="200px" /> */}
               <PanelBlock />
               <PanelBlock />
-              <PanelBlock height="500px" />
+              <PanelBlock height="400px" />
             </div>
 
             {/* 中间 */}
             <div className={styles.contentPanelCenter}>
-              <div className={styles.contentPanelCenterTop}>
-                <PanelBlock />
-              </div>
-              <div className={styles.contentPanelCenterMiddle}>
-                <PanelBlock />
-              </div>
-              <div className={styles.contentPanelCenterBottom}>
+              <PanelBlock height="350px"/>
+              <PanelBlock />
+              <PanelBlock height="500px" flexDirection='row'>
                 <PanelBlock />
                 <PanelBlock />
-              </div>
+              </PanelBlock>
             </div>
 
             {/* 右侧 */}
             <div className={styles.contentPanelRight}>
-              <div className={styles.contentPanelRightTop}>
-                <PanelBlock />
-              </div>
-              <div className={styles.contentPanelRightBottom}>
-                <PanelBlock />
-              </div>
+               <PanelBlock />
+               <PanelBlock />
             </div>
           </div>
         </div>

xinkeaboard-admin/src/pages/sysset/bigscreen/index.less

@@ -70,30 +70,9 @@
 
   &Center {
     width: 50%;
-    &Top {
-      width: 100%;
-      height: 20%;
-    }
-    &Middle {
-      width: 100%;
-      height: 50%;
-    }
-    &Bottom {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-      height: 30%;
-    }
   }
 
   &Right {
     width: 25%;
-    &Top {
-      height: 50%;
-    }
-
-    &Bottom {
-      height: 50%;
-    }
   }
 }

xinkeaboard-admin/src/pages/sysset/bigscreen/styles/panel_block.less

@@ -3,14 +3,16 @@
   width: 100%;
   font-size: 40px;
   letter-spacing: 1px;
+  padding: 10px;
 }
 
 .block {
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   height: 100%;
   box-sizing: border-box;
   margin-top: 10px;
-  border: 1px solid red;
+  border: 4px dashed #fff;
 }