53 lines
1.2 KiB
Vue
53 lines
1.2 KiB
Vue
<template>
|
|
<div class="product-detail">
|
|
<el-tabs v-model="activeName" class="product-tabs" stretch>
|
|
<el-tab-pane label="产品详情" name="details">
|
|
<markdown-renderer :content="product.description || ''" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="技术规格" name="specs">
|
|
<spec-table :data="product.specs" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="常见问题" name="faq">
|
|
<question-list :questions="product.faqs" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="相关文档" name="documents">
|
|
<document-list :documents="product.documents" />
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
product: {
|
|
type: Object as PropType<ProductView>,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const activeName = ref('details'); // 默认选中概览标签
|
|
</script>
|
|
|
|
<style scoped>
|
|
.product-tabs ::v-deep(.el-tabs__nav) {
|
|
min-width: 30%;
|
|
float: right;
|
|
}
|
|
|
|
.product-tabs ::v-deep(.el-tabs__content) {
|
|
padding: 10px;
|
|
}
|
|
|
|
.product-detail h2 {
|
|
color: var(--el-text-color-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.product-tabs ::v-deep(.el-tabs__nav) {
|
|
float: none;
|
|
min-width: 100%;
|
|
}
|
|
}
|
|
</style>
|