<script setup lang="ts">
import { useRouter } from 'vue-router'
const props = withDefaults(
  defineProps<{
    tip: string
    title: string
    bgc: string
  }>(),
  {
    tip: '',
    title: '',
    bgc: '#FB9FD5',
  },
)
const OSS_URL = `${import.meta.env.VITE_OSS_URL}`
const app_bg = `url(${OSS_URL}/urm/app_bg_big.png) bottom/100% 100% no-repeat`
</script>
<template>
  <div class="box">
    <div
      class="tip"
      :style="{
        backgroundColor: bgc,
      }"
    >
      {{ tip }}
    </div>
    <div class="title">
      {{ title }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: min-content;
  padding: 1.33vh 48px;
  border-radius: 3.33vh 3.33vh 0 0;
  background: #faffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--, $font-color);
  text-align: center;
  font-family: $font-special;
  font-size: 3.33vh;
  font-style: normal;
  font-weight: 400;
  line-height: 6.33vh; /* 150% */
  position: absolute;
  left: 50%;
  transform: translate(-50%, -99%);
  .tip {
    height: 6.33vh;
    padding: 0 40px;
    border-radius: 1.67vh;
    margin-right: 16px;
  }
  .title {
    width: max-content;
    flex: 1;
  }
}
</style>
