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

fix: 修复图片布局溢出问题并优化样式

Browse Source 
- 修改CSS以解决图片容器溢出问题
- 使用flex布局优化图片排列
- 更新静态资源路径为动态变量
- 隐藏示例项目并启用动态列表渲染
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-18 18:57:31 +08:00
parent 1a49ba60ce
commit 7e830d9dcb
5 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
component/hot-tag/hot-tag.js
View File

@@ -29,5 +29,5 @@ export const hotTag = defineComponent({
components: {},
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" src="/img/triangle-orange.svg" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/tag/' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
template: `<div class="hot-tag" v-if="list.length > 0"> <div class="hot-tag-title"> <img class="icon" :src="valueUrl + '/img/triangle-orange.svg'" /> 热门标签 </div> <div class="list flexflex"> <a class="item" v-for="item in list" :href="'/tag/' + item.tagname" target="_blank">{{ item.tagname }}</a> </div></div>`,
});

11
css/public.css
View File

@@ -57,6 +57,7 @@ body {
border-radius: 10px;
padding: 18px 20px 0;
display: block;
overflow: hidden;
}
.item-box .item-head {
margin-bottom: 14px;
@@ -246,8 +247,12 @@ body {
display: block;
}
.item-box.item-forum .picture {
overflow: auto;
overflow-x: auto;
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 15px;
max-width: 100%;
}
.item-box.item-forum .picture .picture-videos {
position: relative;
@@ -263,9 +268,7 @@ body {
height: 100px;
border-radius: 10px;
display: block;
}
.item-box.item-forum .picture .picture-item:not(:last-child) {
margin-right: 10px;
flex-shrink: 0;
}
.item-box.item-offer {
font-size: 14px;

10
css/public.less
View File

@@ -293,8 +293,13 @@ body {
}
.picture {
overflow: auto;
overflow-x: auto;
// white-space: nowrap;
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 15px;
max-width: 100%;
.picture-videos {
position: relative;
@@ -313,9 +318,10 @@ body {
height: 100px;
border-radius: 10px;
display: block;
flex-shrink: 0;
&:not(:last-child) {
margin-right: 10px;
// margin-right: 10px;
}
}
}

4
css/section.css
View File

@@ -76,6 +76,9 @@
border-radius: 16px;
z-index: -1;
}
#sectionIndex .matter .matter-content {
min-width: 0;
}
#sectionIndex .matter .matter-content .info-box {
width: 100%;
background: -webkit-linear-gradient(270.53908529deg, #ffffff 2%, #ebf8f9 98%);
@@ -208,6 +211,7 @@
margin-right: 12px;
position: sticky;
z-index: 1;
min-width: 0;
}
#sectionIndex .matter .matter-content .details-box .content-box .selectives-box {
width: 100%;

36
sectionV2.html
View File

@@ -267,7 +267,7 @@
</div>
<div class="list-box">
<div class="item-box item-forum">
<div style="display: none;" class="item-box item-forum">
<div class="item-head flexacenter">
<div class="user-box flexacenter"><img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXsle9W19QEKuOikN42jDKLNjtax7HItxnKMDYSdU9oWFhY2E~/small">
<div class="name">寄托院校君</div>
@@ -280,7 +280,27 @@
</div>
<div class="btn flexcenter"><img class="icon" src="https://framework.x-php.com/gter/forum//img/dot-dot-dot-gray.png"></div> <!--v-if-->
</div>
<div class="label flexflex"><a class="item icon" target="_blank" href="/recommend"><img src="https://framework.x-php.com/gter/forum//img/recommend-icon.png" style="height: 24px;"></a> <!--v-if--> <a class="item blue" href="/section/Lz9aimSLXeim" target="_blank">香港</a><a class="item blue" href="/section/MjNk2SbRt4Wa" target="_blank">其它地区</a><a class="item blue" href="/section/qvL9GXnL9b80" target="_blank">招生官</a> <a class="item" href="/tag/硕士" target="_blank">硕士</a><a class="item" href="/tag/资讯速递" target="_blank">资讯速递</a><a class="item" href="/tag/商学与管理学类" target="_blank">商学与管理学类</a><a class="item" href="/tag/2026" target="_blank">2026</a><a class="item" href="/tag/选校定位" target="_blank">选校定位</a></div><!--v-if--> <a class="title" href="/details/8iqqzrau5vD8" target="_blank">12.16 19:00 | 跨学科设计，知识与实践并行！港理工 商业管理理学硕士课程 线上宣讲会等你了解！</a> <a class="message two-line-display" href="/details/8iqqzrau5vD8" target="_blank">香港理工大学香港理工大学是一所世界顶尖大学，在2026..</a> <a class="picture flexacenter" href="/details/8iqqzrau5vD8" target="_blank"><img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqE1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMX2_Ct1vu9Fkg0jQ0Mjk~" alt=""><img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqF1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMAjrN5ga79Fkg0jQ0Mjk~" alt=""><img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnuB1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMDWnC5Qbo9Fkg0jQ0Mjk~" alt=""><img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqC1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMDzqQ4li89Fkg0jQ0Mjk~" alt=""><img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqD1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMCWvCtlzt9Fkg0jQ0Mjk~" alt=""> </a> <!--v-if-->
<div class="label flexflex">
<a class="item icon" target="_blank" href="/recommend">
<img src="https://framework.x-php.com/gter/forum//img/recommend-icon.png" style="height: 24px;"></a>
<a class="item blue" href="/section/Lz9aimSLXeim" target="_blank">香港</a>
<a class="item blue" href="/section/MjNk2SbRt4Wa" target="_blank">其它地区</a>
<a class="item blue" href="/section/qvL9GXnL9b80" target="_blank">招生官</a>
<a class="item" href="/tag/硕士" target="_blank">硕士</a>
<a class="item" href="/tag/资讯速递" target="_blank">资讯速递</a>
<a class="item" href="/tag/商学与管理学类" target="_blank">商学与管理学类</a>
<a class="item" href="/tag/2026" target="_blank">2026</a>
<a class="item" href="/tag/选校定位" target="_blank">选校定位</a>
</div>
<a class="title" href="/details/8iqqzrau5vD8" target="_blank">12.16 19:00 | 跨学科设计，知识与实践并行！港理工 商业管理理学硕士课程 线上宣讲会等你了解！</a>
<a class="message two-line-display" href="/details/8iqqzrau5vD8" target="_blank">香港理工大学香港理工大学是一所世界顶尖大学，在2026..</a>
<a class="picture flexacenter" href="/details/8iqqzrau5vD8" target="_blank">
<img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqE1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMX2_Ct1vu9Fkg0jQ0Mjk~" alt="">
<img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqF1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMAjrN5ga79Fkg0jQ0Mjk~" alt="">
<img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnuB1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMDWnC5Qbo9Fkg0jQ0Mjk~" alt="">
<img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqC1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMDzqQ4li89Fkg0jQ0Mjk~" alt="">
<img class="picture-item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pstdnqD1NFX9ddrB_WbUWy8K_hyVFweFrPD7IZK4sVMCWvCtlzt9Fkg0jQ0Mjk~" alt="">
</a>
<div class="bottom flexacenter">
<div class="bottom-item like flexacenter">
<img class="icon" src="https://framework.x-php.com/gter/forum//img/like-icon.png">
@@ -289,11 +309,11 @@
<div class="bottom-item flexacenter">
<img class="icon" src="https://framework.x-php.com/gter/forum//img/collect-gray.png">
<div class="text">收藏</div>
</div>
</div>
<a class="bottom-item flexacenter" href="/details/8iqqzrau5vD8" target="_blank">
<img class="icon" src="https://framework.x-php.com/gter/forum//img/discuss-icon.png">
<div class="text">讨论</div>
</a>
</a>
<a class="bottom-item flexacenter" href="/details/8iqqzrau5vD8" target="_blank">
<img class="icon" src="https://framework.x-php.com/gter/forum//img/bi-copper-icon.png">
<div class="text">投币</div>
@@ -317,16 +337,16 @@
</div>
</div>
</div>
<!-- <template v-for="(item,index) in list" :key="index">
<template v-for="(item,index) in list" :key="index">
<item-forum v-if="item.type == 'thread'" :itemdata="item"></item-forum>
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
<!-- <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-project v-else-if="item.type == 'programs' || tabValue == 'xg'" :itemdata="item"></item-project>
<item-forum v-else :itemdata="item"></item-forum>
</template> -->
<item-forum v-else :itemdata="item"></item-forum> -->
</template>
<load-box :loading="loading"></load-box>
</div>