<template>
  <div class="home-header">
    <div class="home-header-logo">
      <img src="@/assets/logo1.png" alt />
    </div>
    <div class="home-header-tips">
      <p>{{ descText }}</p>
    </div>
  </div>
</template>

<script>
import { FirebaseUtil } from "@/utils/firebase.util";
export default {
  props: {
    descText: String
  },
  mounted() {
    new FirebaseUtil();
  },
}
</script>

<style lang="scss" scoped>
.home-header {
  width: 100%;
  height: 243px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("@/assets/logo_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  .home-header-logo {
    width: 121px;
    height: 120px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .home-header-tips {
    width: 370px;
    height: 50px;
    position: absolute;
    bottom: -0px;
    margin: 0 auto;
    background: #211d26;
    border-radius: 28px;
    font-family: "Poppins";
    font-weight: 400;
    font-size: 16px;
    color: #37ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #B966FF;

    // text-align: center;
    // display: none;
    p {
      width: 320px;
    }
  }
}
</style>