feat(个人主页): 完善用户卡片和信息展示样式
- 调整用户卡片布局和间距，优化视觉层次 - 添加按钮区域样式和交互状态 - 实现消息盒子布局，包含头部、信息列表和统计标签 - 统一CSS和LESS文件中的样式修改
This commit is contained in:
A1300399510
@@ -190,17 +190,22 @@ body {
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
padding-top: 115px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
#homepage-other .matter .card-user .avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#homepage-other .matter .card-user .name-area {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
#homepage-other .matter .card-user .name-area .username {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
#homepage-other .matter .card-user .name-area .uid {
|
||||
color: #7f7f7f;
|
||||
@@ -213,12 +218,13 @@ body {
|
||||
cursor: pointer;
|
||||
}
|
||||
#homepage-other .matter .card-user .medal-area {
|
||||
margin: 0 30px;
|
||||
margin: 0 30px 44px;
|
||||
align-self: self-start;
|
||||
}
|
||||
#homepage-other .matter .card-user .medal-area .title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
#homepage-other .matter .card-user .medal-area .list {
|
||||
flex-direction: row;
|
||||
@@ -226,4 +232,83 @@ body {
|
||||
#homepage-other .matter .card-user .medal-area .list .item {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
#homepage-other .matter .card-user .btn-area .item {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ebebeb;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
}
|
||||
#homepage-other .matter .card-user .btn-area .item:not(:last-of-type) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#homepage-other .matter .card-user .btn-area .item.msg {
|
||||
background-color: #50e3c2;
|
||||
border: 1px solid #50e3c2;
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box {
|
||||
height: 452px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 19px;
|
||||
position: relative;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .header .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -55px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .header .username {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .header .icon {
|
||||
height: 40px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list {
|
||||
flex-flow: wrap;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list .item {
|
||||
width: 50%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list .item .label {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
width: 87px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list .item .value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list .item .status {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: #f0f1ec;
|
||||
border-radius: 23px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#homepage-other .matter .matter-content .message-box .info-list .item .status.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
|
||||
@@ -218,19 +218,23 @@ body {
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
flex-direction: column;
|
||||
padding-top: 115px;
|
||||
padding-top: 39px;
|
||||
padding-bottom: 40px;
|
||||
|
||||
.avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.name-area {
|
||||
margin-bottom: 40px;
|
||||
|
||||
.username {
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.uid {
|
||||
@@ -246,11 +250,13 @@ body {
|
||||
}
|
||||
|
||||
.medal-area {
|
||||
margin: 0 30px;
|
||||
margin: 0 30px 44px;
|
||||
align-self: self-start;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
|
||||
.list {
|
||||
@@ -258,12 +264,104 @@ body {
|
||||
.item {
|
||||
height: 30px;
|
||||
max-width: 30px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-area {
|
||||
.item {
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
&.msg {
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border: 1px solid rgba(80, 227, 194, 1);
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.matter-content {
|
||||
.message-box {
|
||||
height: 452px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 95px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.header {
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
padding-top: 46px;
|
||||
padding-bottom: 19px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: -55px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-list {
|
||||
flex-flow: wrap;
|
||||
padding-top: 20px;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
|
||||
.item {
|
||||
width: 50%;
|
||||
margin-bottom: 15px;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
width: 87px;
|
||||
}
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.status {
|
||||
color: #555555;
|
||||
font-size: 13px;
|
||||
padding: 0 6px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
background-color: rgba(240, 241, 236, 1);
|
||||
border-radius: 23px;
|
||||
margin-left: 10px;
|
||||
|
||||
&.blue {
|
||||
color: #ffffff;
|
||||
background-color: rgba(4, 176, 213, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,88 +1,148 @@
|
||||
<!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>
|
||||
|
||||
<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">
|
||||
<img src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WV5VHK6OikN42jDKLNjtax7HL4g2eMCJSdU9oWFhY2E~/middle"
|
||||
alt="用户头像" class="avatar">
|
||||
|
||||
<div class="name-area">
|
||||
<h3 class="username">GTSuperstar</h3>
|
||||
<p class="uid flexacenter">
|
||||
UID: 3276161
|
||||
<img class="icon" src="./img/copy-icon.png">
|
||||
</p>
|
||||
<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="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 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="btn-area">
|
||||
<div class="msg-btn">发私信</div>
|
||||
<div class="manage-btn">用户管理</div>
|
||||
<div class="content-btn">内容管理</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 class="matter-content flex1">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="module" src="./js/homepage-other.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script type="module" src="./js/homepage-other.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user