<template>
  <div class="header">
    <div class="wrap">
      <img alt="" class="logo" src="./image/sell_logo@2x.png">
      <p class="title">AF HOUSE音乐现场</p>
      <p class="outlet-name">
        <img alt="" src="./image/ic_music@2x.png">
        <span>{{ objCurrentBarInfo.bar_name }}</span>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    objCurrentBarInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  left: 0;
  top: 0;
  width: 375px;
  height: 107px;
  padding-top: 17px;

  &:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    display: block;
    width: 100%;
    height: 63px;
    background: linear-gradient(45deg, #000000 0%, #525050 100%);
  }

  .wrap {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    width: 355px;
    height: 80px;
    padding: 16px 0 0 16px;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
    border-radius: 8px;

    .logo {
      display: block;
      width: 130px;
      height: 20px;
    }

    .title {
      margin-top: 8px;
      font-size: 14px;
      color: #736F6F;
      line-height: 20px;
    }
  }

  .outlet-name {
    position: absolute;
    right: 0;
    top: 16px;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 106px;
    max-width: 180px;
    height: 36px;
    padding: 0 11px;
    background: linear-gradient(86deg, #F0E1E2 0%, #DDC5C0 100%);
    border-radius: 18px 0 0 18px;

    img {
      width: 20px;
      height: 20px;
    }

    span {
      margin-left: 4px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1F1E1E;
      line-height: 22px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
