<template>
  <div id="main">
    <div v-for="(component, key) in components" :key="key" class="box" :class="{pro: isPro}">
      <component :is="component" />
      <p v-if="isPro" class="name" title="点击复制" @click="copyName(component.name)">
        {{ component.name }}
      </p>
    </div>
  </div>
</template>

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

const isPro = computed(() => process.env.NODE_ENV === 'production')
function copyName(name) {
  const input = document.createElement('input')
  input.value = name
  document.body.appendChild(input)
  input.select()
  document.execCommand('Copy')
  document.body.removeChild(input)
}
</script>

<style lang="stylus" scoped>
#main
  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
    position relative
    &.pro
      .name
        display none
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        font-size .2rem
        font-weight bold
        color #fff
        z-index 9
        cursor pointer
      &:hover
        &:after
          content ''
          position absolute
          top 0
          left 0
          bottom 0
          right 0
          background rgba(0,0,0,.5)
          z-index 8
        .name
          display block
          transition color .2s ease-in-out
          &:hover
            color #47B3FF
</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%
  font-size .1rem
  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>
