feat: 新增详情页和个人主页功能及组件优化
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现 - 新增多个图片资源用于UI展示 - 优化item-head、item-bottom等组件的数据绑定和交互逻辑 - 添加公共工具函数(public.js)包括时间处理和网络请求 - 完善CSS样式文件，增加响应式布局和交互效果 - 实现用户信息展示、帖子详情、相关帖子推荐等功能模块 - 添加签到、投币等交互功能 - 优化组件模板结构和数据传递方式
This commit is contained in:
DESKTOP-RQ919RC\Pc
248
index.html
248
index.html
@@ -1,105 +1,106 @@
|
||||
<!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>
|
||||
<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 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 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="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 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="btn flexcenter" @click="cutShow">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
|
||||
</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>
|
||||
|
||||
<!-- <template v-if="show">
|
||||
<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>
|
||||
@@ -110,45 +111,46 @@
|
||||
</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="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 class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-golden.svg" />
|
||||
<div class="text">3016</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 class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/discuss-icon.png" />
|
||||
<div class="text">3016</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 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>
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user