<template>
  <div class="card-4-wrapper" :class="{'ysl': type == 1, 'zqc': type == 2, 'no': type == 3}">
    <Logo imgType=2></Logo>
    <section class="detail">
      <p v-show="title"><span class="fbig6 cw">{{title}}</span></p>
      <section class="ct">
        <p><span class="fw7">12</span> 月 <span class="fw7">12</span> 日 <span class="fw7">12</span> 点，您还在学习。 </p>
        <p>老师，您辛苦了！</p>
        <p class="tr mt-40">这一年，有 <span class="fw7">10</span> 天，</p>
        <p class="tr">您都在持续不断的学习。</p>
      </section>
    </section>    
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  },
  props: {
    type: {
      type: Number | String,
      default: 3,
    },
    title: {
      type: String,
      default: '' // 夜深了 早起床
    }
  },

}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-4-wrapper {
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  font-size: 16px;
  color: #3B3B3B;
  &.ysl {
    background: url('../../images/annual/page-4-back.png') no-repeat center center;
    background-size: cover;
    color: #FFFFFF;
  }  
  &.zqc {
    background: url('../../images/annual/page-5-back.png') no-repeat center center;
    background-size: cover;
    color: #134A5D;
  }
  &.no {
    background: url('../../images/annual/page-6-back.png') no-repeat center center;
    background-size: cover;
    color: #FFFFFF;
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 20px 30px;
    .ct {
      p {
        line-height: 1.6 !important;
      }
      margin-top: 20px;
      .tr {
        text-align: right;
      }
    }
  }
}
</style>