feat: 新增用户主页和个人主页功能
新增用户主页和个人主页的HTML、CSS和JS文件 添加相关图片资源 重构sectionIndex页面为section-index.html 更新sectionIndex.js以支持组件导入
This commit is contained in:
DESKTOP-RQ919RC\Pc
210
section-index.html
Normal file
210
section-index.html
Normal file
@@ -0,0 +1,210 @@
|
||||
<!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/sectionIndex.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="sectionIndex">
|
||||
<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="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>
|
||||
<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" />
|
||||
GO
|
||||
</div>
|
||||
<img class="petal1" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal1.png" />
|
||||
<img class="petal2" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal2.png" />
|
||||
<img class="petal3" src="//framework.x-php.com/gter/image/gter/forum/assets/forum/petal3.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">首页</div>
|
||||
</div>
|
||||
|
||||
<div class="matter flexflex">
|
||||
<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>
|
||||
</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~~" />
|
||||
<div class="right flex1">
|
||||
<div class="title">香港留学</div>
|
||||
<div class="link flexacenter">
|
||||
<div class="item flexacenter" v-for="item in 4" :key="item">
|
||||
<div class="text">申港超强资料包</div>
|
||||
<img class="icon" src="./img/arrows-circle-red.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom flexacenter">
|
||||
<div class="data flexacenter">
|
||||
共
|
||||
<div class="sum">124,098</div>
|
||||
个帖子
|
||||
</div>
|
||||
<div class="btn flexcenter">
|
||||
<img class="icon" src="./img/pen-icon.png" />
|
||||
<div class="text">发帖</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="content-box flex1">
|
||||
<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 class="red-tag">
|
||||
<div class="title">热门标签
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="side-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./js/sectionIndex.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user