diff --git a/css/details.css b/css/details.css index 12dc3aa..15b5e06 100644 --- a/css/details.css +++ b/css/details.css @@ -1108,7 +1108,7 @@ top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); - z-index: 100; + z-index: 10002; } .detail-image-mask .detail-image { width: 80vw; diff --git a/css/details.less b/css/details.less index 6711867..8a05d4f 100644 --- a/css/details.less +++ b/css/details.less @@ -1295,7 +1295,7 @@ top: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); - z-index: 100; + z-index: 10002; } .detail-image-mask .detail-image { diff --git a/css/edit.css b/css/edit.css index ee344b4..12d7e29 100644 --- a/css/edit.css +++ b/css/edit.css @@ -121,6 +121,7 @@ #edit .edit-container .editor-toolbar .toolbar-item.expression.pitch .emoji-box { display: flex; } +#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask, #edit .edit-container .editor-toolbar .toolbar-item .emoji-box-mask { position: fixed; top: 0; @@ -131,6 +132,9 @@ background-color: rgba(0, 0, 0, 0.20392157); display: none; } +#edit .edit-container .editor-toolbar .toolbar-item .link-box-mask { + background: transparent; +} #edit .edit-container .editor-toolbar .toolbar-item .emoji-box { width: 582px; border-radius: 8px; @@ -163,6 +167,65 @@ margin: 5px; cursor: pointer; } +#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box-mask { + display: block; +} +#edit .edit-container .editor-toolbar .toolbar-item.link.pitch .link-box { + display: flex; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box { + background-color: #ffffff; + border-radius: 6px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16862745); + width: 336px; + height: 282px; + position: absolute; + top: 30px; + left: 0%; + z-index: 1; + border: 1px solid #ebebeb; + display: none; + flex-direction: column; + padding: 18px 20px 0; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item { + margin-bottom: 22px; + flex-direction: column; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + line-height: 26px; + margin-bottom: 8px; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .item .input { + height: 36px; + border: 1px solid #d7d7d7; + border-radius: 7px; + padding: 0 10px; + font-size: 14px; + color: #000000; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn { + width: 72px; + height: 40px; + line-height: 40px; + background-color: #50e3c2; + border-radius: 8px; + margin-left: auto; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-top: 8px; +} +#edit .edit-container .editor-toolbar .toolbar-item.link .link-box .btn:hover { + background-color: #c2eff6; +} #edit .edit-container .content-input { min-height: 509px; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; @@ -204,6 +267,12 @@ width: 100%; height: 26px; } +#edit .edit-container .content-input a { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 15px; + text-decoration: underline; + color: #04b0d5; +} #edit .edit-container .tags-list { padding: 0 36px; margin-bottom: 10px; diff --git a/css/edit.less b/css/edit.less index 315e537..d0dc3b6 100644 --- a/css/edit.less +++ b/css/edit.less @@ -135,6 +135,7 @@ } } + .link-box-mask, .emoji-box-mask { position: fixed; top: 0; @@ -146,6 +147,10 @@ display: none; } + .link-box-mask { + background: transparent; + } + .emoji-box { width: 582px; border-radius: 8px; @@ -180,6 +185,77 @@ cursor: pointer; } } + + &.link { + &.pitch { + .link-box-mask { + display: block; + } + + .link-box { + display: flex; + } + } + + .link-box { + background-color: rgba(255, 255, 255, 1); + border-radius: 6px; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.168627450980392); + + width: 336px; + height: 282px; + position: absolute; + top: 30px; + left: 0%; + z-index: 1; + + border: 1px solid #ebebeb; + display: none; + flex-direction: column; + padding: 18px 20px 0; + + .item { + margin-bottom: 22px; + flex-direction: column; + .name { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14px; + color: #555555; + line-height: 26px; + margin-bottom: 8px; + } + + .input { + height: 36px; + border: 1px solid rgba(215, 215, 215, 1); + border-radius: 7px; + padding: 0 10px; + font-size: 14px; + color: #000000; + } + } + + .btn { + width: 72px; + height: 40px; + line-height: 40px; + background-color: rgba(80, 227, 194, 1); + border-radius: 8px; + margin-left: auto; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + margin-top: 8px; + &:hover { + background-color: rgba(194, 239, 246, 1); + } + } + } + } } } @@ -229,6 +305,13 @@ width: 100%; height: 26px; } + + a { + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-size: 15px; + text-decoration: underline; + color: #04b0d5; + } } .tags-list { diff --git a/css/public.css b/css/public.css index 307860d..d4c7c0a 100644 --- a/css/public.css +++ b/css/public.css @@ -642,7 +642,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #000000; + border-top: 8px solid #ffffff; position: absolute; bottom: -8px; left: 50%; diff --git a/css/public.less b/css/public.less index a1f3bd7..f7a5100 100644 --- a/css/public.less +++ b/css/public.less @@ -769,7 +769,7 @@ body { height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; - border-top: 8px solid #000000; + border-top: 8px solid #ffffff; position: absolute; bottom: -8px; left: 50%; diff --git a/edit.html b/edit.html index e36dfd4..46bdaad 100644 --- a/edit.html +++ b/edit.html @@ -51,6 +51,22 @@
{{ emoji }}
+
+ 表情 + 链接 +
+
+
+
请输入链接地址：
+ +
+
+
请输入链接文字：
+ +
+
OK
+
+
diff --git a/img/link-icon.png b/img/link-icon.png new file mode 100644 index 0000000..05c66c1 Binary files /dev/null and b/img/link-icon.png differ diff --git a/js/edit.js b/js/edit.js index d017174..be5adee 100644 --- a/js/edit.js +++ b/js/edit.js @@ -63,7 +63,7 @@ const editApp = createApp({ let uConfigData = {}; const cUpload = () => { - ajaxget(`/v2/api/config/upload?type=topic`).then((res) => { + ajaxGet(`/v2/api/config/upload?type=topic`).then((res) => { const data = res.data; uConfigData = data; }); @@ -487,7 +487,49 @@ const editApp = createApp({ return images; }; - return { userInfoWin, titleLength, submit, insertLabel, emojiState, openEmoji, closeEmoji, selectEmoji, optionEmoji, isPTitle, onEditorInput, onEditorFocus, onEditorBlur, paragraphTitle, info, tagList, token, cutAnonymity, editorRef, insertImage, judgeIsEmpty, isEmpty }; + let linkUrl = ref(""); + let linkText = ref(""); + + let linkState = ref(false); + const openLink = () => { + console.log("打开链接"); + linkState.value = true; + }; + + const closeLink = () => { + console.log("关闭链接"); + linkState.value = false; + linkText.value = ""; + linkUrl.value = ""; + + }; + + const insertLink = () => { + if (linkText.value == "" || linkUrl.value == "") { + creationAlertBox("error", "请输入链接文字和链接地址"); + return; + } + const a = document.createElement("a"); + a.href = linkUrl.value; + a.target = "_blank"; + a.textContent = linkText.value; + lastSelection.insertNode(a); + + // 移动光标到元素后面并确保光标位置被正确设置和获取 + const newRange = document.createRange(); + newRange.setStartAfter(a); + newRange.setEndAfter(a); + + // 更新选择范围 + const selection = window.getSelection(); + selection.removeAllRanges(); + selection.addRange(newRange); + lastSelection = newRange; + + closeLink(); + }; + + return { insertLink, linkUrl, linkText, linkState, openLink, closeLink, userInfoWin, titleLength, submit, insertLabel, emojiState, openEmoji, closeEmoji, selectEmoji, optionEmoji, isPTitle, onEditorInput, onEditorFocus, onEditorBlur, paragraphTitle, info, tagList, token, cutAnonymity, editorRef, insertImage, judgeIsEmpty, isEmpty }; }, }); diff --git a/simple_scroll.html b/simple_scroll.html index 78fc770..f7ff7a4 100644 --- a/simple_scroll.html +++ b/simple_scroll.html @@ -1,92 +1,130 @@ - - - - 滚动触底固定效果 - - - -
-
-

左侧短内容

-

这里是左侧内容，相对较短。

-

当页面滚动时，左侧会先触底。

-

触底后会固定在底部。

-

右侧内容可以继续滚动。

+ + + + 滚动触底固定效果 + + + +
+
+
- -
- - - \ No newline at end of file + // 初始化函数 + function init() { + const containerRect = container.getBoundingClientRect(); + containerLeft = containerRect.left; + leftWidth = left.offsetWidth; + rightWidth = right.offsetWidth; + } + + // 滚动时检查并固定元素 + window.addEventListener('scroll', function() { + const scrollY = window.scrollY; + const windowHeight = window.innerHeight; + + // 获取底部元素的顶部位置（相对于文档） + const bottomTop = bottom.getBoundingClientRect().top + scrollY; + + // 获取左右元素的底部位置（相对于文档） + const leftBottom = left.getBoundingClientRect().bottom + scrollY; + const rightBottom = right.getBoundingClientRect().bottom + scrollY; + + // 检查左侧元素是否需要固定 + if (leftBottom >= bottomTop && left.style.position !== 'fixed') { + // 固定左侧元素 + left.style.position = 'fixed'; + left.style.bottom = '0'; + left.style.left = containerLeft + 'px'; + left.style.width = leftWidth + 'px'; + } else if (scrollY < bottomTop - windowHeight && left.style.position === 'fixed') { + // 恢复左侧元素 + left.style.position = ''; + left.style.bottom = ''; + left.style.left = ''; + left.style.width = ''; + } + + // 检查右侧元素是否需要固定 + if (rightBottom >= bottomTop && right.style.position !== 'fixed') { + // 固定右侧元素 + right.style.position = 'fixed'; + right.style.bottom = '0'; + right.style.left = (containerLeft + leftWidth + gap) + 'px'; + right.style.width = rightWidth + 'px'; + } else if (scrollY < bottomTop - windowHeight && right.style.position === 'fixed') { + // 恢复右侧元素 + right.style.position = ''; + right.style.bottom = ''; + right.style.left = ''; + right.style.width = ''; + } + }); + + // 窗口大小改变时重新计算位置 + window.addEventListener('resize', function() { + init(); + + // 如果元素已固定，更新它们的位置 + if (left.style.position === 'fixed') { + left.style.left = containerLeft + 'px'; + } + + if (right.style.position === 'fixed') { + right.style.left = (containerLeft + leftWidth + gap) + 'px'; + } + }); + + // 初始化 + init(); + + +