完成首页布局

src/components/HomeItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { Item } from "@/mdoel/item";
+
+defineProps<{
+  item: Item;
+}>();
+</script>
+<template>
+  <div class="flex items-center flex-col select-none mt-6 cursor-pointer">
+    <img :src="item.img" :width="32" :height="32" />
+    <div class="mt-2 text-lg">{{ item.title }}</div>
+  </div>
+</template>

src/mdoel/item.ts

@@ -0,0 +1,5 @@
+export interface Item {
+  img: string;
+  title: string;
+  url: string;
+}

src/pages/home/inde.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import BackButton from "@/components/BackButton.vue";
+import HomeItem from "@/components/HomeItem.vue";
+import { Item } from "@/mdoel/item";
 import { onMounted, ref } from "vue";
 const current = ref("");
 const getCurrentTime = () => {
@@ -14,6 +16,28 @@ const getCurrentTime = () => {
   current.value = res;
 };
 
+const items: Item[] = [
+  {
+    title: "场景选择",
+    url: "/",
+    img: "/image/1.png",
+  },
+  {
+    title: "自动旋转",
+    url: "/",
+    img: "/image/2.png",
+  },
+  {
+    title: "学校简历",
+    url: "/",
+    img: "/image/3.png",
+  },
+  {
+    title: "学生查询",
+    url: "/find",
+    img: "/image/4.png",
+  },
+];
 onMounted(() => {
   getCurrentTime();
   setInterval(getCurrentTime, 1000);
@@ -21,10 +45,10 @@ onMounted(() => {
 </script>
 <template>
   <div class="relative w-full h-screen">
-    <!-- <iframe
+    <iframe
       class="w-full h-screen"
       :src="`https://www.720pai.net/tour/dfecea34bfc84088?Tid=`"
-    ></iframe> -->
+    ></iframe>
 
     <div
       class="absolute top-0 left-0 flex justify-between flex-col h-screen w-full"
@@ -41,9 +65,7 @@ onMounted(() => {
       <!-- 中 -->
       <div class="flex justify-end px-10">
         <div>
-          <div>1</div>
-          <div>2</div>
-          <div>3</div>
+          <HomeItem v-for="(item, i) in items" :key="i" :item="item" />
         </div>
       </div>
       <!-- 下  -->