feat: 新增详情页和个人主页功能及组件优化
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现 - 新增多个图片资源用于UI展示 - 优化item-head、item-bottom等组件的数据绑定和交互逻辑 - 添加公共工具函数(public.js)包括时间处理和网络请求 - 完善CSS样式文件，增加响应式布局和交互效果 - 实现用户信息展示、帖子详情、相关帖子推荐等功能模块 - 添加签到、投币等交互功能 - 优化组件模板结构和数据传递方式
This commit is contained in:
DESKTOP-RQ919RC\Pc
205
details.html
Normal file
205
details.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!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/details.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="details" 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="post-list flexacenter">
|
||||
<img class="post-item" src="./img/post-thread.png" />
|
||||
<img class="post-item" src="./img/post-offer.png" />
|
||||
<img class="post-item" src="./img/post-summary.png" />
|
||||
<img class="post-item" src="./img/post-mj.png" />
|
||||
<img class="post-item" src="./img/post-vote.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">GTSuperstar 的个人主页</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<div class="matter-left">
|
||||
<div class="block">
|
||||
<div class="matter-head flexacenter">
|
||||
<img class="avatar" src="https://axure-file.lanhuapp.com/md5__663dd09989ed49b33933982521ac4655.svg" alt="" />
|
||||
<div class="content flex1 flexflex">
|
||||
<div class="name flexacenter" bind:tap="goPersonalHomepage">
|
||||
<div>{{ authorInfo.nickname || '匿名用户' }}</div>
|
||||
<img v-if="authorInfo?.group?.title" class="icon" :src="authorInfo.group.title" />
|
||||
</div>
|
||||
<div class="time">{{ timestamp }}</div>
|
||||
</div>
|
||||
<div class="operate flexacenter">
|
||||
<div class="view flexacenter">
|
||||
<img class="icon" src="./img/eye-icon.svg">
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter" bind:tap="cutShow">
|
||||
<img class="icon" src="./img/dot-dot-dot-gray.png">
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div class="title">[申请定位] 港理工各专业申请难度分析</div>
|
||||
|
||||
<div class="html" v-html="info.content"></div>
|
||||
|
||||
<div class="last-time">最后编辑：{{ updatedTime || timestamp }}</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/like-black-icon.png" />
|
||||
<div class="text">{{ info.likes || "赞" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-black-icon.png" />
|
||||
<div class="text">{{ info.collections || "收藏" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/discuss-black-icon.png" />
|
||||
<div class="text">{{ info.comments || "讨论" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/bi-black-icon.png" />
|
||||
<div class="text">{{ info.coins || "投币" }}</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/share-black-icon.png" />
|
||||
<div class="text">转发</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block related">
|
||||
<div class="related-head flexacenter">
|
||||
<div class="text">相关帖子</div>
|
||||
<div class="time">Updated by 2025.10.13</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="item in 8">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER2023年6月下签 SDS Timeline 15天收到梦橡塑OFFER</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-box">
|
||||
<a class="adv">
|
||||
<img class="adv-img" src="https://o.x-php.com/bbs/common/cf/1709075xdbbbvjd8cbxvdd.jpg">
|
||||
</a>
|
||||
|
||||
<div class="sidebar-item">
|
||||
<div class="sidebar-header">手机查看该帖子</div>
|
||||
<div class="sidebar-content flexcenter">
|
||||
<img src="https://o.x-php.com/qrcode/eunKLTiKLX4O" class="sidebar-QRCode">
|
||||
<div class="hint flexacenter">
|
||||
<img class="saoma-icon" src="//framework.x-php.com/gter/image/gter/offer/imgdetails/u161.png?v=5.2.91_282044242">
|
||||
微信扫一扫
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-item">
|
||||
<div class="sidebar-header">关于作者</div>
|
||||
<div class="sidebar-content flexcenter">
|
||||
<div class="author-box flexacenter">
|
||||
<img class="avatar" src="./img/avatar.png">
|
||||
<div class="author-content">
|
||||
<div class="author-name flexacenter">4564sd56f456</div>
|
||||
<div class="author-info flexacenter">共 <div class="amount">57</div> 个创作，获得 <div class="amount">1093</div> 个赞</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="medal">
|
||||
<div class="medal-title">勋章 6</div>
|
||||
<div class="medal-list flexflex">
|
||||
<img class="medal-item" v-for="item in 6" :key="item" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpbmD-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o7x6CLR54iN90MUNDQyOQ~~">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recently">
|
||||
<div class="recently-title">最近发布</div>
|
||||
<div class="recently-list flexflex">
|
||||
<div v-for="item in 8" :key="item" class="recently-item one-line-display flexacenter">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display flex1">GMAT这么有用吗？跟大家讨论讨的跟大家讨论讨的跟大家讨论讨的</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coins-area flexcenter" v-if="false">
|
||||
<div class="coins-box flexcenter">
|
||||
<img class="fork" src="./img/fork-icon.png">
|
||||
<div class="coins-head flexacenter">
|
||||
<img class="icon" src="./img/bi-icon.png">
|
||||
<div class="text flexacenter">该帖子已获得 <div class="sum">23</div> 个寄托币</div>
|
||||
</div>
|
||||
<div class="coins-input flexacenter">
|
||||
<input class="input flex1" type="number" placeholder="输入投币数">
|
||||
<div class="btn">投币</div>
|
||||
</div>
|
||||
|
||||
<div class="coins-info flexacenter">
|
||||
<img class="icon" src="./img/bi-black-icon.png">
|
||||
你当前共有 <div class="sum">934</div> 寄托币
|
||||
<div class="strategy">[挣币攻略]</div>
|
||||
</div>
|
||||
|
||||
<div class="coins-list-area flexflex">
|
||||
<div class="coins-total flexacenter">共 <div class="sum">11</div> 人参与投币：</div>
|
||||
<div class="list flex1">
|
||||
<div class="item flexacenter" v-for="item in 1">
|
||||
<div class="serial">1</div>
|
||||
<div class="user flex1 flexacenter">
|
||||
<img class="avatar" src="./img/avatar.png">
|
||||
<div class="username one-line-display flex1">4564sd56f456</div>
|
||||
</div>
|
||||
<div class="amount flexacenter">100 <div class="text">币</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/details.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user