technique_web3/src/views/main/four.vue

<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" />
          <div class="input">
            <a-tabs v-model:activeKey="activeKey" centered>
              <a-tab-pane key="1" tab="全部"> </a-tab-pane>
              <a-tab-pane key="2" tab="找专家"> </a-tab-pane>
              <a-tab-pane key="3" tab="找资源"> </a-tab-pane>
              <a-tab-pane key="4" tab="找需求"> </a-tab-pane>
              <a-tab-pane key="5" tab="更多+"> </a-tab-pane>
            </a-tabs>
            <a-input-search
              v-model:value="searchValue"
              placeholder="请输入想要搜索的内容"
              enter-button="搜索"
              size="large"
              @search="onSearch"
            />
            <div class="hot">
              <div class="hot_1">热门搜索：</div>
              <div class="hot_2">
                <span>商贸</span>
                <span>红旗</span>
                <span>有机发光器件</span>
                <span>车载显示屏</span>
                <span>政府质量奖</span>
                <span>科技</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="24" class="two">
          <home v-if="activeKey == '1'"></home>
          <expert v-if="activeKey == '2'"></expert>
          <demand v-if="activeKey == '4'"></demand>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 组件
import expert from '@/views/expert/index.vue'
import demand from '@/views/demand/index.vue'
import home from '@/views/home/index.vue'
// 图片引入
import news from '/images/bg.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 {
    position: relative;

    .image {
      width: 100%;
      height: 200px;
    }

    .input {
      width: 800px;
      position: absolute;
      left: 25%;
      bottom: 25%;
      .hot {
        display: flex;
        margin: 10px 0 0 0;
        padding: 10px;
        .hot_2 {
          span {
            margin: 0 10px;
            font-size: $global-font-size-16;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 400;
            color: #666;
            line-height: $global-font-size-18;
            cursor: pointer;
          }
          span:hover {
            color: #1989fa;
          }
        }
      }
    }
  }
}
</style>