<template>
  <div id="main">
    <div v-for="(component, key) in components" :key="key" class="box">
      <component :is="component" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ServeDev',
})
</script>
<script lang="ts" setup>
import * as components from '@/lib/index'
</script>

<style lang="stylus" scoped>
#main
  width 100%
  max-height 100%
  box-sizing border-box
  padding .05rem
  -moz-column-count 4
  -webkit-column-count 4
  column-count 4
  -moz-column-gap @padding
  -webkit-column-gap @padding
  column-gap @padding
  >.box
    -moz-page-break-inside avoid
    -webkit-column-break-inside avoid
    break-inside avoid
    margin-bottom .05rem
</style>
<style lang="stylus">
@font-face
  font-family DIN
  src url(../src/assets/font/DIN-Medium.otf)
@font-face
  font-family Pangmenzhengdao
  src url(../src/assets/font/pangmenzhengdao.ttf)

html, body
  background #000
  font-family DIN, Avenir, Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  width 100%
  height 100%
  user-select none
  font-size 16vh
  line-height 1.5
  p
    margin 0
#app
  width 100%
  height 100%
  overflow hidden
  font-size .1rem
  background url('../src/assets/images/background.jpg') center/100% 100% no-repeat
  color #fff
.orange-count
  font-size .14rem
  font-weight bold
  background-clip text
  -webkit-background-clip text
  -webkit-text-fill-color transparent
  background-image linear-gradient(to bottom, #FFD1B2, #FF8635)

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: .04rem;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background:rgba(91, 213, 255, 0.3)
  -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(91, 213, 255, 0.3)
}
</style>
