feat: gvc滚动

src/pages/gvc/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 累计销量客户
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-28 10:27:31
+ * @Last Modified time: 2023-11-28 15:15:55
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -62,9 +62,12 @@ class RightBottomView extends Component {
       arrows:false,
       infinite: true,
       autoplay: true,
-      autoplaySpeed: 2500,//自动播放的时间
+      speed: 2000,
+      autoplaySpeed: 2000,
+      cssEase: "linear",
+      // autoplaySpeed: 1000,//自动播放的时间
       // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
-      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
+      slidesToShow: data_item.length >= 7 ? 7 : data_item.length,
       slidesToScroll: 1,
       vertical: true,
       verticalSwiping: true,

src/pages/gvc/style.less

@@ -206,7 +206,7 @@
 
           li {
             position: absolute;
-            width: 17em;
+            width: 19em;
             height: 4em;
             opacity: 1;
             background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
@@ -300,9 +300,9 @@
           width: 15%;
           position: absolute;
           right: 0;
-          bottom: 10%;
+          bottom: 23%;
           z-index: 9;
-          height: 60%;
+          height: 45%;
 
           .title_ {
             text-align: left;
@@ -376,19 +376,21 @@
 
         @media (min-height: 800px) {
           .rightContent {
-            bottom: 3%;
+            bottom: 20%;
+            height: 38%;
           }
         }
 
         @media (min-height: 900px) {
           .rightContent {
-            bottom: 3%;
+            bottom: 20%;
           }
         }
 
         @media (min-height: 1000px) {
           .rightContent {
-            bottom: -5%;
+            bottom: 22%;
+            height: 32%;
           }
         }
       }

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-28 10:30:13
+ * @Last Modified time: 2023-11-28 15:23:49
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -200,7 +200,7 @@ class Gvc extends Component {
   async getUrl4() {
     await smallShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const style__ = [{}, { left: "88%", top: "28%" }, { left: "70%", top: "46%" }, { left: "52%", top: "59%" }, { left: "29%", top: "76%" }, { left: "11%", top: "89%" }]
+        const style__ = [{}, { left: "87%", top: "28%" }, { left: "69%", top: "46%" }, { left: "52%", top: "59%" }, { left: "29%", top: "76%" }, { left: "11%", top: "89%" }]
         data = data.map((x, i) => {0
           return {
             ...x,
@@ -359,7 +359,7 @@ class Gvc extends Component {
             
             <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
           </div>
-          <div>
+          <div style={{width:"60%"}}>
             <p>产品库存</p>
             {
               !changGif ? <span class="topMsg_number shu1">{x.num2}</span> : <span class="topMsg_number">{getThousandNum(x.num2)}</span>
@@ -432,7 +432,7 @@ class Gvc extends Component {
                                 <span>月：{item.mood}</span>
                                 <span>年：{item.year}</span>
                               </div>
-                              <div style={{ width: "58%" }}>
+                              <div style={{ width: index == 5 ? "58%" : "52%" }}>
                                 <p className="title">
                                   库存/吨
                                 </p>