Browse Source

feat(home): 添加首页按钮点击事件跳转功能

- 在三个按钮上添加了 @click 事件,分别对应不同的跳转路径
- 新增 toZflbLink 方法,根据传入参数跳转到不同的页面
- 使用 vue-router 实现页面跳转
nahida 10 tháng trước cách đây
mục cha
commit
6dfb06e12d
1 tập tin đã thay đổi với 19 bổ sung5 xóa
  1. 19 5
      src/views/home.vue

+ 19 - 5
src/views/home.vue

@@ -45,7 +45,7 @@
                         24/7 维护服务
                       </div>
                     </div>
-                    <el-button type="primary" round class="w-full">
+                    <el-button type="primary" round class="w-full" @click="toZflbLink('housing')">
                       <el-icon class="mr-1"><ArrowRight /></el-icon>
                       立即申请
                     </el-button>
@@ -89,7 +89,7 @@
                         灵活租赁方案
                       </div>
                     </div>
-                    <el-button type="success" round class="w-full">
+                    <el-button type="success" round class="w-full" @click="toZflbLink('factory')">
                       <el-icon class="mr-1"><ArrowRight /></el-icon>
                       查看厂房
                     </el-button>
@@ -133,7 +133,12 @@
                         投资对接平台
                       </div>
                     </div>
-                    <el-button type="warning" round class="w-full">
+                    <el-button
+                      type="warning"
+                      round
+                      class="w-full"
+                      @click="toZflbLink('innovation')"
+                    >
                       <el-icon class="mr-1"><ArrowRight /></el-icon>
                       加入孵化
                     </el-button>
@@ -151,9 +156,18 @@
 <script setup lang="ts">
 import { ElButton, ElCard, ElCol, ElContainer, ElIcon, ElMain, ElRow } from 'element-plus'
 import { ArrowRight, Building, Check, Factory, Lightbulb } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
-// 这里可以添加响应式数据和方法
-// 例如:统计数据的动态更新、按钮点击事件等
+const toZflbLink = (currentActive: string) => {
+  router.push({
+    path: '/zf/zflb',
+    query: {
+      currentActive,
+    },
+  })
+}
 </script>
 
 <style scoped>