acb96969d7
添加论坛首页板块布局和样式，包括导航栏、签到功能、板块列表和精选内容展示 实现签到状态管理，添加签到按钮和已签到状态显示 新增多个图标资源文件用于界面展示 优化CSS样式结构，删除冗余代码文件
118 lines
6.5 KiB
HTML
118 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/sectionIndex.css" />
|
|
<script src="./js/vue.global.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="sectionIndex">
|
|
<div class="head-top flexacenter">
|
|
<img class="logo" src="https://oss.gter.net/logo" alt="" />
|
|
<div class="flex1"></div>
|
|
<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>
|
|
</body>
|
|
</html>
|