瀏覽代碼

feat: 添加首页核心业务模块展示

- 新增公租房管理、标准化厂房和创新创业基地三个核心业务模块的展示卡片
- 使用 Element Plus 组件库实现响应式布局和交互效果
- 添加自定义样式和动画,提升页面视觉效果
nahida 10 月之前
父節點
當前提交
d27799e372
共有 1 個文件被更改,包括 181 次插入0 次删除
  1. 181 0
      src/views/home.vue

+ 181 - 0
src/views/home.vue

@@ -0,0 +1,181 @@
+<template>
+  <el-container class="h-full bg-gradient-to-br from-blue-50 to-indigo-100">
+    <el-main class="h-full p-0">
+      <!-- 核心业务模块 -->
+      <div class="px-8">
+        <div class="max-w-6xl mx-auto">
+          <div class="text-center mb-16">
+            <h2 class="text-4xl font-extrabold text-gray-900 mb-4">核心业务模块</h2>
+            <p class="text-xl text-gray-600">为您提供全方位的园区服务解决方案</p>
+          </div>
+
+          <el-row :gutter="32" class="justify-center">
+            <!-- 公租房模块 -->
+            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
+              <el-card
+                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
+              >
+                <div class="relative">
+                  <div
+                    class="bg-gradient-to-br from-blue-500 to-blue-600 p-8 text-white text-center"
+                  >
+                    <el-icon
+                      :size="64"
+                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
+                    >
+                      <Building />
+                    </el-icon>
+                    <h3 class="text-2xl font-bold mb-2">公租房管理</h3>
+                  </div>
+                  <div class="p-8">
+                    <p class="text-gray-600 mb-6 leading-relaxed">
+                      提供便捷的公租房申请、分配、租赁和后期管理服务,助力解决住房问题。
+                    </p>
+                    <div class="space-y-3 mb-6">
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        在线申请与签订
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        AR全景看房
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        24/7 维护服务
+                      </div>
+                    </div>
+                    <el-button type="primary" round class="w-full">
+                      <el-icon class="mr-1"><ArrowRight /></el-icon>
+                      立即申请
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+
+            <!-- 标准化厂房模块 -->
+            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
+              <el-card
+                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
+              >
+                <div class="relative">
+                  <div
+                    class="bg-gradient-to-br from-green-500 to-green-600 p-8 text-white text-center"
+                  >
+                    <el-icon
+                      :size="64"
+                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
+                    >
+                      <Factory />
+                    </el-icon>
+                    <h3 class="text-2xl font-bold mb-2">标准化厂房</h3>
+                  </div>
+                  <div class="p-8">
+                    <p class="text-gray-600 mb-6 leading-relaxed">
+                      提供现代化、高标准的厂房租赁服务,满足各类企业的生产需求,优化营商环境。
+                    </p>
+                    <div class="space-y-3 mb-6">
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        标准化设计建造
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        完善配套设施
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        灵活租赁方案
+                      </div>
+                    </div>
+                    <el-button type="success" round class="w-full">
+                      <el-icon class="mr-1"><ArrowRight /></el-icon>
+                      查看厂房
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+
+            <!-- 创新创业基地模块 -->
+            <el-col :xs="24" :sm="12" :md="8" class="mb-8">
+              <el-card
+                class="h-full shadow-xl hover:shadow-2xl transition-all duration-300 rounded-2xl border-0 overflow-hidden group"
+              >
+                <div class="relative">
+                  <div
+                    class="bg-gradient-to-br from-purple-500 to-purple-600 p-8 text-white text-center"
+                  >
+                    <el-icon
+                      :size="64"
+                      class="mb-4 group-hover:scale-110 transition-transform duration-300"
+                    >
+                      <Lightbulb />
+                    </el-icon>
+                    <h3 class="text-2xl font-bold mb-2">创新创业基地</h3>
+                  </div>
+                  <div class="p-8">
+                    <p class="text-gray-600 mb-6 leading-relaxed">
+                      为初创企业和创新团队提供孵化空间、政策扶持和资源对接,助力梦想起航。
+                    </p>
+                    <div class="space-y-3 mb-6">
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        创业孵化服务
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        政策扶持指导
+                      </div>
+                      <div class="flex items-center text-sm text-gray-600">
+                        <el-icon class="mr-2 text-green-500"><Check /></el-icon>
+                        投资对接平台
+                      </div>
+                    </div>
+                    <el-button type="warning" round class="w-full">
+                      <el-icon class="mr-1"><ArrowRight /></el-icon>
+                      加入孵化
+                    </el-button>
+                  </div>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </el-main>
+  </el-container>
+</template>
+
+<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'
+
+// 这里可以添加响应式数据和方法
+// 例如:统计数据的动态更新、按钮点击事件等
+</script>
+
+<style scoped>
+/* 自定义样式覆盖 */
+.el-card {
+  border: none;
+}
+
+.el-button {
+  font-weight: 600;
+}
+
+/* 渐变背景动画 */
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+</style>