Files
jinshen-website/app/components/QuestionList.vue
R2m1liA 56dd57e244
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m49s
feat(support): 添加分类筛选的功能
- 为常见问题&文档资料页面添加分类筛选功能
- 调整markdown中的表格渲染样式
2025-09-29 16:09:48 +08:00

66 lines
1.3 KiB
Vue

<template>
<div class="question-list">
<el-collapse class="question-collapse" accordion>
<el-collapse-item
v-for="question in questions"
:key="question.documentId"
:title="question.title"
:name="question.documentId"
>
<markdown-renderer :content="question.content || ''" />
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
defineProps({
questions: {
type: Array as () => Array<{
title: string;
content: string;
documentId: string;
}>,
default: () => [],
},
});
</script>
<style scoped>
.question-list {
width: 100%;
}
.question-collapse {
border: none;
}
.question-collapse :deep(.el-collapse-item) {
margin-bottom: 1rem;
border-radius: 8px;
}
.question-collapse :deep(.el-collapse-item__header) {
font-size: 1rem;
padding: 1rem;
border-radius: 8px;
background-color: #f5f7fa;
transition: all 0.3s ease;
&.is-active {
background-color: #e1e6eb;
color: var(--el-color-primary);
}
}
.question-collapse :deep(.el-collapse-item__wrap) {
border: none;
}
.question-collapse :deep(.el-collapse-item__content) {
padding: 1rem;
font-size: 0.9rem;
}
</style>