lg_frontend/components/ThirdLevelLabel.vue

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

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

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

.secondary-title {
  width: 100%;
  height: 54px;
  .clear-fix;

  ._icon {
    width: 20px;
    height: 20px;
    .bg("~/assets/peakCoalImages/common/third-level-label-icon.png");
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }

  ._title {
    height: 100%;
    line-height: 54px;
    padding-left: 20px;
    float: left;
    font-family: PingFangSC-Medium;
    font-size: 38.59px;
    color: #D8F0FF;
    letter-spacing: 0;
    text-shadow: 0 0 11px #0091FF;
    font-weight: 500;
  }

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

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