<template>
  <div class="title-content">
    <div class="left-title">
      <div class="line"></div>
      <div class="text">{{ data.name }}</div>
    </div>
    <div v-if="data.more" class="right-text" @click="$router.push({ path: data.more.path, query: data.more.query ? data.more.query : {} })">
      {{ $t('viewMore') }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'mTitle',
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
    }
  },
  methods: {
    goPage(item) {
      this.$router.push({
        path: '/about/news-detail',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-content{
  display: flex;
  height: 37px;
  .left-title{
    display: flex;
    align-items: center;
    .line{
      width: 7px;
      height: 37px;
      background: #AA1941;
    }
    .text{
      font-size: 32px;
      font-weight: bold;
      line-height: 34px;
      color: #333;
      margin-left: 20px;
    }
  }
  .right-text{
    margin-left: auto;
    font-size: 16px;
    color: #9B9B9B;
    cursor: pointer;
  }
}
</style>