You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
298 lines
8.4 KiB
298 lines
8.4 KiB
<script setup>
|
|
import { ref, onMounted, computed, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import PageHeader from '../../components/PageHeader.vue';
|
|
import { useCasesStore } from '@/stores/cases';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { selectedCase } = useCasesStore();
|
|
|
|
// 获取案例ID
|
|
const caseId = computed(() => Number(route.params.id));
|
|
|
|
// 当前案例数据
|
|
const currentCase = ref(null);
|
|
|
|
// 默认的静态案例数据
|
|
const defaultCaseData = {
|
|
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,
|
|
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: '数据分析仪表盘'
|
|
}
|
|
]
|
|
};
|
|
|
|
// 获取案例详情
|
|
const getCaseDetail = async () => {
|
|
console.log('当前案例ID:', caseId.value);
|
|
console.log('所有案例:', selectedCase.value);
|
|
|
|
// 尝试从selectedCase中获取数据
|
|
if (selectedCase.value && selectedCase.value.length > 0) {
|
|
const currentCaseData = selectedCase.value[0];
|
|
console.log('使用的案例数据:', currentCaseData);
|
|
|
|
// 处理图片路径，如果是数组则取第一个
|
|
if (currentCaseData.imageUrl && typeof currentCaseData.imageUrl === 'string') {
|
|
currentCaseData.image = currentCaseData.imageUrl.split(',')[0];
|
|
}
|
|
|
|
currentCase.value = currentCaseData;
|
|
} else {
|
|
// 如果没有可用数据，使用默认的静态数据
|
|
console.log('使用默认的静态数据');
|
|
currentCase.value = defaultCaseData;
|
|
}
|
|
};
|
|
|
|
// 返回案例列表
|
|
const goBackToList = () => {
|
|
router.push('/cases');
|
|
};
|
|
|
|
// 监听路由参数变化
|
|
watch(() => route.params.id, () => {
|
|
getCaseDetail();
|
|
});
|
|
|
|
// 页面加载时获取数据
|
|
onMounted(() => {
|
|
getCaseDetail();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="currentCase" class="case-detail-page">
|
|
<!-- 页面头部 -->
|
|
<PageHeader
|
|
:title="currentCase.title"
|
|
:subtitle="currentCase.description"
|
|
:backgroundImage="currentCase.image || (currentCase.imageUrl && currentCase.imageUrl.split(',')[0])"
|
|
height="50vh">
|
|
<template #header-cta>
|
|
<div class="header-cta" data-aos="fade-up" data-aos-delay="200">
|
|
<button @click="goBackToList" class="btn-outline">
|
|
<i class="fas fa-arrow-left"></i> 返回案例列表
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</PageHeader>
|
|
|
|
<!-- 案例资源链接 -->
|
|
<section class="case-resources">
|
|
<div class="container">
|
|
<div class="resources-grid">
|
|
<!-- PDF文档 -->
|
|
<div class="resource-item" v-if="currentCase.pdfUrl" data-aos="fade-up">
|
|
<div class="resource-icon">
|
|
<i class="fas fa-file-pdf"></i>
|
|
</div>
|
|
<h3>功能说明文档</h3>
|
|
<p>查看完整的项目功能说明文档</p>
|
|
<a :href="currentCase.pdfUrl" target="_blank" class="btn-primary">
|
|
查看文档
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 设计稿链接 -->
|
|
<div class="resource-item" v-if="currentCase.designUrl" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="resource-icon">
|
|
<i class="fas fa-paint-brush"></i>
|
|
</div>
|
|
<h3>设计稿</h3>
|
|
<p>浏览完整的项目设计方案</p>
|
|
<a :href="currentCase.designUrl" target="_blank" class="btn-primary">
|
|
查看设计
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 小程序二维码 -->
|
|
<div class="resource-item" v-if="currentCase.qrcodeUrl" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="resource-icon">
|
|
<i class="fas fa-qrcode"></i>
|
|
</div>
|
|
<h3>小程序体验</h3>
|
|
<p>扫码立即体验项目</p>
|
|
<img :src="currentCase.qrcodeUrl" alt="小程序二维码" class="qrcode-image">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 项目展示图片 -->
|
|
<section class="case-gallery" v-if="currentCase.gallery && currentCase.gallery.length > 0">
|
|
<div class="container">
|
|
<h3>设计展示</h3>
|
|
<div class="gallery-grid">
|
|
<div v-for="(image, index) in currentCase.gallery"
|
|
:key="index"
|
|
class="gallery-item"
|
|
data-aos="fade-up"
|
|
:data-aos-delay="index * 100">
|
|
<img :src="image.imageUrl" :alt="image.imageTitle">
|
|
<div class="image-caption">{{ image.imageTitle }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.case-detail-page {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.case-resources {
|
|
padding: 60px 0;
|
|
background-color: white;
|
|
}
|
|
|
|
.resources-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 30px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.resource-item {
|
|
text-align: center;
|
|
padding: 30px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.resource-item:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.resource-icon {
|
|
font-size: 2.5rem;
|
|
color: #007bff;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.resource-item h3 {
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
|
|
.resource-item p {
|
|
color: #666;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.qrcode-image {
|
|
max-width: 200px;
|
|
margin: 0 auto;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.case-gallery {
|
|
padding: 60px 0;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.gallery-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.gallery-item {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 250px;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.gallery-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.image-caption {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 15px;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
h3 {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
color: #333;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.resources-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.gallery-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.case-resources {
|
|
padding: 40px 0;
|
|
}
|
|
|
|
.case-gallery {
|
|
padding: 40px 0;
|
|
}
|
|
}
|
|
</style>
|