Files
PC-Light-Forum/index.html
DESKTOP-RQ919RC\Pc 7d81e02d3d feat: 新增详情页和个人主页功能及组件优化
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现
- 新增多个图片资源用于UI展示
- 优化item-head、item-bottom等组件的数据绑定和交互逻辑
- 添加公共工具函数(public.js)包括时间处理和网络请求
- 完善CSS样式文件,增加响应式布局和交互效果
- 实现用户信息展示、帖子详情、相关帖子推荐等功能模块
- 添加签到、投币等交互功能
- 优化组件模板结构和数据传递方式
2025-10-28 19:10:26 +08:00

156 lines
7.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/public.css" />
<link rel="stylesheet" href="./css/index.css" />
<script src="./js/vue.global.js"></script>
</head>
<body>
<div class="container" id="appIndex">
<!-- 话题和精选 -->
<div v-if="true" class="topic-and-selectives flexflex">
<div class="topic-box">
<div class="head-top flexcenter">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
<div class="text">话题</div>
</div>
<div class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
<div class="title one-line-display">{{ ongoingbj.title }}</div>
<div class="hint one-line-display">{{ ongoingbj.description }}</div>
<div class="people flexacenter">
<div class="left flexacenter">
<div class="number">{{ ongoingbj.comments }}</div>
<div class="text">人正在讨论</div>
</div>
<div class="right flexacenter">
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
<img class="img" :src="item.avatar" />
</div>
</div>
</div>
</div>
<div class="topic-list">
<div class="item flexacenter" v-for="(item, index) in pastList" :key="index" bind:tap="goDetails" data-uniqid="{{ item.uniqid }}">
<img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
<div class="text one-line-display flex1">{{ item.title }}</div>
</div>
</div>
</div>
<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 v-if="true" class="forum-sections-list">
<img class="img" src="./img/sections-left.svg" />
<div class="title">论坛版块</div>
<div class="list">
<div class="line flexacenter">
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
</div>
<div class="line flexacenter">
<div class="item flexacenter">经济/商科</div>
<div class="item flexacenter">经济/商科</div>
<div class="item flexacenter">经济/商科</div>
</div>
<div class="line flexacenter">
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
</div>
<div class="line flexacenter">
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
<div class="item flexacenter">香港</div>
</div>
</div>
</div>
<div class="item-box item-forum">
<div class="item-head flexacenter">
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
<div class="name">小P学姐</div>
<img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" />
<div class="time">2025-8-11 01:30</div>
<div class="flex1"></div>
<div class="view flexacenter">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" />
<div class="text">3016</div>
</div>
<div class="btn flexcenter" @click="cutShow">
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
</div>
<!-- <template v-if="show">
<div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
<div class="operate" catch:tap="true">
<div class="item" bind:tap="report">举报</div>
<template v-if="ismanager">
<div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
<div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
<div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
</template>
</div>
</template> -->
</div>
<div class="label flexflex">
<img class="item icon" src="./img/recommend-icon.png" />
<img class="item icon" src="./img/essence-icon.png" />
<div class="item blue">香港</div>
<div class="item">香港</div>
</div>
<div class="title">【干货】香港留学费用准备</div>
<div class="message">在即将赴港的时候很多同学好奇香港一年制硕士下来的整体费用大概是多少其实主要包括学费租房费和生活费三部分。学费的话根据不同香港来定大概在10-30万港币之间比较固定…</div>
<div class="comment flexacenter">
<img class="icon" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
<div class="text one-line-display">在即将赴港的时候很多同学好奇香港一年制硕士下来的整体费用大概是多少其实主要包括学费租房费和生活费三部分。学费的话根据不同香港来定大概在10-30万港币之间比较固定…</div>
</div>
<div class="bottom flexacenter">
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/like-icon.png" />
<div class="text">3016</div>
</div>
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/collect-golden.svg" />
<div class="text">3016</div>
</div>
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/discuss-icon.png" />
<div class="text">3016</div>
</div>
<div class="bottom-item like flexacenter">
<img class="icon" src="./img/share-gray.png" />
<div class="text">3016</div>
</div>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>