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>
|
<AppHeader simple></AppHeader>
|
||||||
</div>
|
</div>
|
||||||
<div class="article-view-window-root">
|
<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 -->
|
<!-- the toc -->
|
||||||
<div class="bl-preview-toc-block">
|
<div class="bl-preview-toc-block">
|
||||||
<div class="toc-subtitle">《{{ article?.name }}》</div>
|
<div class="doc-info">
|
||||||
<div class="toc-subtitle">
|
<div class="doc-name">《{{ article?.name }}》</div>
|
||||||
<span class="iconbl bl-pen-line"></span> {{ article?.words }} 字 | <span class="iconbl bl-read-line"></span> {{ article?.uv }} |
|
<div class="doc-subtitle">
|
||||||
<span class="iconbl bl-like-line"></span> {{ article?.likes }}
|
<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="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>
|
||||||
<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="toc-title">目录</div>
|
|
||||||
<div class="toc-content">
|
<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 }}
|
{{ toc.content }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
@ -4,10 +4,148 @@
|
|||||||
transition:
|
transition:
|
||||||
width 0.2s,
|
width 0.2s,
|
||||||
height 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 {
|
.toc-content {
|
||||||
|
@include box(100%, calc(100% - 130px));
|
||||||
|
@include font(14px);
|
||||||
|
padding-bottom: 20px;
|
||||||
|
padding-left: 5px;
|
||||||
overflow-y: scroll;
|
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-1,
|
||||||
.toc-2,
|
.toc-2,
|
||||||
.toc-3,
|
.toc-3,
|
||||||
@ -56,86 +194,6 @@
|
|||||||
padding-left: 50px;
|
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 {
|
.img-title {
|
||||||
@include box(100%, 20px);
|
@include box(100%, 20px);
|
||||||
@ -196,9 +254,4 @@
|
|||||||
|
|
||||||
.bl-preview-toc-absolute.is-expand-close {
|
.bl-preview-toc-absolute.is-expand-close {
|
||||||
@include box(50px, 40px);
|
@include box(50px, 40px);
|
||||||
// .toc-title {
|
|
||||||
// span {
|
|
||||||
// display: none;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user