nofinishdia.vue 1.27 KB
<template>
  <div class="nofinish-block" :style="{backgroundImage:`url('${noFinishBg}')`}">
    <div class="title">
      学习还未完成
    </div>
    <div class="desc">
      书山有路勤为径 学海无涯苦作舟
    </div>
    <div class="go-on">
      继续学习
    </div>
  </div>
</template>

<script>
  import noFinishBg from '../../assets/newLesson/noFinishBg.png'
  export default {
    name: "nofinishdia",
    data(){
      return{
        noFinishBg:noFinishBg
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .nofinish-block{
    width: 235*@toVw;
    height: 270*@toVw;
    position: relative;
    background-size: 100% 100%;
    text-align: center;
    color: white;
    .title{
      font-size:28*@toVw;
      font-family:PingFang-SC-Bold;
      font-weight:bold;
      padding-top: 40*@toVw;
    }
    .desc{
      font-size:14*@toVw;
      margin-top: 5*@toVw;
      font-family:PingFang-SC-Medium;
      font-weight:500;
    }
    .go-on{
      position: absolute;
      background: #FCD900 ;
      font-size: 16*@toVw;
      color: white;
      bottom: -25*@toVw;
      left: 50%;
      margin-left: -75*@toVw;
      font-family:PingFang-SC-Bold;
      padding:15*@toVw 45*@toVw;
      border-radius: 200*@toVw;
    }
  }
</style>