106 lines
3.6 KiB
Vue
106 lines
3.6 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import { useRoute } from 'vue-router'
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
|
||
const route = useRoute()
|
||
const activeKey = ref('1')
|
||
|
||
const project = {
|
||
id: route.params.id,
|
||
title: '电商平台',
|
||
cover: 'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
category: 'Web应用',
|
||
tags: ['Vue3', 'Node.js'],
|
||
author: '技术团队',
|
||
price: '¥ 29,999',
|
||
description: '基于微服务架构的电商平台，包含商品管理、订单系统、支付对接等模块',
|
||
technicalStack: ['前端：Vue3 + TypeScript', '后端：NestJS + MySQL', '部署：Docker + Kubernetes'],
|
||
screenshots: [
|
||
'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280',
|
||
'https://pic.rmb.bdstatic.com/bjh/80852bfe7c321988191838517ba64e309354.jpeg@h_1280'
|
||
],
|
||
video: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
|
||
wechatQR: 'https://via.placeholder.com/200x200'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="container mx-auto px-4 py-8">
|
||
<!-- 项目封面 -->
|
||
<div class="mb-8" data-aos="fade-up">
|
||
<img :src="project.cover" class="w-full h-64 md:h-96 object-cover rounded-xl" />
|
||
</div>
|
||
|
||
<!-- 基本信息卡片 -->
|
||
<a-card class="mb-8 shadow-lg" data-aos="fade-up">
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div>
|
||
<h1 class="text-2xl font-bold mb-2">{{ project.title }}</h1>
|
||
<a-tag color="blue" class="mb-2">{{ project.category }}</a-tag>
|
||
<div class="flex flex-wrap gap-2">
|
||
<a-tag v-for="tag in project.tags" :key="tag">{{ tag }}</a-tag>
|
||
</div>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<p class="text-gray-600">作者：{{ project.author }}</p>
|
||
<p class="text-xl text-red-500 font-bold">{{ project.price }}</p>
|
||
</div>
|
||
<div class="flex items-center justify-center">
|
||
<a-button type="primary" size="large" class="w-full">立即咨询</a-button>
|
||
</div>
|
||
</div>
|
||
</a-card>
|
||
|
||
<!-- 详情标签页 -->
|
||
<a-tabs v-model:activeKey="activeKey" class="mb-8" data-aos="fade-up">
|
||
<a-tab-pane key="1" tab="项目详情">
|
||
<div class="prose max-w-none">
|
||
<h3 class="text-xl font-bold mb-4">项目描述</h3>
|
||
<p class="text-gray-600 mb-6">{{ project.description }}</p>
|
||
|
||
<h3 class="text-xl font-bold mb-4">技术栈</h3>
|
||
<ul class="list-disc pl-6 mb-6">
|
||
<li v-for="tech in project.technicalStack" :key="tech">{{ tech }}</li>
|
||
</ul>
|
||
</div>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane key="2" tab="项目截图">
|
||
<swiper
|
||
:slides-per-view="1"
|
||
:space-between="30"
|
||
class="mb-6"
|
||
>
|
||
<swiper-slide v-for="(img, index) in project.screenshots" :key="index">
|
||
<img :src="img" class="w-full h-96 object-contain" />
|
||
</swiper-slide>
|
||
</swiper>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane key="3" tab="演示视频">
|
||
<div class="aspect-w-16 aspect-h-9">
|
||
<iframe
|
||
:src="project.video"
|
||
class="w-full h-96"
|
||
frameborder="0"
|
||
allowfullscreen
|
||
/>
|
||
</div>
|
||
</a-tab-pane>
|
||
|
||
<a-tab-pane key="4" tab="联系作者">
|
||
<div class="text-center">
|
||
<img :src="project.wechatQR" class="w-48 h-48 mx-auto mb-4" />
|
||
<p class="text-gray-600">扫描二维码添加微信咨询</p>
|
||
</div>
|
||
</a-tab-pane>
|
||
</a-tabs>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.prose :deep(h3) {
|
||
@apply border-l-4 border-blue-500 pl-4 mb-4;
|
||
}
|
||
</style> |