<template>
  <div class="titlebox">
    <div class="txtbox" :class="{ txtbox2: type !== '1', txtbox3: type == '2' }">
      <img src="../../assets/icons/tb0.png" alt="图标" class="tb">
      <h4>{{ title }}</h4>
      <span>{{ en }}</span>
    </div>
    <div class="xian" :class="{ xian2: type !== '1' && type !== '8', xian3: type == '2' }"></div>
    <a class="more" :class="{ more2: type == '2' }" v-if="type !== '1' && type !== '正文'" @click="btn">更多>></a>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    en: String,
    type: String
  },
  components: {},
  data () {
    return {}
  },
  methods: {
    btn () {
      this.$emit('jump', this.type)
    }
  },
  mounted () {}
}
</script>

<style lang="less" scoped>
.titlebox {
  position: relative;
  width: 100%;
  color: #a40000;
  display: flex;
  .txtbox {
    width: 30%;
    display: flex;
    .tb {
      height: 30px;
    }
    h4 {
      margin: 0 10px;
    }
    span {
      font-size: 0.8em;
      line-height: 2em;
    }
  }
  .txtbox2 {
    width: 20%;
  }
  .xian {
    width: 70%;
    height: 3px;
    background: #a40000;
    margin: 0 10px;
    margin-top: 2%;
  }
  .xian2 {
    width: 83%;
  }
  .txtbox3 {
    width: 35%;
  }
  .xian3 {
    width: 65%;
  }
  .more {
    position: absolute;
    right: 2%;
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  .more2 {
    right: 2%;
    top: -40%;
  }
}
</style>
