<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-row :gutter="[16, 30]">
              <a-col :span="6" v-for="(item, index) in list" :key="index" @click="onSearch">
                <div class="list">{{ item.label }}</div>
              </a-col>
            </a-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 list = 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' },
  { label: '碳纤维及复合材料', value: '8' },
  { label: '遥感卫星及航天航空技术', value: '9' },
  { label: '精密仪器及先进装备', value: '10' },
  { label: '生物医药及先进医疗器械', value: '11' }
])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
// 搜索
const onSearch = () => {
  const query = { type: 'search' }
  router.push({ path: '/search', query })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

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