fix:问卷整改h5增加“说明”显示
This commit is contained in:
@@ -16,6 +16,11 @@ layout("/layouts/platform_h5.html"){
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="quiz-card-scroll" v-if="!answerRecord.isFinish">
|
<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">
|
<div v-for="(subject, index) in subjects" :key="index" class="subject">
|
||||||
<p>{{index+1}}、{{ subject.title }}</p>
|
<p>{{index+1}}、{{ subject.title }}</p>
|
||||||
<div class="tag">
|
<div class="tag">
|
||||||
@@ -65,6 +70,7 @@ layout("/layouts/platform_h5.html"){
|
|||||||
H5JumpTo: GetQueryString("H5JumpTo"),
|
H5JumpTo: GetQueryString("H5JumpTo"),
|
||||||
subjects: [],
|
subjects: [],
|
||||||
activity: {},
|
activity: {},
|
||||||
|
descriptionPanels: [],
|
||||||
isFinished: false,
|
isFinished: false,
|
||||||
answerRecord: {},
|
answerRecord: {},
|
||||||
answerRecordId: null,
|
answerRecordId: null,
|
||||||
@@ -100,6 +106,28 @@ layout("/layouts/platform_h5.html"){
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
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) {
|
getCategoryPageTitle(category, defaultTitle) {
|
||||||
const titleMap = {
|
const titleMap = {
|
||||||
QUIZ: "在线答题",
|
QUIZ: "在线答题",
|
||||||
@@ -412,6 +440,25 @@ layout("/layouts/platform_h5.html"){
|
|||||||
box-sizing: border-box;
|
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 {
|
.subject {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
|
|||||||
Reference in New Issue
Block a user