194 lines
10 KiB
HTML
194 lines
10 KiB
HTML
<!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/homepage-me.css" />
|
||
<script src="./js/vue.global.js"></script>
|
||
<style>
|
||
[v-cloak] {
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container" id="homepage-me" v-cloak>
|
||
<head-top></head-top>
|
||
|
||
<div class="head-navigation flexacenter">
|
||
<img class="icon" src="./img/index-icon.png" />
|
||
<a class="text" href="./" target="_blank">首页</a>
|
||
<img class="arrows" src="./img/arrows-gray.svg" />
|
||
<div class="text">我的主页</div>
|
||
</div>
|
||
|
||
<div class="matter flexflex">
|
||
<div class="card-user flexcenter">
|
||
<div class="name-area">
|
||
<img class="avatar" :src="info.avatar" alt="用户头像" />
|
||
|
||
<h3 class="username flexcenter">{{ info.nickname }}</h3>
|
||
<p class="uid flexcenter">
|
||
UID: {{ info.uin }}
|
||
<img class="icon" @click="copy(info.uin)" src="./img/copy-icon.png" />
|
||
</p>
|
||
</div>
|
||
|
||
<div class="bi-box flexacenter">
|
||
<img class="bi-masking" src="./img/bi-masking.svg" alt="" />
|
||
<img class="bi-icon" src="./img/bi-icon.svg" alt="" />
|
||
<div class="bi-content flex1">
|
||
<div class="bi-sum">{{ gtercoin }}</div>
|
||
<div class="bi-text">寄托币</div>
|
||
</div>
|
||
<a class="bi-btn flexcenter" target="_blank" :href="introduction">
|
||
关于寄托币
|
||
<img class="bi-question" src="./img/question-mark.svg" alt="" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="medal-area" v-if="medallist.length != 0">
|
||
<p class="title">勋章 {{ medallist.length }}</p>
|
||
<div class="list flexflex">
|
||
<img v-for="item in medallist" :src="item.image" :alt="item.name" class="item" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="matter-content flex1">
|
||
<div class="message-box" v-if="true">
|
||
<!-- 头部区域 -->
|
||
<div class="header">
|
||
<img :src="info.avatar" alt="用户头像" class="avatar" />
|
||
<span class="username">{{ info.nickname }}</span>
|
||
<img v-if="info?.group?.image" class="icon" :src="info?.group?.image" />
|
||
</div>
|
||
|
||
<!-- 信息列表区域 -->
|
||
<div class="info-list flexflex">
|
||
<div class="item flexacenter">
|
||
<span class="label">注册时间</span>
|
||
<span class="value">2019-7-26 16:38</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">最后登录</span>
|
||
<span class="value">2025-10-16 10:32</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">在线时长</span>
|
||
<span class="value">1304 小时</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">上次访问 IP</span>
|
||
<span class="value">116.237.182.149 -- 上海长宁区</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">Email</span>
|
||
<span class="value">skysuper007@qq.com</span>
|
||
<span class="status flexacenter">未认证</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">手机号</span>
|
||
<span class="value">15934271290</span>
|
||
<span class="status blue flexacenter">已认证</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">累计签到</span>
|
||
<span class="value">1341 天</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">本月签到</span>
|
||
<span class="value">6 天</span>
|
||
</div>
|
||
<div class="item flexacenter">
|
||
<span class="label">寄托币</span>
|
||
<span class="value">{{ gtercoin }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计标签区域 -->
|
||
<div class="stats flexacenter" v-if="creationType.length != 0">
|
||
<template v-for="(item, index) in creationType" :key="index">
|
||
<span class="item flexacenter">
|
||
<div class="text">{{ item.text }} ×</div>
|
||
<div class="num">{{ item.number }}</div>
|
||
</span>
|
||
<div class="line" v-if="index != creationType.length - 1">|</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- Offer标签区域 -->
|
||
<div class="tags flexflex" v-if="schoolTags.length != 0">
|
||
<div class="item flexacenter" v-for="item in schoolTags" :key="item">
|
||
<img v-if="item.type == 'offer'" class="icon" src="./img/offer-icon.png" mode="heightFix" />
|
||
<img v-else class="icon" src="./img/mj-icon.png" mode="heightFix" />
|
||
{{ item.school }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="list-area">
|
||
<div class="operation-box flexacenter">
|
||
<div class="operation-item" :class="{ 'pitch': item.type == typeValue }" v-for="item in typeList" :key="item.type" @click="typeChange(item.type)">{{ item.text }}</div>
|
||
</div>
|
||
|
||
<div class="classify flexacenter">
|
||
<div class="item" :class="{'pitch': item.type == classify}" v-for="item in classifyList" :key="item.type" @click="classifyChange(item.type)">{{ item.text }}</div>
|
||
</div>
|
||
|
||
<div v-if="typeValue == 'collection'" class="issue-data flexacenter">
|
||
共
|
||
<div class="num">{{ total }}</div>
|
||
个收藏
|
||
</div>
|
||
<div v-else-if="typeValue == 'creation'" class="issue-data flexacenter">
|
||
共
|
||
<div class="num">{{ total }}</div>
|
||
个创作，获得
|
||
<div class="num">{{ 000 }}</div>
|
||
个赞
|
||
</div>
|
||
<div v-else-if="typeValue == 'comment'" class="issue-data flexacenter">
|
||
共
|
||
<div class="num">{{ total }}</div>
|
||
个评论，获得
|
||
<div class="num">{{ 000 }}</div>
|
||
个赞
|
||
</div>
|
||
<div v-else-if="typeValue == 'like'" class="issue-data flexacenter">
|
||
共
|
||
<div class="num">{{ total }}</div>
|
||
个点赞
|
||
</div>
|
||
<div v-else-if="typeValue == 'footprint'" class="issue-data flexacenter">系统会为你保留最近7天的浏览记录：</div>
|
||
|
||
|
||
<div class="list-box" v-if="list.length != 0">
|
||
<template v-for="(item,index) in list" :key="item.uniqid">
|
||
<item-offer v-if=" item.type == 'offer'" :itemdata="item"></item-offer>
|
||
<item-summary v-else-if="item.type == 'offer_summary'" :itemdata="item"></item-summary>
|
||
<item-vote v-else-if="item.type == 'vote'" :itemdata="item"></item-vote>
|
||
<item-mj v-else-if="item.type == 'interviewexperience'" :itemdata="item"></item-mj>
|
||
<item-tenement v-else-if="item.type == 'tenement'" :itemdata="item"></item-tenement>
|
||
<item-forum v-else :itemdata="item"></item-forum>
|
||
</template>
|
||
</div>
|
||
|
||
<div v-if="list.length == 0 && page == 0" class="empty flexcenter">
|
||
<img class="empty-icon" src="./img/empty-icon.png" />
|
||
<div class="empty-text">- 暂无内容 -</div>
|
||
</div>
|
||
|
||
<div v-if="list.length != 0 && page != 0" class="load-more flexcenter">加载更多…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="./js/axios.min.js"></script>
|
||
<script src="./js/public.js"></script>
|
||
<script type="module" src="./js/homepage-me.js"></script>
|
||
</body>
|
||
</html>
|