sundynix-plant-mp/pages/profile/identify-history/index.wxss

/* pages/profile/identify-history/index.wxss */

.history-page {
    min-height: 100vh;
    background: #F4F6F0;
    padding: 24rpx;
    box-sizing: border-box;
}

/* Loading & Empty */
.loading-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 200rpx;
}

.empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200rpx;
}

.empty-icon {
    width: 200rpx;
    height: 200rpx;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
}

.empty-title {
    font-size: 32rpx;
    font-weight: 700;
    color: #6B7280;
    margin-bottom: 12rpx;
}

.empty-hint {
    font-size: 26rpx;
    color: #9CA3AF;
}

/* Record List */
.record-list {
    display: flex;
    flex-direction: column;
    gap: 24rpx;
    padding-bottom: 60rpx;
}

.record-card {
    background: #fff;
    border-radius: 28rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.2s;
}

.record-card:active {
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

/* Card Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 24rpx;
}

.card-thumb {
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #F3F4F6;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
}

.card-name-row {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.card-name {
    font-size: 32rpx;
    font-weight: 700;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-badge {
    flex-shrink: 0;
    font-size: 22rpx;
    font-weight: 700;
    padding: 4rpx 14rpx;
    border-radius: 12rpx;
}

.card-time {
    font-size: 24rpx;
    color: #9CA3AF;
}

.other-hint {
    font-size: 22rpx;
    color: #9CA3AF;
    display: flex;
    flex-wrap: wrap;
    gap: 2rpx;
    margin-top: 4rpx;
}

.other-name {
    color: #6B7280;
}

.expand-arrow {
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 8rpx;
}

.expand-arrow.expanded {
    transform: rotate(180deg);
}

/* Card Detail (Expanded) */
.card-detail {
    margin-top: 28rpx;
    padding-top: 28rpx;
    border-top: 2rpx solid #F3F4F6;
    animation: fadeSlideDown 0.3s ease;
}

@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-16rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Description */
.detail-desc {
    background: #F4F6F0;
    border-radius: 20rpx;
    padding: 24rpx;
    margin-bottom: 28rpx;
}

.desc-text {
    font-size: 26rpx;
    line-height: 1.7;
    color: #4B5563;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Result Bars */
.detail-results {
    margin-bottom: 24rpx;
}

.detail-label {
    font-size: 24rpx;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 20rpx;
    display: block;
}

.result-bars {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
}

.result-bar-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
}

.bar-name {
    width: 120rpx;
    font-size: 26rpx;
    font-weight: 600;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.bar-track {
    flex: 1;
    height: 16rpx;
    background: #F3F4F6;
    border-radius: 8rpx;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 8rpx;
    background: linear-gradient(90deg, #A5D6A7, #66BB6A);
    transition: width 0.5s ease;
}

.bar-fill.top {
    background: linear-gradient(90deg, #66BB6A, #388E3C);
}

.bar-score {
    width: 80rpx;
    font-size: 24rpx;
    font-weight: 600;
    color: #6B7280;
    text-align: right;
    flex-shrink: 0;
}

/* Meta */
.detail-meta {
    display: flex;
    align-items: center;
    gap: 8rpx;
    padding-top: 16rpx;
}

.meta-text {
    font-size: 22rpx;
    color: #9CA3AF;
}

/* Load More */
.load-more {
    display: flex;
    justify-content: center;
    padding: 32rpx 0;
}

.no-more {
    text-align: center;
    padding: 32rpx 0;
    font-size: 24rpx;
    color: #D1D5DB;
}