<template>
  <view class="start-wrapper" :class="{ 'start-wrapper-hiddren': flag }">
    <view class="iamge-box">
      <!-- <image class="start-logo" src="/static/logo.png" mode="scaleToFill" /> -->
      <image class="mch-name" src="/static/startImg/agent-name.svg" mode="scaleToFill" />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue"
const props = defineProps({
  flag: { type: Boolean, default: false }
})
</script>

<style lang="scss" scoped>
.start-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999999;
  min-height: 100vh;
  background: url("/static/startImg/start-bg.svg") no-repeat top;
  background-size: 100%;
  // background: #fff;

  .iamge-box {
    transform: translateY(300rpx);
    display: flex;
    flex-direction: column;
    align-items: center;

    .start-logo {
      width: 150rpx;
      height: 150rpx;
      border-radius: 12rpx;
    }

    .mch-name {
      margin-top: 80rpx;
      width: 300rpx;
      height: 150rpx;
    }
  }
}

.start-wrapper-hiddren {
  transition: 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  bottom: auto;
  top: -100vh;
  overflow: hidden;
}
</style>