<template>
  <div class="screen-title">
    <img v-if="type==='long'"
         class="screen-title-image"
         src="./../../assets/icon/title-content.png" />
    <img v-else
         class="screen-title-image"
         src="./../../assets/icon/title-content-half.png" />
    <div class="screen-title-name"> {{titleName}}</div>
  </div>
</template>

<script>
export default {
  name: 'screen-title',
  data () {
    return {
      dataList: [],
      dropdownMenuVisible: true
    }
  },
  props: {
    titleName: {
      type: String,
      required: true,
      default: ''
    },
    type: {
      type: String,
      required: false,
      default: 'long'
    }

  },
  watch: {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.screen-title {
  height: 50px;
  width: 620px;
  overflow: hidden;
  position: relative;

  &-image {
    height: 100%;
  }
  &-name {
    position: absolute;
    top: 10px;
    left: 49px;
    letter-spacing: 2px;

    font-size: 22px;
    font-family: MF LangQian (Noncommercial);
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0px 2px 4px #009ba9;
  }
}
</style>
