<template>
  <div class="card-1-no-wrapper">
    <Logo></Logo>
    <div class="bgi-wrapper"><img src="~@/images/annual/page-7-back.png" alt="" /></div>
    <section class="detail">
      <p class="title">尊敬的<span>齐天大圣</span>医生</p>
      <div class="content">
        <p>您与云鹊医刚遇见不久~</p>
        <p>各类丰富课程和活动等你一一发掘</p>
        <p>希望新一年有云鹊医的陪伴，生活平凡但充实</p>
        <p>在学习知识的路上，我们一同成长</p>
      </div>
    </section>
  </div>
</template>
<script>
import Logo from "@/components/annual-summary/logo";
export default {
  components: {
    Logo
  },
}
</script>
<style lang="less" scoped>
@import "../../style/as-common.less";
.card-1-no-wrapper {
  height: 100vh;
  font-size: 16px;
  color: #3B3B3B;
  background: #F4FEF8;
  .bgi-wrapper {
    position: absolute;
    bottom: 14px;
    right: 18px;
    z-index: 1;
    img {
      display: block;
      width: 323px;
      height: 227px;
    }
  }
  .detail {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    margin: 60px 10px 20px 30px;
    .title {
      line-height: 1;
      font-size: 20px;
      font-weight: 700;
      color: #3F3F3F;
      span {
        display: inline-block;
        margin: 0 7px;
        padding: 1px 25px;
        border-bottom: 2px solid #3B3B3B;
        color: #3B3B3B;
      }
    }
    .content {
      margin-top: 25px;
      p {
        line-height: 2.5;
      }
    }
  }
}
</style>