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

fix: 修复多个组件样式和功能问题

Browse Source 
修复论坛项图片底部间距问题
调整BI组件z-index值防止遮挡
优化视频海报展示逻辑
限制评论输入框最大高度
修复搜索框占位符显示逻辑
添加分页项样式
移除评论编辑框底部边框
优化BI组件API请求方法
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-11-11 19:05:56 +08:00
parent 5cdbeb249f
commit b26b379341
12 changed files with 108 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
component/bi/bi.js
View File

File diff suppressed because one or more lines are too long

2
component/bi/bi.txt
View File

@@ -50,7 +50,7 @@
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
z-index: 99;
display: none;
}

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

@@ -174,5 +174,5 @@ export const headTop = defineComponent({
return { hotSearchWords, historySearchList, searchEvent, searchInputState, searchHistoryShowState, searchInputFocus, searchInputBlur, page, pitchState, state, signIn, input, currentIndex, pauseCarousel, resumeCarousel };
},
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}"> <div v-if="!searchInputState" class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}"> <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{ item.keyword }}</div> <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div> </div> <input class="input flex1" type="text" @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>`,
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}"> <div v-if="!searchInputState && !input" class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}"> <div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{ item.keyword }}</div> <div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div> </div> <input class="input flex1" type="text" @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>`,
});

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

@@ -4,7 +4,7 @@
</a>
<div class="flex1"></div>
<div class="input-box flexacenter" :class="{'pitch': searchInputState}">
<div v-if="!searchInputState" class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
<div v-if="!searchInputState && !input" class="placeholder-box" :style="{transform: 'translateY(-' + currentIndex * 36 + 'px)', transition: 'transform .3s ease'}">
<div class="item one-line-display" v-for="(item,index) in hotSearchWords" :key="index">大家都在搜：{{ item.keyword }}</div>
<div class="item one-line-display" v-for="(item,index) in hotSearchWords.slice(0, 2)" :key="'copy-' + index">大家都在搜：{{ item.keyword }}</div>
</div>

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

