Merge branch 'feat/v20240706-dashboard' into dev

src/views/dashboard/componets/StatisticsItem.vue

@@ -119,6 +119,10 @@ export default {
     line-height: 1.5;
     margin-bottom: 8px;
     font-weight: bold;
+
+    @media (max-width: 1540px) {
+      font-size: 18px;
+    }
   }
 }
 </style>

src/views/dashboard/componets/TrendPanel.vue

@@ -46,12 +46,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@media (max-width: 1395px) {
+@media (max-width: 1540px) {
   ::v-deep .title {
-    width: 75px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    font-size: 12px !important;
   }
 
   ::v-deep .value{
@@ -59,6 +56,16 @@ export default {
   }
 }
 
+@media (max-width: 1390px) {
+  ::v-deep .title {
+    font-size: 16px !important;
+  }
+
+  ::v-deep .value{
+    font-size: 24px !important;
+  }
+}
+
 
 .trend-panel-container {
   position: relative;

src/views/dashboard/index.vue

@@ -71,9 +71,11 @@
           </StatisticsPanel>
           <StatisticsPanel style="width: 50%" title="商品排名">
             <template #button>
-              <button @click="currentGoodsRankingTab = 1" :class="{ active: currentGoodsRankingTab === 1 }" class="analysis-chart-btn">社区</button>
-              <button @click="currentGoodsRankingTab = 2" :class="{ active: currentGoodsRankingTab === 2 }" class="analysis-chart-btn">商圈</button>
-              <button @click="currentGoodsRankingTab = 3" :class="{ active: currentGoodsRankingTab === 3 }" class="analysis-chart-btn">商城</button>
+              <div class="goods-ranking-btn-wrapper">
+                <button @click="currentGoodsRankingTab = 1" :class="{ active: currentGoodsRankingTab === 1 }" class="analysis-chart-btn">社区</button>
+                <button @click="currentGoodsRankingTab = 2" :class="{ active: currentGoodsRankingTab === 2 }" class="analysis-chart-btn">商圈</button>
+                <button @click="currentGoodsRankingTab = 3" :class="{ active: currentGoodsRankingTab === 3 }" class="analysis-chart-btn">商城</button>
+              </div>
             </template>
             <GoodsRankingChart :chartData="goodsRankingData" ref="goodsRankingChartRef"></GoodsRankingChart>
           </StatisticsPanel>
@@ -83,7 +85,7 @@
         <!-- <StatisticsPanel :filters="['address']" title="网点统计" style="width: 100%; height: 860px; display: flex; flex-direction: column" @change="handleSiteFilterChange"> -->
         <StatisticsPanel title="网点统计" style="width: 100%; height: 860px; display: flex; flex-direction: column" @change="handleSiteFilterChange">
           <div class="data-statistics">
-            <StatisticsItem v-for="item in sitedatastatistics" :key="item.label" :title="item.label" :value="dotStatistics[item.field] || 0" :style="item.itemStyles"></StatisticsItem>
+            <StatisticsItem class="item" v-for="item in sitedatastatistics" :key="item.label" :title="item.label" :value="dotStatistics[item.field] || 0" :style="item.itemStyles"></StatisticsItem>
           </div>
           <div class="map-pie-container">
             <SiteMapChart :chartData="nationalMapList" class="map-chart" ref="siteMapChartRef"></SiteMapChart>
@@ -396,7 +398,7 @@ export default {
   flex-wrap: wrap;
   justify-content: space-between;
 
-  @media (max-width: 1499px) {
+  @media (max-width: 1540px) {
     &-item {
       flex-basis: calc((100% - 16px) / 2) !important;
       margin: 0 16px 16px 0 !important;
@@ -407,7 +409,7 @@ export default {
     }
   }
 
-  @media (max-width: 1096px) {
+  @media (max-width: 1340px) {
     display: block;
     &-item {
       margin: 0 0 16px !important;
@@ -433,48 +435,7 @@ export default {
     justify-content: space-between;
   }
 
-  @media (max-width: 1394px) {
-    .consumer-profile-wrapper,
-    .financial-statistics-wrapper {
-      width: 48%;
-    }
-    .consumer-profile-container {
-      flex-wrap: wrap;
-      .item {
-        flex: 0 0 30%;
-        height: 135px;
-        margin: 0 !important;
-      }
-    }
-
-    .financial-statistics-container {
-      position: relative;
-      overflow: auto;
-
-      &::-webkit-scrollbar {
-        margin-top: 10px;
-
-        background-color: rgba(255, 68, 0, 0);
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: #f6f6f6;
-        border-radius: 100px;
-      }
-
-      &:last-child {
-        margin-right: 0 !important;
-      }
-
-      .item {
-        flex: 0 0 32%;
-        height: 135px;
-        margin: 0 20px 0 0 !important;
-      }
-    }
-  }
-
-  @media (max-width: 1188px) {
+  @media (max-width: 1390px) {
     display: block;
 
     .consumer-profile-wrapper,
@@ -598,6 +559,12 @@ export default {
           background-color: #f1f4ff;
           border-radius: 4px;
         }
+
+        @media (max-width: 1540px) {
+          font-size: 12px;
+          padding: 2px 8px;
+          margin-right: 0;
+        }
       }
 
       .left-footer {
@@ -611,6 +578,16 @@ export default {
       .data-statistics {
         display: flex;
         align-items: center;
+
+        .item {
+          @media (max-width: 1540px) {
+            margin-right: 30px !important;
+          }
+
+          @media (max-width: 1317px) {
+            margin-right: 51px !important;
+          }
+        }
       }
 
       .map-pie-container {