返回列表 发帖
查看: 34|回复: 1

优化dz x5导读首页各区域标题展示为一行

TaC

114

主题

706

回帖

868

积分

自成一派

贡献
5 点
金币
2 个
发表于 9 小时前 | 查看全部 |阅读模式
今天,总算是微信能登录跳转到pc端网页了,分享一下,这几天的折腾,下面是上午折腾出来的。

使用 Trae 解决导读首页各内容区域的展示问题。实现标题集中在一行显示。默认是展开,一个标题区一个标题区。
Trae 解决了:

- 1.所有标题在一行水平显示,支持滚动。
- 2.鼠标划动到标题上时,显示对应标题下的内容。
- 3.为标题设置了宽度不超过21%的限制。
- 4.添加了指定的渐变背景色和圆角效果。
- 5.添加了白色1px边框。
- 6.为"更多"链接设置了较小的字体和较浅的颜色。
  
下面分享原始代码:
  • <!--{if $view == 'index'}-->
  •         <style type="text/css">
  •                 .guide-tabs-container {
  •                         display: flex;
  •                         overflow-x: auto;
  •                         white-space: nowrap;
  •                         margin-bottom: 15px;
  •                         padding: 5px;
  •                 }
  •                 .guide-tab {
  •                         flex: 0 0 auto;
  •                         width: 21%; /* 宽度不超过21% */
  •                         min-width: 150px; /* 最小宽度,确保内容不会被压缩得太小 */
  •                         padding: 10px 20px;
  •                         cursor: pointer;
  •                         position: relative;
  •                         background: linear-gradient(132deg,rgba(235,237,240,0.85) 9.65%,rgba(233,236,238,0.5) 58.96%,rgba(254,254,255,0.87) 86.15%);
  •                         border-radius: 5px;
  •                         border: 1px solid white;
  •                         margin-right: 10px;
  •                         transition: all 0.3s ease;
  •                         display: flex;
  •                         justify-content: space-between;
  •                         align-items: center;
  •                 }
  •                 .guide-tab:hover {
  •                         box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  •                 }
  •                 .guide-tab.active {
  •                         background: linear-gradient(132deg,rgba(220,225,230,0.85) 9.65%,rgba(215,220,225,0.5) 58.96%,rgba(240,245,250,0.87) 86.15%);
  •                         font-weight: bold;
  •                 }
  •                 .guide-content {
  •                         display: none;
  •                         padding: 15px 0;
  •                 }
  •                 .guide-content.active {
  •                         display: block;
  •                 }
  •                 /* 更多链接样式 */
  •                 .guide-tab .more-link {
  •                         font-size: 12px; /* 字体小一点 */
  •                         color: #888; /* 颜色比主标题浅 */
  •                         text-decoration: none;
  •                 }
  •                 .guide-tab .more-link:hover {
  •                         color: #555;
  •                         text-decoration: underline;
  •                 }
  •                 /* 隐藏滚动条但保留功能 */
  •                 .guide-tabs-container::-webkit-scrollbar {
  •                         display: none;
  •                 }
  •                 .guide-tabs-container {
  •                         -ms-overflow-style: none;
  •                         scrollbar-width: none;
  •                 }
  •         </style>
  •         <div class="guide-tabs-container">
  •                 <!--{loop $data $key $list}-->
  •                 <div class="guide-tab" data-target="tab-$key">
  •                         <span>
  •                                 <!--{if $key == 'hot'}-->{lang guide_hot}<!--{elseif $key == 'digest'}-->{lang guide_digest}<!--{elseif $key == 'newthread'}-->{lang guide_newthread}<!--{elseif $key == 'new'}-->{lang guide_new}<!--{elseif $key == 'my'}-->{lang guide_my}<!--{/if}-->
  •                         </span>
  •                         <a href="forum.php?mod=guide&view=$key" class="more-link">{lang more} »</a>
  •                 </div>
  •                 <!--{/loop}-->
  •         </div>
  •         <!-- 内容部分保持不变 -->
  •         <!--{loop $data $key $list}-->
  •         <div id="tab-$key" class="guide-content">
  •                 <div class="xl xl2 cl">
  •                         <!--{if $list['threadcount']}-->
  •                                 <!--{eval $i=0;}-->
  •                                 <!--{loop $list['threadlist'] $thread}-->
  •                                 <!--{eval $i++;$newtd=$i%2;}-->
  •                                 <li{if !$newtd} class="xl2_r"{/if}>
  •                                         <em>
  •                                                 <!--{if $key == 'hot'}--><span class="xi1">$thread[heats]{lang guide_attend}</span><!--{/if}-->
  •                                                 <!--{if $key == 'new'}-->$thread[lastpost]<!--{/if}-->
  •                                         </em>
  •                                         <i>· <a href="forum.php?mod=viewthread&tid=$thread[tid]&{if $_GET['archiveid']}archiveid={$_GET['archiveid']}&{/if}extra=$extra"$thread[highlight] target="_blank">$thread[subject]</a></i> <span class="xg1"><a href="forum.php?mod=forumdisplay&fid=$thread[fid]" target="_blank">$list['forumnames'][$thread[fid]]['name']</a></span>
  •                                 </li>
  •                                 <!--{/loop}-->
  •                         <!--{else}-->
  •                                 <p class="emp">{lang guide_nothreads}</p>
  •                         <!--{/if}-->
  •                 </div>
  •         </div>
  •         <!--{/loop}-->
  •         <script>
  •         jQuery(document).ready(function($) {
  •                 // 默认显示第一个标签的内容
  •                 $('.guide-tab').first().addClass('active');
  •                 $('.guide-content').first().addClass('active');
  •                 // 鼠标划动显示对应内容
  •                 $('.guide-tab').hover(function() {
  •                         // 移除所有激活状态
  •                         $('.guide-tab').removeClass('active');
  •                         $('.guide-content').removeClass('active');
  •                         // 添加当前激活状态
  •                         $(this).addClass('active');
  •                         var target = $(this).data('target');
  •                         $('#' + target).addClass('active');
  •                 });
  •         });
  •         </script>


在导读首页文件,找到:<!--{if $view == 'index'}-->,下面div标签,在这整个div标签里,<!--{else}-->上,替换上面内容,即可。
因原始文件更改过,查看默认模板文件好象54-83行。
其它细节,你还可以自己继续优化。

回复

使用道具 举报

TaC

114

主题

706

回帖

868

积分

自成一派

贡献
5 点
金币
2 个
 楼主| 发表于 9 小时前 | 查看全部
本帖最后由 TaC 于 2025-10-14 13:18 编辑

下面是效果截图:

屏幕截图 2025-10-14 131555.png

总体感觉,比一整个页面都是标题,来得美观些。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2025-10-14 22:57 , Processed in 0.045635 second(s), 11 queries , Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表