lg_frontend/components/SecondaryTitle.vue

<!--二级标题-->
<template>
  <div class="secondary-title" :class="{longBg}">
    <div class="_title">{{ title }}</div>
    <div class="_right">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "SecondaryTitle",
  props: {
    longBg: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";

.secondary-title {
  width: 100%;
  height: 84px;
  background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat;
  background-size: 100% 100%;
  .clear-fix;

  &.longBg {
    width: 100%;
    height: 84px;
    background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  ._title {
    padding-left: 100px;
    float: left;
    font-family: AlimamaShuHeiTi-Bold;
    font-size: 46.24px;
    color: #D8F0FF;
    letter-spacing: 3.04px;
    text-shadow: 0 0 25px rgba(0, 145, 255, 0.50);
    font-weight: 700;
  }

  ._right {
    float: right;
    height: 100%;
  }
}

/*
.longBg {
  width: 100%;
  height: 84px;
  background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat;
  background-size: 100% 100%;
}*/
</style>