From 1ccba957a046e88ade1344b56bda4a2cf726b1d0 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Thu, 25 Aug 2022 10:33:36 +0800
Subject: [PATCH] Use smaller font size.

---
 .../dashboard/DashboardCardHorizontal.vue     |  4 +-
 .../dashboard/DashboardCardVertical.vue       |  4 +-
 .../dashboard/DashboardPriceChart2.vue        | 68 ++++++++++++-------
 3 files changed, 49 insertions(+), 27 deletions(-)

diff --git a/src/views/components/dashboard/DashboardCardHorizontal.vue b/src/views/components/dashboard/DashboardCardHorizontal.vue
index 477cb341..36fd7c91 100644
--- a/src/views/components/dashboard/DashboardCardHorizontal.vue
+++ b/src/views/components/dashboard/DashboardCardHorizontal.vue
@@ -2,9 +2,9 @@
   <b-card no-body>
     <b-card-body class="d-flex justify-content-between align-items-center">
       <div class="truncate">
-        <h2 class="mb-25 font-weight-bolder">
+        <h4 class="mb-25 font-weight-bolder">
           {{ statistic }}
-        </h2>
+        </h4>
         <span>{{ statisticTitle }}</span>
       </div>
       <b-avatar
diff --git a/src/views/components/dashboard/DashboardCardVertical.vue b/src/views/components/dashboard/DashboardCardVertical.vue
index 8d94ab0b..b20598fc 100644
--- a/src/views/components/dashboard/DashboardCardVertical.vue
+++ b/src/views/components/dashboard/DashboardCardVertical.vue
@@ -11,9 +11,9 @@
       />
     </b-avatar>
     <div class="truncate">
-      <h2 class="mb-25 font-weight-bolder">
+      <h4 class="mb-25 font-weight-bolder">
         {{ statistic }}
-      </h2>
+      </h4>
       <span>{{ statisticTitle }}</span>
     </div>
   </b-card>
diff --git a/src/views/components/dashboard/DashboardPriceChart2.vue b/src/views/components/dashboard/DashboardPriceChart2.vue
index d8a5ed70..11874e02 100644
--- a/src/views/components/dashboard/DashboardPriceChart2.vue
+++ b/src/views/components/dashboard/DashboardPriceChart2.vue
@@ -36,30 +36,38 @@
               text="Pairs"
               :variant="color"
             >
-              <b-dropdown-item
-                v-for="(pair, i) in tickers"
-                :key="i"
-                @click="selectPair(pair)"
+              <vue-perfect-scrollbar
+                :settings="settings"
+                class="pair-scroll-area"
               >
-                <b-row style="width:400px;">
-                  <b-col cols="4">
-                    {{ pair.market.name }}
-                  </b-col>
-                  <b-col
-                    cols="4"
-                    class="text-uppercase text-truncate"
-                  >
-                    {{ coinInfo.symbol }}/{{ pair.target }}
-                  </b-col>
-                  <b-col
-                    cols="4"
-                    class="font-weight-bold"
-                    :class="`text-${colorMap(pair.trust_score)}`"
-                  >
-                    ${{ pair.converted_last.usd }}
-                  </b-col>
-                </b-row>
-              </b-dropdown-item>
+                <b-dropdown-item
+                  v-for="(pair, i) in tickers"
+                  :key="i"
+                  @click="selectPair(pair)"
+                >
+                  <b-row style="width:400px;">
+                    <b-col
+                      cols="4"
+                      class="text-truncate"
+                    >
+                      {{ pair.market.name }}
+                    </b-col>
+                    <b-col
+                      cols="4"
+                      class="text-uppercase text-truncate"
+                    >
+                      {{ coinInfo.symbol }}/{{ pair.target }}
+                    </b-col>
+                    <b-col
+                      cols="4"
+                      class="font-weight-bold"
+                      :class="`text-${colorMap(pair.trust_score)}`"
+                    >
+                      ${{ pair.converted_last.usd }}
+                    </b-col>
+                  </b-row>
+                </b-dropdown-item>
+              </vue-perfect-scrollbar>
             </b-dropdown>
             <div class="text-truncate ml-1">
               <sup class="text-body">
@@ -199,6 +207,7 @@ import {
 } from 'bootstrap-vue'
 import VueApexCharts from 'vue-apexcharts'
 import { $themeColors } from '@themeConfig'
+import VuePerfectScrollbar from 'vue-perfect-scrollbar'
 import FeatherIcon from '../../../@core/components/feather-icon/FeatherIcon.vue'
 
 export default {
@@ -219,12 +228,16 @@ export default {
     BDropdown,
     BDropdownItem,
     FeatherIcon,
+    VuePerfectScrollbar,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
   data() {
     return {
+      settings: {
+        maxScrollbarLength: 60,
+      },
       colors: {
         green: 'success',
         yellow: 'warning',
@@ -390,3 +403,12 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.pair-scroll-area {
+  position: relative;
+  margin: auto;
+  /* width: 400px; //*/
+  max-height: 300px;
+}
+</style>