86 lines
1.6 KiB
Vue
86 lines
1.6 KiB
Vue
<template>
|
|
<el-card
|
|
class="solution-card"
|
|
body-class="card-body"
|
|
header-class="card-header"
|
|
@click="handleClick"
|
|
>
|
|
<template #header>
|
|
<!-- Cover Image -->
|
|
<el-image class="solution-cover" :src="coverUrl" fit="cover" />
|
|
</template>
|
|
<!-- Title -->
|
|
<template #default>
|
|
<div class="text-center mx-auto text-md">
|
|
<span class="solution-title">{{ title }}</span>
|
|
</div>
|
|
<!-- Summary -->
|
|
<div class="mx-auto mt-5 text-left text-sm opacity-25">{{ summary }}</div>
|
|
</template>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
title: string;
|
|
summary: string;
|
|
coverUrl: string;
|
|
documentId?: string;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const localePath = useLocalePath();
|
|
|
|
const handleClick = () => {
|
|
const routeParam = props.documentId;
|
|
if (routeParam) {
|
|
navigateTo(localePath(`/solutions/${routeParam}`));
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.solution-card {
|
|
width: 30%;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.solution-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.solution-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
:deep(.card-header) {
|
|
padding: 0;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
:deep(.card-body) {
|
|
margin: 10px auto;
|
|
padding: 1px auto;
|
|
}
|
|
|
|
.solution-card .el-image {
|
|
height: 250px;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.solution-card {
|
|
width: 45%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.solution-card {
|
|
width: 90%;
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
</style>
|