<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one" v-if="is_show">
          <twelve1></twelve1>
        </el-col>
        <el-col :span="24" class="two" v-else>
          <twelve2></twelve2>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 组件
import twelve1 from './hatch/twelve_1.vue'
import twelve2 from './hatch/twelve_2.vue'
// 加载中
const loading = ref(false)
const is_show = ref(true)
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
// 转化
const toChange = async () => {
  is_show.value = !is_show.value
}
// provide
provide('toChange', toChange)
</script>
<style scoped lang="scss">
.main {
  background: rgb(248, 248, 248);
  .one {
    margin: 10px;
    background: #ffffff;
  }
}
</style>
