7d81e02d3d
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现 - 新增多个图片资源用于UI展示 - 优化item-head、item-bottom等组件的数据绑定和交互逻辑 - 添加公共工具函数(public.js)包括时间处理和网络请求 - 完善CSS样式文件，增加响应式布局和交互效果 - 实现用户信息展示、帖子详情、相关帖子推荐等功能模块 - 添加签到、投币等交互功能 - 优化组件模板结构和数据传递方式
129 lines
6.3 KiB
HTML
129 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>版块首页</title>
|
|
<link rel="stylesheet" href="./css/public.css" />
|
|
<link rel="stylesheet" href="./css/section-index.css" />
|
|
<script src="./js/vue.global.js"></script>
|
|
<style scoped>
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="sectionIndex" v-cloak>
|
|
<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">
|
|
<template v-for="(item, index) in sectionList" :key="index">
|
|
<div v-if="item.key == 'line'" class="line"></div>
|
|
<div v-else class="item flexacenter" :class="{'pitch' : item.uniqid == section}">
|
|
<span class="text">{{ item.name }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="matter-content flex1">
|
|
<div class="info flexflex">
|
|
<img v-if="info.icon" class="img" :src="info.icon" />
|
|
<div class="right flex1">
|
|
<div class="title">{{ info.name }}</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 handpickList" :key="index">
|
|
<div class="dot"></div>
|
|
<div class="text one-line-display">{{ item.title }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="red-tag">
|
|
<div class="title">热门标签
|
|
<img class="icon" src="./img/triangle-red.svg" />
|
|
</div>
|
|
<div class="list">
|
|
<div class="item flexacenter" v-for="(item, index) in tagsList" :key="index">{{ item.tagname }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="list-box">
|
|
<item-forum v-for="(item, index) in list" :key="index" :itemdata="item"></item-forum>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="side-box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="./js/axios.min.js"></script>
|
|
<script src="./js/public.js"></script>
|
|
<script type="module" src="./js/section-index.js"></script>
|
|
</body>
|
|
|
|
</html> |