<template>
  <div class="card-wrapper">
    <div class="card-title">
      {{ title }}
      <img class="tri" src="@/assets/images/modal-head-tri.png" />
      <img class="tri" src="@/assets/images/modal-head-tri.png" />
    </div>
    <div class="card-content">
      <slot />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import flag from '@/assets/images/card-model2-flag.png'

export interface AdditionProp {
  name?: string
  value?: number
  unit?: string
}
export default defineComponent({
  name: 'Mode3',
  props: {
    title: {
      type: String as PropType<string>,
      required: true,
    },
  },
  setup() {
    return {
      flag,
    }
  },
})
</script>

<style scoped lang="stylus">
@import '../main.styl'
.card-wrapper
  $full()
  background linear-gradient(to bottom, rgba(5,71,138,.3), rgba(5,71,138,.6))
  .card-title
    display flex
    background linear-gradient(to bottom, transparent, rgba(0,148,255,.3))
    position relative
    color #D0EBEC
    font-family $font-zcool
    font-size $card-title-size
    height .2rem
    padding-left .2rem
    align-items center
    font-size .13rem
    box-sizing border-box
    border-bottom .01rem solid $primary-border
    .tri
      position absolute
      left 0
      width .2rem
      &:nth-of-type(2)
        left auto
        right 0
        transform rotate(180deg)
  .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>
