diff --git a/create_database.sql b/create_database.sql index bed2a3b..43736d7 100644 --- a/create_database.sql +++ b/create_database.sql @@ -27,6 +27,9 @@ CREATE TABLE cases ( results TEXT NOT NULL COMMENT '项目成果', testimonial TEXT NULL COMMENT '客户评价', testimonial_author VARCHAR(100) NULL COMMENT '评价人及职位', + pdf_url VARCHAR(255) NULL COMMENT '功能说明文档PDF链接', + design_url VARCHAR(255) NULL COMMENT '设计稿链接', + qrcode_url VARCHAR(255) NULL COMMENT '小程序二维码图片链接', created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间' ) COMMENT='项目案例表'; @@ -44,6 +47,7 @@ CREATE TABLE case_gallery ( id INT PRIMARY KEY AUTO_INCREMENT COMMENT '图片ID，自增主键', case_id INT NOT NULL COMMENT '关联的案例ID', image_url VARCHAR(255) NOT NULL COMMENT '图片URL', + image_title VARCHAR(100) NULL COMMENT '图片标题', display_order INT NOT NULL DEFAULT 0 COMMENT '显示顺序', FOREIGN KEY (case_id) REFERENCES cases(id) ON DELETE CASCADE COMMENT '外键关联案例表，案例删除时级联删除' ) COMMENT='案例图库表'; @@ -125,8 +129,8 @@ INSERT INTO services (icon, title, description) VALUES ('https://cdn-icons-png.flaticon.com/512/1055/1055666.png', 'UI/UX设计', '创造直观、美观且用户友好的界面设计'); -- 向案例表插入初始数据 -INSERT INTO cases (title, description, image, category, client, completion_date, challenge, solution, results, testimonial, testimonial_author) VALUES -('智慧校园系统', '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '企业系统', '某知名高校', '2023年8月', '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', '陈校长 - 客户负责人'); +INSERT INTO cases (title, description, image, category, client, completion_date, challenge, solution, results, testimonial, testimonial_author, pdf_url, design_url, qrcode_url) VALUES +('智慧校园系统', '为教育机构打造的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '企业系统', '某知名高校', '2023年8月', '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', '陈校长 - 客户负责人', '/docs/smart-campus-system.pdf', 'https://www.figma.com/file/smart-campus-design', '/images/smart-campus-qrcode.png'); -- 向案例服务关联表插入数据 INSERT INTO case_services (case_id, service_name) VALUES @@ -137,10 +141,10 @@ INSERT INTO case_services (case_id, service_name) VALUES (1, '持续支持'); -- 向案例图库表插入数据 -INSERT INTO case_gallery (case_id, image_url, display_order) VALUES -(1, 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 1), -(1, 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 2), -(1, 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', 3); +INSERT INTO case_gallery (case_id, image_url, image_title, display_order) VALUES +(1, 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '系统主界面', 1), +(1, 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '移动端应用界面', 2), +(1, 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', '数据分析仪表盘', 3); -- 向团队成员表插入初始数据 INSERT INTO team_members (name, position, bio, photo) VALUES diff --git a/src/App.vue b/src/App.vue index 4d5f2f5..f48c5fe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -129,6 +129,9 @@ onMounted(() => { 服务条款 网站地图 +
+ {{ configParams.footer_record_number }} +
diff --git a/src/api/index.js b/src/api/index.js index 31319a4..c6b9fbb 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -7,6 +7,7 @@ const api = { fetchConfigParams: () => get('/api/officialWebsite/configParams/list'), getCategoryList: () => get('/api/officialWebsite/caseCategory/list'), getCasesList: (params) => get('/api/officialWebsite/cases/list', params), + getCaseDetail: (id) => get(`/api/officialWebsite/cases/detail/${id}`), addLeaveMessage: (params) => post('/api/officialWebsite/leaveMessage', params), getSelectedCase: () => get('/api/officialWebsite/cases/selected'), getDevelopmentHistory: () => get('/api/officialWebsite/developmentHistory/list'), diff --git a/src/components/CustomerReviews.vue b/src/components/CustomerReviews.vue index 5b2be23..4e9f771 100644 --- a/src/components/CustomerReviews.vue +++ b/src/components/CustomerReviews.vue @@ -7,142 +7,247 @@
- -
-
-
-
-
-
- -
-
-

{{ review.customerName }}

-

{{ review.company }}

-
- - -
-
+
+ +
+
+
+
+ 张总 +
+
+

张总 添加了 3 张照片

+

57 分钟前

-
{{ formatDate(review.date) }}
-
-

{{ review.content }}

- - -
-
-
- -
- +{{ review.chatScreenshots.length - 3 }} -
-
+
+

星月楼

+

点心, 粤菜

+ +
+
+ 菜品照片
-
- - 点击查看完整聊天记录 +
+ 菜品照片
-
-
- {{ tag }} +
+ + +
+ +
+ 查看全部 3 张照片 +
-
-
- -
- -
- -
- -
-
+
+
+
+ 王总监 +
+
+

王总监 添加了一张照片

+

9 小时前

+
+
+ +
+

天星维港游

+
+ + + + + + 3 +
+

旅游

+ +
+ 维港夜景 +
- -
-
-
-
-
- +
+ +
-
-

{{ selectedReview.customerName }}

-

{{ selectedReview.company }}

+
+ +
+
+
+ 李经理 +
+
+

李经理 发表了评论

+

1 天前

+
+
+ +
+
+ 美食照片 +
+ +

Belon

- - + + + + + +
+ +

世界是一个美丽的地方，米其林星级餐厅Belon拥有杰出的厨师团队...

+ 阅读更多 + +
+
+ + 7 +
+
+ + 2 +
+
+ + 4 +
+
+ +
-
-
-
-

客户评价

-

{{ selectedReview.content }}

-
+ +
+
+
+
+ 王总监 +
+
+

王总监 添加了 4 张照片

+

1 天前

+
+
+ +
+

Belon

+
+ + + + + + 8 +
+

法国菜

- -
-

聊天记录

-
-
- -
- +
+
+ 法式甜点
-
- {{ screenshot.description }} +
+ 主菜
+ +
+ + +
+ +
+ 查看全部 4 张照片 +
-
-
- {{ tag }} +
+
+
+ 刘先生 +
+
+

刘先生 发表了评论

+

1 天前

+
+
+ +
+
+ 自助餐照片 +
+ +

The Place

+
+ + + + + +
+ +

对于748港币每位的自助餐，品质非常糟糕！不推荐来这个地方...

+ 阅读更多 +
+
+ +
+
+
+ 刘先生 +
+
+

刘先生 添加了一张照片

+

1 天前

+
+
+ +
+

The Place

+
+ + + + + + 8 +
+

$$ • 自助餐

+ +
+ 自助餐厅 +
+ +
+ +
-
评价时间：{{ formatDate(selectedReview.date) }}
@@ -151,7 +256,7 @@
- 聊天截图 + 照片大图 @@ -161,138 +266,13 @@ @@ -365,64 +333,53 @@ onUnmounted(() => { } .reviews-container { - max-width: 1400px; + max-width: 1200px; margin: 0 auto; padding: 0 20px; - position: relative; } -.reviews-carousel { - overflow: hidden; - margin-bottom: 40px; -} - -.reviews-track { +.activity-feed { display: flex; - transition: transform 0.5s ease; + flex-direction: column; gap: 30px; } -.review-card { - flex: 0 0 400px; - background: white; - border-radius: 20px; - padding: 30px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - cursor: pointer; - transition: all 0.3s ease; - border: 1px solid #e9ecef; - - &:hover { - transform: translateY(-10px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); +.activity-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + + @media (max-width: 1024px) { + grid-template-columns: repeat(2, 1fr); } - + @media (max-width: 768px) { - flex: 0 0 300px; - padding: 20px; + grid-template-columns: 1fr; } } -.review-header { - display: flex; - justify-content: space-between; - align-items: flex-start; - margin-bottom: 20px; +.activity-card { + background: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); + border: 1px solid #e0e0e0; } -.customer-info { +.user-activity-header { display: flex; align-items: center; - gap: 15px; + padding: 15px; + border-bottom: 1px solid #f5f5f5; } -.avatar { - width: 60px; - height: 60px; +.user-avatar { + width: 50px; + height: 50px; border-radius: 50%; overflow: hidden; - border: 3px solid #3498db; - + margin-right: 15px; + img { width: 100%; height: 100%; @@ -430,360 +387,207 @@ onUnmounted(() => { } } -.customer-details { - h4, h3 { - margin: 0 0 5px 0; - color: #2c3e50; +.activity-info { + h4 { + margin: 0; + font-size: 16px; font-weight: 600; + color: #333; } - - .company { - color: #7f8c8d; - font-size: 0.9rem; - margin: 0 0 8px 0; - } - - .rating { - .fa-star { - color: #ddd; - font-size: 0.9rem; - margin-right: 2px; - - &.active { - color: #f39c12; - } - } + + .activity-time { + margin: 5px 0 0; + font-size: 14px; + color: #777; } } -.review-date { - color: #95a5a6; - font-size: 0.85rem; +.activity-content { + padding: 15px; } -.review-content { - margin-bottom: 20px; - - .review-text { - color: #34495e; - line-height: 1.6; - margin-bottom: 20px; - } +.place-name { + margin: 0 0 5px; + font-size: 20px; + font-weight: 600; + color: #333; } -.chat-preview { - .screenshot-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 10px; - margin-bottom: 15px; - } - - .screenshot-item { - position: relative; - aspect-ratio: 16/9; - border-radius: 8px; - overflow: hidden; - border: 2px solid #e9ecef; - - img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.3s ease; - } - - &:hover img { - transform: scale(1.05); - } +.place-category { + margin: 5px 0 15px; + font-size: 14px; + color: #666; +} - &.more-indicator .more-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.7); - display: flex; - align-items: center; - justify-content: center; - color: white; - font-weight: bold; - font-size: 1.2rem; +.rating { + margin-bottom: 10px; + display: flex; + align-items: center; + + .fa-star { + color: #ddd; + font-size: 18px; + margin-right: 2px; + + &.active { + color: #f39c12; } } + + .rating-count { + margin-left: 5px; + color: #666; + } +} - .view-more { - text-align: center; - color: #3498db; - font-size: 0.9rem; - font-weight: 500; +.photos-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 10px; + margin-bottom: 15px; +} - i { - margin-right: 5px; - } +.photos-single { + margin-bottom: 15px; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + display: block; } } -.review-tags { - display: flex; - flex-wrap: wrap; - gap: 8px; - - .tag { - background: linear-gradient(135deg, #3498db, #2980b9); - color: white; - padding: 4px 12px; - border-radius: 15px; - font-size: 0.8rem; - font-weight: 500; +.photo-item { + aspect-ratio: 4/3; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + height: 100%; + object-fit: cover; } } -.carousel-controls { +.action-buttons { display: flex; - align-items: center; - justify-content: center; - gap: 20px; - - .control-btn { - width: 50px; - height: 50px; + margin-bottom: 10px; + + .like-btn { + background: none; border: none; - background: #3498db; - color: white; - border-radius: 50%; + padding: 8px 12px; + margin-right: 10px; cursor: pointer; - transition: all 0.3s ease; display: flex; align-items: center; - justify-content: center; - - &:hover:not(:disabled) { - background: #2980b9; - transform: scale(1.1); - } - - &:disabled { - background: #bdc3c7; - cursor: not-allowed; + color: #777; + + i { + margin-right: 5px; } - } - - .indicators { - display: flex; - gap: 10px; - - .indicator { - width: 12px; - height: 12px; - border-radius: 50%; - background: #bdc3c7; - cursor: pointer; - transition: all 0.3s ease; - - &.active { - background: #3498db; - transform: scale(1.2); - } + + &:hover { + color: #3498db; } } } -// 弹窗样式 -.modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - display: flex; - align-items: center; - justify-content: center; - z-index: 1000; - padding: 20px; -} - -.modal-content { - background: white; - border-radius: 20px; - max-width: 800px; - width: 100%; - max-height: 90vh; - overflow-y: auto; - position: relative; -} - -.modal-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 30px 30px 20px; - border-bottom: 1px solid #e9ecef; - - .close-btn { - width: 40px; - height: 40px; - border: none; - background: #e74c3c; - color: white; - border-radius: 50%; - cursor: pointer; - transition: all 0.3s ease; - +.view-all { + a { + color: #3498db; + text-decoration: none; + font-size: 14px; + &:hover { - background: #c0392b; - transform: scale(1.1); + text-decoration: underline; } } } -.modal-body { - padding: 30px; - - h4 { - color: #2c3e50; - margin-bottom: 15px; - font-weight: 600; - } - - .review-content p { - color: #34495e; - line-height: 1.6; - margin-bottom: 30px; +.review-photo { + margin-bottom: 15px; + border-radius: 8px; + overflow: hidden; + + img { + width: 100%; + display: block; } } -.chat-screenshots { - margin-bottom: 30px; - - .screenshots-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - gap: 20px; - margin-top: 20px; - } - - .screenshot-full { - position: relative; - border-radius: 12px; - overflow: hidden; - cursor: pointer; - border: 2px solid #e9ecef; - transition: all 0.3s ease; - - &:hover { - transform: scale(1.02); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); - } - - img { - width: 100%; - height: auto; - display: block; - } - - .screenshot-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.5); - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s ease; - - i { - color: white; - font-size: 1.5rem; - } - } - - &:hover .screenshot-overlay { - opacity: 1; - } +.review-text { + margin: 10px 0; + font-size: 15px; + color: #333; + line-height: 1.5; +} - .screenshot-desc { - position: absolute; - bottom: 0; - left: 0; - right: 0; - background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); - color: white; - padding: 15px 10px 10px; - font-size: 0.9rem; - text-align: center; - } +.read-more { + color: #3498db; + text-decoration: none; + font-size: 14px; + display: inline-block; + margin-bottom: 15px; + + &:hover { + text-decoration: underline; } } -.review-meta { +.interaction-stats { display: flex; - justify-content: space-between; - align-items: center; - padding-top: 20px; - border-top: 1px solid #e9ecef; - - .tags { + border-top: 1px solid #f5f5f5; + padding-top: 15px; + + .stat { display: flex; - flex-wrap: wrap; - gap: 8px; - } - - .review-date { - color: #7f8c8d; - font-size: 0.9rem; + align-items: center; + margin-right: 20px; + color: #777; + + i { + margin-right: 5px; + font-size: 16px; + } } } -// 图片查看器 +// 图片查看器样式 .image-viewer-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.95); + background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; - z-index: 1100; - padding: 20px; + z-index: 1000; } .image-viewer-content { position: relative; max-width: 90vw; max-height: 90vh; - + img { max-width: 100%; - max-height: 100%; + max-height: 90vh; object-fit: contain; - border-radius: 8px; } - + .close-btn { position: absolute; - top: -50px; + top: -40px; right: 0; - width: 40px; - height: 40px; + background: none; border: none; - background: #e74c3c; color: white; - border-radius: 50%; + font-size: 24px; cursor: pointer; - transition: all 0.3s ease; - - &:hover { - background: #c0392b; - transform: scale(1.1); - } } } @@ -792,33 +596,9 @@ onUnmounted(() => { .customer-reviews { padding: 40px 0; } - + .reviews-header h2 { font-size: 2rem; } - - .reviews-track { - gap: 20px; - } - - .modal-content { - margin: 10px; - border-radius: 15px; - } - - .modal-header, - .modal-body { - padding: 20px; - } - - .chat-screenshots .screenshots-grid { - grid-template-columns: 1fr; - } - - .review-meta { - flex-direction: column; - align-items: flex-start; - gap: 15px; - } } \ No newline at end of file diff --git a/src/components/home/CaseSection.vue b/src/components/home/CaseSection.vue index 71b236b..b96ff28 100644 --- a/src/components/home/CaseSection.vue +++ b/src/components/home/CaseSection.vue @@ -11,7 +11,7 @@ const router = useRouter(); // 查看案例详情处理函数 const viewCaseDetails = (id) => { - router.push(`/cases/${id}`); + router.push(`/case/${id}`); }; diff --git a/src/router/index.js b/src/router/index.js index 1d0880d..55abb26 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -29,7 +29,7 @@ const routes = [ component: Cases }, { - path: '/cases/:id', + path: '/case/:id', name: 'CaseDetail', component: CaseDetail }, diff --git a/src/stores/cases.js b/src/stores/cases.js index f66bf15..08c4c0d 100644 --- a/src/stores/cases.js +++ b/src/stores/cases.js @@ -4,12 +4,119 @@ import api from '@/api' // 定义案例数据存储 export const useCasesStore = defineStore('cases', () => { + // Mock数据 + const mockSelectedCases = [ + { + id: '1923006946802786306', + title: '智慧校园管理系统', + description: '为某知名高校开发的一体化校园管理系统，涵盖教学、行政、学生服务等多个模块', + imageUrl: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + categoryName: '企业系统', + categoryId: 1, + client: '某知名高校', + completionDate: '2023年8月', + challenge: '客户面临的挑战是多个独立系统并行运行，数据不一致，管理效率低下。学生和教职工需要在多个系统间切换，用户体验不佳。', + solution: '我们为客户设计并实现了一套集成化的智慧校园系统，整合了教务管理、学生服务、行政办公、资源管理等多个模块。系统采用了统一的用户界面和数据标准，实现了单点登录和数据共享。我们还开发了移动端应用，方便师生随时随地访问系统功能。', + results: '系统上线后，管理效率提升了50%，数据处理错误减少了80%，用户满意度提高了60%。系统的自助服务功能减轻了行政人员的工作负担，让他们能够专注于更有价值的任务。', + testimonial: '微隐软件工作室的团队展现了卓越的项目管理和技术能力。他们深入理解了我们复杂的业务需求，并提供了一套既全面又易用的解决方案。新系统极大地改善了我们的管理效率和服务质量。', + testimonialAuthor: '陈校长 - 客户负责人', + pdfUrl: '/docs/smart-campus-system.pdf', + designUrl: 'https://www.figma.com/file/smart-campus-design', + qrcodeUrl: '/images/smart-campus-qrcode.png', + gallery: [ + { + imageUrl: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '系统主界面' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '移动端应用界面' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '数据分析仪表盘' + } + ] + }, + { + id: '1923006946802786307', + title: '电商平台重构', + description: '帮助某电商企业重构其线上平台，提升用户体验和系统性能，实现销售额提升30%', + imageUrl: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + categoryName: 'Web应用', + categoryId: 2, + client: '某知名电商企业', + completionDate: '2023年9月', + challenge: '客户的电商平台面临用户体验不佳、系统响应缓慢、移动端适配不足等问题，导致用户流失和转化率下降。同时，随着业务量增长，系统稳定性也面临挑战。', + solution: '我们对客户的电商平台进行了全面重构，采用了现代化的前端框架和响应式设计，优化了用户界面和交互流程。在后端，我们重构了核心服务，引入了微服务架构和缓存机制，提升了系统性能和可扩展性。同时，我们还加强了系统的安全性，实现了全面的HTTPS和数据加密。', + results: '重构后的平台页面加载速度提升了65%，用户停留时间增加了40%，转化率提高了25%，最终带来了30%的销售额增长。系统的稳定性也得到了显著提升，即使在促销高峰期也能保持良好的性能。', + testimonial: '微隐软件工作室的团队展现了卓越的技术实力和创新思维。他们不仅解决了我们平台的技术问题，还从用户体验和业务角度提供了宝贵建议。重构后的平台获得了用户的一致好评，为我们带来了实质性的业务增长。', + testimonialAuthor: '李总 - 客户产品总监', + pdfUrl: '/docs/ecommerce-platform.pdf', + designUrl: 'https://www.figma.com/file/ecommerce-design', + qrcodeUrl: '/images/ecommerce-qrcode.png', + gallery: [ + { + imageUrl: 'https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '平台首页' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1556740772-1a741d976155?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '商品详情页' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1556761175-129418cb2dfe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '移动端购物流程' + } + ] + }, + { + id: '1923006946802786308', + title: '医疗服务APP', + description: '为连锁医疗机构开发的患者服务APP，实现在线挂号、问诊和健康管理等功能', + imageUrl: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + categoryName: '移动应用', + categoryId: 3, + client: '某连锁医疗机构', + completionDate: '2023年12月', + challenge: '客户希望通过数字化手段提升患者服务体验，减少排队等待时间，同时提高医疗资源利用效率。传统的线下预约和就诊流程繁琐，患者满意度不高。', + solution: '我们为客户开发了一款功能全面的医疗服务APP，支持在线挂号、远程问诊、检查报告查询、健康档案管理等功能。APP采用了直观的用户界面和流畅的交互设计，确保各年龄段用户都能轻松使用。在技术层面，我们实现了与医院HIS系统的无缝集成，并采用了严格的数据加密和隐私保护措施。', + results: 'APP上线后，患者预约效率提升了80%，平均等待时间减少了65%，患者满意度提高了45%。同时，医生的工作效率也得到了提升，资源利用率增加了30%。APP已成为客户数字化医疗服务的核心平台。', + testimonial: '微隐软件工作室深入理解了医疗行业的特殊需求，为我们打造了一款既专业又易用的医疗服务APP。他们在确保数据安全和系统稳定性方面表现出色，为我们的患者提供了便捷、高效的服务体验。', + testimonialAuthor: '王院长 - 客户医疗总监', + pdfUrl: '/docs/medical-app.pdf', + designUrl: 'https://www.figma.com/file/medical-app-design', + qrcodeUrl: '/images/medical-app-qrcode.png', + gallery: [ + { + imageUrl: 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '挂号预约界面' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '在线问诊模块' + }, + { + imageUrl: 'https://images.unsplash.com/photo-1583324113626-70df0f4deaab?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + imageTitle: '健康档案管理' + } + ] + } + ]; - const selectedCase = ref([]) + const selectedCase = ref(mockSelectedCases); const getSelectedCase = async () => { - const res = await api.getSelectedCase() - selectedCase.value = res.data + try { + const res = await api.getSelectedCase(); + if (res.data && res.data.length > 0) { + selectedCase.value = res.data; + } + } catch (error) { + console.error('获取精选案例失败:', error); + // 如果API调用失败，使用mock数据 + selectedCase.value = mockSelectedCases; + } } return { diff --git a/src/views/pages/CaseDetail.vue b/src/views/pages/CaseDetail.vue index b14567c..a44ee46 100644 --- a/src/views/pages/CaseDetail.vue +++ b/src/views/pages/CaseDetail.vue @@ -1,274 +1,95 @@ - \ No newline at end of file diff --git a/src/views/pages/Cases.vue b/src/views/pages/Cases.vue index ecd49c1..2a08dc9 100644 --- a/src/views/pages/Cases.vue +++ b/src/views/pages/Cases.vue @@ -32,7 +32,7 @@ const router = useRouter(); // 查看案例详情 const viewCaseDetails = (id) => { // 跳转到案例详情页 - router.push(`/cases/${id}`); + router.push(`/case/${id}`); }; function getCategoryList() {