mirror of
https://github.com/blossom-editor/blossom
synced 2024-11-17 14:39:21 +08:00
pref: 优化新窗口访问中的目录样样式
This commit is contained in:
xiaozzzi
parent
61ca570a23
commit
e59bd36110
@ -3,27 +3,29 @@
|
||||
<AppHeader simple></AppHeader>
|
||||
</div>
|
||||
<div class="article-view-window-root">
|
||||
<div class="preview bl-preview" :style="editorStyle" v-html="article?.html" ref="WindowPreviewRef" style="margin-right: 5px"></div>
|
||||
<el-backtop target=".preview" :right="350" :bottom="50">
|
||||
<div class="iconbl bl-a-doubleonline-line backtop"></div>
|
||||
</el-backtop>
|
||||
|
||||
<!-- the toc -->
|
||||
<div class="bl-preview-toc-block">
|
||||
<div class="toc-subtitle">《{{ article?.name }}》</div>
|
||||
<div class="toc-subtitle">
|
||||
<div class="doc-info">
|
||||
<div class="doc-name">《{{ article?.name }}》</div>
|
||||
<div class="doc-subtitle">
|
||||
<span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article?.uv }} |
|
||||
<span class="iconbl bl-like-line"></span> {{ article?.likes }}
|
||||
</div>
|
||||
<div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}</div>
|
||||
<div class="toc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}</div>
|
||||
<div class="doc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 公开 {{ article?.openTime }}</div>
|
||||
<div class="doc-subtitle"><span class="iconbl bl-a-clock3-line"></span> 修改 {{ article?.updTime }}</div>
|
||||
<div class="toc-title">目录</div>
|
||||
</div>
|
||||
<div class="toc-content">
|
||||
<div v-for="toc in tocs" :key="toc.id" :class="[toc.clazz]" @click="toScroll(toc.id)">
|
||||
<div v-for="toc in tocs" :key="toc.id" :class="['toc-item', toc.clazz]" @click="toScroll(toc.id)">
|
||||
{{ toc.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="preview bl-preview" :style="editorStyle" v-html="article?.html" ref="WindowPreviewRef"></div>
|
||||
<el-backtop target=".preview" :right="50" :bottom="50">
|
||||
<div class="iconbl bl-a-doubleonline-line backtop"></div>
|
||||
</el-backtop>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -4,10 +4,148 @@
|
||||
transition:
|
||||
width 0.2s,
|
||||
height 0.2s;
|
||||
}
|
||||
|
||||
// 块的目录, 用在新窗口中
|
||||
.bl-preview-toc-block {
|
||||
@include box(400px, 100%);
|
||||
color: #5e5e5e;
|
||||
border-left: 1px solid var(--bl-preview-toc-border-color);
|
||||
padding-right: 5px;
|
||||
|
||||
.doc-info {
|
||||
.doc-name {
|
||||
color: #ababab;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.doc-subtitle {
|
||||
@include flex(row, flex-start, center);
|
||||
@include font(12px);
|
||||
font-family: 'Jetbrains Mono';
|
||||
width: 100%;
|
||||
color: #ababab;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-title {
|
||||
@include font(25px, 700);
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--bl-preview-toc-border-color);
|
||||
margin-top: 10px;
|
||||
padding-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
@include box(100%, calc(100% - 130px));
|
||||
@include font(14px);
|
||||
padding-bottom: 20px;
|
||||
padding-left: 5px;
|
||||
overflow-y: scroll;
|
||||
|
||||
.toc-item {
|
||||
width: auto;
|
||||
padding: 4px 0;
|
||||
color: #5e5e5e;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: -5px;
|
||||
width: 2px;
|
||||
height: 60%;
|
||||
background: var(--el-color-primary-light-4);
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-2 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.toc-3 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.toc-4 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.toc-5 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.toc-6 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
.bl-preview-toc-absolute {
|
||||
max-height: 500px !important;
|
||||
background-color: red;
|
||||
|
||||
.toc-content {
|
||||
max-height: calc(500px - 150px - 60px - 20px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 浮动的目录, 用在编辑器中
|
||||
.bl-preview-toc-absolute {
|
||||
@include font(12px);
|
||||
@include themeShadow(2px 4px 7px 2px rgba(49, 49, 49, 0.3), 2px 4px 7px 2px rgb(28, 28, 28));
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
padding-top: 0px;
|
||||
background-color: #4d4d4dbd;
|
||||
border-radius: 10px;
|
||||
z-index: 2002;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
.toc-title {
|
||||
@include box(100%, 40px);
|
||||
@include font(15px, 700);
|
||||
@include themeColor(#ffffff, #cdcdcd);
|
||||
padding-top: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
@include themeColor(#e2e2e2, #bcbcbc);
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
max-height: calc(700px - 150px - 60px - 20px);
|
||||
|
||||
.toc-1 {
|
||||
@include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
|
||||
}
|
||||
|
||||
.toc-1,
|
||||
.toc-2,
|
||||
.toc-3,
|
||||
@ -56,86 +194,6 @@
|
||||
padding-left: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 块的目录, 用在新窗口中
|
||||
.bl-preview-toc-block {
|
||||
@include box(400px, 100%);
|
||||
color: #5e5e5e;
|
||||
border-right: 3px solid var(--bl-preview-toc-border-color);
|
||||
|
||||
.toc-title {
|
||||
@include box(100%, 50px);
|
||||
@include font(30px, 700);
|
||||
border-top: 3px solid var(--bl-preview-toc-border-color);
|
||||
margin-top: 10px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.toc-subtitle {
|
||||
@include box(100%, 20px);
|
||||
@include font(12px);
|
||||
color: #ababab;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
@include box(100%, calc(100% - 130px));
|
||||
@include font(13px);
|
||||
padding-bottom: 10px;
|
||||
|
||||
.toc-1 {
|
||||
border-top: 2px solid var(--bl-preview-toc-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 800px) {
|
||||
.bl-preview-toc-absolute {
|
||||
max-height: 500px !important;
|
||||
background-color: red;
|
||||
|
||||
.toc-content {
|
||||
max-height: calc(500px - 150px - 60px - 20px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 浮动的目录, 用在编辑器中
|
||||
.bl-preview-toc-absolute {
|
||||
@include font(12px);
|
||||
@include themeShadow(2px 4px 7px 2px rgba(49, 49, 49, 0.3), 2px 4px 7px 2px rgb(28, 28, 28));
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
padding-top: 0px;
|
||||
background-color: #4d4d4dbd;
|
||||
border-radius: 10px;
|
||||
z-index: 2002;
|
||||
max-height: 700px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
||||
.toc-title {
|
||||
@include box(100%, 40px);
|
||||
@include font(15px, 700);
|
||||
@include themeColor(#ffffff, #cdcdcd);
|
||||
padding-top: 10px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
@include themeColor(#e2e2e2, #bcbcbc);
|
||||
width: 100%;
|
||||
max-height: calc(700px - 150px - 60px - 20px);
|
||||
|
||||
.toc-1 {
|
||||
@include themeBorder(2px, #a3a3a3, #a3a3a3, 'top');
|
||||
}
|
||||
}
|
||||
|
||||
.img-title {
|
||||
@include box(100%, 20px);
|
||||
@ -196,9 +254,4 @@
|
||||
|
||||
.bl-preview-toc-absolute.is-expand-close {
|
||||
@include box(50px, 40px);
|
||||
// .toc-title {
|
||||
// span {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user