<template>
  <div
    class="bc-snapshot-notice-wrap"
    data-weiling-mobile-ui-bc-snapshot-notice
  >
    <div
      v-if="show_background"
      class="show-background"
      :style="backgroundStyle"
    ></div>
    <Container>
      <div class="snapshot-notice">
        <p class="text">{{ text }}</p>
      </div>
      <div class="figer-wrap">
        <WlPic :src="snapshot_notice_figer" />
      </div>
    </Container>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCSnapshotNotice",
};
</script>

<script lang="ts" setup>
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import Container from "./components/Container/index.vue";
import { snapshot_notice_figer } from "@mobileUI/utils/cdn";
type TProps = {
  show_background?: boolean;
  text?: string;
};

withDefaults(defineProps<TProps>(), {
  show_background: true,
  text: "点击下方“使用完整服务”查看文章",
});
const backgroundStyle = {
  // "background-image": `url(${snapshot_notice_wrap_bg})`
};
</script>

<style lang="scss">
.bc-snapshot-notice-wrap[data-weiling-mobile-ui-bc-snapshot-notice] {
  .show-background {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.9) 32.07%,
      rgba(255, 255, 255, 0) 77.93%
    );
  }
  .snapshot-notice {
    background-size: contain;
    margin-right: j(9);
    @extend %flex-middle-center;
    .text {
      font-weight: 400;
      color: #ffffff;
      font-size: j(16);
    }
  }
  .figer-wrap {
    width: j(48);
    height: j(48);
    float: right;
  }
}
</style>
