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 22:11:36 +08:00
parent 96b7141bba
commit c7b746af98
9 changed files with 92 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="/vue.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>奶酪云-应用中心</title>
</head>

21
public/vue.svg Normal file
View File

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#fb7185"/>
<stop offset="100%" stop-color="#e11d48"/>
</linearGradient>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#gradient)" filter="url(#shadow)"/>
<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white" font-size="24" font-weight="bold">A</text>
<filter id="shadow">
<feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="rgba(0, 0, 0, 0.5)"/>
</filter>
<style>
svg circle {
transition: transform 0.3s ease;
}
svg circle:hover {
transform: scale(1.1);
}
</style>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 805 B

BIN
src/assets/icp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

22
src/layouts/MainLayout.vue
View File

@@ -50,7 +50,7 @@ onMounted(() => {
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16 md:h-20">
<!-- Logo -->
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-3 cursor-pointer hover:scale-110" @click="router.push('/')">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center shadow-lg transform transition-transform hover:scale-110">
<span class="text-white text-xl font-bold">A</span>
</div>
@@ -144,7 +144,7 @@ onMounted(() => {
:class="mobileMenuVisible ? 'translate-x-0' : 'translate-x-full'"
>
<div class="p-6">
<div class="flex items-center justify-between mb-8">
<div class="flex items-center justify-between mb-8 cursor-pointer" @click="router.push('/')">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center">
<span class="text-white text-sm font-bold">A</span>
@@ -221,7 +221,7 @@ onMounted(() => {
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center space-x-3 mb-4">
<div class="flex items-center space-x-3 mb-4 cursor-pointer" @click="router.push('/')">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center">
<span class="text-white text-xl font-bold">A</span>
</div>
@@ -253,13 +253,25 @@ onMounted(() => {
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-rose-500" 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>
contact@example.com
workerqi@163.com
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-rose-500" 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>
400-123-4567
151*******3
</li>
<li class="flex items-center">
<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>
杭州市滨江区长河商厦
</li>
<li class="flex items-center">
<img class="footerPubSecIcp_icon" src="@/assets/icp.png" width="20" height="20" alt="备案图标" style="width: 20px; height: 20px; filter: invert(0);">
<a href="https://beian.miit.gov.cn/#/Integrated/index" class="hover:text-rose-500 ml-2" target="_blank">晋ICP备2023016321号-2</a>
</li>
</ul>
</div>

6
src/views/frontend/About.vue
View File

@@ -191,14 +191,14 @@ const milestones = [
<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>
<span class="text-gray-700 dark:text-gray-200">workerqi@163.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>
<span class="text-gray-700 dark:text-gray-200">151*******3</span>
</div>
<div class="flex items-center bg-white dark:bg-gray-800/80 rounded-full px-6 py-3 shadow-md">
@@ -206,7 +206,7 @@ const milestones = [
<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>
<span class="text-gray-700 dark:text-gray-200">杭州市滨江区长河商厦</span>
</div>
</div>
</div>

14
src/views/frontend/Detail.vue
View File

@@ -43,7 +43,7 @@ const project = {
technicalStack: ['前端：Vue3 + TypeScript', '后端：PHP【Laravel 12.x】 + MySQL', '部署：Docker + Kubernetes'],
screenshots: [
'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
'https://img2.baidu.com/it/u=1629222614,1358629025&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
],
video: 'http://d-jy.nailaoyun.cn//storage/video//20250327/2cc1abf9bd69410ce7c69660daf54260.mp4',
@@ -128,21 +128,21 @@ const swiperOptions = {
<nav class="flex space-x-8">
<button
@click="activeTab = '1'"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 cursor-pointer"
:class="activeTab === '1' ? '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 = '2'"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 cursor-pointer"
:class="activeTab === '2' ? '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 = '3'"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200"
class="py-4 px-1 border-b-2 font-medium text-sm transition-colors duration-200 cursor-pointer"
:class="activeTab === '3' ? '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'"
>
演示视频
@@ -276,11 +276,11 @@ const swiperOptions = {
</div>
<div class="space-y-4">
<button class="w-full py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center">
<button class="w-full py-3 bg-rose-600 hover:bg-rose-700 text-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 flex items-center justify-center cursor-pointer">
<span>立即咨询</span>
</button>
<button class="w-full py-3 bg-white dark:bg-gray-700 text-rose-600 dark:text-rose-400 border border-rose-200 dark:border-rose-800/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center">
<button class="w-full py-3 bg-white dark:bg-gray-700 text-rose-600 dark:text-rose-400 border border-rose-200 dark:border-rose-800/30 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" 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>
@@ -320,7 +320,7 @@ const swiperOptions = {
<div
v-for="related in relatedProjects"
:key="related.id"
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
>
<div class="relative h-48 overflow-hidden">
<img

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

@@ -38,7 +38,37 @@ const projects = [
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 carousel = [
{
id: 1,
title: '电商平台',
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: '1'
},
{
id: 2,
title: 'OA系统',
tags: ['React', 'PHP'],
category: ['Web', 'Uni app', '微信小程序'],
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://img2.baidu.com/it/u=1629222614,1358629025&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
route: '2'
},
{
id: 2,
title: '团购app',
tags: ['React', 'PHP'],
category: ['Web', 'Uni app', '微信小程序'],
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://img1.baidu.com/it/u=362305842,3264792867&fm=253&fmt=auto?w=712&h=712',
route: '2'
}
]
const testimonials = [
@@ -57,7 +87,7 @@ const testimonials = [
rating: 4,
content: '系统稳定性表现优异，故障响应机制完善，合作体验良好',
avatar: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
}
},
]
const partners = [
@@ -119,7 +149,7 @@ const breakpoints = {
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="(project, index) in projects"
v-for="(project, index) in carousel"
:key="project.id"
class="group cursor-pointer"
@click="$router.push(`/project/${project.route}`)"
@@ -164,7 +194,7 @@ const breakpoints = {
data-aos="fade-up"
data-aos-delay="300"
>
<span class="flex items-center">
<span class="flex items-center cursor-pointer">
查看详情
<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" />
@@ -310,7 +340,7 @@ const breakpoints = {
<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">
<p class="text-gray-700 dark:text-gray-200 text-lg leading-relaxed pl-6 indent-6">
{{ testimonial.content }}
</p>
</div>
@@ -329,7 +359,7 @@ const breakpoints = {
</span>
</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
我们与行业领先的技术提供商建立了长期稳定的合作关系
我们与以下品牌的合作夥伴一起合作，提供更好的服务体验
</p>
</div>
@@ -350,7 +380,7 @@ const breakpoints = {
<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"
class="h-24 object-contain opacity-80 hover:opacity-100 rounded-lg transition-opacity grayscale hover:grayscale-0 transition-all duration-500"
alt="Partner Logo"
/>
</div>
@@ -373,7 +403,7 @@ const breakpoints = {
:deep(.swiper-button-prev) {
width: 3.5rem;
height: 3.5rem;
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

3
src/views/frontend/Projects.vue
View File

@@ -148,8 +148,9 @@ const formatPrice = (price) => {
<div
v-for="project in filteredProjects"
:key="project.id"
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
class="group bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2 cursor-pointer"
data-aos="fade-up"
@click="$router.push(`/project/${project.id}`)"
>
<div class="relative h-56 overflow-hidden">
<img

7
src/views/frontend/Services.vue
View File

@@ -8,7 +8,7 @@ onMounted(() => {
duration: 1200,
offset: 120,
easing: 'ease-out-cubic',
once: false
once: true
})
})
@@ -103,7 +103,6 @@ const setActiveService = (service) => {
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">
@@ -152,7 +151,7 @@ const setActiveService = (service) => {
</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">
<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 cursor-pointer">
<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" />
@@ -206,7 +205,7 @@ const setActiveService = (service) => {
我们提供免费的初步咨询服务，了解您的业务需求，为您提供专业的解决方案建议
</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">
<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 cursor-pointer">
<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" />