<!--
 * @Description: main content
 * @Author: ZCY
 * @Date: 2022年12月7日12:26:26
-->
<template>
  <main id="theMain" class="theMain" :style="{ backgroundColor: themeColor.mainBg }">
    <slot />
  </main>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { inject } from 'vue';
import type { ThemeColor } from '../types';
import { themeColorKey } from '../utils/injectedKeys';

const { themeColor } = inject<{ themeColor: Ref<ThemeColor>; }>(themeColorKey)!;
</script>

<style scoped>
.theMain {
  transition: all 0.3s ease 0s;
  position: relative;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid #e7e7e7;
  overflow-x: hidden;
}
.theMain::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.theMain:hover::-webkit-scrollbar-track-piece {
  background: transparent;
}
.theMain:hover::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.theMain:hover::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 20px;
}
.theMain .u-table {
  padding: 12px 0;
}
</style>
