Files
Neo-ZQYY/tmp/DEMO-miniprogram/miniprogram/pages/chat-history/chat-history.wxss

178 lines
3.0 KiB
Plaintext

/* pages/chat-history/chat-history.wxss — 对话历史页样式 */
/* ========== 自定义导航栏 ========== */
.safe-area-top {
background-color: #ffffff;
}
.custom-nav {
display: flex;
align-items: center;
height: 88rpx;
padding: 0 24rpx;
position: relative;
}
.nav-back {
width: 64rpx;
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.nav-back--hover {
background-color: var(--color-gray-2);
}
.nav-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: var(--font-lg);
font-weight: 500;
color: var(--color-gray-13);
}
/* ========== 加载态 & 空态 ========== */
.page-loading,
.page-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 24rpx;
}
/* ========== 错误态 ========== */
.page-error {
display: flex;
flex-direction: column;
height: 100vh;
background-color: var(--color-gray-1);
}
.error-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 64rpx;
}
.error-icon {
font-size: 96rpx;
margin-bottom: 24rpx;
}
.error-text {
font-size: var(--font-base);
color: var(--color-gray-8);
margin-bottom: 32rpx;
}
.retry-btn {
padding: 16rpx 48rpx;
background-color: var(--color-primary);
border-radius: var(--radius-lg);
}
.retry-btn--hover {
opacity: 0.8;
}
.retry-btn-text {
font-size: var(--font-sm);
color: #ffffff;
}
/* ========== 容器 ========== */
.page-empty-wrap,
.page-normal {
min-height: 100vh;
background-color: #ffffff;
}
/* ========== 对话列表 ========== */
.chat-list {
background: #ffffff;
}
.chat-item {
display: flex;
align-items: center;
padding: 32rpx;
gap: 24rpx;
border-bottom: 2rpx solid var(--color-gray-1, #f3f3f3);
}
.chat-item--hover {
background-color: var(--color-gray-1, #f3f3f3);
}
/* 图标容器 */
.chat-icon-box {
width: 88rpx;
height: 88rpx;
border-radius: 24rpx;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4rpx 16rpx rgba(0, 82, 217, 0.2);
}
/* 内容区 */
.chat-content {
flex: 1;
min-width: 0;
}
.chat-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8rpx;
}
.chat-title {
font-size: var(--font-sm, 28rpx);
font-weight: 500;
color: var(--color-gray-13, #242424);
flex: 1;
min-width: 0;
}
.chat-time {
font-size: var(--font-xs, 24rpx);
color: var(--color-gray-6, #a6a6a6);
flex-shrink: 0;
margin-left: 16rpx;
}
.chat-bottom {
display: flex;
align-items: center;
}
.chat-summary {
font-size: var(--font-xs, 24rpx);
color: var(--color-gray-6, #a6a6a6);
max-width: 100%;
}
/* ========== 底部提示 ========== */
.list-footer {
text-align: center;
padding: 32rpx 0 64rpx;
}
.footer-text {
font-size: 20rpx;
color: var(--color-gray-5, #c5c5c5);
}