fix:问卷整改h5增加“说明”显示

This commit is contained in:
2026-10-30 17:12:02 +08:00
parent 6c6caa2558
commit c1ac3db4bf
@@ -16,6 +16,11 @@ layout("/layouts/platform_h5.html"){
</div>
<div class="quiz-card-scroll" v-if="!answerRecord.isFinish">
<van-collapse v-if="activity.description" v-model="descriptionPanels" class="quiz-description" @change="adaptDescriptionToMobile">
<van-collapse-item title="说明" name="description" :value="descriptionPanels.length ? '收起' : '展开'">
<div ref="descriptionContent" class="quiz-description-content" v-html="activity.description"></div>
</van-collapse-item>
</van-collapse>
<div v-for="(subject, index) in subjects" :key="index" class="subject">
<p>{{index+1}}、{{ subject.title }}</p>
<div class="tag">
@@ -65,6 +70,7 @@ layout("/layouts/platform_h5.html"){
H5JumpTo: GetQueryString("H5JumpTo"),
subjects: [],
activity: {},
descriptionPanels: [],
isFinished: false,
answerRecord: {},
answerRecordId: null,
@@ -100,6 +106,28 @@ layout("/layouts/platform_h5.html"){
}
},
methods: {
// 按原有字号层次缩小大字,不覆盖富文本颜色、字重、对齐等样式。
adaptDescriptionToMobile() {
this.$nextTick(() => {
const content = this.$refs.descriptionContent
if (!content || !this.descriptionPanels.length || content.dataset.mobileAdapted) return
// 先读取全部字号,避免父元素缩放后影响子元素的继承字号计算。
const sizes = [content, ...content.querySelectorAll('*')].map(element => ({
element,
size: parseFloat(window.getComputedStyle(element).fontSize)
}))
const maxSize = sizes.reduce((max, item) => Math.max(max, item.size || 0), 0)
if (maxSize > 22) {
const ratio = 8 / (maxSize - 14)
sizes.forEach(({ element, size }) => {
if (!Number.isFinite(size)) return
const mobileSize = size > 14 ? 14 + (size - 14) * ratio : size
element.style.setProperty('font-size', mobileSize + 'px', 'important')
})
}
content.dataset.mobileAdapted = 'true'
})
},
getCategoryPageTitle(category, defaultTitle) {
const titleMap = {
QUIZ: "在线答题",
@@ -412,6 +440,25 @@ layout("/layouts/platform_h5.html"){
box-sizing: border-box;
}
.quiz-description {
margin-bottom: 14px;
border-radius: 8px;
overflow: hidden;
}
.quiz-description-content {
color: #303133;
line-height: 1.8;
overflow-wrap: break-word;
overflow-x: auto;
}
/deep/ .quiz-description-content img {
max-width: 100%;
height: auto;
}
.subject {
background: #fff;
padding: 15px;