fix font
This commit is contained in:
@@ -282,7 +282,7 @@ function typeTagType(type: string): "success" | "info" | "warning" {
|
|||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="10"
|
:rows="10"
|
||||||
placeholder="在此粘贴正确的代码,保存后将自动按行拆分并乱序"
|
placeholder="在此粘贴正确的代码,保存后将自动按行拆分并乱序"
|
||||||
style="font-family: monospace"
|
style="font-family: 'Monaco'"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</template>
|
</template>
|
||||||
@@ -302,7 +302,7 @@ function typeTagType(type: string): "success" | "info" | "warning" {
|
|||||||
type="textarea"
|
type="textarea"
|
||||||
:rows="10"
|
:rows="10"
|
||||||
placeholder="用 {{答案}} 标记空位,多个合法答案用 | 分隔,例如:for {{i|idx}} in range(10):"
|
placeholder="用 {{答案}} 标记空位,多个合法答案用 | 分隔,例如:for {{i|idx}} in range(10):"
|
||||||
style="font-family: monospace"
|
style="font-family: 'Monaco'"
|
||||||
/>
|
/>
|
||||||
</n-form-item>
|
</n-form-item>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -90,16 +90,16 @@ function inputWidth(idx: number): string {
|
|||||||
style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
|
style="margin: 16px 0; border: 1.5px solid var(--n-border-color)"
|
||||||
>
|
>
|
||||||
<template #header>
|
<template #header>
|
||||||
<n-tag type="warning" size="small" :bordered="false"
|
<n-tag type="warning" size="small" :bordered="false">
|
||||||
>练一练 · 代码填空</n-tag
|
练一练 · 代码填空
|
||||||
>
|
</n-tag>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
|
<p style="font-weight: 500; margin-bottom: 12px">{{ data.question }}</p>
|
||||||
|
|
||||||
<pre
|
<pre
|
||||||
:style="{
|
:style="{
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'Monaco',
|
||||||
lineHeight: '1.6',
|
lineHeight: '1.6',
|
||||||
background: 'var(--n-color)',
|
background: 'var(--n-color)',
|
||||||
border: '1px solid var(--n-border-color)',
|
border: '1px solid var(--n-border-color)',
|
||||||
@@ -109,14 +109,16 @@ function inputWidth(idx: number): string {
|
|||||||
whiteSpace: 'pre-wrap',
|
whiteSpace: 'pre-wrap',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
}"
|
}"
|
||||||
><template v-for="(seg, i) in segments" :key="i"
|
>
|
||||||
><span v-if="seg.type === 'code'" v-html="seg.html" /><input
|
<template v-for="(seg, i) in segments" :key="i">
|
||||||
|
<span v-if="seg.type === 'code'" v-html="seg.html" />
|
||||||
|
<input
|
||||||
v-else
|
v-else
|
||||||
:value="userInputs[seg.index]"
|
:value="userInputs[seg.index]"
|
||||||
:disabled="allCorrect"
|
:disabled="allCorrect"
|
||||||
:style="{
|
:style="{
|
||||||
width: inputWidth(seg.index),
|
width: inputWidth(seg.index),
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'Monaco',
|
||||||
padding: '1px 4px',
|
padding: '1px 4px',
|
||||||
borderRadius: '3px',
|
borderRadius: '3px',
|
||||||
border: `1.5px solid ${
|
border: `1.5px solid ${
|
||||||
@@ -136,7 +138,9 @@ function inputWidth(idx: number): string {
|
|||||||
minWidth: '4ch',
|
minWidth: '4ch',
|
||||||
}"
|
}"
|
||||||
@input="userInputs[seg.index] = ($event.target as HTMLInputElement).value"
|
@input="userInputs[seg.index] = ($event.target as HTMLInputElement).value"
|
||||||
/></template></pre>
|
/>
|
||||||
|
</template>
|
||||||
|
</pre>
|
||||||
|
|
||||||
<n-alert
|
<n-alert
|
||||||
v-if="wrongBlanks.size > 0 || allCorrect"
|
v-if="wrongBlanks.size > 0 || allCorrect"
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ const lineHtmlMap = computed<Record<number, string>>(() => {
|
|||||||
? 'rgba(208,48,80,0.07)'
|
? 'rgba(208,48,80,0.07)'
|
||||||
: 'transparent',
|
: 'transparent',
|
||||||
cursor: 'grab',
|
cursor: 'grab',
|
||||||
fontFamily: 'monospace',
|
fontFamily: 'Monaco',
|
||||||
userSelect: 'none',
|
userSelect: 'none',
|
||||||
}"
|
}"
|
||||||
@dragstart="onDragStart(idx)"
|
@dragstart="onDragStart(idx)"
|
||||||
|
|||||||
Reference in New Issue
Block a user