<template>
  <div class="shop">
    <div class="btn" @click="isShow = true">
      <div class="icon"></div>
    </div>
    <transition name="move-bottom">
      <div class="shop-mask" v-transfer-dom v-show="isShow">
        <div class="mask" @click="isShow = false"></div>
        <div class="box">
          <shop-list v-model="isShow"></shop-list>
        </div>
      </div>
    </transition>
    <div class="shop-hot-box">
      <shop-hot></shop-hot>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import shopList from './shopList/index';
import shopHot from './shopHot/index';
export default {
  name: 'vertical-shop-box',
  components: {
    shopList,
    shopHot
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapGetters({
      userInfo: 'userInfo'
    })
  },
  methods: {}
};
</script>
<style lang="less" scoped>
.shop {
  position: relative;
  width: 0.36rem;
  height: 0.36rem;
  .btn {
    position: relative;
    width: 0.36rem;
    height: 0.36rem;
    background: linear-gradient(#feab1d, #ff8b1c);
    border-radius: 100%;
    .icon {
      width: 100%;
      height: 100%;
      background: url(./img/icon-shop.png) no-repeat center center;
      background-size: 0.22rem auto;
    }
  }
}
.shop-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .box {
    position: absolute;
    left: 0.1rem;
    right: 0.1rem;
    bottom: 0;
    z-index: 100;
    height: 60%;
    min-height: 3rem;
    border-radius: 0.1rem 0.1rem 0px 0px;
    overflow: hidden;
  }
}
.shop-hot-box {
  position: absolute;
  bottom: 100%;
  right: 0;
}
</style>
