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-08 22:22:44 +08:00
parent dc871d80c0
commit aa5a7058ad
22 changed files with 1222 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
1.html Normal file
View File

@@ -0,0 +1,204 @@
<!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;
}
/* 父容器：弹性布局，左右分栏 */
.matter {
display: flex;
width: 1200px;
margin: 0 auto;
gap: 20px; /* 左右间距 */
padding: 20px 0;
}
/* 左侧容器：高度较短（示例） */
.left {
width: 30%;
background: #f0f8fb;
padding: 20px;
border-radius: 8px;
/* 默认静态定位，滚动触底后改为 fixed */
position: static;
top: auto; /* 初始重置 */
bottom: 20px; /* 固定时距离底部的间距 */
}
/* 右侧容器：高度较长（示例） */
.right {
width: 70%;
background: #fef7fb;
padding: 20px;
border-radius: 8px;
position: static;
top: auto;
bottom: 20px;
}
/* 触底固定的样式 */
.fixed-bottom {
position: fixed;
/* 固定宽度（与默认布局一致） */
width: calc(30% - 10px); /* 30%宽度 - 一半gap（避免布局偏移） */
max-height: calc(100vh - 40px); /* 最大高度不超过视口（可选） */
overflow: hidden; /* 固定后不再滚动 */
}
/* 右侧固定时的宽度修正（与默认70%一致） */
.right.fixed-bottom {
width: calc(70% - 10px);
}
/* 页面足够长，确保能滚动 */
body {
min-height: 200vh;
background: #f8f9fa;
}
/* 示例内容样式 */
.content-item {
margin-bottom: 16px;
line-height: 1.6;
color: #333;
}
</style>
</head>
<body>
<div class="matter">
<div class="left" id="leftContainer">
<!-- 左侧内容：较短高度 -->
<h3>左侧内容（较短）</h3>
<div class="content-item">这是左侧内容的第一行。</div>
<div class="content-item">左侧内容相对较短，所以在滚动时会先触底。</div>
<div class="content-item">当滚动到一定程度时，左侧会固定在底部。</div>
<div class="content-item">此时右侧内容可以继续正常滚动。</div>
<div class="content-item">固定后，左侧内容不再随页面滚动。</div>
<div class="content-item">这是左侧的最后一行内容。</div>
</div>
<div class="right" id="rightContainer">
<!-- 右侧内容：较长高度 -->
<h3>右侧内容（较长）</h3>
<div class="content-item">这是右侧内容的第一行。</div>
<div class="content-item">右侧内容相对较长，可以滚动更多内容。</div>
<div class="content-item">右侧内容继续...这是第3行。</div>
<div class="content-item">右侧内容继续...这是第4行。</div>
<div class="content-item">右侧内容继续...这是第5行。</div>
<div class="content-item">右侧内容继续...这是第6行。</div>
<div class="content-item">右侧内容继续...这是第7行。</div>
<div class="content-item">右侧内容继续...这是第8行。</div>
<div class="content-item">右侧内容继续...这是第9行。</div>
<div class="content-item">右侧内容继续...这是第10行。</div>
<div class="content-item">右侧内容继续...这是第11行。</div>
<div class="content-item">右侧内容继续...这是第12行。</div>
<div class="content-item">右侧内容继续...这是第13行。</div>
<div class="content-item">右侧内容继续...这是第14行。</div>
<div class="content-item">右侧内容继续...这是第15行。</div>
<div class="content-item">右侧内容继续...这是第16行。</div>
<div class="content-item">右侧内容继续...这是第17行。</div>
<div class="content-item">右侧内容继续...这是第18行。</div>
<div class="content-item">右侧内容继续...这是第19行。</div>
<div class="content-item">右侧内容继续...这是第20行。</div>
</div>
</div>
<script>
// 获取DOM元素
const leftContainer = document.getElementById('leftContainer');
const rightContainer = document.getElementById('rightContainer');
const matter = document.querySelector('.matter');
// 记录容器原始样式
const originalLeftStyles = {
position: leftContainer.style.position,
width: leftContainer.style.width,
marginLeft: leftContainer.style.marginLeft
};
const originalRightStyles = {
position: rightContainer.style.position,
width: rightContainer.style.width,
marginRight: rightContainer.style.marginRight
};
// 处理滚动事件的核心函数
function handleScroll() {
// 获取matter容器的位置和尺寸
const matterRect = matter.getBoundingClientRect();
const matterLeft = matterRect.left;
const windowHeight = window.innerHeight;
// 获取左右容器的位置信息
const leftRect = leftContainer.getBoundingClientRect();
const rightRect = rightContainer.getBoundingClientRect();
// 计算左侧容器底部与视口底部的距离
const leftBottomToViewportBottom = windowHeight - leftRect.bottom;
// 计算右侧容器底部与视口底部的距离
const rightBottomToViewportBottom = windowHeight - rightRect.bottom;
// 左侧容器触底检测：当左侧底部即将离开视口（小于0）且容器完全可见时，固定左侧
if (leftBottomToViewportBottom < 20 && leftRect.top <= 0 && !leftContainer.classList.contains('fixed-bottom')) {
// 固定左侧，保持原位置水平对齐
leftContainer.classList.add('fixed-bottom');
leftContainer.style.left = `${matterLeft}px`;
leftContainer.style.bottom = '20px';
} else if (leftRect.top > 0 && leftContainer.classList.contains('fixed-bottom')) {
// 当左侧容器顶部重新进入视口时，取消固定
leftContainer.classList.remove('fixed-bottom');
// 恢复原始样式
Object.assign(leftContainer.style, originalLeftStyles);
}
// 右侧容器触底检测：当右侧底部即将离开视口（小于0）且容器完全可见时，固定右侧
if (rightBottomToViewportBottom < 20 && rightRect.top <= 0 && !rightContainer.classList.contains('fixed-bottom')) {
// 固定右侧，保持原位置水平对齐
rightContainer.classList.add('fixed-bottom');
rightContainer.style.right = `${window.innerWidth - (matterLeft + matterRect.width)}px`;
rightContainer.style.bottom = '20px';
} else if (rightRect.top > 0 && rightContainer.classList.contains('fixed-bottom')) {
// 当右侧容器顶部重新进入视口时，取消固定
rightContainer.classList.remove('fixed-bottom');
// 恢复原始样式
Object.assign(rightContainer.style, originalRightStyles);
}
}
// 窗口大小变化时的处理
function handleResize() {
// 重置所有固定状态
if (leftContainer.classList.contains('fixed-bottom')) {
leftContainer.classList.remove('fixed-bottom');
Object.assign(leftContainer.style, originalLeftStyles);
}
if (rightContainer.classList.contains('fixed-bottom')) {
rightContainer.classList.remove('fixed-bottom');
Object.assign(rightContainer.style, originalRightStyles);
}
// 重新触发滚动处理
handleScroll();
}
// 初始化
window.addEventListener('DOMContentLoaded', () => {
// 立即执行一次以初始化
handleScroll();
// 监听滚动事件
window.addEventListener('scroll', handleScroll);
// 监听窗口大小变化事件
window.addEventListener('resize', handleResize);
});
</script>
</body>
</html>

