<template>
  <view class="themes-default" >
    <image
      class="themes-default__img"
      :src="shopData.bgimg
          ? shopData.bgimg
          : event_rul + '/static/images/df-bg.png'
      "
	  mode="widthFix"
    ></image>
    <!-- 头部 -->
    <themes-head
      :navHeight="navHeight"
      @navselect="navHeadSelect"
      :navList="navList"
      :navIndex="navIndex"
      :shopData="shopData"
    ></themes-head>
    <view class="themes-content position-r" >
			<Choiceness v-if="tabArr.indexOf(0) > -1" v-show="navIndex === 0"></Choiceness>
      <Goods v-if="tabArr.indexOf(1) > -1" v-show="navIndex === 1" :hearHeight="hearHeight"></Goods>
      <Activity v-if="tabArr.indexOf(2) > -1" v-show="navIndex === 2" :hearHeight="hearHeight"></Activity>
      <new-product v-if="tabArr.indexOf(3) > -1" v-show="navIndex === 3" :hearHeight="hearHeight"></new-product>
    </view>
    <!-- 悬浮按钮 -->
    <drag-button></drag-button>
  </view>
</template>

<script>
import { myMixin } from "../logic/index.js";
import themesHead from "./components/themes-head.vue";
import Choiceness from "./choiceness.vue";
import Activity from "./activity.vue";
import newProduct from "./newProduct.vue";
import Goods from "./goods.vue";

export default {
  mixins: [myMixin],
  components: {
    themesHead,
    Choiceness,
    Activity,
    newProduct,
    Goods,
  },
};
</script>

<style lang="scss" scoped>
.themes-default {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #FAF8F8;
  position: relative;
  z-index: 1;
  &::-webkit-scrollbar {
    display: none;
  }
  &__img {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 100%;
  }
}
.themes-content {
  flex: 1;
  z-index: 2;
  padding: 0 28rpx 0;
  margin-top: 16rpx;
}

.bgthem {
	background-color: #E9E7C7;
}
</style>