@@ -36,5 +36,5 @@ export const itemForum = defineComponent({
itemHead,
},
template: `<div class="item-box item-forum"> <item-head :itemdata="item" :page="page"></item-head> <a v-if="item.title" class="title" :href="item.url" target="_blank">{{ item.title }}</a> <a class="message two-line-display" :href="item.url" target="_blank">{{ item.content }}</a> <a class="picture flexacenter" :href="item.url" target="_blank" v-if="item.images?.length != 0 || item.videos?.length != 0"> <img class="picture-item" v-for="(item, index) in item.images" :key="index" :src="item.url" alt=""> <div class="picture-videos"> <img class="picture-item" v-for="(item, index) in item.videos" :key="index" :src="item.posterurl" alt=""> <img class="icon-play" src="/img/videoplay.png" alt=""> </div> </a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
template: `<div class="item-box item-forum"> <item-head :itemdata="item" :page="page"></item-head> <a v-if="item.title" class="title" :href="item.url" target="_blank">{{ item.title }}</a> <a class="message two-line-display" :href="item.url" target="_blank">{{ item.content }}</a> <a class="picture flexacenter" :href="item.url" target="_blank" v-if="item.images?.length != 0 || item.videos?.length != 0"> <img class="picture-item" v-for="(item, index) in item.images" :key="index" :src="item.url" alt=""> <template v-for="(item, index) in item.videos" :key="index"> <div v-if="item.posterurl" class="picture-videos flexacenter"> <img class="picture-item" :src="item.posterurl" alt=""> <img class="icon-play" src="/img/videoplay.png" alt=""> </div> </template> </a> <item-bottom :itemdata="item" :page="page"></item-bottom></div>`,
});

10
component/item-forum/item-forum.txt
View File

@@ -5,10 +5,12 @@
<a class="picture flexacenter" :href="item.url" target="_blank" v-if="item.images?.length != 0 || item.videos?.length != 0">
<img class="picture-item" v-for="(item, index) in item.images" :key="index" :src="item.url" alt="">
<div class="picture-videos">
<img class="picture-item" v-for="(item, index) in item.videos" :key="index" :src="item.posterurl" alt="">
<img class="icon-play" src="/img/videoplay.png" alt="">
</div>
<template v-for="(item, index) in item.videos" :key="index">
<div v-if="item.posterurl" class="picture-videos flexacenter">
<img class="picture-item" :src="item.posterurl" alt="">
<img class="icon-play" src="/img/videoplay.png" alt="">
</div>
</template>
</a>
<item-bottom :itemdata="item" :page="page"></item-bottom>

13
css/bi.css
View File

@@ -10,6 +10,19 @@ body {
padding-top: 22px;
margin-top: 20px;
}
.bi-container .page-item {
min-width: 24px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.bi-container .page-item.dot {
cursor: auto;
}
.bi-container .page-item.dot:hover {
color: #333;
background-color: #eee;
}
.bi-container * {
padding: 0;
margin: 0;

16
css/bi.less
View File

@@ -11,6 +11,22 @@ body {
padding-top: 22px;
margin-top: 20px;
.page-item {
min-width: 24px;
box-sizing: border-box;
text-align: center;
cursor: pointer;
&.dot {
cursor: auto;
&:hover {
color: #333;
background-color: #eee;
}
}
}
* {
padding: 0;
margin: 0;

8
css/details.css
View File

@@ -661,6 +661,7 @@
padding-top: 5px;
padding-bottom: 11px;
resize: none;
max-height: 300px;
}
.answer-discuss .input-box .top .input-textarea * {
background: transparent !important;
@@ -683,6 +684,7 @@
padding-left: 14px;
padding-top: 12px;
overflow: auto;
margin-bottom: 20px;
}
.answer-discuss .input-box .picture-box .picture {
position: relative;
@@ -955,6 +957,8 @@
}
.answer-discuss .comments-box .comments-item .comments-content img {
border-radius: 5px;
height: 100px;
max-width: 300px;
}
.answer-discuss .comments-box .comments-item .comments-content .input-box {
position: relative;
@@ -996,6 +1000,7 @@
}
.answer-discuss .comments-box .comments-item .comments-content .comments-img {
height: 100px;
max-width: 300px;
margin-right: 10px;
margin-bottom: 13px;
border-radius: 8px;
@@ -1199,9 +1204,6 @@
.answer-discuss .edit-comment .box .input-box {
margin-right: 0;
}
.answer-discuss .edit-comment .box .input-box .bottom {
border-top: 1px solid #ebebeb;
}
.answer-discuss .edit-comment .box .btn-list {
padding: 15px 0;
justify-content: flex-end;

7
css/details.less
View File

@@ -779,6 +779,7 @@
padding-top: 5px;
padding-bottom: 11px;
resize: none;
max-height: 300px;
}
.answer-discuss .input-box .top .input-textarea * {
@@ -804,6 +805,7 @@
padding-left: 14px;
padding-top: 12px;
overflow: auto;
margin-bottom: 20px;
}
.answer-discuss .input-box .picture-box .picture {
@@ -1123,6 +1125,8 @@
.answer-discuss .comments-box .comments-item .comments-content img {
border-radius: 5px;
height: 100px;
max-width: 300px;
}
.answer-discuss .comments-box .comments-item .comments-content .input-box {
@@ -1171,6 +1175,7 @@
.answer-discuss .comments-box .comments-item .comments-content .comments-img {
height: 100px;
max-width: 300px;
margin-right: 10px;
margin-bottom: 13px;
border-radius: 8px;
@@ -1402,7 +1407,7 @@
margin-right: 0;
}
.answer-discuss .edit-comment .box .input-box .bottom {
border-top: 1px solid #ebebeb;
// border-top: 1px solid #ebebeb;
}
.answer-discuss .edit-comment .box .btn-list {
padding: 15px 0;

1
css/public.css
View File

@@ -249,6 +249,7 @@ body {
}
.item-box.item-forum .picture {
overflow: auto;
margin-bottom: 15px;
}
.item-box.item-forum .picture .picture-videos {
position: relative;

1
css/public.less
View File

@@ -294,6 +294,7 @@ body {
.picture {
overflow: auto;
margin-bottom: 15px;
.picture-videos {
position: relative;