style: style

src/pages/gvc/mod.js

@@ -32,14 +32,14 @@ const defaultState = {
     {
       total: 3578,
       totalName: "锂辉石库存量",
-      styles: { left: "32%", top: "27%" },
+      styles: { left: "34%", top: "27%" },
       cumulativeProduction: "",
       inventory: 0,
     },
     {
       total: 0,
       totalName: "",
-      styles: { left: "10%", top: "88%" },
+      styles: { left: "11%", top: "88%" },
       cumulativeProduction: 1222,
       inventory: 1000,
       day:222,
@@ -75,7 +75,7 @@ const defaultState = {
     {
       total: 0,
       totalName: "",
-      styles: { left: "27%", top: "73%" },
+      styles: { left: "30%", top: "73%" },
       cumulativeProduction: 1222,
       inventory: 1000,
       day:222,
@@ -111,7 +111,7 @@ const defaultState = {
     {
       total: 0,
       totalName: "",
-      styles: { left: "49%", top: "56%" },
+      styles: { left: "52%", top: "56%" },
       cumulativeProduction: 1222,
       inventory: 1000,
       day:222,
@@ -147,7 +147,7 @@ const defaultState = {
     {
       total: 0,
       totalName: "",
-      styles: { left: "66%", top: "42%" },
+      styles: { left: "70%", top: "42%" },
       cumulativeProduction: 1222,
       inventory: 1000,
       day:222,
@@ -183,7 +183,7 @@ const defaultState = {
     {
       total: 0,
       totalName: "",
-      styles: { left: "83%", top: "28%" },
+      styles: { left: "88%", top: "28%" },
       cumulativeProduction: 1222,
       inventory: 1000,
       day:222,

src/pages/gvc/style.less

@@ -7,6 +7,7 @@
   background: #000;
 
   :global {
+
     .all_box {
       width: 100%;
       height: 100%;
@@ -29,110 +30,36 @@
           position: relative;
         }
 
-        .imgMsg {
-          width: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          color: #fff;
-
-          li {
-            position: absolute;
-            width: 14em;
-            height: 4em;
-            opacity: 1;
-            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
-            ;
-            border-radius: 0.5em;
-            padding: 0.5em;
-            box-sizing: border-box;
-            font-size: 0.9em;
-            color: #CDF1FF;
-
-            .nums {
-              font-size: 1.3em;
-              color: #69FFDE;
-              display: inline-block !important;
-            }
-
-            .topMsg_number_2 {
-              display: inline-block !important;
-            }
-
-            .sma {
-              font-size: 0.7em;
-              color: #CDF1FF;
-              display: inline-block;
-              margin-left: 0.2em;
-            }
-
-            .chanL {
-              background: unset;
-              font-size: 0.9em;
-              color: #CDF1FF;
-              height: 4em;
-              box-sizing: border-box;
-              padding: 0 0.5em;
-              display: flex;
-              justify-content: space-between;
-              >div {
-                width: 50%;
-              }
-            }
-            .hoverR{
-              width: 100%;
-              height: 12em;
-              position: absolute;
-              left: 0;
-              top: -7em;
-              padding-top: 11em;
-              &:hover {
-                background-color: red;
-              }
-              .hoverDiv{
-                // display: none;
-              }
-            }
-            .hoverR:hover{
-              background-color: red;
-              .hoverDiv{
-                display: flex;
-              }
-            }
-
-            .hoverDiv {
-              display: flex;
-              align-items: center;
-              justify-content: space-between;
-              padding: 0 1em;
-              background: linear-gradient(0deg, #ffffff00 20%, #ffffff29 100%);
-              width:100%;
-              border-radius: 0.5em;
-              box-sizing: border-box;
-              margin-top: 0.1em;
-              font-size: 0.8em;
-              padding: 0.7em 1em 0;
-              color: #d7d7d7;
-              align-items: flex-start;
+        @media (min-height: 800px) {
+          .alls {
+            width: 73%;
+          }
+        }
+        @media (min-height: 900px) {
+          .alls {
+            width: 64%;
+          }
+        }
 
-              >div>span {
-                display: block;
-              }
-            }
+        @media (min-height: 1000PX) {
+          .alls {
+            width: 70%;
           }
         }
+
       }
 
       .gvcHome {
         height: 100%;
+        justify-content: flex-start;
 
         .leftContent {
-          width: 8%;
+          width: 17%;
           /* padding: 0 1em; */
           height: 70%;
           margin-top: 5%;
           margin-left: 1%;
+          padding-right: 8%;
 
           >ul {
             width: 100%;
@@ -196,7 +123,7 @@
                 color: #CDF1FF;
                 padding: 0.8em 0.9em 0.2em;
                 background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
-                border-radius: 0.2em;
+                border-radius: 0.5em;
 
                 .topMsg_number {
                   color: #69FFDE;
@@ -209,13 +136,147 @@
           }
         }
 
+        .centerCon {
+          width: 62%;
+          height: 80%;
+          padding: 0;
+          position: relative;
+          margin: 0% 0 0 -1%;
+        }
+
+        @media (min-height: 800px) {
+          .centerCon {
+            width: 65%;
+            height: 78%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -3%;
+          }
+        }
+        @media (min-height: 900px) {
+          .centerCon {
+            width: 62%;
+            height: 80%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -1%;
+            }
+        }
+
+        @media (min-height: 1000PX) {
+          .centerCon {
+            width: 63%;
+            height: 75%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -3%;
+          }
+        }
+
+
+        .imgMsg {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          color: #fff;
+
+          li {
+            position: absolute;
+            width: 14em;
+            height: 4em;
+            opacity: 1;
+            background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
+            border-radius: 0.5em;
+            padding: 0.5em;
+            box-sizing: border-box;
+            font-size: 0.9em;
+            color: #CDF1FF;
+            .nums {
+              font-size: 1.3em;
+              color: #69FFDE;
+              display: inline-block !important;
+            }
+
+            .topMsg_number_2 {
+              display: inline-block !important;
+            }
+
+            .sma {
+              font-size: 0.7em;
+              color: #CDF1FF;
+              display: inline-block;
+              margin-left: 0.2em;
+            }
+
+            .chanL {
+              background: unset;
+              font-size: 0.9em;
+              color: #CDF1FF;
+              height: 4em;
+              box-sizing: border-box;
+              padding: 0 0.5em;
+              display: flex;
+              justify-content: space-between;
+
+              >div {
+                width: 50%;
+              }
+            }
+
+            .hoverR {
+              width: 100%;
+              height: 12em;
+              position: absolute;
+              left: 0;
+              top: -7em;
+              padding-top: 11em;
+
+
+              .hoverDiv {
+                display: none;
+              }
+            }
+
+            .hoverR:hover {
+              .hoverDiv {
+                display: flex;
+              }
+            }
+
+            .hoverDiv {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 1em;
+              background: linear-gradient(0deg, #ffffff00 20%, #ffffff29 100%);
+              width: 100%;
+              border-radius: 0.5em;
+              box-sizing: border-box;
+              margin-top: 0.1em;
+              font-size: 0.8em;
+              padding: 0.7em 1em 0;
+              color: #d7d7d7;
+              align-items: flex-start;
+
+              >div>span {
+                display: block;
+              }
+            }
+          }
+          li:hover{
+            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
+          }
+        }
+
         .rightContent {
           width: 15%;
           position: absolute;
           right: 0;
-          bottom: 9%;
+          bottom: 16%;
           z-index: 9;
-          height: 46%;
+          height: auto;
 
           .title_ {
             text-align: left;
@@ -282,6 +343,8 @@
 
         }
       }
+
     }
+
   }
 }

src/pages/gvc/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm  产供销价值链
  * @Date: 2023-11-10 10:19:34 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-14 17:32:45
+ * @Last Modified time: 2023-11-15 16:30:25
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -272,11 +272,26 @@ class Gvc extends Component {
             <div className="alls">
               <video src={require("@assets/imgs/gvc/video2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-2s">
               </video>
+            </div>
+
+          </div>
+          <div className={"gvcHome home cbHome"}>
+            <div className="leftContent">
+              <ul>
+                {
+                  LeftHtml.map((x, i) => {
+                    return this.getLeftHtml(x, i)
+                  })
+                }
+              </ul>
+            </div>
+
+            <div className="centerCon">
               <ul className="imgMsg">
                 {
                   toJS(imgMsgData).map((item, index) => {
                     return (
-                      <li style={{ ...item.styles }}>
+                      <li style={{ ...item.styles }} class="animate__animated animate__bounceInUp animate__slower">
                         {/* 矿产 */}
                         {
                           item.totalName && <p className="name">{item.totalName}</p>
@@ -332,21 +347,6 @@ class Gvc extends Component {
               </ul>
             </div>
 
-          </div>
-          <div className={"gvcHome home cbHome"}>
-            <div className="leftContent">
-              <ul>
-                {
-                  LeftHtml.map((x, i) => {
-                    return this.getLeftHtml(x, i)
-                  })
-                }
-              </ul>
-            </div>
-
-            <div className="centerCon">
-            </div>
-
             {/* 右侧信息栏 */}
             <div className="rightContent">