<template>
  <div class="merchant-description">
    <div>
      <h5>{{description.storeName}}</h5>
      <p>{{description.description}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    layout: 'main',
    fetch ({ store, params }) {
      return Promise.all([
        store.dispatch('shop/findStoreInfoFromUuid', params)
      ])
    },
    computed: {
      description () {
        return this.$store.state.shop.storeInfo.store.data
      }
    }
  }
</script>
<style scoped>
  .merchant-description{
    width:100%;
    background: url('/images/mobile/@2x/shop/store-intro-bg.png')no-repeat;
    background-size: cover;
    height: -webkit-fill-available;
    background-position: 0 -.86rem;
  }
  .merchant-description div{
    width:6.5rem;
    margin:0 auto;
    padding-top:.75rem;
    color: #fff;
  }
  .merchant-description div h5{
    text-align: center;
    font-size: .36rem;
    margin:0;
  }
  .merchant-description div p{
    font-size:.32rem;
    line-height: .4rem;
    margin:0;
    margin-top: .76rem;
    color: #333;
    padding: .35rem .25rem;
    border-radius: .1rem;
    background: url('/images/mobile/@2x/shop/store-intro-content-bg.png')no-repeat;
    background-color: #fff;
    background-size: cover;
  }
</style>
