A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
A1300399510
2025-11-09 23:34:00 +08:00
parent aa5a7058ad
commit b7feedb350
10 changed files with 338 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/details.css
View File

@@ -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;

2
css/details.less
View File

@@ -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 {

69
css/edit.css
View File

@@ -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;

83
css/edit.less
View File

@@ -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 {

2
css/public.css
View File

@@ -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%;

2
css/public.less
View File

@@ -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%;

16
edit.html
View File

@@ -51,6 +51,22 @@
<div class="emoji-icon" v-for="emoji in optionEmoji" :key="emoji" @click.stop="selectEmoji(emoji)">{{ emoji }}</div>
</div>
</div>
<div class="toolbar-item flexacenter link" :class="{'pitch': linkState}" @click="openLink">
<img class="icon" src="./img/link-icon.png" alt="表情" />
<span>链接</span>
<div class="link-box-mask" @click.stop="closeLink"></div>
<div class="link-box flexflex">
<div class="item flexflex">
<div class="name">请输入链接地址：</div>
<input class="input" type="text" v-model="linkUrl" />
</div>
<div class="item flexflex">
<div class="name">请输入链接文字：</div>
<input class="input" type="text" v-model="linkText" />
</div>
<div class="btn flexcenter" @click.stop="insertLink">OK</div>
</div>
</div>
</div>
<!-- 内容编辑区 -->

BIN
img/link-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 925 B

46
js/edit.js
View File

@@ -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 };
},
});

200
simple_scroll.html
View File

@@ -1,92 +1,130 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动触底固定效果</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { min-height: 200vh; background: #f8f9fa; }
.container { display: flex; width: 1000px; margin: 20px auto; gap: 20px; }
.left, .right { padding: 20px; border-radius: 8px; }
.left { width: 300px; background: #f0f8fb; }
.right { width: 680px; background: #fef7fb; }
.fixed { position: fixed; bottom: 20px; max-height: calc(100vh - 40px); overflow: hidden; z-index: 10; }
</style>
</head>
<body>
<div class="container">
<div class="left" id="left">
<h3>左侧短内容</h3>
<p>这里是左侧内容，相对较短。</p>
<p>当页面滚动时，左侧会先触底。</p>
<p>触底后会固定在底部。</p>
<p>右侧内容可以继续滚动。</p>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>滚动触底固定效果</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 200vh;
background: #f8f9fa;
}
.container {
display: flex;
width: 1200px;
margin: 20px auto;
gap: 20px;
}
.left {
width: 200px;
height: 1000px;
background-color: aqua;
}
.right {
flex: 1;
height: 1500px;
background-color: #ff0090;
}
.bottom {
width: 1200px;
height: 200px;
margin: 20px auto;
background-color: #0090ff;
}
</style>
</head>
<body>
<div class="container">
<div class="left" id="left"></div>
<div class="right" id="right"></div>
</div>
<div class="right" id="right">
<h3>右侧长内容</h3>
<p>右侧内容第1行</p>
<p>右侧内容第2行</p>
<p>右侧内容第3行</p>
<p>右侧内容第4行</p>
<p>右侧内容第5行</p>
<p>右侧内容第6行</p>
<p>右侧内容第7行</p>
<p>右侧内容第8行</p>
<p>右侧内容第9行</p>
<p>右侧内容第10行</p>
<p>右侧内容第11行</p>
<p>右侧内容第12行</p>
<p>右侧内容第13行</p>
<p>右侧内容第14行</p>
<p>右侧内容第15行</p>
</div>
</div>
<script>
// 极其简化的滚动固定实现
window.onload = function() {
<div class="bottom" id="bottom"></div>
<script>
// 获取DOM元素
const left = document.getElementById('left');
const right = document.getElementById('right');
const bottom = document.getElementById('bottom');
const container = document.querySelector('.container');
const containerLeft = container.getBoundingClientRect().left;
const containerRight = window.innerWidth - (containerLeft + container.offsetWidth);
let leftFixed = false;
let rightFixed = false;
let scrollTimeout;
// 存储初始位置信息
let containerLeft = 0;
let leftWidth = 0;
let rightWidth = 0;
let gap = 20; // 与CSS中的gap一致
// 节流滚动处理
window.onscroll = function() {
if (scrollTimeout) clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
const windowHeight = window.innerHeight;
const leftRect = left.getBoundingClientRect();
const rightRect = right.getBoundingClientRect();
// 初始化函数
function init() {
const containerRect = container.getBoundingClientRect();
containerLeft = containerRect.left;
leftWidth = left.offsetWidth;
rightWidth = right.offsetWidth;
}
// 左侧固定逻辑
if (!leftFixed && leftRect.bottom <= windowHeight && leftRect.top <= 0) {
left.classList.add('fixed');
left.style.left = containerLeft + 'px';
leftFixed = true;
} else if (leftFixed && leftRect.top > 0) {
left.classList.remove('fixed');
left.style.left = '';
leftFixed = false;
}
// 滚动时检查并固定元素
window.addEventListener('scroll', function() {
const scrollY = window.scrollY;
const windowHeight = window.innerHeight;
// 右侧固定逻辑
if (!rightFixed && rightRect.bottom <= windowHeight && rightRect.top <= 0) {
right.classList.add('fixed');
right.style.right = containerRight + 'px';
rightFixed = true;
} else if (rightFixed && rightRect.top > 0) {
right.classList.remove('fixed');
right.style.right = '';
rightFixed = false;
}
}, 30);
};
};
</script>
</body>
// 获取底部元素的顶部位置（相对于文档）
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();
</script>
</body>
</html>