优化界面布局: 简化短信列表,增强统计信息详情
Changes: - 短信列表: 简化为列表视图,只显示号码、时间、完整内容 - 统计信息: 最近接收增加详细参数(签名、IP、详情链接) - 统计信息: 显示从10条增加到20条 - 优化CSS样式,提升可读性
This commit is contained in:
@@ -95,33 +95,102 @@
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
.detailed-list {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.recent-list li {
|
||||
padding: 15px;
|
||||
.detailed-list li {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.recent-list li:last-child {
|
||||
.detailed-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recent-list .from {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
.detailed-list li:hover {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.recent-list .time {
|
||||
.detailed-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.detailed-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.detailed-id {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
margin-left: 10px;
|
||||
background: #f0f0f0;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.recent-list .content {
|
||||
.from-number {
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.detailed-content {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.msg-detail {
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 10px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-tag {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-link {
|
||||
font-size: 12px;
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
padding: 4px 10px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.detail-link:hover {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sign-verified {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.numbers-list {
|
||||
@@ -213,17 +282,37 @@
|
||||
<div class="section">
|
||||
<h3>📬 最近接收</h3>
|
||||
{% if recent %}
|
||||
<ul class="recent-list">
|
||||
<ul class="detailed-list">
|
||||
{% for msg in recent %}
|
||||
<li>
|
||||
<span class="from">{{ msg.from_number }}</span>
|
||||
<span class="time">{{ msg.created_at }}</span>
|
||||
<div class="content">{{ msg.content[:100] }}{% if msg.content|length > 100 %}...{% endif %}</div>
|
||||
<div class="detailed-header">
|
||||
<div class="detailed-info">
|
||||
<span class="from-number">{{ msg.from_number }}</span>
|
||||
<span class="detailed-id">ID: {{ msg.id }}</span>
|
||||
</div>
|
||||
<span class="msg-time">{{ msg.created_at }}</span>
|
||||
</div>
|
||||
<div class="detailed-content">
|
||||
<div class="msg-detail">{{ msg.content }}</div>
|
||||
<div class="msg-meta">
|
||||
<span class="meta-tag">
|
||||
{% if msg.sign_verified %}
|
||||
<span class="sign-verified yes">✓ 已验证</span>
|
||||
{% else %}
|
||||
<span class="sign-verified no">✗ 未验证</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if msg.ip_address %}
|
||||
<span class="meta-tag">🌐 {{ msg.ip_address }}</span>
|
||||
{% endif %}
|
||||
<a href="/message/{{ msg.id }}" class="detail-link">查看详情</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
暂无数据
|
||||
暂无数据
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user