<template>
  <div class="head-container">
    <div class="back" v-if="isBack"></div>
    <div class="head-box" :style="{ padding: isBack ? '0 1.5rem' : '0 .5rem' }">
      <slot name="title"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isBack: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.head-container {
  height: 1.5rem;
  width: 100%;
  background-image: url(../assets/images/course/head-back.png);
  position: fixed;
  top: 0;
  .back {
    width: 0.3rem;
    height: 0.3rem;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    position: absolute;
    transform: rotate(-45deg) translateY(-50%);
    top: 47%;
    left: 0.8rem;
    cursor: pointer;
  }
  .head-box {
    padding: 0 1.5rem;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
}
</style>
