<template>
  <div :class="['title', type == 'long' ? 'long' : '']">
    {{ title }}
    <slot />
  </div>
</template>
<script>
export default {
  name: "Utitle",
  props: {
    title: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "short",
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  width: calc(100% - 24px);
  font-size: 20px;
  color: #fff;
  line-height: 38px !important;
  height: 38px;
  padding-left: 24px;
  background: url("@/assets/images/User/title-short.png") no-repeat;
  background-size: 100% 100%;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
  &.long {
    background: url("@/assets/images/User/title-long.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>