瀏覽代碼

解决首页按钮无法点击问题

Atticus6 2 年之前
父節點
當前提交
df71c5f1be
共有 2 個文件被更改,包括 23 次插入25 次删除
  1. 5 2
      src/components/HomeItem.vue
  2. 18 23
      src/pages/home/inde.vue

+ 5 - 2
src/components/HomeItem.vue

@@ -6,8 +6,11 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="flex items-center flex-col select-none mt-6 cursor-pointer">
+  <RouterLink
+    :to="item.url"
+    class="flex items-center flex-col select-none mt-4 cursor-pointer bg-white p-2 rounded-md shadow-sm no-underline"
+  >
     <img :src="item.img" :width="32" :height="32" />
     <div class="mt-2 text-lg">{{ item.title }}</div>
-  </div>
+  </RouterLink>
 </template>

+ 18 - 23
src/pages/home/inde.vue

@@ -44,32 +44,27 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="relative w-full h-screen">
-    <iframe
-      class="w-full h-screen"
-      :src="`https://www.720pai.net/tour/dfecea34bfc84088?Tid=`"
-    ></iframe>
+  <div class="w-full h-screen relative">
+    <iframe class="w-full h-screen"> </iframe>
+    <BackButton
+      class="absolute top-6 left-7 bg-gray-100 bg-opacity-20 backdrop-blur-sm rounded-xl"
+    />
+
+    <div class="absolute top-6 right-96">
+      <img src="/image/school-l.png" :width="60" />
+    </div>
 
     <div
-      class="absolute top-0 left-0 flex justify-between flex-col h-screen w-full"
+      class="absolute top-6 right-72 h-16 flex items-center font-medium text-xl"
     >
-      <!-- 上 -->
-      <div class="p-10 flex justify-between">
-        <BackButton />
-        <div class="flex items-center">
-          <img src="/image/school-l.png" :width="58" :height="58" />
-          <div class="text-2xl ml-4">万载三中</div>
-          <div class="font-medium ml-20 text-xl">{{ current }}</div>
-        </div>
-      </div>
-      <!-- 中 -->
-      <div class="flex justify-end px-10">
-        <div>
-          <HomeItem v-for="(item, i) in items" :key="i" :item="item" />
-        </div>
-      </div>
-      <!-- 下  -->
-      <div></div>
+      万载三中
+    </div>
+    <div class="absolute top-6 right-1 sm:right-10 h-16 flex items-center w-48">
+      {{ current }}
+    </div>
+
+    <div class="absolute top-1/4 right-1 sm:right-10 h-16 flex flex-col">
+      <HomeItem v-for="(item, i) in items" :key="i" :item="item" />
     </div>
   </div>
 </template>