<template>
  <div class="section-title">
    <img
      v-if="type === 'dot'"
      class="title-point"
      :src="require('@/assets/img/bigScreen/title-point.png')"
    />
    <div v-if="type === 'line'" class="title-line"></div>
    <span class="label">{{ title }}</span>
    <span class="line"></span>
    <span class="decoration-triangle"></span>
  </div>
</template>
      <script>
export default {
  name: 'SectionTitle',
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'dot',
    },
  },
  data() {
    return {}
  },
}
</script>
  <style scoped lang="scss">
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title-point {
        width: 14px;
        height: 14px;
    }
    .title-line{
        width: 3px;
        height: 14px;
        background: linear-gradient(270deg, rgba(0,212,255,0) 0%, rgba(0,212,255,0) 0%, #33DDFF 100%);
    }
    .label {
        font-weight: 400;
        font-size: 13px;
        color: #ffffff;
        padding: 0 6px;
    }
    .line {
        flex: 1;
        height: 1px;
        background-color: rgba(51, 153, 255, 0.2);
    }
    .decoration-triangle {
        width: 20px;
        height: 24px;
        background: url('~@/assets/img/bigScreen/triangle01.png') no-repeat;
        background-size: 20px 24px;
        position: relative;
        &::after {
        content: '';
        position: absolute;
        top: 1px;
        left: -7px;
        width: 20px;
        height: 22px;
        background: url('~@/assets/img/bigScreen/triangle02.png') no-repeat;
        background-size: 20px 22px;
        }
    }
}
</style>