<template>
  <section class="first-enter-wrap">
    <div class="first-enter-container">
      <div class="bg-content">
        <div class="know-btn">我知道了</div>
      </div>
      <img class="cancel" src="~/assets/icon-dialog-cancel.png" alt="">
    </div>
  </section>
</template>

<script>
  export default {
    name: "index"
  }
</script>

<style scoped lang="less">
.first-enter-wrap {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background:rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  .first-enter-container {
    .bg-content {
      width: 250px;
      height: 275px;
      background: url("../../assets/first-enter/first-enter-bg.png") no-repeat;
      background-size: cover;
      display: flex;
      flex-flow: column;
      .know-btn {
        width: 200px;
        height: 44px;
        background: linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
        border-radius: 25.5px;
        text-align: center;
        line-height: 44px;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        margin: auto auto 30px auto;

      }
    }
    .cancel {
      display: block;
      width: 30px;
      height: 30px;
      margin: 20px auto 0 auto;
    }
  }
}
</style>