<template>
  <view :class="['nana-demo-block-title',small?'small':'']">
    <view v-if="!small" class="line">
      <view class="line2"></view>
    </view>
    <Text :fontConfig="small ? 'subText' : 'h5'"  :text="title" />
  </view>
</template>

<script setup lang="ts">
import Text from '../basic/Text.vue';

defineProps({	
  title: String	,
  small: Boolean,
})
</script>

<style>
.nana-demo-block-title {
  position: relative;
  padding-bottom: 15rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nana-demo-block-title .title {
  font-size: 36rpx;
  color: #000;
}
.nana-demo-block-title.small .title {
  font-size: 28rpx;
  color: #000;
}
.nana-demo-block-title .line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  border-radius: 5rpx;
  background-color: #dddddd;
  overflow: visible;
}
.nana-demo-block-title .line2 {
  width: 60rpx;
  height: 6rpx;
  border-radius: 5rpx;
  background-color: #0079db;
  margin-top: -3rpx;
}
</style>