<template lang="html">
  <div class="characterCardVue">

    <!-- 卡片 -->
    <div class="cardWrap" :class="{ 'active': show }" @click="show = !show">

      <!-- 卡片正面 -->
      <div class="positive">
        <div class="avatarWrap">
          <div class="avatar" :style="{ 'background-image': `url(static/img/avatar/${name}.png)` }"></div>
          <div class="lace"></div>
        </div>
        <p class="name">{{ name }}</p>
      </div>

      <!-- 卡片反面 -->
      <div class="negative"></div>

    </div>

  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      show: false
    }
  }
}
</script>

<style lang="scss" scoped>
.characterCardVue{
  transform-style: preserve-3d;
  /*! autoprefixer: off */
  perspective: 800px;
  /* autoprefixer: on */
  .cardWrap{
    position: relative;
    width: 300px;
    height: 460px;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
    transition: all 1s ease;
    &.active{
      transform: rotateY(0deg);
    }
    .positive, .negative{
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #1A1C36;
      border-radius: 6px;
      transform-style: preserve-3d;
      overflow: hidden;
    }
    // 卡片正面
    .positive{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url('~static/img/font-bg.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 8px 267px;
      box-shadow: 0 0 40px rgba(61, 201, 249, .5);
      .avatarWrap{
        margin: 85px 0;
        position: relative;
        .avatar, .lace{
          position: absolute;
          background-size: calc(100% + 10px * 2);
          background-repeat: no-repeat;
          background-position: center center;
          transform: translate(-50%, -50%);
        }
        .avatar{
          width: calc(165px * .9);
          height: calc(165px * .9);
          border-radius: 50%;
          box-shadow: 0 0 40px #3ECDFD;
        }
        .lace{
          width: calc(165px * 1.8);
          height: calc(165px * 1.8);
          background-image: url('~static/img/lace.png');
          top: 30px;
          left: -3px;
        }
      }
      .name{
        color: #3ECDFD;
        font-size: 30px;
        margin-top: 100px;
        text-shadow: 0 0 8px currentColor;
      }
    }
    // 卡片反面
    .negative{
      transform: rotateY(180deg) translateZ(1px);
      background-image: url('~static/img/card-bg2.gif');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: calc(50% + 11px) center;
    }
  }
}
</style>
