A1300399510/PC-Light-Forum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5b4040ec05efdb6b831e8a1c1866227ad514a7b9
PC-Light-Forum/homepage-other.html
A1300399510 5b4040ec05 feat(个人主页): 完善用户卡片和信息展示样式 
- 调整用户卡片布局和间距，优化视觉层次
- 添加按钮区域样式和交互状态
- 实现消息盒子布局，包含头部、信息列表和统计标签
- 统一CSS和LESS文件中的样式修改
2025-10-22 09:53:20 +08:00

149 lines
8.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/homepage-other.css" />
<script src="./js/vue.global.js"></script>
</head>
<body>
<div class="container" id="homepage-other">
<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">GTSuperstar 的个人主页</div>
</div>
<div class="matter flexflex">
<div class="card-user flexcenter">
<div class="name-area">
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" />
<h3 class="username">GTSuperstar</h3>
<p class="uid flexacenter">
UID: 3276161
<img class="icon" src="./img/copy-icon.png" />
</p>
</div>
<div class="medal-area">
<p class="title">勋章 6</p>
<div class="list flexflex">
<img v-for="item in 5" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG3WvCGHpt5oNTyM1Nwws484T7rGFDO1bKwnG2kLV_eSo5JUnMYHVj-SsGLytRp94iZe_tpcnj-4Ce4gYuGWnGU_hCATZ7u7I_X1F8YjCfX63o6lsSPQ7Y2N90MUNDQyOQ~~" alt="勋章1" class="item" />
</div>
</div>
<div class="btn-area">
<div class="item msg flexcenter">发私信</div>
<div class="item flexcenter">用户管理</div>
<div class="item flexcenter">内容管理</div>
</div>
</div>
<div class="matter-content flex1">
<div class="message-box">
<!-- 头部区域 -->
<div class="header">
<img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle" alt="用户头像" class="avatar" />
<span class="username">GTSuperstar</span>
<!-- <img class="icon"> -->
</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">13813</span>
</div>
</div>
<!-- 统计标签区域 -->
<div class="stats">
<span class="stat-item">Offer × 6</span>
<span class="stat-item">总结 × 1</span>
<span class="stat-item">面经 × 3</span>
<span class="stat-item">回答 × 1</span>
<span class="stat-item">其他 × 4</span>
</div>
<!-- Offer标签区域 -->
<div class="offer-tags">
<span class="tag">Offer 阿尔托大学</span>
<span class="tag">Offer 坦佩雷大学</span>
<span class="tag">Offer 悉尼大学</span>
<span class="tag">Offer 巴黎理工学院</span>
<span class="tag">Offer 悉尼大学</span>
<span class="tag">Offer 巴黎理工学院</span>
<span class="tag">Offer 阿尔托大学</span>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="./js/homepage-other.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink