app/pages/index/com/title.vue

<template>
  <div class="product-service-frame">
    <div class="service-indicator"></div>
    <span class="service-text"> {{ title }} </span>
  </div>
</template>
<script setup>
defineProps({
  title: {
    type: String,
    default: ''
  }
});
</script>

<style scoped lang="scss">
.product-service-frame {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-family: 'Source Han Sans';
  font-weight: 700;
  line-height: 23px;
  color: var(--N8---, #1b1b1b);
  white-space: pre;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  padding: 16px 0;
}

.service-indicator {
  width: 3px;
  height: 14px;
  flex-shrink: 0;
  background-color: #3a74f2;
}

.service-text {
  flex-shrink: 0;
}
</style>