<!--入园二维码-->
<template>
  <div class="app-container">
    <div class="opacity-card">
      <div class="title">入园二维码</div>
      <div class="img" />
    </div>
  </div>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
    };
  },
  created() {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  width: 100%;
  background-image: url('../../assets/qrcode_bg.png');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  position: relative;

  .opacity-card {
    position: absolute;
    box-shadow: 0px 14px 23px 0px #1D66D326;
    background: #FFFFFF66;
    width: 340px;
    height: 400px;
    top: 250px;
    gap: 10px;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 27px;
      height: 40px;
      width: 100%;
      text-align: center;
      line-height: 40px;
      color: #000000;
    }

    .img {
      width: 300px;
      height: 300px;
      background: #fff;
    }
  }
}
</style>
