66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div class="product-detail">
|
|
<el-tabs v-model="activeName" class="product-tabs" stretch>
|
|
<el-tab-pane :label="$t('product-tab.details')" name="details">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<div v-if="!hydrated" v-html="product.description || ''" />
|
|
<div v-else>
|
|
<html-renderer
|
|
class="html-typography"
|
|
:html="product.description || ''"
|
|
/>
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('product-tab.specs')" name="specs">
|
|
<spec-table :data="product.specs" />
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('product-tab.faq')" name="faq">
|
|
<question-list :questions="product.faqs" />
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('product-tab.documents')" 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 hydrated = ref(false);
|
|
|
|
const activeName = ref('details'); // 默认选中概览标签
|
|
|
|
onMounted(() => {
|
|
hydrated.value = true;
|
|
});
|
|
</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>
|