Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
1 parent
845e41c060
commit
401c1bef7c
2 files changed
+26
-3
No files matched your search
@@ -17,6 +17,16 @@ defineProps<{
|
|||||||
const emit = defineEmits<{ solved: [exerciseId: number] }>()
|
const emit = defineEmits<{ solved: [exerciseId: number] }>()
|
||||||
|
|
||||||
const isDark = useDark()
|
const isDark = useDark()
|
||||||
|
|
||||||
|
/** 学习目标那几行只有行内的 **加粗** 和 `代码`,先转义再换成标签,别为它拉一个 MdPreview */
|
||||||
|
function inline(text: string) {
|
||||||
|
return text
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
.replace(/</g, "<")
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
.replace(/`([^`]+)`/g, '<code class="ic">$1</code>')
|
||||||
|
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -32,7 +42,7 @@ const isDark = useDark()
|
|||||||
<h2 v-else-if="seg.type === 'heading'" :id="seg.id" class="h2">{{ seg.text }}</h2>
|
<h2 v-else-if="seg.type === 'heading'" :id="seg.id" class="h2">{{ seg.text }}</h2>
|
||||||
<div v-else-if="seg.type === 'goals'" :id="seg.id" class="goals">
|
<div v-else-if="seg.type === 'goals'" :id="seg.id" class="goals">
|
||||||
<div class="goals-title">学完这课你能</div>
|
<div class="goals-title">学完这课你能</div>
|
||||||
<div v-for="item in seg.items" :key="item">· {{ item.replace(/`/g, "") }}</div>
|
<div v-for="item in seg.items" :key="item">· <span v-html="inline(item)" /></div>
|
||||||
</div>
|
</div>
|
||||||
<CodeRunBlock
|
<CodeRunBlock
|
||||||
v-else-if="seg.type === 'code'"
|
v-else-if="seg.type === 'code'"
|
||||||
@@ -80,6 +90,17 @@ const isDark = useDark()
|
|||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
scroll-margin-top: 16px;
|
scroll-margin-top: 16px;
|
||||||
}
|
}
|
||||||
|
.goals :deep(.ic) {
|
||||||
|
font-family: var(--learn-code-font);
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 1px 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--learn-soft);
|
||||||
|
color: #c7254e;
|
||||||
|
}
|
||||||
|
html.dark .goals :deep(.ic) {
|
||||||
|
color: #f08a9b;
|
||||||
|
}
|
||||||
.goals-title {
|
.goals-title {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
|
|||||||
@@ -413,12 +413,14 @@ function jumpExercise(id: number) {
|
|||||||
margin-top: 80px;
|
margin-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 桌面端固定高度,三栏各自滚动 */
|
/* 桌面端固定高度,三栏各自滚动。72 = 顶栏 56 + 外框上内边距 16;
|
||||||
|
底下的 16 内边距用负外边距吃掉,上一课 / 下一课那条贴着屏幕底 */
|
||||||
.layout {
|
.layout {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px minmax(0, 1fr) 220px;
|
grid-template-columns: 260px minmax(0, 1fr) 220px;
|
||||||
grid-template-rows: minmax(0, 1fr);
|
grid-template-rows: minmax(0, 1fr);
|
||||||
height: calc(100vh - 134px);
|
height: calc(100vh - 72px);
|
||||||
|
margin-bottom: -16px;
|
||||||
}
|
}
|
||||||
@media (max-width: 1180px) {
|
@media (max-width: 1180px) {
|
||||||
.layout {
|
.layout {
|
||||||
|
|||||||
Reference in new issue
Block a user