|
|
@@ -6,32 +6,35 @@
|
|
|
<div class="main">
|
|
|
<ul ref="list" class="option-list">
|
|
|
<li v-for="(item, i) in data.option_list" :key="i" class="list-item">
|
|
|
- <div
|
|
|
- v-for="({ content, mark, multilingual, paragraph_list }, j) in item"
|
|
|
- :key="mark"
|
|
|
- :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark, i, j), { isMobile: isMobile }]"
|
|
|
- :style="{
|
|
|
- cursor: disabled ? 'default' : 'pointer',
|
|
|
- flex: isMobile ? '0 1 auto' : '',
|
|
|
- width: isMobile ? 'calc(50% - 8px)' : '',
|
|
|
- overflow: isMobile ? 'auto' : '',
|
|
|
- }"
|
|
|
- @mousedown="mousedown($event, i, j, mark)"
|
|
|
- @mouseup="mouseup($event, i, j, mark)"
|
|
|
- @click="handleClickConnection($event, i, j, mark)"
|
|
|
- >
|
|
|
- <PinyinText
|
|
|
- v-if="isEnable(data.property.view_pinyin)"
|
|
|
- class="content"
|
|
|
- :paragraph-list="paragraph_list"
|
|
|
- :pinyin-position="data.property.pinyin_position"
|
|
|
- :is-preview="true"
|
|
|
- />
|
|
|
- <span v-else class="content rich-text" v-html="convertText(sanitizeHTML(content))"></span>
|
|
|
- <div v-if="showLang" class="lang">
|
|
|
- {{ multilingual.find((item) => item.type === getLang())?.translation }}
|
|
|
+ <template v-for="({ content, mark, multilingual, paragraph_list }, j) in item">
|
|
|
+ <div
|
|
|
+ v-if="content"
|
|
|
+ :key="mark"
|
|
|
+ :class="['item-wrapper', `item-${mark}`, computedAnswerClass(mark, i, j), { isMobile: isMobile }]"
|
|
|
+ :style="{
|
|
|
+ cursor: disabled ? 'default' : 'pointer',
|
|
|
+ flex: isMobile ? '0 1 auto' : '',
|
|
|
+ width: isMobile ? 'calc(50% - 8px)' : '',
|
|
|
+ overflow: isMobile ? 'auto' : '',
|
|
|
+ }"
|
|
|
+ @mousedown="mousedown($event, i, j, mark)"
|
|
|
+ @mouseup="mouseup($event, i, j, mark)"
|
|
|
+ @click="handleClickConnection($event, i, j, mark)"
|
|
|
+ >
|
|
|
+ <PinyinText
|
|
|
+ v-if="isEnable(data.property.view_pinyin)"
|
|
|
+ class="content"
|
|
|
+ :paragraph-list="paragraph_list"
|
|
|
+ :pinyin-position="data.property.pinyin_position"
|
|
|
+ :is-preview="true"
|
|
|
+ />
|
|
|
+ <span v-else class="content rich-text" v-html="convertText(sanitizeHTML(content))"></span>
|
|
|
+ <div v-if="showLang" class="lang">
|
|
|
+ {{ multilingual.find((item) => item.type === getLang())?.translation }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ <div v-else :key="mark" style="width: calc(50% - 36px)"></div>
|
|
|
+ </template>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
@@ -542,26 +545,22 @@ export default {
|
|
|
|
|
|
.list-item {
|
|
|
display: flex;
|
|
|
- column-gap: 8px;
|
|
|
+ column-gap: 72px;
|
|
|
align-items: stretch;
|
|
|
padding: 1px;
|
|
|
|
|
|
.item-wrapper {
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
- flex: 1;
|
|
|
flex-wrap: wrap;
|
|
|
column-gap: 24px;
|
|
|
align-items: center;
|
|
|
+ width: calc(50% - 36px);
|
|
|
min-height: 48px;
|
|
|
padding: 12px 24px;
|
|
|
background-color: $content-color;
|
|
|
border-radius: 4px;
|
|
|
|
|
|
- &:not(:last-child, .isMobile) {
|
|
|
- margin-right: 64px;
|
|
|
- }
|
|
|
-
|
|
|
&.focus {
|
|
|
background-color: #dcdbdd;
|
|
|
}
|