// 消息清单样式

.list {
    padding: 20rpx;
    font-size: 26rpx;
}

.list-title {
    color: #999;
    margin-bottom: 20rpx;
    padding-left: 50rpx;
    background: url(https://image.jxc4.com/image/8c8763df4642d3eddfd9ff0b5ac562ac.png) left center no-repeat;
    background-size: contain;
}

.list-item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-top: 40rpx;
    box-shadow: 0 1rpx 1rpx rgba(black, .2),
        0 8rpx 0 -3rpx white,
        0 9rpx 1rpx -3rpx rgba(black, .2),
        0 16rpx 0 -6rpx white,
        0 17rpx 2rpx -6rpx rgba(black, .2);
}

.new-icon,
.old-icon {
    width: 90rpx;
    font-size: 20rpx;
    flex-shrink: 0;
    background: #d81e06;
    border-radius: 80rpx;
    color: white;
    text-align: center;
    padding: 10rpx;
}

.new-icon {
    animation: bigSmall 1s infinite;
    animation-fill-mode: both;
}

.old-icon {
    background: #ccc;
    color: white;
}

.content {
    display: flex;
    align-items: center;

    .title {
        margin-left: 20rpx;
        width: 560rpx;
        font-size: 36rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;
        font-weight: 500;
    }
}

.create-time {
    text-align: right;
    color: #999;
}


@keyframes bigSmall {
    0% {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    100% {
        transform: scale3d(1, 1, 1);
    }
}