fix: 调整大屏为脱离文档流布局

xinkeaboard-admin/src/pages/statistics/bigscreen/components/MapContainer.js → xinkeaboard-admin/src/pages/statistics/bigscreen/components/MemberLocation.js

@@ -11,9 +11,9 @@ const MapContainer = ({ data, loading, dispatch }) => {
         src={require("../../../../assets/bigscreen/overview-bg.png")}
       />
       <span className={styles.map_container_title}>会员地域分布</span>
-      <div className={styles.map_container_content}>
+      {/* <div className={styles.map_container_content}>
         <WorldMap></WorldMap>
-      </div>
+      </div> */}
     </div>
   );
 };

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

@@ -19,7 +19,10 @@ const OverView = ({ overviewData }) => {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/member.png")}
             />
-            <CountUp className={styles.item_value} end={overviewData.data.memberNum} />
+            <CountUp
+              className={styles.item_value}
+              end={overviewData.data.memberNum}
+            />
             <div className={styles.item_label}>会员</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -28,7 +31,10 @@ const OverView = ({ overviewData }) => {
               src={require("../../../../assets/bigscreen/dis.png")}
             />
 
-            <CountUp className={styles.item_value} end={overviewData.data.distributorNum} />
+            <CountUp
+              className={styles.item_value}
+              end={overviewData.data.distributorNum}
+            />
             <div className={styles.item_label}>分销商</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -36,7 +42,10 @@ const OverView = ({ overviewData }) => {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/store.png")}
             />
-            <CountUp className={styles.item_value} end={overviewData.data.storeNum} />
+            <CountUp
+              className={styles.item_value}
+              end={overviewData.data.storeNum}
+            />
             <div className={styles.item_label}>店铺</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -44,7 +53,10 @@ const OverView = ({ overviewData }) => {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/dis.png")}
             />
-            <CountUp className={styles.item_value} end={overviewData.data.serviceProviderNum} />
+            <CountUp
+              className={styles.item_value}
+              end={overviewData.data.serviceProviderNum}
+            />
             <div className={styles.item_label}>服务商</div>
           </div>
           <div className={styles.overview_content_item}>
@@ -52,10 +64,20 @@ const OverView = ({ overviewData }) => {
               className={styles.item_img}
               src={require("../../../../assets/bigscreen/member.png")}
             />
-            <CountUp className={styles.item_value} end={overviewData.data.productNum} />
+            <CountUp
+              className={styles.item_value}
+              end={overviewData.data.productNum}
+            />
             <div className={styles.item_label}>商品总数</div>
           </div>
         </div>
+        <div className={styles.overview_member}>
+          <img
+            className={styles.overview_member_img}
+            src={require("../../../../assets/bigscreen/overview-bg.png")}
+          />
+          <span className={styles.overview_member_title}>会员地域分布</span>
+        </div>
       </div>
     </Spin>
   );

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

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

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

@@ -11,8 +11,7 @@ import DistributorEnquireLocation from "./components/DistributorEnquireLocation"
 import AddMemberTrend from "./components/addMemberTrend";
 import AddProductTrend from "./components/addProductTrend";
 import SearchRankCloud from "./components/SearchRankCloud";
-import MapContainer from "./components/MapContainer";
-
+import MemberLocation from "./components/MemberLocation";
 
 @connect(({ bigscreen }) => ({
   bigscreen,
@@ -117,7 +116,7 @@ class BigScreen extends React.Component {
     const screenContainer = document.querySelector(
       `.${styles.screenContainer}`
     );
-    const mapContainer = document.querySelector(`.${styles.mapContainer}`);
+    // const mapContainer = document.querySelector(`.${styles.mapContainer}`);
     if (screenContainer) {
       screenContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
       screenContainer.style.transformOrigin = "0 0";
@@ -126,13 +125,13 @@ class BigScreen extends React.Component {
       screenContainer.style.margin = "0";
     }
 
-    if (mapContainer) {
-      mapContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
-      mapContainer.style.transformOrigin = "0 0";
-      mapContainer.style.left = "50%";
-      mapContainer.style.top = "50%";
-      mapContainer.style.margin = "0";
-    }
+    // if (mapContainer) {
+    //   mapContainer.style.transform = `scale(${scale}) translate(-50%, -50%)`;
+    //   mapContainer.style.transformOrigin = "0 0";
+    //   mapContainer.style.left = "50%";
+    //   mapContainer.style.top = "50%";
+    //   mapContainer.style.margin = "0";
+    // }
   };
 
   showRenderTime = () => {
@@ -160,13 +159,13 @@ class BigScreen extends React.Component {
             {/* 左侧 */}
             <div className={styles.contentPanelLeft}>
               {/* <PanelBlock height="200px" /> */}
-              <PanelBlock height='560px' marginBottom='48px'>
+              <PanelBlock width="932px" height="560px" marginBottom="48px">
                 <PortalTraffic />
               </PanelBlock>
-              <PanelBlock height='560px' marginBottom='48px'>
+              <PanelBlock width="932px" height="560px" marginBottom="48px">
                 <Enquire />
               </PanelBlock>
-              <PanelBlock flexDirection="row" height='608px'>
+              <PanelBlock flexDirection="row" height="608px">
                 <PanelBlock>
                   <OverseasEnquireLocation />
                 </PanelBlock>
@@ -178,15 +177,19 @@ class BigScreen extends React.Component {
 
             {/* 中间 */}
             <div className={styles.contentPanelCenter}>
-              <PanelBlock justifyContent="flex-start" height='560px' marginBottom='48px'>
+              <PanelBlock
+                justifyContent="flex-start"
+                height="560px"
+                marginBottom="48px"
+              >
                 <OverView />
               </PanelBlock>
-              <PanelBlock height='560px' marginBottom='48px'/>
-              <PanelBlock flexDirection="row" height='608px'>
-                <PanelBlock>
+              <PanelBlock height="560px" marginBottom="48px" />
+              <PanelBlock flexDirection="row" height="608px">
+                <PanelBlock width="822px" marginRight="64px">
                   <AddMemberTrend />
                 </PanelBlock>
-                <PanelBlock>
+                <PanelBlock width="822px">
                   <AddProductTrend />
                 </PanelBlock>
               </PanelBlock>
@@ -194,16 +197,15 @@ class BigScreen extends React.Component {
 
             {/* 右侧 */}
             <div className={styles.contentPanelRight}>
-              <PanelBlock>
+              <PanelBlock height="864px" width="932px" marginBottom="48px">
                 <SearchRankCloud />
               </PanelBlock>
-              <PanelBlock />
+              <PanelBlock height="864px" width="932px" />
             </div>
+
+            <div className={styles.mapContainer}>{"ss"}</div>
           </div>
         </div>
-        <div className={styles.mapContainer}>
-          <MapContainer />
-        </div>
       </div>
     );
   }

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

@@ -55,6 +55,7 @@
 }
 
 .contentPanel {
+  position: relative;
   display: flex;
   flex: 1;
   width: 100%;
@@ -62,25 +63,50 @@
   overflow: hidden;
   gap: @gap-size;
 
-  &Left,
-  &Center,
-  &Right {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-
   &Left {
-    width: 25%;
+    position: absolute;
+    left: 72px;
   }
 
   &Center {
-    width: 50%;
+    position: absolute;
+    width: 1708px;
+    left: 1064px;
   }
 
   &Right {
-    width: 25%;
+    position: absolute;
+    right: 72px;
   }
+
+  .mapContainer {
+    position: absolute;
+    left: 540px;
+    top: 470px;
+    width: 2400px;
+    height: 1176px;
+    border: 1px solid red;
+  }
+
+  // &Left,
+  // &Center,
+  // &Right {
+  //   display: flex;
+  //   flex-direction: column;
+  //   height: 100%;
+  // }
+
+  // &Left {
+  //   width: 25%;
+  // }
+
+  // &Center {
+  //   width: 50%;
+  // }
+
+  // &Right {
+  //   width: 25%;
+  // }
 }
 
 .mapContainer {
@@ -88,5 +114,5 @@
   width: 2336px;
   height: 1080px;
   border: 1px solid red;
-  z-index: 0; 
+  z-index: 0;
 }

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

@@ -46,7 +46,7 @@
         top: 0;
         font-weight: 400;
         font-size: 64px;
-          font-family: 'Rajdhani', 'Orbitron', 'DIN Condensed', sans-serif;
+        font-family: "Rajdhani", "Orbitron", "DIN Condensed", sans-serif;
 
         color: #ffffff;
       }
@@ -61,4 +61,30 @@
       }
     }
   }
+
+  .overview_member {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    margin-top: 20px;
+  }
+
+  .overview_member_img {
+    width: 960px;
+    height: 120px;
+  }
+
+  .overview_member_title {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    width: 100%;
+    height: 120px;
+    font-weight: bold;
+    font-size: 64px;
+    color: #ffffff;
+  }
 }