55 lines
2.0 KiB
Vue
55 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="!work.title" class="pixel-info" style="padding:30px 0;">> 加载中...</div>
|
|
<div v-else class="pixel-md">
|
|
<div class="pixel-detail-bar">
|
|
<router-link to="/works" class="pixel-btn" style="font-size:9px;">◀ 返回</router-link>
|
|
<span class="pixel-stage-meta">{{ work.category }} · {{ work.year }}</span>
|
|
</div>
|
|
<h1 class="pixel-title" style="margin:16px 0 10px;">{{ work.title }}</h1>
|
|
<p v-if="work.desc" style="line-height:2;">{{ work.desc }}</p>
|
|
<div v-if="work.techStack?.length" style="margin-top:18px;">
|
|
<div class="pixel-hero-label">技术栈</div>
|
|
<div v-for="t in work.techStack" :key="t.category" class="pixel-info">
|
|
> {{ t.category }}: {{ t.items.join(' / ') }}
|
|
</div>
|
|
</div>
|
|
<div v-if="work.links?.live || work.links?.github || work.links?.demo" class="pixel-detail-bar" style="margin-top:20px;">
|
|
<a v-if="work.links.live" :href="work.links.live" target="_blank" rel="noopener" class="pixel-btn" style="font-size:9px;">LIVE ↗</a>
|
|
<a v-if="work.links.demo" :href="work.links.demo" target="_blank" rel="noopener" class="pixel-btn" style="font-size:9px;">DEMO ↗</a>
|
|
<a v-if="work.links.github" :href="work.links.github" target="_blank" rel="noopener" class="pixel-btn pixel-btn-secondary" style="font-size:9px;">GITHUB ↗</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { fetchWork, type Work } from '../../../services/api'
|
|
|
|
const route = useRoute()
|
|
const work = ref<Partial<Work>>({})
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
work.value = await fetchWork(String(route.params.id))
|
|
} catch { /* fallback */ }
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.pixel-detail-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pixel-hero-label {
|
|
font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
|
|
font-size: 9px;
|
|
color: var(--p-orange);
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|