<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">
          <el-image class="image" :src="news" fit="fill" />
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200">
            <a-tabs v-model:activeKey="activeKey" centered>
              <a-tab-pane key="1" tab="需求发布">
                <demand></demand>
              </a-tab-pane>
              <a-tab-pane key="2" tab="供方发布">
                <supply></supply>
              </a-tab-pane>
            </a-tabs>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 组件
import demand from './parts/demand.vue'
import supply from './parts/supply.vue'
// 图片引入
import news from '/images/news.png'
// 加载中
const loading = ref(false)
const activeKey = ref('1')
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    margin: 10px 0;
  }
}
</style>
