<template>
  <div class="custom-buy-sell-setp-title">
    <div class="dot">{{ dot }}</div>
    <div class="title-text">{{ text }}</div>
  </div>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    dot?: number;
    text?: string;
  }>(),
  {
    dot: 1,
    text: '默认文字',
  }
);
</script>

<style lang="less">
@import '@/style/flex.less';
.custom-buy-sell-setp-title {
  .da();
  line-height: 46px;
  .dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2962ff;
    color: #eaecef;
    .dja();
    font-size: 12px;
  }
  .title-text {
    margin-left: 6px;
    font-weight: 600;
    font-size: 16px;
    color: var(--theme-color-4);
  }
}
</style>