93
bi.html Normal file
View File

@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>寄托币说明</title>
<link rel="stylesheet" href="./css/bi.css" />
</head>
<body>
<div class="container">
<div class="title">
<img src="./img/bi-icon.png" alt="图标" />
<h2>如何获得寄托币？</h2>
</div>
<table class="table bi-table">
<thead>
<tr>
<th class="bi-table-header bi-table-event">事件</th>
<th class="bi-table-header bi-table-reward">奖励寄托币</th>
<th class="bi-table-header bi-table-limit">奖励上限</th>
</tr>
</thead>
<tbody class="bi-table-body">
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">发布帖子/总结/面经/投票</td>
<td class="bi-table-cell bi-table-reward">+3币/篇</td>
<td class="bi-table-cell bi-table-limit">3篇/天</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">报Offer</td>
<td class="bi-table-cell bi-table-reward">+10币/篇</td>
<td class="bi-table-cell bi-table-limit">不限</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">发布评论/讨论</td>
<td class="bi-table-cell bi-table-reward">+1币/次</td>
<td class="bi-table-cell bi-table-limit">10次/天</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">发布的内容被标为精华</td>
<td class="bi-table-cell bi-table-reward">+40币/篇</td>
<td class="bi-table-cell bi-table-limit">不限</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">发布的内容被标为推荐</td>
<td class="bi-table-cell bi-table-reward">+20币/篇</td>
<td class="bi-table-cell bi-table-limit">不限</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">登录</td>
<td class="bi-table-cell bi-table-reward">+1币/次</td>
<td class="bi-table-cell bi-table-limit">1次/天</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">签到</td>
<td class="bi-table-cell bi-table-reward">随机奖励1-6币/次，前十分名额额外奖励2-5币/次</td>
<td class="bi-table-cell bi-table-limit">1次/天</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">手机认证</td>
<td class="bi-table-cell bi-table-reward">+20币</td>
<td class="bi-table-cell bi-table-limit">仅1次</td>
</tr>
<tr class="bi-table-row">
<td class="bi-table-cell bi-table-event">邮箱认证</td>
<td class="bi-table-cell bi-table-reward">+15币</td>
<td class="bi-table-cell bi-table-limit">仅1次</td>
</tr>
</tbody>
</table>
<div class="supplement bi-supplement">
<h3 class="supplement-title bi-supplement-title">补充说明：</h3>
<ul class="supplement-list bi-supplement-list">
<li class="supplement-item bi-supplement-item">1) 你还可以通过发布优秀内容而获得他人打赏寄托币</li>
<li class="supplement-item bi-supplement-item">2) 寄托币有效期为2年，到期后自动清除</li>
<li class="supplement-item bi-supplement-item">3) 如删除发布内容，系统会自动扣除发布的奖励</li>
</ul>
</div>
<div class="divider"></div>
<div class="usage bi-usage">
<div class="title usage-title bi-usage-title">
<img src="./img/bi-icon.png" alt="图标" class="usage-icon bi-usage-icon" />
<h3 class="usage-heading bi-usage-heading">寄托币的用途：</h3>
</div>
<ul class="usage-list bi-usage-list">
<li class="usage-item bi-usage-item">1) 看到他人发布了对你有帮助的内容，可以给对方打赏寄托币以示感谢和鼓励；</li>
<li class="usage-item bi-usage-item">2) 遇到需要投币才能查看的内容，投币即可查看；</li>
<li class="usage-item bi-usage-item">3) 每年4月是寄托周年庆活动，可使用寄托币兑换寄托的实物纪念品，我们将免费为你邮寄上门。</li>
</ul>
</div>
</div>
</body>
</html>

54
component/head-top/head-top.js
View File

@@ -13,12 +13,15 @@ export const headTop = defineComponent({
},
setup(props) {
onMounted(() => {});
onMounted(() => {
getHistorySearch();
});
let state = ref(0); // 是否已经签到
let userInfoWinTimerCount = 0;
const userInfoWinTimer = setInterval(() => {
if (location.host == "127.0.0.1:5501") return;
if (todaysignedState) {
state.value = todaysigned;
clearInterval(userInfoWinTimer);
@@ -40,21 +43,52 @@ export const headTop = defineComponent({
});
};
let input = ref("");
let defaultSearchText = ref("屯特");
const goSearch = () => {
const searchText = input.value || defaultSearchText.value;
redirectToExternalWebsite("/search/" + searchText);
};
let pitchState = ref(false);
let page = ref(...props.page);
// console.log("page", page.value);
return { page, pitchState, state, signIn, input, defaultSearchText, goSearch };
let input = ref("");
let defaultSearchText = ref("屯特");
let historySearchList = ref([]); // 历史搜索数据
// 获取历史搜索
const getHistorySearch = () => {
const data = JSON.parse(localStorage.getItem("history-search")) || [];
console.log("data", data);
historySearchList.value = data;
};
// 跳转搜索
const searchEvent = (value) => {
const kw = value || input.value || defaultSearchText.value;
historySearchList.value.unshift(kw);
historySearchList.value = [...new Set(historySearchList.value)];
if (historySearchList.value.length > 10) historySearchList.value = historySearchList.value.splice(0, 10);
localStorage.setItem("history-search", JSON.stringify(historySearchList.value));
redirectToExternalWebsite("/search/" + kw);
searchInputBlur();
};
let searchHistoryShowState = ref(false); // 历史记录的展开状态
let searchInputState = ref(false); // 搜索框的状态
// 切换历史记录展示状态
const searchInputFocus = () => {
searchInputState.value = true;
if (historySearchList.value.length == 0) return;
searchHistoryShowState.value = true;
};
const searchInputBlur = () => {
setTimeout(() => {
searchInputState.value = false;
searchHistoryShowState.value = false;
}, 200);
};
return { historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, defaultSearchText };
},
template: `<div class="head-top flexacenter"> <a href="/" class="flexacenter" target="_blank"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> </a> <div class="flex1"></div> <div class="input-box flexacenter" :class="{'pitch': pitchState}"> <input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" /> <img class="icon" src="/img/search-icon.svg" @click="goSearch" /> </div> <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else> <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="/img/sign-go.svg" /> GO </div> <img class="petal1" src="/img/petal1.png" /> <img class="petal2" src="/img/petal2.png" /> <img class="petal3" src="/img/petal3.png" /> </div> <div class="sign-in sign-in-already flexcenter" v-else> <img class="sign-icon" src="/img/sign-icon.png" /> <span>已签到，明天再来</span> </div> </template></div>`,
template: `<div class="head-top flexacenter"> <a href="/" class="flexacenter" target="_blank"> <img class="logo" src="https://oss.gter.net/logo" alt="" /> </a> <div class="flex1"></div> <div class="input-box flexacenter" :class="{'pitch': searchInputState}"> <input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" /> <img class="icon" src="/img/search-icon.svg" @click="searchEvent()" /> <div class="search-box-history" v-if="searchHistoryShowState"> <div class="search-box-history-title">历史搜索</div> <div class="search-box-history-list"> <div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div> </div> </div> </div> <div class="post-list flexacenter" v-if="page == 'details'"> <a href="/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-thread.png" /> </a> <a href="https://offer.gter.net/post" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-offer.png" /> </a> <a href="https://offer.gter.net/post/summary" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-summary.png" /> </a> <a href="https://interviewexperience.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-mj.png" /> </a> <a href="https://vote.gter.net/publish" target="_blank" style="margin-right: 10px"> <img class="post-item" src="/img/post-vote.png" /> </a> </div> <template v-else> <div class="sign-in sign-in-no flexacenter" v-if="state == 0" @click="signIn()" v-cloak> <img class="sign-in-bj" src="/img/sign-in-bj.svg" /> <img class="coin-bj" src="/img/coin-bj.svg" /> <img class="coin-icon" src="/img/coin-icon.png" /> <span class="text flex1">签到领寄托币</span> <div class="sign-go flexcenter"> <img class="sign-go-bj" src="/img/sign-go.svg" /> GO </div> <img class="petal1" src="/img/petal1.png" /> <img class="petal2" src="/img/petal2.png" /> <img class="petal3" src="/img/petal3.png" /> </div> <div class="sign-in sign-in-already flexcenter" v-else> <img class="sign-icon" src="/img/sign-icon.png" /> <span>已签到，明天再来</span> </div> </template></div>`,
});

15
component/head-top/head-top.txt
View File

@@ -3,9 +3,16 @@
<img class="logo" src="https://oss.gter.net/logo" alt="" />
</a>
<div class="flex1"></div>
<div class="input-box flexacenter" :class="{'pitch': pitchState}">
<input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="goSearch" v-model="input" @focus="pitchState = true" @blur="pitchState = false" />
<img class="icon" src="/img/search-icon.svg" @click="goSearch" />
<div class="input-box flexacenter" :class="{'pitch': searchInputState}">
<input class="input flex1" type="text" :placeholder="'大家都在搜：' + defaultSearchText" @keyup.enter="searchEvent()" v-model="input" @focus="searchInputFocus" @blur="searchInputBlur" />
<img class="icon" src="/img/search-icon.svg" @click="searchEvent()" />
<div class="search-box-history" v-if="searchHistoryShowState">
<div class="search-box-history-title">历史搜索</div>
<div class="search-box-history-list">
<div class="search-box-history-item one-line-display" v-for="(item,index) in historySearchList " :key="index" @click="searchEvent(item)">{{ item }}</div>
</div>
</div>
</div>
<div class="post-list flexacenter" v-if="page == 'details'">
<a href="/publish" target="_blank" style="margin-right: 10px">
@@ -43,4 +50,4 @@
<span>已签到，明天再来</span>
</div>
</template>
</div>
</div>

2
component/item-bottom/item-bottom.js
View File

@@ -121,5 +121,5 @@ export const itemBottom = defineComponent({
like,
},
template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <div class="bottom-item share flexacenter"> <img class="icon" src="/img/share-gray.png" /> <div class="text">转发</div> <div class="share-box flexcenter"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter"> <img v-if="QRcode" class="QRcode" :src="QRcode" /> <div v-else class="QRcode flexcenter"> <img class="load" src="/img/load-icon.svg" /> </div> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
template: `<a class="comment flexacenter" v-if="item?.commentreviews && !Array.isArray(item?.commentreviews)" :href="item.url" target="_blank"> <img class="icon" :src="item?.commentreviews?.avatar" /> <div class="text one-line-display">{{ item?.commentreviews?.content || "[图]" }}</div></a><template v-if="item.comment_list?.length != 0"> <a class="comment flexacenter" style="margin-bottom: 15px" v-for="(item, index) in item.comment_list" :key="index" :href="item.url" target="_blank"> <img class="icon" :src="item.avatar" /> <div class="text one-line-display">{{ item.content || "[图]" }}</div> </a></template><div class="bottom flexacenter"> <div class="bottom-item like flexacenter" @click="likeClick()" v-if="item?.type != 'tenement'"> <img v-if="item.is_like" class="icon" src="/img/like-red-icon.png" /> <img v-else class="icon" src="/img/like-icon.png" /> <div class="text">{{ item.likes || "赞" }}</div> </div> <div class="bottom-item flexacenter" @click="collectClick()"> <img v-if="item.is_collect" class="icon" src="/img/collect-golden.svg" /> <img v-else class="icon" src="/img/collect-gray.png" /> <div class="text">{{ item.collections || "收藏" }}</div> </div> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/discuss-icon.png" /> <div class="text">{{ item.comments || "讨论" }}</div> </a> <a class="bottom-item flexacenter" v-if="item?.type != 'tenement'" :href="'/details/' + item.uniqid" target="_blank"> <img class="icon" src="/img/bi-copper-icon.png" /> <div class="text">{{ item.coins || "投币" }}</div> </a> <div class="bottom-item share flexacenter"> <img class="icon" src="/img/share-gray.png" style="width: 19px; height: 19px;" /> <div class="text">转发</div> <div class="share-box flexcenter"> <div class="share-item flexcenter" @click="copyLinkClick()"> <img class="share-icon" src="/img/copy-black-icon.png" /> <div class="text">复制链接</div> </div> <!-- 鼠标移入 加载二维码 --> <div class="share-item wenxin flexcenter" @mouseenter="showQRcode"> <img class="share-icon" src="/img/weixin-icon.png" /> <div class="text">微信转发</div> <div class="QRcode-box flexcenter"> <img v-if="QRcode" class="QRcode" :src="QRcode" /> <div v-else class="QRcode flexcenter"> <img class="load" src="/img/load-icon.svg" /> </div> <div class="text">微信扫码</div> </div> </div> </div> </div></div><like v-if="isLikeGif"></like>`,
});

4
component/item-bottom/item-bottom.txt
View File

@@ -32,7 +32,7 @@
</a>
<div class="bottom-item share flexacenter">
<img class="icon" src="/img/share-gray.png" />
<img class="icon" src="/img/share-gray.png" style="width: 19px; height: 19px;" />
<div class="text">转发</div>
<div class="share-box flexcenter">
<div class="share-item flexcenter" @click="copyLinkClick()">
@@ -56,4 +56,4 @@
</div>
</div>
<like v-if="isLikeGif"></like>
<like v-if="isLikeGif"></like>

5
component/item-head/item-head.js
View File

