feat: 新增详情页和个人主页功能及组件优化
- 添加详情页(details.html)和个人主页(homepage-me.html)的完整功能实现 - 新增多个图片资源用于UI展示 - 优化item-head、item-bottom等组件的数据绑定和交互逻辑 - 添加公共工具函数(public.js)包括时间处理和网络请求 - 完善CSS样式文件，增加响应式布局和交互效果 - 实现用户信息展示、帖子详情、相关帖子推荐等功能模块 - 添加签到、投币等交互功能 - 优化组件模板结构和数据传递方式
This commit is contained in:
DESKTOP-RQ919RC\Pc
@@ -4,14 +4,19 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<title>版块首页</title>
|
||||
<link rel="stylesheet" href="./css/public.css" />
|
||||
<link rel="stylesheet" href="./css/sectionIndex.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">
|
||||
<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>
|
||||
@@ -20,21 +25,17 @@
|
||||
<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')">
|
||||
<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>
|
||||
<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" />
|
||||
<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" />
|
||||
@@ -54,32 +55,19 @@
|
||||
<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>
|
||||
<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 class="img"
|
||||
src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG_Y2l-U_pood3-H1NFX9ddrB_WbUGy8P79gQxdBFebGtpgV7NkzNDQyOQ~~" />
|
||||
<img v-if="info.icon" class="img" :src="info.icon" />
|
||||
<div class="right flex1">
|
||||
<div class="title">香港留学</div>
|
||||
<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>
|
||||
@@ -107,9 +95,9 @@
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in 16" :key="index">
|
||||
<div class="item flexacenter" v-for="(item, index) in handpickList" :key="index">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）</div>
|
||||
<div class="text one-line-display">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,84 +107,12 @@
|
||||
<img class="icon" src="./img/triangle-red.svg" />
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item flexacenter" v-for="(item, index) in 10" :key="index">热门标签</div>
|
||||
<div class="item flexacenter" v-for="(item, index) in tagsList" :key="index">{{ item.tagname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-box">
|
||||
<div class="item-box item-forum" v-for="(item, index) in 10" :key="index">
|
||||
<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>
|
||||
<item-forum v-for="(item, index) in list" :key="index" :itemdata="item"></item-forum>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -205,7 +121,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./js/sectionIndex.js"></script>
|
||||
<script src="./js/axios.min.js"></script>
|
||||
<script src="./js/public.js"></script>
|
||||
<script type="module" src="./js/section-index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user