|
今天,总算是微信能登录跳转到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行。
其它细节,你还可以自己继续优化。
|
|