upload project
This commit is contained in:
commit
06961cae04
422 changed files with 110626 additions and 0 deletions
781
pages/message/message.wxss
Normal file
781
pages/message/message.wxss
Normal file
|
|
@ -0,0 +1,781 @@
|
|||
/* 🎨 现代化消息页面设计 - 深色主题 */
|
||||
|
||||
/* 🎨 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: 90%;
|
||||
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;
|
||||
color: #000000; /* 🔥 文字颜色设置为黑色 */
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/* 🔥 搜索框占位符颜色 */
|
||||
.Search-input::placeholder {
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.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{
|
||||
/* 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
|
||||
}
|
||||
|
||||
.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: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid var(--surface-color);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.4);
|
||||
z-index: 3;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 在线状态：亮绿色 + 发光效果 */
|
||||
.presence-indicator.online {
|
||||
background: #2ECC71;
|
||||
box-shadow: 0 0 12rpx rgba(46, 204, 113, 0.6), 0 2rpx 8rpx rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
/* 离线状态：灰色 + 降低透明度 */
|
||||
.presence-indicator.offline {
|
||||
background: #9E9E9E;
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 🎨 现代化未读徽章 */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ====================================
|
||||
🔍 云端搜索结果面板样式
|
||||
==================================== */
|
||||
|
||||
/* 清除按钮 */
|
||||
.Search-clear {
|
||||
position: absolute;
|
||||
right: 80rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.Search-clear:active {
|
||||
transform: scale(0.9);
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.Search-header-left {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 搜索结果面板 */
|
||||
.search-results-panel {
|
||||
background: var(--surface-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
max-height: 600rpx;
|
||||
overflow: hidden;
|
||||
animation: slideDown 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
max-height: 600rpx;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 搜索结果头部 */
|
||||
.search-results-header {
|
||||
padding: 24rpx 32rpx 16rpx;
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
}
|
||||
|
||||
.results-title {
|
||||
font-size: 26rpx;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 搜索结果列表 */
|
||||
.search-results-list {
|
||||
max-height: 500rpx;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* 搜索结果项 */
|
||||
.search-result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx;
|
||||
background: var(--surface-color);
|
||||
border-bottom: 1rpx solid var(--border-color);
|
||||
transition: background-color 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-result-item:active {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
/* 结果头像 */
|
||||
.search-result-item .result-avatar {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
margin-right: 24rpx;
|
||||
background: linear-gradient(135deg, #1B1B1D 0%, #101012 100%);
|
||||
}
|
||||
|
||||
.search-result-item .result-avatar .avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.search-result-item .result-avatar .avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* 结果信息 */
|
||||
.result-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.result-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
font-size: 24rpx;
|
||||
color: var(--primary-color);
|
||||
margin-left: 16rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.result-preview {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-secondary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* 结果箭头 */
|
||||
.result-arrow {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 16rpx;
|
||||
font-size: 48rpx;
|
||||
color: var(--text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 空结果提示 */
|
||||
.search-results-empty {
|
||||
padding: 80rpx 32rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.search-results-empty text {
|
||||
font-size: 28rpx;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue