修复：数据看板样式调整

src/pages/dataDashboards/components/joinInfo/index.scss

@@ -53,34 +53,47 @@ $design_height:856;
     }
     &-card-3{
       height: toVh(346,1080);
-      .card-header{
+      display: flex;
+      .card-info-left{
+        flex: 1;
+        .card-header{
+          padding-right: 0 !important;
+
+        }
+        .card-progress{
+          padding: 0 40px 0 39px;
+          margin-bottom: 19px;
+          .progress-item{
+            display: flex;
+            align-items: center;
+            &-label{
+              font-size: 1.2rem;
+              color: #707070;
+              font-weight: bold;
+            }
+            &-info{
+              flex: 1;
+              margin: 0 36px 0 24px;
+            }
+          }
+        }
+      }
+
+      .card-info-right{
+        padding: 20px  40px 0 0;
         .sku-count{
           font-size: 2.33rem;
           font-weight: bold;
           color: #010101;
           line-height: 3.33rem;
+          margin-bottom: 26px;
         }
-      }
-      .card-progress{
-        padding: 0 53px 0 39px;
-        margin-bottom: 19px;
-        .progress-item{
-          display: flex;
-          align-items: center;
-          &-label{
-            font-size: 1.2rem;
-            color: #707070;
-            font-weight: bold;
-          }
-          &-info{
-            flex: 1;
-            margin: 0 36px 0 24px;
-          }
-          &-value{
-            font-size: 1.67rem;
-            font-weight: bold;
-            color: #000000;
-          }
+        .progress-item-value{
+          font-size: 1.67rem;
+          font-weight: bold;
+          color: #000000;
+          margin-bottom: 5px;
+          text-align: center;
         }
       }
     }

src/pages/dataDashboards/components/joinInfo/index.tsx

@@ -110,23 +110,33 @@ const JoinInfo = () => {
         <div className='card-echarts' id='pie'></div>
       </div>
       <div className='join-info-card-3'>
-        <div className='card-header'>
-          <div className='card-header-icon'></div>
-          <div className='card-header-title'>上架商品 (SKU)</div>
-          <div className='sku-count'>{totalCount}</div>
+        <div className='card-info-left'>
+          <div className='card-header'>
+            <div className='card-header-icon'></div>
+            <div className='card-header-title'>上架商品 (SKU)</div>
+            {/*<div className='sku-count'>{totalCount}</div>*/}
+          </div>
+          <div className='card-progress'>
+            {listingProducts.map((v, i) => (
+              <div className='progress-item' key={i}>
+                <div className='progress-item-label'>{v.label}</div>
+                <div className='progress-item-info'>
+                  <Progress
+                    percent={(v.value / totalCount) * 100}
+                    strokeColor='#F4872A'
+                    showInfo={false}
+                  />
+                </div>
+                {/*<div className='progress-item-value'>{v.value}</div>*/}
+              </div>
+            ))}
+          </div>
         </div>
-        <div className='card-progress'>
+        <div className='card-info-right'>
+          <div className='sku-count'>{totalCount}</div>
           {listingProducts.map((v, i) => (
-            <div className='progress-item' key={i}>
-              <div className='progress-item-label'>{v.label}</div>
-              <div className='progress-item-info'>
-                <Progress
-                  percent={(v.value / totalCount) * 100}
-                  strokeColor='#F4872A'
-                  showInfo={false}
-                />
-              </div>
-              <div className='progress-item-value'>{v.value}</div>
+            <div className='progress-item-value' key={i}>
+              {v.value}
             </div>
           ))}
         </div>