wanzai_yitiji/src/pages/find/index.vue

<script setup lang="ts">
import { Input } from "ant-design-vue";
import SearchCard from "@/components/SearchCard.vue";
import BackButton from "@/components/BackButton.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const inputValue = ref("");
</script>
<template>
  <div
    class="h-screen w-full bg-[url('/image/bg.png')] bg-cover flex text-white flex-col relative"
  >
    <!-- 返回按钮 -->
    <BackButton
      class="absolute top-3 md:top-[70px] left-9"
      @click="router.push('/')"
    />

    <div class="w-[691px] mx-auto">
      <!-- 搜索框 -->
      <div
        class="h-[72px] backdrop-blur-sm mx-auto bg-gray-800 mt-[83px] bg-opacity-20 flex justify-between items-center rounded-xl overflow-hidden"
      >
        <div>
          <Input
            class="bg-transparent text-white text-lg px-4 placeholder:text-gray-100"
            :bordered="false"
            placeholder="请输入学生姓名"
            v-model:value="inputValue"
          />
        </div>
        <div
          class="h-full select-none w-[134px] bg-blue-400 flex justify-center items-center font-medium text-xl cursor-pointer"
        >
          搜索
        </div>
      </div>

      <!-- 结果框 -->
      <div
        v-show="inputValue.length > 0"
        class="bg-[#c7dfeb] bg-opacity-70 backdrop-blur-sm rounded-xl mt-2 text-black flex flex-col py-8 gap-2 max-h-[400px] overflow-auto"
      >
        <SearchCard v-for="i in 3" :key="i" class="flex-none" />
      </div>
    </div>
  </div>
</template>

<style scoped></style>