remilia/jinshen-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 暂时弃用html-renderer将html渲染回滚到v-html
All checks were successful
deploy to server / build-and-deploy (push) Successful in 2m56s
Details

Browse Source 
- 增添table样式
This commit is contained in:
R2m1liA
2025-11-14 13:29:00 +08:00
parent 3fb28c3f00
commit ec9a097ef5
6 changed files with 79 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/css/typography.css
View File

@ -47,7 +47,49 @@
margin: 20px 0; margin: 20px 0;
} }
/* 表格基础样式 */
.html-typography table { .html-typography table {
width: 100%; width: 100%;
border-collapse: collapse;
border: 1px solid var(--el-border-color); border: 1px solid var(--el-border-color);
margin: 1em 0;
table-layout: auto;
font-size: 14px;
}
/* 单元格通用样式 */
.html-typography th,
.html-typography td {
border: 1px solid var(--el-border-color);
padding: 8px 12px;
text-align: left;
vertical-align: middle;
word-break: break-word;
}
/* 表头样式 */
.html-typography th {
background-color: var(--el-fill-color-light);
color: var(--el-text-color-primary);
font-weight: 600;
}
/* 行 hover 效果 */
.html-typography tbody tr:hover {
background-color: var(--el-fill-color-light-hover);
}
/* 交替行背景 */
.html-typography tbody tr:nth-child(odd) {
background-color: var(--el-fill-color-lighter);
}
/* 表格标题（如有 caption） */
.html-typography table caption {
caption-side: top;
text-align: left;
padding: 8px 0;
font-size: 14px;
font-weight: 600;
color: var(--el-text-color-primary);
} }

15
app/components/pages/products/ProductDetail.vue
View File

@ -3,13 +3,14 @@
<el-tabs v-model="activeName" class="product-tabs" stretch> <el-tabs v-model="activeName" class="product-tabs" stretch>
<el-tab-pane :label="$t('product-tab.details')" name="details"> <el-tab-pane :label="$t('product-tab.details')" name="details">
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="!hydrated" v-html="product.description || ''" /> <div class="html-typography" v-html="product?.description || ''" />
<div v-else> <!-- <div v-if="!hydrated" v-html="product.description || ''" /> -->
<html-renderer <!-- <div v-else> -->
class="html-typography" <!-- <html-renderer -->
:html="product.description || ''" <!-- class="html-typography" -->
/> <!-- :html="product.description || ''" -->
</div> <!-- /> -->
<!-- </div> -->
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('product-tab.specs')" name="specs"> <el-tab-pane :label="$t('product-tab.specs')" name="specs">
<spec-table :data="product.specs" /> <spec-table :data="product.specs" />

9
app/components/pages/solutions/SolutionDetail.vue
View File

@ -6,10 +6,11 @@
</header> </header>
<section class="solution-content"> <section class="solution-content">
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="!hydrated" v-html="solution?.content || ''" /> <div class="html-typography" v-html="solution?.content || ''" />
<div v-else> <!-- <div v-if="!hydrated" v-html="solution?.content || ''" /> -->
<html-renderer class="html-typography" :html="solution.content || ''" /> <!-- <div v-else> -->
</div> <!-- <html-renderer class="html-typography" :html="solution.content || ''" /> -->
<!-- </div> -->
</section> </section>
</article> </article>
</template> </template>

15
app/components/shared/QuestionList.vue
View File

@ -9,13 +9,14 @@
:name="question.id" :name="question.id"
> >
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="!hydrated" v-html="question.content" /> <div class="html-typography" v-html="question.content || ''" />
<div v-else> <!-- <div v-if="!hydrated" v-html="question.content" /> -->
<html-renderer <!-- <div v-else> -->
class="html-typography" <!-- <html-renderer -->
:html="question.content || ''" <!-- class="html-typography" -->
/> <!-- :html="question.content || ''" -->
</div> <!-- /> -->
<!-- </div> -->
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>

15
app/pages/about/index.vue
View File

@ -5,13 +5,14 @@
<div class="content"> <div class="content">
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="!hydrated" v-html="companyProfile.content || ''" /> <div class="html-typography" v-html="companyProfile.content || ''" />
<div v-else> <!-- <div v-if="!hydrated" v-html="companyProfile.content || ''" /> -->
<html-renderer <!-- <div v-else> -->
class="html-typography" <!-- <html-renderer -->
:html="companyProfile.content || ''" <!-- class="html-typography" -->
/> <!-- :html="companyProfile.content || ''" -->
</div> <!-- /> -->
<!-- </div> -->
</div> </div>
<el-divider content-position="left">{{ $t('learn-more') }}</el-divider> <el-divider content-position="left">{{ $t('learn-more') }}</el-divider>

15
app/pages/support/contact-us.vue
View File

@ -8,13 +8,14 @@
<div v-if="!pending" class="page-content"> <div v-if="!pending" class="page-content">
<!-- eslint-disable-next-line vue/no-v-html --> <!-- eslint-disable-next-line vue/no-v-html -->
<div v-if="!hydrated" v-html="contactInfo?.content || ''" /> <div class="html-typography" v-html="contactInfo?.content || ''" />
<div v-else> <!-- <div v-if="!hydrated" v-html="contactInfo?.content || ''" /> -->
<html-renderer <!-- <div v-else> -->
class="html-typography" <!-- <html-renderer -->
:html="contactInfo?.content || ''" <!-- class="html-typography" -->
/> <!-- :html="contactInfo?.content || ''" -->
</div> <!-- /> -->
<!-- </div> -->
</div> </div>
<div v-else class="loading"> <div v-else class="loading">
<el-skeleton :rows="5" animated /> <el-skeleton :rows="5" animated />