R2m1liA
ec9a097ef5
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m56s
- 增添table样式
67 lines
1.7 KiB
Vue
67 lines
1.7 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 class="html-typography" v-html="product?.description || ''" />
|
|
<!-- <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>
|