|
@@ -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>
|