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

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

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

<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
  $full()
  .card-title
    display flex
    background url('@/assets/images/card-mode2-header.png') center / cover no-repeat
    color $card-title-color
    font-size $card-title-size
    height .2rem
    font-weight bold
    padding-left .2rem
    align-items center
    font-size .13rem
    box-sizing border-box
    border-bottom .01rem solid $primary-border
  .card-content
    display flex
    flex-direction column
    justify-content space-around
    position relative
    box-sizing border-box
    padding .02rem .05rem
    overflow hidden !important
    >div
      $full()
</style>
