wanzai_yitiji/src/pages/find/index.vue

<script setup lang="ts">
import { Input } from "ant-design-vue";
const router = useRouter();
const inputValue = ref("");
const localStore = useLocalStore();
const showIndex = ref(0);
onMounted(() => {
  console.log(localStore.initialized);
  console.log(localStore.locals);
});
</script>
<template>
  <div
    class="h-screen bg w-full bg-[url('/image/bg.png')] bg-cover flex text-white"
  >
    <!--  初始化后展示 -->
    <div
      v-if="localStore.initialized"
      class="flex-col relative w-full h-screen"
    >
      <!-- 打上标记的点 -->
      <ShowPoint
        v-for="(item, i) in localStore.locals"
        :key="i"
        :local="item"
        :show="showIndex === i"
      />

      <!-- 返回按钮 -->
      <BackButton
        class="absolute top-3 md:top-[40px] 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
            @click="showIndex++"
            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] z-50 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>

    <!-- 未初始化展示 -->
    <Init v-else />
  </div>
</template>

<style scoped></style>