74 lines
1.6 KiB
Vue
74 lines
1.6 KiB
Vue
<template>
|
||
<el-card class="production-card" @click="handleClick">
|
||
<!-- Image -->
|
||
<el-image class="production-image" :src="imageUrl" fit="contain" />
|
||
<template #footer>
|
||
<!-- Name -->
|
||
<div class="text-center mx-auto text-md">
|
||
<span class="production-name">{{ name }}</span>
|
||
</div>
|
||
<!-- Description -->
|
||
<div class="mx-auto mt-5 text-center text-sm opacity-25">{{ description }}</div>
|
||
</template>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
|
||
interface Props {
|
||
name: string
|
||
description: string
|
||
imageUrl: string
|
||
id?: string | number
|
||
slug?: string
|
||
}
|
||
|
||
const props = defineProps<Props>()
|
||
const localePath = useLocalePath()
|
||
|
||
const handleClick = () => {
|
||
// 优先使用 slug，如果没有则使用 id
|
||
const routeParam = props.slug || props.id
|
||
if (routeParam) {
|
||
navigateTo(localePath(`/productions/${routeParam}`))
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.production-card {
|
||
width: 20%;
|
||
/* margin: 20px auto; */
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-align: center;
|
||
}
|
||
|
||
.production-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.production-name {
|
||
font-weight: 600;
|
||
color: var(--el-text-color-primary);
|
||
}
|
||
|
||
.production-card .el-image {
|
||
height: 200px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 响应式设计 */
|
||
@media (max-width: 1200px) {
|
||
.production-card {
|
||
width: 45%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.production-card {
|
||
width: 90%;
|
||
}
|
||
}
|
||
</style> |