<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="8">
                <div class="left">
                  <el-image class="image" :src="xinxi" fit="fill" />
                </div>
              </el-col>
              <el-col :span="16">
                <div class="right">
                  <div
                    class="list"
                    v-for="(item, index) in list"
                    :key="index"
                    @click="toView(item)"
                  >
                    <div class="name" :class="[`name` + item.value]">{{ item.name }}</div>
                    <div class="remark">{{ item.remark }}</div>
                  </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'
import xinxi from '/images/xinxi.png'
// 加载中
const loading = ref(false)
const list = ref([
  {
    name: '① 专家库',
    value: '0',
    remark: '整合平台中各专业领域的专家信息，为科研单位、企业提供具有专业知识和技能的人才。'
  },
  {
    name: '② 供需库',
    value: '1',
    remark: '平台对数据进行分析，实时获取各个资源的供需状况与市场的需求、趋势。'
  },
  {
    name: '③ 企业库',
    value: '2',
    remark: '整合平台中重点企业的信息，便于平台运营能更高效的掌握企业整体动态。'
  },
  {
    name: '④ 项目库',
    value: '3',
    remark:
      '整合平台项目数据，助力平台各方快速定位自己合适的项目，促进供需的有效对接，加速项目实施、转化速度。'
  }
])
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
// 查看
const toView = (item) => {
  if (item.value == '0') router.push({ path: '/expert' })
  if (item.value == '1') router.push({ path: '/demand' })
  if (item.value == '2') router.push({ path: '/company' })
  if (item.value == '3') router.push({ path: '/project' })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    margin: 10px 0;
    .left {
      .image {
        width: 100%;
        height: 400px;
      }
    }
    .right {
      .list {
        margin: 20px 0;
        .name {
          font-size: 25px;
          font-weight: bold;
          margin: 0 0 10px 0;
        }
        .name0 {
          color: #ff4500;
        }
        .name1 {
          color: #ff8c00;
        }
        .name2 {
          color: #ffd700;
        }
        .name3 {
          color: #ff4500;
        }
        .remark {
          font-size: 18px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
