<!--
 * @Author: zhp
 * @Date: 2024-06-03 15:38:31
 * @LastEditTime: 2024-07-24 10:29:26
 * @LastEditors: zhp
 * @Description:
-->
<!--
    filename: ChartContainer.vue
    author: liubin
    date: 2024-04-10 08:54:33
    description:
    todo: 驾驶舱和首页的 ChartContainer, 实现滑动条 和动态宽高
-->

<template>
  <div class="chart-container" :class="{ 'no-scroll': noScroll }">
    <slot />
  </div>
</template>

<script>
export default {
  name: "ChartContainer",
  components: {},
  props: {
    noScroll: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.chart-container {
  height: 0;
  flex: 1;
  overflow-x: scroll;
}

.no-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  //   width: 10px;
  //   height: 10px;
  //   background: #14305f;
}

::-webkit-scrollbar-track {
  background: #14305f;
  border: 0 none;
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: #004798;
  border: 0 none;
  border-radius: 6px;
}
</style>
