589 lines
12 KiB
Text
589 lines
12 KiB
Text
/* 🎨 现代化消息页面设计 - 深色主题 */
|
|
|
|
/* 🎨 CSS变量定义 - 黑色主题 */
|
|
page {
|
|
--primary-color: #0A84FF;
|
|
--primary-light: #3EA8FF;
|
|
--primary-dark: #0056CC;
|
|
--background-color: #070709;
|
|
--surface-color: #0F0F11;
|
|
--text-primary: #ECECEC;
|
|
--text-secondary: #A8A8A8;
|
|
--text-tertiary: #7A7A7A;
|
|
--border-color: rgba(255,255,255,0.06);
|
|
--shadow-light: 0 1rpx 6rpx rgba(0,0,0,0.6);
|
|
--shadow-medium: 0 6rpx 18rpx rgba(0,0,0,0.7);
|
|
--radius-small: 8rpx;
|
|
--radius-medium: 12rpx;
|
|
--radius-large: 20rpx;
|
|
--safe-area-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
/* 🌙 深色模式支持 */
|
|
@media (prefers-color-scheme: dark) {
|
|
page {
|
|
--primary-color: #0A84FF;
|
|
--primary-light: #64D2FF;
|
|
--primary-dark: #0056CC;
|
|
--background-color: #000000;
|
|
--surface-color: #1C1C1E;
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #8E8E93;
|
|
--text-tertiary: #48484A;
|
|
--border-color: #38383A;
|
|
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
|
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
|
|
.telegram-container {
|
|
min-height: 100vh;
|
|
/* height: calc( 100vh - 250px); */
|
|
background: var(--background-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: var(--safe-area-bottom);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
color: var(--text-primary);
|
|
transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
|
|
/* border: 10rpx solid red; */
|
|
font-weight: 24rpx;
|
|
|
|
}
|
|
|
|
/* 关键区域同步过渡，避免突变 */
|
|
.search-section,
|
|
.search-bar,
|
|
.conversation-item,
|
|
.empty-state,
|
|
.telegram-header {
|
|
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
|
|
}
|
|
.telegram-header{
|
|
/* border: 1px solid red; */
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: 85%;
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
|
|
}
|
|
.Search-header-left{
|
|
width: 640rpx;
|
|
height: 80rpx;
|
|
background-color: white;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-radius: 40rpx;
|
|
|
|
}
|
|
.Search-input{
|
|
width: 80%;
|
|
/* border: 1px solid red; */
|
|
margin-left: 30rpx;
|
|
}
|
|
.Search-img{
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
.Search-img-add{
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
vertical-align: bottom;
|
|
margin-left: 20rpx;
|
|
|
|
}
|
|
.group-chat{
|
|
height: 120rpx;
|
|
/* border: 1px solid red; */
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
background-color: #1A1A1A;
|
|
|
|
|
|
}
|
|
.group-chat-conten{
|
|
/* border: 1px solid red; */
|
|
display: flex;
|
|
justify-content:space-around;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
width: 660rpx;
|
|
}
|
|
.chat-left{
|
|
/* border: 1px solid red; */
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items: center;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background-color:#212121;
|
|
border-radius: 24rpx;
|
|
}
|
|
.chat-text{
|
|
width: 500rpx;
|
|
height: 76rpx;
|
|
display: flex;
|
|
justify-content:space-between;
|
|
align-items: center;
|
|
}
|
|
.titel{
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
}
|
|
.chat-img{
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
.chat-img-rigth{
|
|
width: 34rpx;
|
|
height: 34rpx;
|
|
margin-right: 50rpx;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
.chat-conten{
|
|
height: 100%;
|
|
/* border: 1px solid red; */
|
|
box-sizing: border-box;
|
|
padding-bottom: 100rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
.conten-area{
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 130rpx;
|
|
background-color:#212121;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 0;
|
|
margin-top: 10rpx;
|
|
width: 650rpx;
|
|
margin-left: 50rpx;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
|
|
.conten-area-img{
|
|
height: 100rpx;
|
|
width:100rpx;
|
|
border-radius: 24rpx;
|
|
vertical-align: bottom;
|
|
}
|
|
.conten-area-center{
|
|
|
|
width: 500rpx;
|
|
height: 80rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
}
|
|
.center-titel{
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
}
|
|
.header-content {
|
|
height: 66rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start; /* 改为起始对齐，按钮通过 margin-left:auto 靠右 */
|
|
padding: 0 32rpx;
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: white;
|
|
text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.4);
|
|
}
|
|
.center-time{
|
|
/* border: 1px solid red; */
|
|
margin-right: 40rpx;
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
margin-left: auto; /* 将按钮组推到最右侧 */
|
|
}
|
|
|
|
.header-btn {
|
|
width: 50rpx; /* 与图标一致，避免可见留白 */
|
|
height: 50rpx;
|
|
border-radius: 8rpx; /* 小幅圆角以贴合图片边缘 */
|
|
background: transparent; /* 透明，无底色 */
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.2s ease; /* 去掉背景过渡，仅保留轻微缩放反馈 */
|
|
}
|
|
|
|
.header-btn:active {
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.header-icon {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* 🎨 现代化内容区域 */
|
|
.telegram-content {
|
|
/* flex: 1; */
|
|
height: 90vh;
|
|
background: transparent;
|
|
box-sizing: border-box;
|
|
|
|
/* 让内容自然流式布局，避免覆盖搜索栏与头部 */
|
|
/* position: relative; */
|
|
/* border: 10px solid greenyellow; */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
/* padding-bottom: 260rpx */
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.telegram-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* 🎨 现代化搜索栏 */
|
|
.search-section {
|
|
padding: 20rpx 32rpx;
|
|
background: var(--background-color);
|
|
border-bottom: 1rpx solid var(--border-color);
|
|
animation: searchSlideDown 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes searchSlideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20rpx);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.search-bar {
|
|
height: 80rpx;
|
|
background: var(--background-color);
|
|
border: 1rpx solid var(--border-color);
|
|
border-radius: var(--radius-large);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 28rpx;
|
|
gap: 16rpx;
|
|
box-shadow: var(--shadow-light);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.search-bar:focus-within {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
|
|
}
|
|
|
|
.search-icon { color: var(--text-secondary); font-size:32rpx; }
|
|
.search-input { flex:1; font-size:32rpx; color:var(--text-primary); background:transparent }
|
|
.search-input::placeholder {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.search-cancel {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: var(--radius-small);
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.search-cancel:active {
|
|
background: rgba(0, 122, 255, 0.1);
|
|
}
|
|
|
|
.cancel-text {
|
|
font-size: 32rpx;
|
|
color: var(--primary-color);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 🎨 现代化会话列表 */
|
|
.conversations-section {
|
|
background: transparent;
|
|
border-radius: var(--radius-large) var(--radius-large) 0 0;
|
|
margin-top: 16rpx;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
padding-bottom: 200rpx; /* 保留空间给底部操作栏，避免白条 */
|
|
}
|
|
|
|
/* 更紧凑 + 国际化（略微灰背景 & 居中收窄） */
|
|
.conversation-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 22rpx 28rpx; /* 缩小整体高度与左右留白 */
|
|
transition: all 0.22s ease;
|
|
position: relative;
|
|
background: rgba(255,255,255,0.05); /* 更明显的浅灰块（暗色） */
|
|
margin: 0 auto 16rpx; /* 底部分隔形成卡片间距 */
|
|
width: 100%;
|
|
max-width: 1180rpx; /* 大屏时不过宽 */
|
|
border-radius: 20rpx; /* 轻圆角 */
|
|
backdrop-filter: blur(3px);
|
|
-webkit-backdrop-filter: blur(3px);
|
|
border: 1rpx solid rgba(255,255,255,0.10); /* 明确边界 */
|
|
box-shadow: 0 2rpx 4rpx rgba(0,0,0,0.35), 0 4rpx 14rpx -4rpx rgba(0,0,0,0.4);
|
|
}
|
|
|
|
.conversation-item:active { background: rgba(255,255,255,0.08); transform: scale(0.992); }
|
|
|
|
.conversation-item:last-child { border-bottom: none; }
|
|
|
|
/* 🎨 现代化头像设计 */
|
|
.conversation-avatar { position: relative; margin-right: 28rpx; }
|
|
.avatar-image { width:108rpx; height:108rpx; border-radius:54rpx; box-shadow: var(--shadow-light); border: 2rpx solid rgba(255,255,255,0.03); }
|
|
.avatar-placeholder { width:108rpx; height:108rpx; border-radius:54rpx; background: linear-gradient(135deg, #151516 0%, #0F0F11 100%); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-light); }
|
|
.avatar-text { font-size:40rpx; font-weight:600; color:var(--text-primary); }
|
|
|
|
/* 在线状态角标（右下角小圆点） */
|
|
.presence-indicator {
|
|
position: absolute;
|
|
right: 2rpx;
|
|
bottom: 2rpx;
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
border-radius: 50%;
|
|
border: 4rpx solid var(--surface-color);
|
|
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.35);
|
|
z-index: 3;
|
|
}
|
|
.presence-indicator.online { background: #2ECC71; }
|
|
.presence-indicator.offline { background: #9E9E9E; opacity: 0.9; }
|
|
|
|
/* 🎨 现代化未读徽章 */
|
|
.unread-badge {
|
|
position: absolute;
|
|
top: -6rpx;
|
|
right: -6rpx;
|
|
min-width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 22rpx;
|
|
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 3rpx solid var(--surface-color);
|
|
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.6);
|
|
z-index: 2;
|
|
}
|
|
.unread-count { font-size:22rpx; font-weight:700; color:white }
|
|
|
|
/* 🎨 现代化会话信息 */
|
|
.conversation-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6rpx;
|
|
}
|
|
|
|
.conversation-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.conversation-name {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
font-size: 34rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
/* 允许在 flex 容器内正确触发省略号 */
|
|
min-width: 0;
|
|
margin-right: 16rpx;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.conversation-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
/* 保留时间+静音的显示空间，避免被名称挤没 */
|
|
flex: 0 0 auto;
|
|
flex-shrink: 0;
|
|
min-width: 120rpx;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.conversation-time {
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
font-size: 26rpx;
|
|
white-space: nowrap;
|
|
/* 避免被压缩隐藏 */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mute-icon {
|
|
font-size: 24rpx;
|
|
color: var(--text-tertiary);
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* 🎨 现代化会话预览 */
|
|
.conversation-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.last-message {
|
|
color: var(--text-secondary);
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.message-indicators {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
}
|
|
|
|
.status-indicator {
|
|
color: var(--text-secondary);
|
|
font-size: 20rpx;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.status-indicator.read {
|
|
color: var(--primary-color);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 🎨 现代化空状态 */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 64rpx;
|
|
color: rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 32rpx;
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.empty-subtitle {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* 📱 响应式设计 - 适配不同屏幕尺寸 */
|
|
@media screen and (max-width: 375px) {
|
|
.conversation-item {
|
|
padding: 20rpx 24rpx;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.avatar-image, .avatar-placeholder {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 48rpx;
|
|
}
|
|
|
|
.conversation-name {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.last-message {
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 414px) {
|
|
.conversation-item {
|
|
padding: 24rpx 30rpx; /* 即便大屏也保持克制 */
|
|
}
|
|
|
|
.avatar-image, .avatar-placeholder {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
}
|
|
|
|
.conversation-name {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.last-message {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
/* 🎨 会话项增强功能 */
|
|
.conversation-item.pinned {
|
|
background: linear-gradient(90deg, rgba(0, 122, 255, 0.05) 0%, transparent 100%);
|
|
border-left: 4rpx solid var(--primary-color);
|
|
}
|
|
|
|
.conversation-item.muted .conversation-name {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.conversation-item.muted .last-message {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* 🎨 加载状态 */
|
|
.loading-state {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80rpx 32rpx;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 4rpx solid var(--border-color);
|
|
border-top: 4rpx solid var(--primary-color);
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 🎨 搜索结果高亮 */
|
|
.search-highlight {
|
|
background: linear-gradient(135deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
|
|
border-radius: 4rpx;
|
|
padding: 0 4rpx;
|
|
}
|