<template>
  <div class="page">

    <div class="headerbar">
      <img :src="require('@/assets/logo.png')" alt="">
    </div>

    <div class="container">
      <Tabs type="card" :animated="false" @on-click="tabClick">
        <TabPane label="资料上传">
          <div class="tabpane-container">
            <subForm @success="$refs['myExhibitor'].getExhibitors(true)"></subForm>
          </div>
        </TabPane>
        <TabPane label="我的资料">
          <div class="tabpane-container">
            <myExhibitor ref="myExhibitor"></myExhibitor>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>

import myExhibitor from '@/views/h5/exhibitor/myExhibitor.vue';
import subForm from '@/views/h5/exhibitor/form.vue';
export default {
  components: {
    subForm,
    myExhibitor
  },
  data() {
    return {
    }
  },
  methods: {
    tabClick (index) {
      if (index === 1) {
        this.$refs['myExhibitor'].getExhibitors(true);
      }
    }
  },
  computed: {
  },
  destroyed() {
  },
  created() {
  }
}
</script>

<style scoped lang="scss">
.headerbar {
  height: 80px;
  background: #d0d8e8;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 10px 6px #0000000c;

  position: relative;
  z-index: 2;
  & > img {
    height: 50px;
    object-fit: contain;

    margin-left: 20px;
  }
}
.page {
  width: 100%;
  height: 100%;

  position: relative;

  &:before {
    content: '';
    background: url('../../assets/h5bkg.jpeg') no-repeat;
    background-size: cover;
    filter: blur(1.5px) opacity(84%);

    z-index: 0;
    position: absolute;
    inset: 0 0 0 0;
  }
}
.container {
  filter: drop-shadow(2px 2px 8px #0006);
  padding: 20px;
}
::v-deep .ivu-tabs-ink-bar {
  transition: none;
}
::v-deep .ivu-tabs-tab-active {
  border-color: $primaryColor !important;
}
::v-deep .ivu-tabs-bar {
  border-color: $primaryColor !important;
  margin-bottom: 0!important;
}
.tabpane-container {
  background: #fff;
  border: 1px solid $primaryColor;
  border-top: none;
  padding: 20px;
  border-radius: 0 0 4px 4px;
}
@media (min-width: 768px) {
  .container {
    padding: 40px;
  }
}
@media (max-width: 768px) {
  .headerbar {
    height: 46px;

    & > img {
      height: 60%;
    }
  }
}
</style>
