lq/spa-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页优化

Browse Source
This commit is contained in:
liqi
2025-04-24 18:38:13 +08:00
parent 7ba8706b6e
commit 368e066aa8
1 changed files with 36 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/views/frontend/Home.vue
View File

@@ -21,16 +21,20 @@ const projects = [
{
id: 1,
title: '电商平台',
tags: ['Vue3', 'Node.js'],
tags: ['Vue3', 'Node.js', 'PHP'],
category: ['Web', 'Uni app', '微信小程序'],
description: '基于Vue3和Node.js开发的电商平台，提供完整的购物流程，包括注册、登录、购物、支付等功能。',
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
route: '/project/1'
route: '1'
},
{
id: 2,
title: 'OA系统',
tags: ['React', 'Java'],
tags: ['React', 'PHP'],
category: ['Web', 'Uni app', '微信小程序'],
description: '基于React和PHP开发的OA系统，提供完整的流程管理、审批、报表等功能。亮点：1、1‘00万用户、2、Saas系统1、1‘00万用户、2、Saas系统1、1‘00万用户、2、Saas系统1、1‘00万用户、2、Saas系统1、1‘00万用户、2、Saas系统1、1‘00万用户、2、Saas系统',
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
route: '/project/2'
route: '2'
}
]
@@ -84,7 +88,7 @@ const partners = [
class="group relative cursor-pointer hover:z-10 transition-transform duration-500"
v-for="(item, index) in 3"
:key="item"
@click="$router.push(projects[index % 2].route)"
@click="$router.push(`/project/${projects[index % 2].route}`)"
>
<div class="relative h-64 md:h-[480px] xl:h-[560px]">
<img
@@ -118,6 +122,7 @@ const partners = [
class="relative group bg-white dark:bg-gray-800 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden cursor-pointer"
data-aos="fade-up"
:data-aos-delay="index * 100"
@click="$router.push(`/project/${projects[index % 2].route}`)"
>
<div class="relative h-56 md:h-64 overflow-hidden">
<img
@@ -127,9 +132,6 @@ const partners = [
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 via-transparent" />
</div>
<div class="p-6 md:p-7">
<h3 class="text-xl md:text-2xl font-semibold mb-3 text-gray-900 dark:text-white">
{{ project.title }}
</h3>
<div class="flex flex-wrap gap-2">
<span
v-for="tag in project.tags"
@@ -138,6 +140,20 @@ const partners = [
{{ tag }}
</span>
</div>
<div class="flex flex-wrap gap-2 mt-5">
<span
v-for="tag in project.category"
class="px-3 py-1.5 bg-blue-100 dark:bg-blue-900/40 text-blue-600 dark:text-blue-300 text-sm font-medium rounded-lg"
>
{{ tag }}
</span>
</div>
<h3 class="mt-3 text-xl md:text-2xl font-semibold mb-3 text-gray-900 dark:text-white">
{{ project.title }}
</h3>
<p class="text-gray-600 dark:text-gray-400 line-clamp-3">
{{ project.description }}
</p>
</div>
</div>
</div>
@@ -190,11 +206,17 @@ const partners = [
:autoplay="{ delay: 2000 }"
>
<swiper-slide v-for="(partner, index) in partners" :key="index">
<div class="flex items-center justify-center h-32 bg-white dark:bg-gray-800 rounded-xl p-4 shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2">
<img
:src="partner.logo"
class="h-12 object-contain opacity-80 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
/>
<div class="flex flex-wrap items-center justify-center h-43 bg-white dark:bg-gray-800 rounded-xl p-4 shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2"
>
<div class="w-full flex flex-wrap items-center justify-center">
<img
:src="partner.logo"
class="h-24 object-contain opacity-80 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
alt="测试"/>
</div>
<div class="flex items-center justify-center transition-opacity duration-500 w-full">
<span class="text-white text-lg font-bold">{{ partner.name }}</span>
</div>
</div>
</swiper-slide>
</swiper>
@@ -222,4 +244,4 @@ const partners = [
.swiper-pagination-bullet-active {
@apply bg-blue-600;
}
</style>
</style>