<template>
  <div class="custom-raffle-box">
    <div v-show="current == 'activity'">
      <Activity v-model="current"></Activity>
    </div>
    <template v-if="isLoadMyBox">
      <div v-show="current == 'mybox'">
        <Myraffle v-model="current"></Myraffle>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import Myraffle from './components/myraffle';
import Activity from './components/Activity';
import { ref, watch } from 'vue';
const current = ref('activity');
// 是否加载我的盲盒
const isLoadMyBox = ref(false);
watch(
  () => current.value,
  (v) => {
    if (v == 'mybox' && !isLoadMyBox.value) {
      isLoadMyBox.value = true;
    }
  }
);
</script>

<style lang="less">
@import './media.less';
// 一个页面一个媒体查询
.custom-raffle-box {
  width: 1000px;
  margin: 0 auto;
  padding: 30px 0 20px 0;
  height: 100%;
  box-sizing: border-box;
}
</style>
