页面优化
This commit is contained in:
@@ -48,16 +48,16 @@ onMounted(() => {
|
||||
:class="`${route.path === item.path? 'router-link-active': 'router-link'} flex items-center p-3 rounded-lg hover:bg-opacity-10 hover:bg-white transition-colors text-white text-lg`"
|
||||
@click="router.push(item.path)"
|
||||
>
|
||||
<component :is="item.icon" class="mr-3" />
|
||||
<!-- <component :is="item.icon" class="mr-3" />-->
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center space-x-4">
|
||||
<AuthModal ref="authModal" />
|
||||
<a-button
|
||||
<a-button
|
||||
v-if="!userStore.isAuthenticated"
|
||||
type="primary"
|
||||
type="primary"
|
||||
class="text-sm"
|
||||
@click="authModal?.show()"
|
||||
>
|
||||
@@ -107,7 +107,7 @@ onMounted(() => {
|
||||
|
||||
<!-- 移动端菜单开关 -->
|
||||
<div class="fixed bottom-6 right-6 z-50 md:hidden">
|
||||
<a-button
|
||||
<a-button
|
||||
shape="circle"
|
||||
type="primary"
|
||||
size="large"
|
||||
@@ -118,7 +118,7 @@ onMounted(() => {
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<a-layout-content class="pt-16 body-box">
|
||||
<a-layout-content class="body-box">
|
||||
<router-view />
|
||||
</a-layout-content>
|
||||
</a-layout>
|
||||
@@ -133,7 +133,7 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
.body-box {
|
||||
background-color: #111 !important;
|
||||
background-color: #131a2a !important;
|
||||
min-height: 100vh;
|
||||
}
|
||||
:deep(.ant-menu-horizontal) {
|
||||
@@ -158,4 +158,4 @@ header {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,26 +1,17 @@
|
||||
<template>
|
||||
<div class="max-w-4xl mx-auto p-6">
|
||||
<h1 class="text-3xl font-bold mb-6 text-blue-600">关于我们</h1>
|
||||
<section class="space-y-6">
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">公司简介</h2>
|
||||
<p class="text-gray-600 leading-relaxed">
|
||||
我们是一家专注数字化转型的科技企业，致力于为客户提供创新的解决方案...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h2 class="text-xl font-semibold mb-4">核心团队</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- 团队成员卡片 -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useHead } from '@vueuse/head'
|
||||
import AOS from 'aos'
|
||||
import 'aos/dist/aos.css'
|
||||
|
||||
onMounted(() => {
|
||||
AOS.init({
|
||||
duration: 1200,
|
||||
offset: 120,
|
||||
easing: 'ease-out-cubic',
|
||||
once: false
|
||||
})
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: '关于我们 - 企业数字化解决方案专家',
|
||||
@@ -28,4 +19,212 @@ useHead({
|
||||
{ name: 'description', content: '了解我们的企业使命、核心团队和技术优势' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
const teamMembers = [
|
||||
{
|
||||
name: '张三',
|
||||
role: '创始人 & CEO',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
description: '拥有15年互联网行业经验，曾任职于多家知名科技企业，专注于企业数字化转型战略'
|
||||
},
|
||||
{
|
||||
name: '李四',
|
||||
role: '技术总监',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
description: '全栈开发专家，精通前后端技术栈，负责公司核心产品架构设计与技术团队管理'
|
||||
},
|
||||
{
|
||||
name: '王五',
|
||||
role: '产品经理',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
description: '拥有丰富的产品设计与用户体验经验，致力于打造简洁高效的企业级应用'
|
||||
},
|
||||
{
|
||||
name: '赵六',
|
||||
role: '市场总监',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
description: '营销策略专家，擅长品牌建设与市场拓展，负责公司整体市场战略规划'
|
||||
}
|
||||
]
|
||||
|
||||
const milestones = [
|
||||
{ year: '2018', title: '公司成立', description: '团队初创，确立企业数字化服务方向' },
|
||||
{ year: '2019', title: '首轮融资', description: '获得天使轮投资，团队扩展到15人' },
|
||||
{ year: '2020', title: '产品上线', description: '核心产品正式发布，服务首批企业客户' },
|
||||
{ year: '2021', title: '业务扩展', description: '客户数量突破100家，业务覆盖全国主要城市' },
|
||||
{ year: '2022', title: 'A轮融资', description: '完成A轮融资，估值达到1亿元' },
|
||||
{ year: '2023', title: '国际化', description: '开始拓展海外市场，建立国际合作伙伴网络' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-16" data-aos="fade-up">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||
<span class="relative">
|
||||
关于我们
|
||||
<span class="absolute -bottom-2 left-0 right-0 mx-auto w-1/3 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
我们致力于为企业提供创新的数字化解决方案，帮助客户在数字时代实现业务增长
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 公司简介 -->
|
||||
<section class="mb-20" data-aos="fade-up">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 p-8 md:p-10">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white flex items-center">
|
||||
<span class="w-10 h-10 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 flex items-center justify-center mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
|
||||
</svg>
|
||||
</span>
|
||||
公司简介
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6 text-gray-700 dark:text-gray-300 leading-relaxed">
|
||||
<p>
|
||||
我们是一家专注于数字化转型的科技企业，成立于2018年，总部位于深圳，在北京、上海、广州设有分支机构。公司拥有一支由资深技术专家、产品经理和行业顾问组成的精英团队，致力于为各行业客户提供创新的数字化解决方案。
|
||||
</p>
|
||||
<p>
|
||||
我们的使命是通过技术创新赋能企业发展，帮助传统企业实现数字化转型，提升运营效率，创造更大的商业价值。我们相信，数字化不仅是技术的变革，更是思维方式和商业模式的革新。
|
||||
</p>
|
||||
<p>
|
||||
凭借深厚的技术积累和行业洞察，我们已成功为金融、零售、制造、教育等多个领域的客户提供了定制化的解决方案，赢得了广泛的认可和信任。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 发展历程 -->
|
||||
<section class="mb-20" data-aos="fade-up">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-10 text-gray-900 dark:text-white text-center">
|
||||
<span class="relative">
|
||||
发展历程
|
||||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="relative">
|
||||
<!-- 时间轴线 -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-gradient-to-b from-rose-400 to-rose-600 rounded-full"></div>
|
||||
|
||||
<div class="space-y-12">
|
||||
<div
|
||||
v-for="(milestone, index) in milestones"
|
||||
:key="index"
|
||||
class="relative flex items-center justify-center"
|
||||
:data-aos="index % 2 === 0 ? 'fade-right' : 'fade-left'"
|
||||
:data-aos-delay="index * 100"
|
||||
>
|
||||
<!-- 时间点 -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 rounded-full bg-white dark:bg-gray-800 border-4 border-rose-500 z-10"></div>
|
||||
|
||||
<!-- 内容卡片 -->
|
||||
<div
|
||||
class="w-5/12 bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 p-6"
|
||||
:class="index % 2 === 0 ? 'mr-auto pr-12' : 'ml-auto pl-12'"
|
||||
>
|
||||
<div class="flex items-center mb-3">
|
||||
<span class="text-2xl font-bold text-rose-600 dark:text-rose-400 mr-3">{{ milestone.year }}</span>
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white">{{ milestone.title }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-300">{{ milestone.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 核心团队 -->
|
||||
<section class="mb-20" data-aos="fade-up">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-10 text-gray-900 dark:text-white text-center">
|
||||
<span class="relative">
|
||||
核心团队
|
||||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div
|
||||
v-for="(member, index) in teamMembers"
|
||||
:key="index"
|
||||
class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="index * 100"
|
||||
>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="relative md:w-1/3">
|
||||
<!-- 渐变背景装饰 -->
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-rose-400 to-rose-600 opacity-20"></div>
|
||||
|
||||
<img
|
||||
:src="member.avatar"
|
||||
:alt="member.name"
|
||||
class="w-full h-48 md:h-full object-cover relative z-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-6 md:w-2/3">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-1">{{ member.name }}</h3>
|
||||
<p class="text-rose-600 dark:text-rose-400 font-medium mb-4">{{ member.role }}</p>
|
||||
<p class="text-gray-600 dark:text-gray-300">{{ member.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 联系我们 -->
|
||||
<section data-aos="fade-up">
|
||||
<div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-rose-900/10 dark:to-pink-900/10 rounded-3xl p-8 md:p-10 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white">联系我们</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||
无论您是想了解更多关于我们的服务，还是希望探讨潜在的合作机会，我们都期待与您交流
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-6">
|
||||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<span class="text-gray-700 dark:text-gray-200">contact@example.com</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
||||
</svg>
|
||||
<span class="text-gray-700 dark:text-gray-200">400-123-4567</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-rose-500 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span class="text-gray-700 dark:text-gray-200">深圳市南山区科技园</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 添加轻奢风格的渐变背景和阴影效果 */
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
||||
}
|
||||
|
||||
/* 暗色模式下的轻奢风格 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,19 +1,22 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { Autoplay, Pagination, Navigation, EffectCreative } from 'swiper/modules'
|
||||
import { Autoplay, Pagination, Navigation, EffectFade } from 'swiper/modules'
|
||||
import AOS from 'aos'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/pagination'
|
||||
import 'swiper/css/navigation'
|
||||
import {onMounted} from "vue";
|
||||
import 'swiper/css/effect-fade'
|
||||
import 'aos/dist/aos.css'
|
||||
|
||||
const modules = [Autoplay, Pagination, Navigation, EffectCreative]
|
||||
const modules = [Autoplay, Pagination, Navigation, EffectFade]
|
||||
|
||||
onMounted(() => {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
duration: 1200,
|
||||
offset: 120,
|
||||
easing: 'ease-out-quart'
|
||||
easing: 'ease-out-cubic',
|
||||
once: false
|
||||
})
|
||||
})
|
||||
|
||||
@@ -32,10 +35,10 @@ const projects = [
|
||||
title: 'OA系统',
|
||||
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系统',
|
||||
description: '基于React和PHP开发的OA系统，提供完整的流程管理、审批、报表等功能。亮点：1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统1、100万用户、2、Saas系统',
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
route: '2'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
const testimonials = [
|
||||
@@ -66,182 +69,359 @@ const partners = [
|
||||
{ name: '阿里云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '华为云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '腾讯云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '阿里云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '华为云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
]
|
||||
|
||||
// 轮播图自动播放配置
|
||||
const swiperOptions = {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false
|
||||
}
|
||||
|
||||
// 合作伙伴轮播配置
|
||||
const partnerSwiperOptions = {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false
|
||||
}
|
||||
|
||||
// 轮播图断点配置
|
||||
const breakpoints = {
|
||||
640: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 6,
|
||||
spaceBetween: 30
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<!-- 增强型轮播图 -->
|
||||
<div class="mb-16 lg:mb-24" data-aos="fade-up">
|
||||
<swiper
|
||||
class="rounded-3xl lg:rounded-[2rem] overflow-hidden shadow-2xl hover:shadow-3xl transition-shadow duration-500"
|
||||
:modules="modules"
|
||||
:autoplay="{ delay: 5000 }"
|
||||
:pagination="{ clickable: true }"
|
||||
:navigation="true"
|
||||
>
|
||||
<swiper-slide
|
||||
class="group relative cursor-pointer hover:z-10 transition-transform duration-500"
|
||||
v-for="(item, index) in 3"
|
||||
:key="item"
|
||||
@click="$router.push(`/project/${projects[index % 2].route}`)"
|
||||
>
|
||||
<div class="relative h-64 md:h-[480px] xl:h-[560px]">
|
||||
<img
|
||||
:src="`https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280?text=Banner${item}`"
|
||||
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/80 via-transparent to-transparent p-6 flex flex-col justify-end space-y-3">
|
||||
<h3 class="text-2xl md:text-4xl font-bold text-white mb-2 drop-shadow-2xl">
|
||||
{{ projects[index % 2].title }}
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<span
|
||||
v-for="tag in projects[index % 2].tags"
|
||||
class="px-3 py-1.5 bg-white/10 backdrop-blur-lg text-sm font-medium text-gray-100 rounded-lg transition-colors hover:bg-white/20"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
|
||||
<!-- 精选项目 - 网格布局 -->
|
||||
<section class="mb-20 lg:mb-28">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 md:mb-12 text-gray-900 dark:text-white" data-aos="fade-up">精选项目</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
<div
|
||||
v-for="(project, index) in projects"
|
||||
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
|
||||
:src="project.cover"
|
||||
class="w-full h-full object-cover transform transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-gray-900/40 via-transparent" />
|
||||
</div>
|
||||
<div class="p-6 md:p-7">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价 - 卡片布局 -->
|
||||
<section class="mb-20 lg:mb-28" data-aos="fade-up">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 md:mb-12 text-gray-900 dark:text-white">客户评价</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
<div
|
||||
v-for="testimonial in testimonials"
|
||||
class="bg-white dark:bg-gray-800 p-6 md:p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500"
|
||||
>
|
||||
<div class="flex items-start gap-5 mb-6">
|
||||
<img
|
||||
:src="testimonial.avatar"
|
||||
class="w-16 h-16 rounded-xl border-2 border-white/30 shadow-md"
|
||||
/>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<div>
|
||||
<h4 class="text-lg font-bold text-gray-900 dark:text-white">{{ testimonial.author }}</h4>
|
||||
<p class="text-sm text-blue-600 dark:text-blue-400">{{ testimonial.role }}</p>
|
||||
</div>
|
||||
<div class="flex gap-1 text-yellow-400">
|
||||
<svg v-for="n in 5" :key="n" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-300 leading-relaxed">
|
||||
{{ testimonial.content }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作伙伴 - 品牌墙 -->
|
||||
<section class="mb-20 lg:mb-28" data-aos="fade-up">
|
||||
<h2 class="text-3xl md:text-4xl font-bold mb-8 md:mb-12 text-gray-900 dark:text-white">合作伙伴</h2>
|
||||
<div class="relative overflow-hidden py-4">
|
||||
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800">
|
||||
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<!-- 高端轮播图 -->
|
||||
<div class="mb-20 lg:mb-28" data-aos="fade-up">
|
||||
<swiper
|
||||
class="!overflow-visible"
|
||||
:modules="modules"
|
||||
:slides-per-view="auto"
|
||||
:space-between="40"
|
||||
:breakpoints="{ 640: { slidesPerView: 4 }, 1024: { slidesPerView: 6 } }"
|
||||
:autoplay="{ delay: 2000 }"
|
||||
:effect="'fade'"
|
||||
:autoplay="swiperOptions"
|
||||
:pagination="{
|
||||
clickable: true,
|
||||
dynamicBullets: true,
|
||||
dynamicMainBullets: 3
|
||||
}"
|
||||
:navigation="true"
|
||||
:loop="true"
|
||||
class="rounded-[2rem] overflow-hidden shadow-[0_20px_50px_rgba(8,112,184,0.15)] hover:shadow-[0_25px_60px_rgba(8,112,184,0.2)] transition-all duration-700"
|
||||
>
|
||||
<swiper-slide v-for="(partner, index) in partners" :key="index">
|
||||
<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>
|
||||
<swiper-slide
|
||||
v-for="(project, index) in projects"
|
||||
:key="project.id"
|
||||
class="group cursor-pointer"
|
||||
@click="$router.push(`/project/${project.route}`)"
|
||||
>
|
||||
<div class="relative h-[70vh] max-h-[700px] min-h-[500px] w-full overflow-hidden">
|
||||
<img
|
||||
:src="project.cover"
|
||||
class="absolute inset-0 w-full h-full object-cover transition-transform duration-7000 group-hover:scale-105"
|
||||
alt="Project Cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
|
||||
<div class="absolute bottom-0 left-0 right-0 p-8 md:p-12 lg:p-16 z-10 transform transition-transform duration-500">
|
||||
<div class="max-w-3xl">
|
||||
<div class="flex flex-wrap gap-2 mb-6" data-aos="fade-up" data-aos-delay="200">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
:key="tag"
|
||||
class="px-4 py-2 bg-white/10 backdrop-blur-md text-white text-sm font-medium rounded-full border border-white/20 shadow-lg hover:bg-white/20 transition-colors duration-300"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
class="text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-6 tracking-tight leading-tight"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
{{ project.title }}
|
||||
</h2>
|
||||
|
||||
<p
|
||||
class="text-lg md:text-xl text-white/80 max-w-2xl line-clamp-3 mb-8"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="100"
|
||||
>
|
||||
{{ project.description }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
class="px-8 py-3 bg-white/10 backdrop-blur-md text-white rounded-full border border-white/20 hover:bg-white/20 transition-all duration-300 shadow-lg group"
|
||||
data-aos="fade-up"
|
||||
data-aos-delay="300"
|
||||
>
|
||||
<span class="flex items-center">
|
||||
查看详情
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 精选项目 - 高端卡片布局 -->
|
||||
<section class="mb-24 lg:mb-32">
|
||||
<div class="flex items-center justify-between mb-12" data-aos="fade-up">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white">
|
||||
<span class="relative">
|
||||
精选项目
|
||||
<span class="absolute -bottom-2 left-0 w-1/2 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h2>
|
||||
<a href="/projects" class="text-rose-600 hover:text-rose-700 dark:text-rose-400 dark:hover:text-rose-300 font-medium flex items-center group">
|
||||
查看全部
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
|
||||
<div
|
||||
v-for="(project, index) in projects"
|
||||
:key="project.id"
|
||||
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 hover:scale-[1.02] cursor-pointer"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="index * 150"
|
||||
@click="$router.push(`/project/${project.route}`)"
|
||||
>
|
||||
<div class="relative h-64 md:h-72 overflow-hidden">
|
||||
<img
|
||||
:src="project.cover"
|
||||
class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-110"
|
||||
alt="Project Cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
|
||||
|
||||
<div class="absolute top-4 right-4 flex gap-2">
|
||||
<span
|
||||
v-for="(category, idx) in project.category.slice(0, 1)"
|
||||
:key="idx"
|
||||
class="px-3 py-1.5 bg-black/50 backdrop-blur-md text-white text-xs font-medium rounded-full"
|
||||
>
|
||||
{{ category }}
|
||||
</span>
|
||||
<span
|
||||
v-if="project.category.length > 1"
|
||||
class="px-3 py-1.5 bg-black/50 backdrop-blur-md text-white text-xs font-medium rounded-full"
|
||||
>
|
||||
+{{ project.category.length - 1 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-7 md:p-8">
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
:key="tag"
|
||||
class="px-3 py-1.5 bg-rose-50 dark:bg-rose-900/20 text-rose-600 dark:text-rose-300 text-sm font-medium rounded-lg"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors">
|
||||
{{ project.title }}
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-600 dark:text-gray-300 line-clamp-3 mb-6">
|
||||
{{ project.description }}
|
||||
</p>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button class="text-rose-600 dark:text-rose-400 font-medium flex items-center group/btn">
|
||||
查看详情
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1 transform group-hover/btn:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价 - 高端卡片布局 -->
|
||||
<section class="mb-24 lg:mb-32 relative">
|
||||
<div class="absolute inset-0 bg-rose-50 dark:bg-rose-900/10 rounded-[3rem] -z-10 transform -skew-y-2"></div>
|
||||
|
||||
<div class="py-16 md:py-24 px-6 md:px-10">
|
||||
<div class="text-center mb-16" data-aos="fade-up">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
客户评价
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
我们致力于为客户提供最优质的服务，以下是部分客户的真实评价
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 max-w-6xl mx-auto">
|
||||
<div
|
||||
v-for="(testimonial, index) in testimonials"
|
||||
:key="testimonial.id"
|
||||
class="bg-white dark:bg-gray-800 p-8 md:p-10 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="index * 150"
|
||||
>
|
||||
<div class="flex items-center gap-6 mb-8">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 -m-1 rounded-full bg-gradient-to-tr from-rose-400 to-rose-600 blur-sm opacity-70"></div>
|
||||
<img
|
||||
:src="testimonial.avatar"
|
||||
class="w-20 h-20 rounded-full border-4 border-white dark:border-gray-700 object-cover relative z-10"
|
||||
alt="Client Avatar"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-xl font-bold text-gray-900 dark:text-white">{{ testimonial.author }}</h4>
|
||||
<p class="text-rose-600 dark:text-rose-400 font-medium">{{ testimonial.role }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-1 text-yellow-400 mb-6">
|
||||
<svg v-for="n in 5" :key="n" class="w-6 h-6" :class="{ 'opacity-40': n > testimonial.rating }" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<svg class="absolute -top-4 -left-4 w-12 h-12 text-rose-200 dark:text-rose-800/30" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z" />
|
||||
</svg>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-200 text-lg leading-relaxed pl-6">
|
||||
{{ testimonial.content }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 合作伙伴 - 高端品牌墙 -->
|
||||
<section class="mb-20 lg:mb-28" data-aos="fade-up">
|
||||
<div class="text-center mb-16">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
<span class="relative">
|
||||
合作伙伴
|
||||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
我们与行业领先的技术提供商建立了长期稳定的合作关系
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="relative overflow-hidden py-8">
|
||||
<swiper
|
||||
:modules="[Autoplay]"
|
||||
:slides-per-view="2"
|
||||
:space-between="30"
|
||||
:autoplay="partnerSwiperOptions"
|
||||
:loop="true"
|
||||
:breakpoints="breakpoints"
|
||||
class="partner-swiper"
|
||||
>
|
||||
<swiper-slide v-for="(partner, index) in partners" :key="index">
|
||||
<div
|
||||
class="flex flex-col items-center justify-center h-48 bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-500 hover:-translate-y-2 border border-gray-100 dark:border-gray-700"
|
||||
>
|
||||
<div class="w-full h-24 flex items-center justify-center mb-4">
|
||||
<img
|
||||
:src="partner.logo"
|
||||
class="h-16 object-contain opacity-80 hover:opacity-100 transition-opacity grayscale hover:grayscale-0 transition-all duration-500"
|
||||
alt="Partner Logo"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<span class="text-gray-900 dark:text-white text-lg font-bold">{{ partner.name }}</span>
|
||||
<div class="w-12 h-1 bg-rose-500 mx-auto mt-3 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style scoped>
|
||||
/* 优化 Swiper 导航样式 */
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
@apply w-12 h-12 bg-white/80 backdrop-blur-sm rounded-full shadow-lg hover:bg-white transition-colors text-gray-900 hover:text-blue-600;
|
||||
:deep(.swiper-button-next),
|
||||
:deep(.swiper-button-prev) {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
color: #111827;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.swiper-button-next::after,
|
||||
.swiper-button-prev::after {
|
||||
@apply text-xl font-bold;
|
||||
:deep(.swiper-button-next:hover),
|
||||
:deep(.swiper-button-prev:hover) {
|
||||
background-color: white;
|
||||
color: #f43f5e;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
@apply w-3 h-3 bg-white/50 hover:bg-white transition-colors;
|
||||
:deep(.swiper-button-next::after),
|
||||
:deep(.swiper-button-prev::after) {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply bg-blue-600;
|
||||
:deep(.swiper-pagination-bullet) {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:deep(.swiper-pagination-bullet-active) {
|
||||
background-color: #f43f5e;
|
||||
width: 24px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 合作伙伴轮播样式 */
|
||||
.partner-swiper :deep(.swiper-slide) {
|
||||
height: auto;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/* 添加轻奢风格的渐变背景和阴影效果 */
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
||||
}
|
||||
|
||||
/* 暗色模式下的轻奢风格 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,221 +0,0 @@
|
||||
<script setup>
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { Autoplay, Pagination, Navigation, EffectCreative } from 'swiper/modules'
|
||||
import AOS from 'aos'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/pagination'
|
||||
import 'swiper/css/navigation'
|
||||
import {onMounted} from "vue";
|
||||
|
||||
const modules = [Autoplay, Pagination, Navigation, EffectCreative]
|
||||
|
||||
onMounted(() => {
|
||||
AOS.init({
|
||||
duration: 1000,
|
||||
offset: 120,
|
||||
easing: 'ease-out-quart'
|
||||
})
|
||||
})
|
||||
|
||||
const projects = [
|
||||
{
|
||||
id: 1,
|
||||
title: '电商平台',
|
||||
tags: ['Vue3', 'Node.js'],
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
route: '/project/1'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'OA系统',
|
||||
tags: ['React', 'Java'],
|
||||
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
route: '/project/2'
|
||||
}
|
||||
]
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
author: '某科技公司',
|
||||
role: '技术总监',
|
||||
rating: 5,
|
||||
content: '项目交付非常专业，技术方案极具创新性，团队响应速度超出预期',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: '某金融机构',
|
||||
role: '技术负责人',
|
||||
rating: 4,
|
||||
content: '系统稳定性表现优异，故障响应机制完善，合作体验良好',
|
||||
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
}
|
||||
]
|
||||
|
||||
const partners = [
|
||||
{ name: '腾讯云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '阿里云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '华为云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '腾讯云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '阿里云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '华为云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '腾讯云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '阿里云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: '华为云', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
{ name: 'Microsoft', logo: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- 轮播图 -->
|
||||
<div class="mb-16" data-aos="fade-up">
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:autoplay="{ delay: 5000 }"
|
||||
:pagination="{ clickable: true }"
|
||||
:navigation="true"
|
||||
class="rounded-xl overflow-hidden"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(item, index) in 3"
|
||||
:key="item"
|
||||
@click="$router.push(projects[index % 2].route)"
|
||||
class="group relative cursor-pointer"
|
||||
>
|
||||
<div class="relative h-64 md:h-96">
|
||||
<img
|
||||
:src="`https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280?text=Banner${item}`"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-6 flex flex-col justify-end">
|
||||
<h3 class="text-2xl font-bold text-white mb-2 drop-shadow-xl">
|
||||
{{ projects[index % 2].title }}
|
||||
</h3>
|
||||
<div class="flex gap-2">
|
||||
<span
|
||||
v-for="tag in projects[index % 2].tags"
|
||||
class="px-3 py-1 bg-white/20 backdrop-blur-sm text-white rounded-full text-sm"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
|
||||
<!-- 精选项目 -->
|
||||
<section class="mb-20">
|
||||
<h2 class="text-3xl font-bold mb-8" data-aos="fade-up">精选项目</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="(project, index) in projects"
|
||||
:key="project.id"
|
||||
class="bg-card-gradient backdrop-blur-lg border border-white/20 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:border-blue-400/30 group text-gray-100"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="index * 100"
|
||||
@click="$router.push(project.route)"
|
||||
>
|
||||
<img :src="project.cover" class="w-full h-48 object-cover" />
|
||||
<div class="p-4">
|
||||
<h3 class="text-xl font-semibold mb-2">{{ project.title }}</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span
|
||||
v-for="tag in project.tags"
|
||||
class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm backdrop-blur-sm"
|
||||
>
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 客户评价 -->
|
||||
<section class="mb-20" data-aos="fade-up">
|
||||
<h2 class="text-3xl font-bold mb-8">客户评价</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- 客户评价模块修复 -->
|
||||
<div
|
||||
v-for="testimonial in testimonials"
|
||||
:key="testimonial.id"
|
||||
class="bg-card-gradient backdrop-blur-lg border border-white/20 p-8 rounded-2xl transition-all duration-300 hover:border-blue-400/50 hover:shadow-2xl text-gray-100"
|
||||
>
|
||||
<!-- 内容结构保持不变 -->
|
||||
<div class="flex items-start gap-5 mb-6">
|
||||
<img :src="testimonial.avatar" class="w-16 h-16 rounded-2xl border-2 border-white/30">
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold text-white mb-1">{{ testimonial.author }}</h4>
|
||||
<p class="text-sm text-blue-200 mb-2">{{ testimonial.role }}</p>
|
||||
<div class="flex gap-1 text-yellow-400">
|
||||
<span v-for="n in 5" :key="n"
|
||||
:class="n <= testimonial.rating ? 'opacity-100' : 'opacity-30'">
|
||||
★
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-white/90 leading-relaxed text-left indent-8">{{ testimonial.content }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- 合作伙伴横向滚动 -->
|
||||
<section class="mb-20" data-aos="fade-up">
|
||||
<h2 class="text-3xl font-bold mb-8">合作伙伴</h2>
|
||||
<swiper
|
||||
:modules="modules"
|
||||
:slides-per-view="3"
|
||||
:space-between="30"
|
||||
:autoplay="{ delay: 2500 }"
|
||||
class="py-4"
|
||||
>
|
||||
<swiper-slide v-for="(partner, index) in partners" :key="index">
|
||||
<div class="flex items-center justify-center h-32 bg-partner-gradient border border-white/20 rounded-xl p-4 transition-all hover:scale-105 hover:border-blue-400/30">
|
||||
<img :src="partner.logo" class="h-full w-full object-contain opacity-80 hover:opacity-100 transition-opacity"/>
|
||||
</div>
|
||||
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
@apply text-white hover:text-blue-400;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
@apply bg-white opacity-80;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
@apply bg-blue-500;
|
||||
}
|
||||
|
||||
.bg-glass {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.shadow-glass {
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
|
||||
}
|
||||
|
||||
@keyframes gradient-flow {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
</style>
|
||||
@@ -1,39 +1,325 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import AOS from 'aos'
|
||||
import 'aos/dist/aos.css'
|
||||
|
||||
// Initialize userStore outside of userData to avoid conditional hook call
|
||||
const userStore = useUserStore()
|
||||
|
||||
onMounted(() => {
|
||||
AOS.init({
|
||||
duration: 1200,
|
||||
offset: 120,
|
||||
easing: 'ease-out-cubic',
|
||||
once: false
|
||||
})
|
||||
})
|
||||
|
||||
// 模拟用户数据
|
||||
const userData = ref({
|
||||
username: userStore.user?.username || '张三',
|
||||
avatar: userStore.user?.avatar || 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||||
createdAt: userStore.user?.createdAt || '2023-01-15',
|
||||
lastLogin: userStore.user?.lastLogin || '2023-06-20',
|
||||
email: 'user@example.com',
|
||||
phone: '138****1234',
|
||||
role: '企业客户',
|
||||
projects: 5,
|
||||
favorites: 12
|
||||
})
|
||||
|
||||
const userStats = [
|
||||
{ label: '已购项目', value: userData.value.projects, icon: 'shopping-bag' },
|
||||
{ label: '收藏项目', value: userData.value.favorites, icon: 'heart' },
|
||||
{ label: '账户类型', value: userData.value.role, icon: 'user' }
|
||||
]
|
||||
|
||||
const recentProjects = [
|
||||
{ id: 1, title: '电商平台开发', date: '2023-05-15', status: '进行中' },
|
||||
{ id: 2, title: 'CRM系统定制', date: '2023-04-10', status: '已完成' },
|
||||
{ id: 3, title: '数据分析平台', date: '2023-03-22', status: '已完成' }
|
||||
]
|
||||
|
||||
const activeTab = ref('profile')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card class="personal-card">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="8">
|
||||
<a-avatar
|
||||
:size="120"
|
||||
:src="userStore.user?.avatar || 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'"
|
||||
/>
|
||||
</a-col>
|
||||
|
||||
<a-col :span="16">
|
||||
<h2 class="username">{{ userStore.user?.username || '未命名用户' }}</h2>
|
||||
<a-descriptions :column="1">
|
||||
<a-descriptions-item label="注册时间">
|
||||
{{ userStore.user?.createdAt }}
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="最后登录">
|
||||
{{ userStore.user?.lastLogin }}
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
|
||||
<div class="max-w-5xl mx-auto px-6">
|
||||
<!-- 个人信息卡片 -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden mb-10"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
<div class="relative h-48 bg-gradient-to-r from-rose-400 to-rose-600">
|
||||
<!-- 装饰图案 -->
|
||||
<div class="absolute inset-0 opacity-20">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
|
||||
<defs>
|
||||
<pattern id="pattern" width="40" height="40" patternUnits="userSpaceOnUse">
|
||||
<circle cx="20" cy="20" r="2" fill="white" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="100%" height="100%" fill="url(#pattern)" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 编辑按钮 -->
|
||||
<button class="absolute top-4 right-4 bg-white/20 backdrop-blur-md text-white rounded-full p-2 hover:bg-white/30 transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative px-8 pb-8">
|
||||
<!-- 头像 -->
|
||||
<div class="absolute -top-16 left-8">
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-1 rounded-full bg-white dark:bg-gray-800"></div>
|
||||
<div class="relative w-32 h-32 rounded-full overflow-hidden border-4 border-white dark:border-gray-800 shadow-lg">
|
||||
<img
|
||||
:src="userData.avatar"
|
||||
:alt="userData.username"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息 -->
|
||||
<div class="pt-20">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">{{ userData.username }}</h1>
|
||||
<p class="text-rose-600 dark:text-rose-400">{{ userData.role }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 md:mt-0">
|
||||
<button class="px-6 py-2 bg-rose-600 hover:bg-rose-700 text-white rounded-full shadow-md hover:shadow-lg transition-all duration-300">
|
||||
升级会员
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户统计 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<div
|
||||
v-for="(stat, index) in userStats"
|
||||
:key="index"
|
||||
class="bg-gray-50 dark:bg-gray-700/50 rounded-2xl p-4 flex items-center"
|
||||
>
|
||||
<div class="w-12 h-12 rounded-xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mr-4">
|
||||
<svg v-if="stat.icon === 'shopping-bag'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
|
||||
</svg>
|
||||
<svg v-else-if="stat.icon === 'heart'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
|
||||
</svg>
|
||||
<svg v-else-if="stat.icon === 'user'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
|
||||
<p class="text-lg font-bold text-gray-900 dark:text-white">{{ stat.value }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页导航 -->
|
||||
<div class="border-b border-gray-200 dark:border-gray-700">
|
||||
<nav class="flex space-x-8">
|
||||
<button
|
||||
@click="activeTab = 'profile'"
|
||||
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
|
||||
:class="activeTab === 'profile' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
|
||||
>
|
||||
个人资料
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'projects'"
|
||||
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
|
||||
:class="activeTab === 'projects' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
|
||||
>
|
||||
我的项目
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'settings'"
|
||||
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
|
||||
:class="activeTab === 'settings' ? 'border-rose-500 text-rose-600 dark:text-rose-400' : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
|
||||
>
|
||||
账户设置
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 标签页内容 -->
|
||||
<div class="mb-10" data-aos="fade-up">
|
||||
<!-- 个人资料 -->
|
||||
<div v-if="activeTab === 'profile'" class="space-y-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">基本信息</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">用户名</p>
|
||||
<p class="text-gray-900 dark:text-white">{{ userData.username }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">邮箱</p>
|
||||
<p class="text-gray-900 dark:text-white">{{ userData.email }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">手机号</p>
|
||||
<p class="text-gray-900 dark:text-white">{{ userData.phone }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">注册时间</p>
|
||||
<p class="text-gray-900 dark:text-white">{{ userData.createdAt }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">账户安全</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">登录密码</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">上次修改时间: 2023-03-15</p>
|
||||
</div>
|
||||
<button class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium">
|
||||
修改
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">手机验证</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">已绑定: {{ userData.phone }}</p>
|
||||
</div>
|
||||
<button class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium">
|
||||
修改
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 我的项目 -->
|
||||
<div v-else-if="activeTab === 'projects'" class="space-y-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">最近项目</h2>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="project in recentProjects"
|
||||
:key="project.id"
|
||||
class="flex items-center justify-between p-4 border border-gray-100 dark:border-gray-700 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-900 dark:text-white">{{ project.title }}</h3>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">{{ project.date }}</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span
|
||||
class="px-3 py-1 rounded-full text-xs font-medium"
|
||||
:class="project.status === '进行中' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' : 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'"
|
||||
>
|
||||
{{ project.status }}
|
||||
</span>
|
||||
<button class="ml-4 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<button class="text-rose-600 dark:text-rose-400 hover:text-rose-700 dark:hover:text-rose-300 font-medium flex items-center mx-auto">
|
||||
查看全部项目
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 账户设置 -->
|
||||
<div v-else-if="activeTab === 'settings'" class="space-y-6">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">通知设置</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">系统通知</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">接收系统更新和安全提醒</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" value="" class="sr-only peer" checked>
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">项目更新</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">接收项目进度和更新通知</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" value="" class="sr-only peer" checked>
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">营销信息</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">接收优惠和促销信息</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" value="" class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-rose-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
|
||||
<h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">隐私设置</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-white">个人资料可见性</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-400">控制谁可以查看您的个人资料</p>
|
||||
</div>
|
||||
<select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-rose-500 focus:border-rose-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
|
||||
<option value="public">公开</option>
|
||||
<option value="friends">仅好友</option>
|
||||
<option value="private">私密</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.personal-card {
|
||||
margin: 24px;
|
||||
/* 添加轻奢风格的渐变背景和阴影效果 */
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
||||
}
|
||||
.username {
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
/* 暗色模式下的轻奢风格 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,233 @@
|
||||
<script setup>
|
||||
// 服务项目页面内容
|
||||
import { ref, onMounted } from 'vue'
|
||||
import AOS from 'aos'
|
||||
import 'aos/dist/aos.css'
|
||||
|
||||
onMounted(() => {
|
||||
AOS.init({
|
||||
duration: 1200,
|
||||
offset: 120,
|
||||
easing: 'ease-out-cubic',
|
||||
once: false
|
||||
})
|
||||
})
|
||||
|
||||
const services = [
|
||||
{
|
||||
id: 1,
|
||||
title: '企业数字化转型',
|
||||
icon: 'chart-network',
|
||||
description: '为企业提供全方位的数字化转型咨询与实施服务，包括业务流程优化、系统架构设计、数据治理等',
|
||||
features: [
|
||||
'业务流程数字化',
|
||||
'企业架构规划',
|
||||
'数字化成熟度评估',
|
||||
'转型路线图制定',
|
||||
'变革管理'
|
||||
],
|
||||
image: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '定制化软件开发',
|
||||
icon: 'code',
|
||||
description: '根据客户需求提供量身定制的软件开发服务，从需求分析、设计、开发到测试、部署和维护的全流程服务',
|
||||
features: [
|
||||
'Web应用开发',
|
||||
'移动应用开发',
|
||||
'企业管理系统',
|
||||
'API集成服务',
|
||||
'遗留系统现代化'
|
||||
],
|
||||
image: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '数据分析与可视化',
|
||||
icon: 'chart-pie',
|
||||
description: '帮助企业挖掘数据价值，通过高级分析和直观的可视化展示，为决策提供数据支持',
|
||||
features: [
|
||||
'数据仓库设计',
|
||||
'商业智能解决方案',
|
||||
'预测分析模型',
|
||||
'实时数据看板',
|
||||
'数据挖掘服务'
|
||||
],
|
||||
image: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '云服务与DevOps',
|
||||
icon: 'cloud',
|
||||
description: '提供云迁移、云原生应用开发和DevOps实践导入服务，帮助企业提升IT运维效率和系统可靠性',
|
||||
features: [
|
||||
'云架构设计',
|
||||
'云迁移服务',
|
||||
'CI/CD流水线搭建',
|
||||
'容器化与编排',
|
||||
'微服务架构实施'
|
||||
],
|
||||
image: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||||
}
|
||||
]
|
||||
|
||||
const activeService = ref(services[0])
|
||||
|
||||
const setActiveService = (service) => {
|
||||
activeService.value = service
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="p-6 max-w-4xl mx-auto">
|
||||
<h1 class="text-3xl font-bold mb-6">服务项目</h1>
|
||||
<section class="prose">
|
||||
<p>这里是服务项目页面内容...</p>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
<div class="bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800 min-h-screen py-12">
|
||||
<div class="max-w-6xl mx-auto px-6">
|
||||
<!-- 页面标题 -->
|
||||
<div class="text-center mb-16" data-aos="fade-up">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||
<span class="relative">
|
||||
服务项目
|
||||
<span class="absolute -bottom-2 left-0 right-0 mx-auto w-1/3 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h1>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||
我们提供全方位的企业数字化解决方案，助力企业在数字时代实现创新与增长
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 服务概览 -->
|
||||
<section class="mb-24" data-aos="fade-up">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div
|
||||
v-for="service in services"
|
||||
:key="service.id"
|
||||
class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-500 p-6 cursor-pointer transform hover:-translate-y-2"
|
||||
:class="{ 'ring-2 ring-rose-500 dark:ring-rose-400': activeService.id === service.id }"
|
||||
@click="setActiveService(service)"
|
||||
data-aos="fade-up"
|
||||
>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-12 h-12 rounded-2xl bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mr-4">
|
||||
<svg v-if="service.icon === 'chart-network'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<svg v-else-if="service.icon === 'code'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
<svg v-else-if="service.icon === 'chart-pie'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
|
||||
</svg>
|
||||
<svg v-else-if="service.icon === 'cloud'" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ service.title }}</h3>
|
||||
</div>
|
||||
<p class="text-gray-600 dark:text-gray-300 text-sm line-clamp-3">{{ service.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 服务详情 -->
|
||||
<section class="mb-24" data-aos="fade-up">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2">
|
||||
<div class="p-8 md:p-10">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white">{{ activeService.title }}</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8 leading-relaxed">{{ activeService.description }}</p>
|
||||
|
||||
<h4 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">核心服务内容</h4>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="(feature, index) in activeService.features"
|
||||
:key="index"
|
||||
class="flex items-start"
|
||||
>
|
||||
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mr-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-gray-700 dark:text-gray-300">{{ feature }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button class="mt-10 px-8 py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center group">
|
||||
<span>了解更多</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="relative h-64 lg:h-auto">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-rose-400 to-rose-600 opacity-20"></div>
|
||||
<img
|
||||
:src="activeService.image"
|
||||
:alt="activeService.title"
|
||||
class="w-full h-full object-cover relative z-10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 服务流程 -->
|
||||
<section class="mb-24" data-aos="fade-up">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-10 text-gray-900 dark:text-white text-center">
|
||||
<span class="relative">
|
||||
服务流程
|
||||
<span class="absolute -bottom-2 left-1/4 right-1/4 h-1 bg-gradient-to-r from-rose-400 to-rose-600 rounded-full"></span>
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
<div
|
||||
v-for="(step, index) in ['需求分析', '方案设计', '开发实施', '测试验收', '部署上线', '持续优化']"
|
||||
:key="index"
|
||||
class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 p-6 text-center"
|
||||
data-aos="fade-up"
|
||||
:data-aos-delay="index * 100"
|
||||
>
|
||||
<div class="w-16 h-16 rounded-full bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center text-rose-600 dark:text-rose-400 mx-auto mb-4">
|
||||
<span class="text-xl font-bold">{{ index + 1 }}</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-2">{{ step }}</h3>
|
||||
<div class="h-1 w-12 bg-rose-200 dark:bg-rose-800/50 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 咨询服务 -->
|
||||
<section data-aos="fade-up">
|
||||
<div class="bg-gradient-to-r from-rose-50 to-pink-50 dark:from-rose-900/10 dark:to-pink-900/10 rounded-3xl p-8 md:p-10 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-bold mb-6 text-gray-900 dark:text-white">免费咨询</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-8 max-w-2xl mx-auto">
|
||||
我们提供免费的初步咨询服务，了解您的业务需求，为您提供专业的解决方案建议
|
||||
</p>
|
||||
|
||||
<button class="px-8 py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center mx-auto group">
|
||||
<span>立即预约</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 添加轻奢风格的渐变背景和阴影效果 */
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #f6f8fb 0%, #f0f4f8 100%);
|
||||
}
|
||||
|
||||
/* 暗色模式下的轻奢风格 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg-gradient-luxury {
|
||||
background: linear-gradient(135deg, #1a1d23 0%, #111827 100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user