<template>
<div class="card-wrapper">
  <img class="edge-head" src="@/assets/images/card-head.png"/>
  <div class="edge bar left"/>
  <div class="edge bar right"/>
  <div class="edge top-left"/>
  <div class="edge top-right"/>
  <div class="edge bottom-left"/>
  <div class="edge bottom-right"/>
  <div class="card-title" :style="`color:${color}`">
    <img src="@/assets/images/arrow.png"/>
    {{title}}
    <img src="@/assets/images/arrow.png" style="transform:rotate(180deg)"/>
  </div>
  <div class="card-content">
    <slot />
  </div>
</div>
</template>

<script>
export default {
  name: 'Mode2',
  props: {
    title: {
      type: String,
      default: '标题',
    },
    color: {
      type: String,
    }
  },
}
</script>

<style lang="stylus" scoped>
.card-wrapper
  position relative
  .card-title
    display flex
    align-items center
    justify-content space-around
    color $edgeColor
    font-size 1.2rem
    font-weight bold
    width 50%
    margin .5rem auto
    img
      width 1rem
  // .card-content
  //   padding 0.5rem 1rem
  .edge-head
    position absolute
    top 0
    left 0
    right 0
    margin auto
    width 50%
    max-height 0.6rem
  .edge
    position absolute
    height 0
    width 0
    border .2rem solid $edgeColor
    &.top-left
      top 0
      left 0
      border-right-color transparent
      border-bottom-color transparent
    &.top-right
      top 0
      right 0
      border-left-color transparent
      border-bottom-color transparent
    &.bottom-left
      bottom 0
      left 0
      border-radius 50%
    &.bottom-right
      bottom 0
      right 0
      border-radius 50%
    &.bar
      border none
      background-color $edgeColor
      width .4rem
      height 6rem
      top 3rem
      &.left
        transform skew(45deg) rotate(45deg)
        left 0
      &.right
        right 0
        transform skew(-45deg) rotate(-45deg)
</style>
