R2m1liA
f957adfa5d
- 网站内容展示：首页， 产品页， 解决方案， 联系信息等 - 网站跳转逻辑：通过Vue-Router实现路由跳转 - 后端通信： 通过Nuxt Strapi与后端Strapi服务进行通信
83 lines
1.6 KiB
Vue
83 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> |