<template>
  <div class="circular-code-conatiner" :style="styleExtra">
    <div>
      <WlPic :src="defaultUrl" />
    </div>
  </div>
</template>

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

<script lang="ts" setup>
import { ref } from "vue";
import type { CSSProperties } from "vue";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";

const defaultUrl = ref(
  "https://wlmvp-cos.weiling.cn/1356898121111711744/1656579209wp77ce6.svg",
);
type Props = {
  themeColor: string;
  styleExtra: CSSProperties;
  icon: string;
};
withDefaults(defineProps<Props>(), {
  themeColor: "var(--wl-primary-color)",
  styleExtra: null,
  icon: "icon-mobile-ui-erweima",
});
</script>

<style lang="scss">
.suspension-code[data-weiling-mobile-ui-bc-suspension-code] {
  .circular-code-conatiner {
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: j(60);
    height: j(60);
    background: rgba(255, 255, 255, 0.7);
    border: j(1) solid rgba(28, 159, 255, 0.3);
    backdrop-filter: blur(j(10));
    border-radius: 50%;
    filter: drop-shadow(0px j(8) j(10) rgba(28, 159, 255, 0.1));
  }
}
</style>
