<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">
            <el-row :gutter="16">
              <el-col :span="12">
                <div class="left">
                  <div class="name" @click="toDemand">需方中心</div>
                  <div class="value">
                    <a-row :gutter="[16, 16]">
                      <a-col
                        :span="12"
                        v-for="(item, index) in oneList"
                        :key="index"
                        @click="toDemand"
                      >
                        <div class="list">{{ item.label }}</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="right">
                  <div class="name" @click="toSupply">供方中心</div>
                  <div class="value">
                    <a-row :gutter="[16, 16]">
                      <a-col
                        :span="12"
                        v-for="(item, index) in twoList"
                        :key="index"
                        @click="toSupply"
                      >
                        <div class="list">{{ item.label }}</div>
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 路由
const router = useRouter()
// 图片引入
import news from '/images/news.png'
// 加载中
const loading = ref(false)
const oneList = ref([
  { label: '技术需求', value: '0' },
  { label: '人才需求', value: '1' },
  { label: '资金需求', value: '2' },
  { label: '合作伙伴', value: '3' },
  { label: '知识产权', value: '4' },
  { label: '市场需求', value: '5' },
  { label: '政策支持', value: '6' },
  { label: '其他', value: '7' }
])
const twoList = ref([
  { label: '技术支持', value: '0' },
  { label: '培训教育', value: '1' },
  { label: '资金支持', value: '2' },
  { label: '合作机会', value: '3' },
  { label: '知识产权管理', value: '4' },
  { label: '市场推广', value: '5' },
  { label: '政策支持', value: '6' },
  { label: '其他', value: '7' }
])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
const toDemand = async () => {
  router.push({ path: '/demand' })
}
const toSupply = async () => {
  router.push({ path: '/supply' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    margin: 10px 0;
    .left {
      text-align: center;

      .name {
        padding: 20px;
        background: #337ab7;
        color: #ffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 7px;
        margin: 0 0 10px 0;
      }
      .list {
        padding: 20px;
        background: #337ab7;
        color: #ffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 7px;
        margin: 0 0 10px 0;
      }
    }
    .right {
      text-align: center;
      .name {
        padding: 20px;
        background: #337ab7;
        color: #ffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 7px;
        margin: 0 0 10px 0;
      }
      .list {
        padding: 20px;
        background: #337ab7;
        color: #ffff;
        font-size: 16px;
        font-weight: bold;
        border-radius: 7px;
        margin: 0 0 10px 0;
      }
    }
  }
}
</style>