@@ -33,7 +33,6 @@ export const itemHead = defineComponent({
sectionn.value = item.value.sectionn || [];
const sectionNameSet = new Set(sectionn.value.map((item) => item.name));
console.log(item.value.tags, "tags");
tags.value = item.value?.tags || [];
tags.value = tags.value?.filter((tagName) => !sectionNameSet.has(tagName)) || [];
@@ -101,7 +100,6 @@ export const itemHead = defineComponent({
// 删除
const deleteItem = () => {
const target = item.value;
console.log("deleteItem", target, target.token);
managerDelete(target.token)
.then(() => {
const targetNode = itemHead.value;
@@ -139,7 +137,6 @@ export const itemHead = defineComponent({
};
const cutAnonymousState = (state) => {
console.log("state", state);
const target = item.value;
ajax("/v2/api/forum/postTopicAnonymousStatus", {
token: target.token,
@@ -165,5 +162,5 @@ export const itemHead = defineComponent({
report,
},
template: `<div class="item-head flexacenter" ref="itemHead"> <div class="user-box flexacenter" @click="goPersonalHomepage(item?.user?.uin, item?.user?.uid)"> <img class="avatar" :src="item?.user?.avatar || item.avatar" /> <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div> <img class="group" v-if="info?.group?.image" :src="info?.group?.image" /> </div> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="circlePen flexcenter" @click="openedit(item.type)" v-if="page == 'edit' && (item.type == 'offer' || item.type == 'offer_summary')"> <img class="icon" src="/img/pen-icon.png" /> </div> <div class="flexacenter" style="position: relative;"> <div class="anonymous-box flexcenter" @click.stop="cutAnonymous" v-if="page == 'edit' && (item.type == 'vote' || item.type == 'interviewexperience')"> <span v-if="item.anonymous == 0">公开</span> <span v-else>匿名</span> </div> <!-- 是否 公开发表 --> <template v-if="anonymousState"> <div class="mask" @click.stop="cutAnonymous"></div> <div class="isPublicityBox"> <div class="isPublicity-item" :class="{'green': item.anonymous == 0}" @click.stop="cutAnonymousState(0)">公开发表 <img v-if="item.anonymous == 0" class="isPublicityIcon" src="/img/u1829.svg"></image> </div> <div class="isPublicity-item" :class="{'green': item.anonymous != 0}" @click.stop="cutAnonymousState(1)">匿名发表 <img v-if="item.anonymous != 0" class="isPublicityIcon" src="/img/u1829.svg"></image> </div> </div> </template> </div> <div class="view flexacenter"> <img class="icon" src="/img/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div v-if="item.type != 'tenement'" class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="/img/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> <template v-if="item.type == 'thread' && item.ismyself"> <div class="item" @click.stop="edit">编辑</div> <div class="item" @click.stop="deleteItem">删除</div> </template> <div class="item" v-if="page == 'edit' && item.type == 'vote'" @click.stop="deleteItem">删除</div> </div> </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="/img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="/img/essence-icon.png" /> <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a> <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
template: `<div class="item-head flexacenter" ref="itemHead"> <div class="user-box flexacenter" @click="goPersonalHomepage(item?.user?.uin, item?.user?.uid)"> <img class="avatar" :src="item?.user?.avatar || item.avatar" /> <div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div> <img class="group" v-if="item.user?.groupimage" :src="item.user?.groupimage" /> </div> <div class="time">{{ timestamp }}</div> <div class="flex1"></div> <div class="circlePen flexcenter" @click="openedit(item.type)" v-if="page == 'edit' && (item.type == 'offer' || item.type == 'offer_summary')"> <img class="icon" src="/img/pen-icon.png" /> </div> <div class="flexacenter" style="position: relative;"> <div class="anonymous-box flexcenter" @click.stop="cutAnonymous" v-if="page == 'edit' && (item.type == 'vote' || item.type == 'interviewexperience')"> <span v-if="item.anonymous == 0">公开</span> <span v-else>匿名</span> </div> <!-- 是否 公开发表 --> <template v-if="anonymousState"> <div class="mask" @click.stop="cutAnonymous"></div> <div class="isPublicityBox"> <div class="isPublicity-item" :class="{'green': item.anonymous == 0}" @click.stop="cutAnonymousState(0)">公开发表 <img v-if="item.anonymous == 0" class="isPublicityIcon" src="/img/u1829.svg"></image> </div> <div class="isPublicity-item" :class="{'green': item.anonymous != 0}" @click.stop="cutAnonymousState(1)">匿名发表 <img v-if="item.anonymous != 0" class="isPublicityIcon" src="/img/u1829.svg"></image> </div> </div> </template> </div> <div class="view flexacenter"> <img class="icon" src="/img/eye-icon.svg" /> <div class="text">{{ item.views }}</div> </div> <div v-if="item.type != 'tenement'" class="btn flexcenter" @click.stop="cutShow"> <img class="icon" src="/img/dot-dot-dot-gray.png" /> </div> <div v-if="show"> <div class="mask" @click.stop="cutShow"></div> <div class="operate"> <div class="item" @click.stop="report">举报</div> <template v-if="ismanager"> <div class="item" @click.stop="hide">{{ item.hidden == 0 ? "隐藏" : "显示" }}</div> <div class="item" @click.stop="recommend">{{ item.recommend == 1 ? "取消" : "" }}推荐</div> <div class="item" @click.stop="essence">{{ item.best == 1 ? "取消" : "" }}精华</div> </template> <template v-if="item.type == 'thread' && item.ismyself"> <div class="item" @click.stop="edit">编辑</div> <div class="item" @click.stop="deleteItem">删除</div> </template> <div class="item" v-if="page == 'edit' && item.type == 'vote'" @click.stop="deleteItem">删除</div> </div> </div></div><div class="label flexflex" v-if="sectionn?.length || tags?.length || item.recommend == 1 || item.best == 1"> <img class="item icon" v-if="item.recommend == 1 && item.best != 1" src="/img/recommend-icon.png" /> <img class="item icon" v-if="item.best == 1" src="/img/essence-icon.png" /> <a class="item blue" v-for="(item, index) in sectionn" :key="item" :href="'/section/' + item.uniqid" target="_blank">{{ item.name }}</a> <a class="item" v-for="(item, index) in tags" :key="item" :href="'/tag/' + item" target="_blank">{{ item }}</a></div><report v-if="reportState" :itemdata="item"></report>`,
});

2
component/item-head/item-head.txt
View File

@@ -2,7 +2,7 @@
<div class="user-box flexacenter" @click="goPersonalHomepage(item?.user?.uin, item?.user?.uid)">
<img class="avatar" :src="item?.user?.avatar || item.avatar" />
<div class="name">{{ item?.user?.nickname || item.nickname || "匿名用户" }}</div>
<img class="group" v-if="info?.group?.image" :src="info?.group?.image" />
<img class="group" v-if="item.user?.groupimage" :src="item.user?.groupimage" />
</div>
<div class="time">{{ timestamp }}</div>

9
component/item-summary/item-summary.js
View File

@@ -20,6 +20,13 @@ export const itemSummary = defineComponent({
setup(props) {
let item = ref({ ...props.itemdata });
// console.log("item", item.value.data);offerlist
// item.value?.data?.offerlist?.length = 2;
// if (item.value?.data?.offerlist?.length > 2) {
// item.value.data.offerlist.length = 2;
// }
item.value['url'] = '/details/' + item.value.uniqid;
return { item };
@@ -30,5 +37,5 @@ export const itemSummary = defineComponent({
itemHead,
},
template: `<div class="item-box item-summary"> <item-head :itemdata="item" :page="page"></item-head> <a class="title" v-if="item.title" :href="item.url" target="_blank">{{ item.title }}</a> <a class="message one-line-display" :href="item.url" target="_blank" v-if="item.content">{{ item.content }}</a> <a class="total flexacenter" :href="item.url" target="_blank"> <div>共</div> <div class="num">{{ item.data.offercount }}</div> <div>个Offer</div> </a> <a class="list flexacenter" :href="item.url" target="_blank"> <div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i"> <div class="item-content flexflex"> <div class="school flexacenter"> <img class="icon" v-if="it.schoollogo" :src="it.schoollogo" mode="heightFix"></image> <div class="name one-line-display flex1">{{ it.schoolname }}</div> </div> <div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div> <div class="info flexacenter"> {{ it.semester || '25Fall' }} <div class="line"></div> {{ it.degree || 'MSc' }} <div class="line"></div> <div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div> </div> </div> </div> <div v-if="item.data.offercount > 3" class="item more flexcenter"> <div class="item-content flexcenter"> <div class="">查看更多</div> <img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image> </div> </div> </a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
template: `<div class="item-box item-summary"> <item-head :itemdata="item" :page="page"></item-head> <a class="title" v-if="item.title" :href="item.url" target="_blank">{{ item.title }}</a> <a class="message one-line-display" :href="item.url" target="_blank" v-if="item.content">{{ item.content }}</a> <a class="total flexacenter" :href="item.url" target="_blank"> <div>共</div> <div class="num">{{ item.data.offercount }}</div> <div>个Offer</div> </a> <a class="list flexacenter" :href="item.url" target="_blank"> <template v-for="(it,i) in item.data.offerlist" :key="i"> <div class="item flexflex" v-if="i < 2"> <div class="item-content flexflex"> <div class="school flexacenter"> <img class="icon" v-if="it.schoollogo" :src="it.schoollogo" mode="heightFix"></image> <div class="name one-line-display flex1">{{ it.schoolname }}</div> </div> <div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div> <div class="info flexacenter"> {{ it.semester || '25Fall' }} <div class="line"></div> {{ it.degree || 'MSc' }} <div class="line"></div> <div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div> </div> </div> </div> </template> <div v-if="item.data.offercount > 2" class="item more flexcenter"> <div class="item-content flexcenter"> <div class="">查看更多</div> <img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image> </div> </div> </a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
});

32
component/item-summary/item-summary.txt
View File

@@ -8,24 +8,26 @@
<div>个Offer</div>
</a>
<a class="list flexacenter" :href="item.url" target="_blank">
<div class="item flexflex" v-for="(it,i) in item.data.offerlist" :key="i">
<div class="item-content flexflex">
<div class="school flexacenter">
<img class="icon" v-if="it.schoollogo" :src="it.schoollogo" mode="heightFix"></image>
<div class="name one-line-display flex1">{{ it.schoolname }}</div>
</div>
<div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div>
<div class="info flexacenter">
{{ it.semester || '25Fall' }}
<div class="line"></div>
{{ it.degree || 'MSc' }}
<div class="line"></div>
<div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div>
<template v-for="(it,i) in item.data.offerlist" :key="i">
<div class="item flexflex" v-if="i < 2">
<div class="item-content flexflex">
<div class="school flexacenter">
<img class="icon" v-if="it.schoollogo" :src="it.schoollogo" mode="heightFix"></image>
<div class="name one-line-display flex1">{{ it.schoolname }}</div>
</div>
<div class="major one-line-display" v-if="it.professional">{{ it.professional }}</div>
<div class="info flexacenter">
{{ it.semester || '25Fall' }}
<div class="line"></div>
{{ it.degree || 'MSc' }}
<div class="line"></div>
<div class="results" :class="['r' + it.apply_results]">{{ it.apply_results_text || 'Offer' }}</div>
</div>
</div>
</div>
</template>
</div>
<div v-if="item.data.offercount > 3" class="item more flexcenter">
<div v-if="item.data.offercount > 2" class="item more flexcenter">
<div class="item-content flexcenter">
<div class="">查看更多</div>
<img class="icon" src="/img/arrows-circle-dark-blue.svg" mode="heightFix"></image>

203
css/bi.css Normal file
View File

@@ -0,0 +1,203 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
margin: 0;
padding: 0;
}
.container {
width: 1027px;
height: 755px;
border: 1px solid #e4e4e4;
border-radius: 11px;
margin: 20px;
padding-top: 22px;
}
.container * {
padding: 0;
margin: 0;
}
.title {
display: flex;
align-items: center;
margin: 0 12px 20px;
}
.title img {
width: 29px;
height: 34px;
margin-right: 8px;
}
.title h2 {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
line-height: 30px;
}
/* 主标题样式扩展 */
.bi-main-title {
display: flex;
align-items: center;
margin: 0 12px 20px;
}
.bi-main-title-icon {
width: 29px;
height: 34px;
margin-right: 8px;
}
.bi-main-title-heading {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
line-height: 30px;
}
/* 寄托币表格样式扩展 */
.bi-table {
width: calc(100% - 24px);
border-collapse: collapse;
margin: 0 12px 25px;
}
.bi-table-header {
background-color: #f5f5f5;
font-weight: bold;
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #000000;
text-align: center;
height: 33px;
}
.bi-table-header.bi-table-event {
/* 事件列特殊样式 */
}
.bi-table-header.bi-table-reward {
/* 奖励列特殊样式 */
}
.bi-table-header.bi-table-limit {
/* 上限列特殊样式 */
}
.bi-table-body {
/* 表格主体样式 */
}
.bi-table-row:nth-child(even) {
background-color: #f5f5f5;
}
.bi-table-cell {
color: #333333;
font-size: 14px;
text-align: center;
height: 33px;
}
.bi-table-cell.bi-table-event {
/* 事件单元格样式 */
}
.bi-table-cell.bi-table-reward {
/* 奖励单元格样式 */
}
.bi-table-cell.bi-table-limit {
/* 上限单元格样式 */
}
.supplement {
margin: 0 12px 30px;
}
.supplement h3 {
font-weight: bold;
font-size: 14px;
line-height: 25px;
}
.supplement ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.supplement li {
font-size: 14px;
line-height: 25px;
}
/* 补充说明样式扩展 */
.bi-supplement {
margin: 0 12px 30px;
}
.bi-supplement-title {
font-weight: bold;
font-size: 14px;
line-height: 25px;
}
.bi-supplement-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.bi-supplement-item {
font-size: 14px;
line-height: 25px;
}
.divider {
height: 1px;
background-color: #eee;
margin-bottom: 37px;
}
.usage {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.usage img {
width: 29px;
height: 34px;
margin-right: 8px;
}
.usage h3 {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
line-height: 30px;
}
.usage ul {
list-style-type: none;
padding: 0 0 0 32px;
margin: 0;
}
.usage li {
margin-bottom: 4px;
}
/* 寄托币用途样式扩展 */
.bi-usage {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.bi-usage-title {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.bi-usage-icon {
width: 29px;
height: 34px;
margin-right: 8px;
}
.bi-usage-heading {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
line-height: 30px;
}
.bi-usage-list {
list-style-type: none;
padding: 0 0 0 32px;
margin: 0;
}
.bi-usage-item {
margin-bottom: 4px;
font-size: 14px;
color: #333;
}

259
css/bi.less Normal file
View File

@@ -0,0 +1,259 @@
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333;
margin: 0;
padding: 0;
}
.container {
width: 1027px;
height: 755px;
border: 1px solid rgb(228, 228, 228);
border-radius: 11px;
margin: 20px;
padding-top: 22px;
* {
padding: 0;
margin: 0;
}
}
.title {
display: flex;
align-items: center;
margin: 0 12px 20px;
img {
width: 29px;
height: 34px;
margin-right: 8px;
}
h2 {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: rgb(0, 0, 0);
line-height: 30px;
}
}
/* 主标题样式扩展 */
.bi-main-title {
display: flex;
align-items: center;
margin: 0 12px 20px;
&-icon {
width: 29px;
height: 34px;
margin-right: 8px;
}
&-heading {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: rgb(0, 0, 0);
line-height: 30px;
}
}
// .table {
// width: calc(100% - 24px);
// border-collapse: collapse;
// margin: 0 12px 25px;
// }
// .table th,
// .table td {
// text-align: center;
// height: 33px;
// }
// .table th {
// background-color: #f5f5f5;
// font-weight: bold;
// font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
// font-weight: 650;
// font-style: normal;
// font-size: 14px;
// color: rgb(0, 0, 0);
// }
// .table td {
// color: rgb(51, 51, 51);
// font-size: 14px;
// }
// .table tr:nth-child(even) {
// background-color: rgb(245, 245, 245);
// }
/* 寄托币表格样式扩展 */
.bi-table {
width: calc(100% - 24px);
border-collapse: collapse;
margin: 0 12px 25px;
&-header {
background-color: #f5f5f5;
font-weight: bold;
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: rgb(0, 0, 0);
text-align: center;
height: 33px;
&.bi-table-event {
/* 事件列特殊样式 */
}
&.bi-table-reward {
/* 奖励列特殊样式 */
}
&.bi-table-limit {
/* 上限列特殊样式 */
}
}
&-body {
/* 表格主体样式 */
}
&-row {
&:nth-child(even) {
background-color: rgb(245, 245, 245);
}
}
&-cell {
color: rgb(51, 51, 51);
font-size: 14px;
text-align: center;
height: 33px;
&.bi-table-event {
/* 事件单元格样式 */
}
&.bi-table-reward {
/* 奖励单元格样式 */
}
&.bi-table-limit {
/* 上限单元格样式 */
}
}
}
.supplement {
margin: 0 12px 30px;
}
.supplement h3 {
font-weight: bold;
font-size: 14px;
line-height: 25px;
}
.supplement ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.supplement li {
font-size: 14px;
line-height: 25px;
}
/* 补充说明样式扩展 */
.bi-supplement {
margin: 0 12px 30px;
&-title {
font-weight: bold;
font-size: 14px;
line-height: 25px;
}
&-list {
list-style-type: none;
padding: 0;
margin: 0;
}
&-item {
font-size: 14px;
line-height: 25px;
}
}
.divider {
height: 1px;
background-color: #eee;
margin-bottom: 37px;
}
.usage {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
.usage img {
width: 29px;
height: 34px;
margin-right: 8px;
}
.usage h3 {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: rgb(0, 0, 0);
line-height: 30px;
}
.usage ul {
list-style-type: none;
padding: 0 0 0 32px;
margin: 0;
}
.usage li {
margin-bottom: 4px;
}
/* 寄托币用途样式扩展 */
.bi-usage {
display: flex;
flex-direction: column;
margin-bottom: 8px;
&-title {
display: flex;
align-items: center;
margin-bottom: 10px;
}
&-icon {
width: 29px;
height: 34px;
margin-right: 8px;
}
&-heading {
font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: rgb(0, 0, 0);
line-height: 30px;
}
&-list {
list-style-type: none;
padding: 0 0 0 32px;
margin: 0;
}
&-item {
margin-bottom: 4px;
font-size: 14px;
color: #333;
}
}

20
css/details.css
View File

@@ -211,7 +211,7 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
bottom: 48px;
width: 130px;
height: 100px;
background-color: #ffffff;
@@ -220,10 +220,22 @@
flex-direction: column;
display: none;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item {
width: 100%;
height: 40px;
color: #555555;
color: #333;
font-size: 14px;
}
#details .matter .matter-left .action-bar .action-bar-item .share-box .share-item:hover {
@@ -689,7 +701,7 @@
cursor: pointer;
}
.answer-discuss .input-box .bottom {
padding: 0 20px;
padding: 0 20px 20px;
justify-content: flex-end;
}
.answer-discuss .input-box .bottom .operate .item {
@@ -1146,7 +1158,7 @@
margin-right: 5px;
}
.answer-discuss .no-discussion-box {
margin: 36px 0;
margin: 72px 0;
color: #7f7f7f;
font-size: 15px;
flex-direction: column;

21
css/details.less
View File

@@ -244,7 +244,7 @@
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
bottom: 48px;
width: 130px;
height: 100px;
background-color: rgba(255, 255, 255, 1);
@@ -253,10 +253,23 @@
flex-direction: column;
display: none;
&::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
.share-item {
width: 100%;
height: 40px;
color: #555555;
color: #333;
font-size: 14px;
&:hover {
@@ -810,7 +823,7 @@
.answer-discuss .input-box .bottom {
// height: 52px;
padding: 0 20px;
padding: 0 20px 20px;
justify-content: flex-end;
}
@@ -1340,7 +1353,7 @@
}
.answer-discuss .no-discussion-box {
margin: 36px 0;
margin: 72px 0;
color: #7f7f7f;
font-size: 15px;
flex-direction: column;

43
css/public.css
View File

@@ -627,7 +627,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
bottom: 48px;
width: 130px;
height: 100px;
background-color: #ffffff;
@@ -636,10 +636,22 @@ body {
flex-direction: column;
display: none;
}
.item-box .bottom .bottom-item .share-box::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
.item-box .bottom .bottom-item .share-box .share-item {
width: 100%;
height: 40px;
color: #555555;
color: #333;
font-size: 14px;
}
.item-box .bottom .bottom-item .share-box .share-item:hover {
@@ -1448,6 +1460,7 @@ body {
justify-content: space-between;
margin-right: 20px;
transition: all 0.3s;
position: relative;
}
.head-top .input-box.pitch {
border-color: #000;
@@ -1465,6 +1478,32 @@ body {
margin-left: 15px;
cursor: pointer;
}
.head-top .input-box .search-box-history {
width: 460px;
/* height: 267px; */
background-color: #ffffff;
border: 1px solid #ebebeb;
border-radius: 10px;
position: absolute;
top: 50px;
left: 0;
padding: 16px;
z-index: 1;
}
.head-top .input-box .search-box-history .search-box-history-title {
font-size: 13px;
color: #aaaaaa;
margin-bottom: 14px;
}
.head-top .input-box .search-box-history .search-box-history-list {
color: #333;
font-size: 14px;
}
.head-top .input-box .search-box-history .search-box-history-list .search-box-history-item {
margin-bottom: 10px;
cursor: pointer;
display: block;
}
.head-top .sign-in {
width: 192px;
height: 40px;

47
css/public.less
View File

@@ -754,7 +754,7 @@ body {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 42px;
bottom: 48px;
width: 130px;
height: 100px;
background-color: rgba(255, 255, 255, 1);
@@ -763,10 +763,23 @@ body {
flex-direction: column;
display: none;
&::after {
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
.share-item {
width: 100%;
height: 40px;
color: #555555;
color: #333;
font-size: 14px;
&:hover {
@@ -1727,6 +1740,7 @@ body {
justify-content: space-between;
margin-right: 20px;
transition: all 0.3s;
position: relative;
&.pitch {
border-color: #000;
@@ -1746,6 +1760,35 @@ body {
margin-left: 15px;
cursor: pointer;
}
.search-box-history {
width: 460px;
/* height: 267px; */
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 10px;
position: absolute;
top: 50px;
left: 0;
padding: 16px;
z-index: 1;
.search-box-history-title {
font-size: 13px;
color: #aaaaaa;
margin-bottom: 14px;
}
.search-box-history-list {
color: #333;
font-size: 14px;
.search-box-history-item {
margin-bottom: 10px;
cursor: pointer;
display: block;
}
}
}
}
.sign-in {

10
css/search.css
View File

@@ -64,9 +64,17 @@
#search .matter {
align-items: flex-start;
}
#search .matter.bottom {
align-items: flex-end;
}
#search .matter .matter-content {
margin-right: 12px;
}
#search .matter .matter-content.fixed {
position: fixed;
left: calc((100% - 1200px) / 2);
bottom: 10px;
}
#search .matter .matter-content .list-box .item-box {
margin-bottom: 12px;
}
@@ -121,6 +129,6 @@
}
#search .matter .sidebar-box.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
left: calc((100% - 1200px) / 2 + 909px);
bottom: 10px;
}

16
css/search.less
View File

@@ -72,10 +72,20 @@
.matter {
align-items: flex-start;
&.bottom {
align-items: flex-end;
}
.matter-content {
margin-right: 12px;
&.fixed {
position: fixed;
left: calc((100% - 1200px) / 2);
bottom: 10px;
}
.list-box {
.item-box {
margin-bottom: 12px;
@@ -142,7 +152,9 @@
&.fixed {
position: fixed;
right: calc((100% - 1200px) / 2);
// right: calc((100% - 1200px) / 2);
// left: 909px;
left: calc((100% - 1200px) / 2 + 909px);
bottom: 10px;
}
}

1
js/index.js
View File

@@ -286,7 +286,6 @@ const appIndex = createApp({
};
const clickbtn = () => {
console.log("点击按钮");
BiComponent.initComponent();
};

109
js/search.js
View File

@@ -1,40 +1,43 @@
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch, provide } = Vue;
import { itemForum } from "../component/item-forum/item-forum.js";
import { itemOffer } from "../component/item-offer/item-offer.js";
import { itemSummary } from "../component/item-summary/item-summary.js";
import { itemVote } from "../component/item-vote/item-vote.js";
import { itemMj } from "../component/item-mj/item-mj.js";
import { itemTenement } from "../component/item-tenement/item-tenement.js";
import { headTop } from "../component/head-top/head-top.js";
import { hotTag } from "../component/hot-tag/hot-tag.js";
import { hotSearch } from "../component/hot-search/hot-search.js";
import { slideshowBox } from "../component/slideshow-box/slideshow-box.js";
import { latestList } from "../component/latest-list/latest-list.js";
import { itemForum } from "/component/item-forum/item-forum.js";
import { itemOffer } from "/component/item-offer/item-offer.js";
import { itemSummary } from "/component/item-summary/item-summary.js";
import { itemVote } from "/component/item-vote/item-vote.js";
import { itemMj } from "/component/item-mj/item-mj.js";
import { itemTenement } from "/component/item-tenement/item-tenement.js";
import { headTop } from "/component/head-top/head-top.js";
import { hotTag } from "/component/hot-tag/hot-tag.js";
import { hotSearch } from "/component/hot-search/hot-search.js";
import { slideshowBox } from "/component/slideshow-box/slideshow-box.js";
import { latestList } from "/component/latest-list/latest-list.js";
import { loadBox } from "/component/load-box/load-box.js";
const appSearch = createApp({
setup() {
let kwValue = ref(null);
let typeValue = ref(null);
let kw = ref("");
onMounted(() => {
const params = getUrlParams();
kw.value = params.kw || "";
// const params = getUrlParams();
// kw.value = params.kw || "";
// const urlObj = new URL(location.href);
// const pathParts = urlObj.pathname.split("/").filter((part) => part);
// kw.value = decodeURIComponent(pathParts.pop());
kw.value = kwValue.value.innerText;
const tab = typeValue.value.innerText;
if (tab) tabValue.value = tab;
page.value = 1;
getList();
getUserInfoWin();
setTimeout(() => (permissions.value = window["permissions"] || ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"]), 1000);
window.addEventListener("scroll", handleScroll);
});
let isLogin = ref(true);
let realname = ref(1); // 是否已经实名
let userInfoWin = ref({
authority: ["comment.edit", "comment.delete", "offercollege.hide", "offersummary.hide", "mj.hide", "topic:manager", "topic:hide"],
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/middle?random=1761733169",
groupid: 3,
nickname: "肖荣豪",
realname: 1,
token: "01346a38444d71aaadb3adad52b52c39",
uid: 500144,
uin: 4238049,
});
let isLogin = ref(false);
let realname = ref(0); // 是否已经实名
let userInfoWin = ref({});
let permissions = ref([]);
@@ -84,6 +87,8 @@ const appSearch = createApp({
tabValue.value = type;
pagination.value = [];
updateUrlParams({ type: type == "all" ? null : type });
getList();
};
@@ -110,19 +115,18 @@ const appSearch = createApp({
});
};
let loading = false;
let loading = ref(false);
let page = ref(0);
let maxPage = ref(0);
let count = ref(0);
let list = ref([]);
let pagination = ref([]);
const getList = () => {
if (loading || page.value == null) return;
loading = true;
if (loading.value || page.value == null) return;
loading.value = true;
const limit = 20;
ajaxGet(`/v2/api/forum/topicLists?type=${tabValue.value == "all" ? "" : tabValue.value}&page=${page.value}&limit=${limit}&keyword=${kw.value}`)
.then((res) => {
// wx.hideLoading();
if (res.code != 200) {
creationAlertBox("error", res.message);
return;
@@ -130,19 +134,19 @@ const appSearch = createApp({
let data = res.data;
list.value = data.data;
// page.value = data.count > limit * data.page ? page.value : null;
if (data.count <= limit * data.page) page.value = null
if (list.value.length == 0) page.value = null;
count.value = data.count;
loading = false;
loading.value = false;
maxPage.value = Math.ceil(count.value / limit);
pagination.value = calculatePagination(page.value, maxPage.value);
updateUrlLastPath(kw.value);
})
.catch((err) => {
// wx.hideLoading();
err = err.data;
if (err.code == 401) goLogin();
loading = false;
loading.value = false;
});
};
@@ -190,17 +194,20 @@ const appSearch = createApp({
if (value == "...") return;
if (value == page.value) return;
page.value = value;
list.value = [];
getList();
};
const prevPage = () => {
page.value -= 1;
list.value = [];
pagination.value = [];
getList();
};
const nextPage = () => {
page.value += 1;
list.value = [];
pagination.value = [];
getList();
};
@@ -218,7 +225,34 @@ const appSearch = createApp({
getList();
};
return { startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
const sidebarFixed = ref(false);
const matterFixed = ref(false);
const handleScroll = () => {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = window.innerHeight;
const sideHeight = sidebarRef.value.offsetHeight;
const matterTop = matterRef.value.offsetTop;
const matterHeight = matterContentRef.value.offsetHeight;
console.log("sideHeight", sideHeight);
console.log("matterHeight", matterHeight);
if (sideHeight < matterHeight) {
// 侧边栏滚动固定
if (scrollTop >= matterTop + sideHeight - clientHeight) sidebarFixed.value = true;
else sidebarFixed.value = false;
} else {
if (scrollTop >= matterTop + matterHeight - clientHeight) matterFixed.value = true;
else matterFixed.value = false;
}
};
const matterRef = ref(null);
const sidebarRef = ref(null);
const matterContentRef = ref(null);
return { matterFixed, matterContentRef, sidebarFixed, matterRef, sidebarRef, loading, typeValue, kwValue, startSearch, kw, maxPage, prevPage, nextPage, tabValue, cutTab, tabList, count, list, page, pagination, cutPage };
},
});
appSearch.component("item-forum", itemForum);
@@ -232,4 +266,5 @@ appSearch.component("hot-tag", hotTag);
appSearch.component("hot-search", hotSearch);
appSearch.component("slideshow-box", slideshowBox);
appSearch.component("latest-list", latestList);
appSearch.component("load-box", loadBox);
appSearch.mount("#search");

143
search.html
View File

@@ -1,83 +1,84 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>搜索</title>
<link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/search.css" />
<script src="./js/vue.global.js"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>搜索</title>
<link rel="stylesheet" href="./css/public.css" />
<link rel="stylesheet" href="./css/search.css" />
<script src="./js/vue.global.js"></script>
<style >
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="container" id="search" v-cloak>
<div class="templateValue" ref="kwValue">香港</div>
<div class="templateValue" ref="typeValue"></div>
<body>
<div class="container" id="search" v-cloak>
<div class="head-top flexacenter">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
<div class="flex1"></div>
</div>
<div class="search-box flexacenter">
<input class="search-input flex1" placeholder="请输入搜索关键词" v-model="kw" @keyup.enter="startSearch">
<img class="search-icon" src="./img/search-icon.svg" alt="" @click="startSearch">
</div>
<div class="head-top flexacenter">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
<div class="flex1"></div>
</div>
<div class="search-box flexacenter">
<input class="search-input flex1" placeholder="请输入搜索关键词" v-model="kw" @keyup.enter="startSearch" />
<img class="search-icon" src="./img/search-icon.svg" alt="" @click="startSearch" />
</div>
<div class="classify flexacenter">
<div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
</div>
<div class="classify flexacenter">
<div class="item" :class="{'pitch': key == tabValue}" v-for="(item, key) in tabList" :key="key" @click="cutTab(key)">{{ item }}</div>
</div>
<div class="quantity flexacenter">
{{ tabList[tabValue] }}
<div class="line"></div>
共
<div class="num">{{ count }}</div>
条
</div>
<div class="quantity flexacenter">
{{ tabList[tabValue] }}
<div class="line"></div>
共
<div class="num">{{ count }}</div>
条
</div>
<div class="matter flexflex">
<div class="matter-content flex1">
<div class="list-box" v-if="list.length != 0">
<template v-for="(item,index) in list" :key="index">
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
<item-forum v-else :itemdata="item"></item-forum>
</template>
<div class="matter flexflex">
<div class="matter-content flex1">
<div class="list-box" v-if="list.length != 0">
<template v-for="(item,index) in list" :key="index">
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
<item-forum v-else :itemdata="item"></item-forum>
</template>
</div>
<div v-if="list.length == 0 && page == null" class="empty flexcenter">
<img class="empty-icon" src="./img/empty-icon.png" />
<div class="empty-text">- 暂无内容 -</div>
</div>
<div class="pages-box flexcenter" v-if="pagination.length != 0">
<img v-if="page == 1" class="arrows" src="./img/arrows-gray-simple.svg" alt="" />
<img @click="prevPage" v-else class="arrows rotate180" src="./img/arrows-gray-deep.svg" alt="" />
<div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
<img v-if="page == maxPage" class="arrows rotate180" src="./img/arrows-gray-simple.svg" alt="" />
<img @click="nextPage" v-else v-else class="arrows" src="./img/arrows-gray-deep.svg" alt="" />
</div>
</div>
<div v-if="list.length == 0 && page == null" class="empty flexcenter">
<img class="empty-icon" src="./img/empty-icon.png" />
<div class="empty-text">- 暂无内容 -</div>
</div>
<div class="pages-box flexcenter" v-if="pagination.length != 0">
<img v-if="page == 1" class="arrows" src="./img/arrows-gray-simple.svg" alt="">
<img @click="prevPage" v-else class="arrows rotate180" src="./img/arrows-gray-deep.svg" alt="">
<div class="item" :class="{'pitch': item == page }" v-for="(item, index) in pagination" @click="cutPage(item)">{{ item }}</div>
<img v-if="page == maxPage" class="arrows rotate180" src="./img/arrows-gray-simple.svg" alt="">
<img @click="nextPage" v-else v-else class="arrows" src="./img/arrows-gray-deep.svg" alt="">
<div class="sidebar-box">
<hot-search></hot-search>
<hot-tag></hot-tag>
<slideshow-box></slideshow-box>
<latest-list></latest-list>
</div>
</div>
<div class="sidebar-box">
<hot-search></hot-search>
<hot-tag></hot-tag>
<slideshow-box></slideshow-box>
<latest-list></latest-list>
</div>
</div>
</div>
<script src="./js/axios.min.js"></script>
<script src="./js/public.js"></script>
<script type="module" src="./js/search.js"></script>
</body>
</html>
<script src="./js/axios.min.js"></script>
<script src="./js/public.js"></script>
<script type="module" src="./js/search.js"></script>
</body>
</html>

92
simple_scroll.html Normal file
View File

@@ -0,0 +1,92 @@
<!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>
</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() {
const left = document.getElementById('left');
const right = document.getElementById('right');
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;
// 节流滚动处理
window.onscroll = function() {
if (scrollTimeout) clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() {
const windowHeight = window.innerHeight;
const leftRect = left.getBoundingClientRect();
const rightRect = right.getBoundingClientRect();
// 左侧固定逻辑
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;
}
// 右侧固定逻辑
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>
</html>