<template>
  <div class="shop-top-box">
    <div class="back" @click="isShow = false"></div>
    <div class="title">{{ title }}</div>
    <div class="close" @click="isShow = false"></div>
  </div>
</template>
<script>
export default {
  name: 'shop-top',
  props: {
    value: {},
    title: {}
  },
  computed: {
    isShow: {
      get() {
        return this.value;
      },
      set(nVal) {
        this.$emit('input', nVal);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.shop-top-box {
  position: relative;
  padding: 0 0.1rem;
  height: 100%;
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 0.12rem;
  .back {
    flex: 0 0 auto;
    width: 0.2rem;
    height: 0.2rem;
    background: url('./img/icon-left.png') no-repeat center center;
    background-size: 0.14rem auto;
    cursor: pointer;
  }
  .title {
    flex: 1;
    text-align: center;
  }
  .close {
    flex: 0 0 auto;
    width: 0.2rem;
    height: 0.2rem;
    background: url('./img/icon-close.png') no-repeat center center;
    background-size: 0.14rem auto;
    cursor: pointer;
  }
}
</style>
