feat(论坛页面): 新增论坛首页板块和签到功能

添加论坛首页板块布局和样式,包括导航栏、签到功能、板块列表和精选内容展示
实现签到状态管理,添加签到按钮和已签到状态显示
新增多个图标资源文件用于界面展示
优化CSS样式结构,删除冗余代码文件
This commit is contained in:
A1300399510
2025-10-21 01:42:38 +08:00
parent 08760739d0
commit acb96969d7
12 changed files with 1538 additions and 717 deletions

View File

@@ -10,13 +10,106 @@
<body>
<div class="container" id="sectionIndex">
<div class="head">
<div class="head-top flexacenter">
<img class="logo" src="https://oss.gter.net/logo" alt="" />
<div class="flex1"></div>
<div class="input-box">
<input type="text" placeholder="大家都在搜:屯特" />
<div class="input-box flexacenter">
<input class="input flex1" type="text" placeholder="大家都在搜:屯特" />
<img class="icon" />
</div>
<div class="sign-in sign-in-already flexcenter" v-if="signInAlreadyState" v-cloak onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')">
<img class="sign-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-icon.png" />
<span>已签到,明天再来</span>
</div>
<div class="sign-in sign-in-no flexacenter" v-else onclick="showWindow('dsu_paulsign', 'https://bbs.gter.net/plugin.php?id=dsu_paulsign:sign&show=sign')" v-cloak>
<img class="sign-in-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-in-bj.svg" />
<img class="coin-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-bj.svg" />
<img class="coin-icon" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/coin-icon.png" />
<span class="text flex1">签到领寄托币</span>
<div class="sign-go flexcenter">
<img class="sign-go-bj" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/sign-go.svg" />
GO
</div>
<img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
<img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
<img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.png" />
</div>
</div>
<div class="head-navigation flexacenter">
<img class="icon" src="./img/index-icon.png" />
<div class="text">首页</div>
<img class="arrows" src="./img/arrows-gray.svg" />
<div class="text">首页</div>
</div>
<div class="matter flexflex">
<div class="sidebar">
<div class="title">论坛版块</div>
<div class="list">
<div v-for="item in 8" :key="item" class="item flexacenter" :class="{'pitch' : item == 1}">
<span class="text">香港</span>
</div>
</div>
<div class="list">
<div v-for="item in 5" :key="item" class="item flexacenter" :class="{'pitch' : item == 1}">
<span class="text">香港</span>
</div>
</div>
<div class="list">
<div v-for="item in 5" :key="item" class="item flexacenter" :class="{'pitch' : item == 1}">
<span class="text">香港</span>
</div>
</div>
<div class="list">
<div v-for="item in 3" :key="item" class="item flexacenter" :class="{'pitch' : item == 1}">
<span class="text">香港</span>
</div>
</div>
</div>
<div class="matter-content flex1">
<div class="info flexflex">
<img class="img" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pood3-H1NFX9ddrB_WbUGy8P79gQxdBFebGtpgV7NkzNDQyOQ~~" />
<div class="right flex1">
<div class="title">香港留学</div>
<div class="link flexacenter">
<div class="item flexacenter" v-for="item in 4" :key="item">
<div class="text">申港超强资料包</div>
<img class="icon" src="./img/arrows-circle-red.svg" />
</div>
</div>
<div class="bottom flexacenter">
<div class="data flexacenter">
<div class="sum">124,098</div>
个帖子
</div>
<div class="btn flexcenter">
<img class="icon" src="./img/pen-icon.png" />
<div class="text">发帖</div>
</div>
</div>
</div>
</div>
<div class="details-box flexflex">
<div class="content-box flex1">
<div class="selectives-box">
<div class="head-top flexcenter">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
<div class="text">精选</div>
</div>
<div class="list flexflex">
<div class="item flexacenter" v-for="(item, index) in 16" :key="index">
<div class="dot"></div>
<div class="text one-line-display">美国各院校申请时间汇总(一)美国各院校申请时间汇总(一)美国各院校申请时间汇总(一)</div>
</div>
</div>
</div>
</div>
<div class="side-box"></div>
</div>
</div>
</div>
</div>
<script src="./js/sectionIndex.js"></script>