From 25a3c85171c8a6e4523dc59683318e11ee3d0ca6 Mon Sep 17 00:00:00 2001 From: xiaozzzi <42293085+xiaozzzi@users.noreply.github.com> Date: Sat, 4 Nov 2023 22:04:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E5=88=97?= =?UTF-8?q?=E8=A1=A8=E5=90=8D=E7=A7=B0=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/article/ArticleTreeTitle.vue | 22 +++++++++----- .../src/views/picture/PictureTreeTitle.vue | 21 ++++++++++---- blossom-web/src/views/article/DocTitle.vue | 29 +++++++------------ 3 files changed, 41 insertions(+), 31 deletions(-) diff --git a/blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue b/blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue index 3a38ec3..185cd2e 100644 --- a/blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue +++ b/blossom-editor/src/renderer/src/views/article/ArticleTreeTitle.vue @@ -11,9 +11,11 @@ -
- {{ props.trees.n }} -
+ +
+ {{ props.trees.n }} +
+
{{ tag.content }} @@ -40,6 +42,12 @@ const levelColor = computed(() => { return computedDocTitleColor(props.level) }) +const nameWrapperStyle = computed(() => { + return { + maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%' + } +}) + /** * 计算标签, 并返回便签对象集合 */ @@ -78,8 +86,8 @@ $icon-size: 17px; .doc-title { @include flex(row, flex-start, flex-start); - max-width: calc(100% - 15px); - min-width: calc(100% - 15px); + // max-width: calc(100% - 15px); + // min-width: calc(100% - 15px); width: 100%; padding-bottom: 1px; position: relative; @@ -105,14 +113,14 @@ $icon-size: 17px; .name-wrapper { @include ellipsis(); - max-width: calc(100% - 25px); } } .sort { position: absolute; - right: -15px; + right: 0px; top: 2px; + z-index: 10; } } diff --git a/blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue b/blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue index 62703f2..db7524f 100644 --- a/blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue +++ b/blossom-editor/src/renderer/src/views/picture/PictureTreeTitle.vue @@ -11,9 +11,12 @@ -
- {{ props.trees.n }} -
+ + +
+ {{ props.trees.n }} +
+
{{ tag.content }} @@ -41,6 +44,12 @@ const levelColor = computed(() => { return computedDocTitleColor(props.level) }) +const nameWrapperStyle = computed(() => { + return { + maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%' + } +}) + /** * 计算标签, 并返回便签对象集合 */ @@ -69,8 +78,8 @@ $icon-size: 17px; .doc-title { @include flex(row, flex-start, flex-start); - max-width: calc(100% - 15px); - min-width: calc(100% - 15px); + // max-width: calc(100% - 15px); + // min-width: calc(100% - 15px); width: 100%; padding-bottom: 1px; position: relative; @@ -97,7 +106,7 @@ $icon-size: 17px; .name-wrapper { @include ellipsis(); - max-width: calc(100% - 25px); + // max-width: calc(100% - 25px); } } diff --git a/blossom-web/src/views/article/DocTitle.vue b/blossom-web/src/views/article/DocTitle.vue index 5223bc5..c43fd69 100644 --- a/blossom-web/src/views/article/DocTitle.vue +++ b/blossom-web/src/views/article/DocTitle.vue @@ -8,9 +8,11 @@ -
- {{ props.trees.n }} -
+ +
+ {{ props.trees.n }} +
+
{{ tag.content }} @@ -28,6 +30,12 @@ const props = defineProps({ trees: { type: Object as PropType, default: {} } }) +const nameWrapperStyle = computed(() => { + return { + maxWidth: isNotBlank(props.trees.icon) ? 'calc(100% - 25px)' : '100%' + } +}) + /** * 计算标签, 并返回便签对象集合 */ @@ -62,8 +70,6 @@ $icon-size: 17px; .doc-title { @include flex(row, flex-start, flex-start); - max-width: calc(100% - 15px); - min-width: calc(100% - 15px); width: 100%; padding-bottom: 1px; position: relative; @@ -88,15 +94,8 @@ $icon-size: 17px; .name-wrapper { @include ellipsis(); - max-width: calc(100% - 25px); } } - - .sort { - position: absolute; - right: -15px; - top: 2px; - } } // 专题样式, 包括边框和文字样式 @@ -133,7 +132,6 @@ $icon-size: 17px; .doc-name { @include flex(row, flex-start, flex-start); - color: var(--el-color-primary); align-content: flex-start; flex-wrap: wrap; width: 100%; @@ -155,10 +153,5 @@ $icon-size: 17px; min-width: calc(100% - 25px); } } - - .sort { - position: absolute; - right: -15px; - } }