SaaS-DataScreen/src/components/title/index.vue

<!--
 * @Author: WangQiBiao
 * @Date: 2019-09-25 14:16:20
 * @LastEditors: MoZhuangRu
 * @LastEditTime: 2020-01-15 16:47:25
 * @Description:
 -->
<template>
  <h3 class="title">
    <slot></slot>
    <div v-if="isBorder" class="line"></div>
  </h3>
</template>
<script>
export default {
  props: {
    isBorder: {
      default () {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/function';
@import '@/assets/css/theme';
.title{
  text-align: center;
  color: #39D6FE;
  font-size:halfH(22);
  font-weight:bold;
  padding-top: halfH(22);
  background: $title-cent;
  background-clip: text;
  color: transparent;
  .line{
    height: 1px;
    background: $communication-line;
    margin: halfH(15);
  }
}
</style>