8caf6c2b10
新增论坛首页所需的图片资源、CSS样式文件、Vue组件和基础功能实现。包括： 1. 添加多个图标图片资源 2. 创建index.css和sectionIndex.css样式文件 3. 实现论坛首页的Vue组件结构和基础交互 4. 添加论坛板块列表和帖子展示功能 5. 实现公共样式和布局组件
154 lines
8.4 KiB
HTML
154 lines
8.4 KiB
HTML
<!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/index.css" />
|
||
<script src="./js/vue.global.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container" id="appIndex">
|
||
<!-- 话题和精选 -->
|
||
<div v-if="false" 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="false" 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>
|