<template>
  <div class="container" data-weiling-mobile-ui-bc-snapshot-notice-container>
    <div class="bg-wrap">
      <div class="bg-3DADFF"></div>
      <div class="bg-62bdff"></div>
    </div>
    <slot></slot>
  </div>
</template>

<style lang="scss">
@keyframes move {
  0% {
    transform: translateY(j(-10));
  }
  50% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(j(-10));
  }
}
.container[data-weiling-mobile-ui-bc-snapshot-notice-container] {
  background-color: #1c9fff;
  position: fixed;
  bottom: j(40);
  right: j(12);
  z-index: 1001;
  padding: j(22) j(8);
  border-radius: j(10);
  animation: move 1.6s;
  animation-iteration-count: infinite;
  @extend %flex-middle;
  &::before {
    content: " ";
    position: absolute;
    right: j(22);
    bottom: j(-10);
    width: 0;
    height: 0;
    border-left: j(10) solid transparent;
    border-right: j(10) solid transparent;
    border-top: j(10) solid #1c9fff;
  }
  .bg-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: j(10);
    overflow: hidden;
    .bg-3DADFF,
    .bg-62bdff {
      position: absolute;
      right: 0;
      height: 100%;
      z-index: -1;
    }
    .bg-3DADFF {
      right: j(32);
      width: j(100);
      background-color: rgb(61, 173, 255);
      transform: rotate(67deg);
      height: 170%;
      top: 43%;
    }
    .bg-62bdff {
      width: j(100);
      background-color: #62bdff;
      transform: rotate(33deg);
      height: 231%;
      top: j(-10);
      right: j(-20);
    }
  }
}
</style>
