<template>
  <div class="card-wrapper">
    <div class="card-title">
      <span class="dot" />
      <p>
        {{ title }}
      </p>
    </div>
    <div class="card-content">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  name: 'Mode1',
  props: {
    title: {
      type: String as PropType<string>,
      required: true,
    },
  },
})
</script>

<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
  background rgba(29,42,65,.8)
  .card-title
    display flex
    align-items center
    padding .04rem .1rem
    background linear-gradient(to right, rgba(59,85,102,.8) 70%, transparent)
    position relative
    border-bottom .01rem solid #717F8C
    >p
      font-size .12rem
      font-weight bold
    .dot
      display inline-block
      width .02rem
      height .2rem
      background #fadb71
      position absolute
      top 0
      bottom 0
      left 0
      margin auto
  .card-content
    position relative
    box-sizing border-box
    padding .05rem
    display flex
    flex-direction column
    justify-content space-around
    $blur(0.01rem)
    >div
      $full()
</style>
