<template>
  <div class="title-box clearfix">
    <navigator
      v-if="url"
      class="more fr clearfix"
      hover-class="none"
      :url="url">
        <span class="fl">{{moreText}}</span>
        <img class="fl" src="../assets/images/icon_more.png" mode="widthFix">
      </navigator>
    <div class="title clearfix">
      <div v-if="bgColor" class="border fl" :style="{'backgroundColor': bgColor}"></div>
      <div class="text fl">{{title}}</div>
      <div v-if="tips" class="tips fl">{{tips}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['url', 'title', 'tips', 'bgColor', 'moreText'],
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/less/common.less';
.title-box{
  margin: 0 @spacing @spacing;
  height:24px;
  line-height: 24px;
  .title{
    overflow: hidden;
    .border{
      margin: 6px 8px 6px 0;
      width: 5px;
      height: 12px;
    }
    .text{
      font-size: 18px;
      font-weight: 500;
    }
    .tips{
      margin: 4px 0 0 8px;
      padding: 0 0 0 8px;
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      border-left: solid 1px #C9C9C9;
      color: @themeColor;
    }
  }
  .more{
    padding: 0 0 0 10px;
    font-size: 12px;
    color: #999999;
    img{
      margin-top: 7px;
      width: 10px;
    }
  }
}
</style>
