单独构建大屏ui库,避免引入混乱

ui/dv/layout/AiRanking/AiRanking.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="AiRanking" :class="'AiRanking-' + theme">
+    <component :is="subType" :theme="theme" :data="data"></component>
+  </div>
+</template>
+
+<script>
+  import Ranking1 from './components/Ranking1'
+  import Ranking2 from './components/Ranking2'
+  import Ranking3 from './components/Ranking3'
+  export default {
+    name: 'AiRanking',
+
+    components: {
+      Ranking1,
+      Ranking2,
+      Ranking3
+    },
+
+    props: {
+      data: {
+        type: Array,
+        default: () => []
+      },
+
+      theme: {
+        type: String,
+        default: '0'
+      },
+
+      subType: {
+        type: String,
+        default: 'Ranking1'
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .AiRanking {
+    height: 100%;
+
+    * {
+      box-sizing: border-box;
+    }
+
+    ::-webkit-scrollbar {
+      width: 5px;
+      height: 14px;
+    }
+
+    ::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      min-height: 20px;
+      background-clip: content-box;
+      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    ::-webkit-scrollbar-track {
+      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
+    }
+
+    &.AiRanking-1 {
+      ::-webkit-scrollbar {
+        width: 5px;
+        height: 14px;
+      }
+
+      ::-webkit-scrollbar-corner {
+        background: transparent;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        min-height: 20px;
+        background-clip: content-box;
+        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
+      }
+
+      ::-webkit-scrollbar-track {
+        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
+      }
+    }
+  }
+</style>