<template>
|
<div class="bg-white py-8">
|
<div class="container mx-auto px-4">
|
<div class="grid grid-cols-4 gap-4">
|
<!-- 发APP -->
|
<div class="function-card">
|
<el-card shadow="hover" class="h-full">
|
<div class="flex items-center space-x-4">
|
<div class="w-12 h-12 flex items-center justify-center bg-blue-100 rounded-full">
|
<el-icon class="text-2xl text-blue-500"><Promotion /></el-icon>
|
</div>
|
<div>
|
<div class="text-lg font-medium">发APP</div>
|
<div class="text-gray-500 text-sm">Publish APP</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 发需求 -->
|
<div class="function-card">
|
<el-card shadow="hover" class="h-full">
|
<div class="flex items-center space-x-4">
|
<div class="w-12 h-12 flex items-center justify-center bg-green-100 rounded-full">
|
<el-icon class="text-2xl text-green-500"><Document /></el-icon>
|
</div>
|
<div>
|
<div class="text-lg font-medium">发需求</div>
|
<div class="text-gray-500 text-sm">Publish Demand</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 找APP -->
|
<div class="function-card">
|
<el-card shadow="hover" class="h-full">
|
<div class="flex items-center space-x-4">
|
<div class="w-12 h-12 flex items-center justify-center bg-purple-100 rounded-full">
|
<el-icon class="text-2xl text-purple-500"><Search /></el-icon>
|
</div>
|
<div>
|
<div class="text-lg font-medium">找APP</div>
|
<div class="text-gray-500 text-sm">Find APP</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
|
<!-- 找需求 -->
|
<div class="function-card">
|
<el-card shadow="hover" class="h-full">
|
<div class="flex items-center space-x-4">
|
<div class="w-12 h-12 flex items-center justify-center bg-orange-100 rounded-full">
|
<el-icon class="text-2xl text-orange-500"><List /></el-icon>
|
</div>
|
<div>
|
<div class="text-lg font-medium">找需求</div>
|
<div class="text-gray-500 text-sm">Find Demand</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { Promotion, Document, Search, List } from '@element-plus/icons-vue'
|
</script>
|
|
<style scoped>
|
.function-card {
|
transition: transform 0.2s;
|
}
|
|
.function-card:hover {
|
transform: translateY(-4px);
|
}
|
</style>
|
