fix:问卷整改h5增加“说明”显示
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user