/*筛选*/
.search-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 20px 10px 10px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px #ddd;
}

.search-container .select-label {
    width: 55px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #666666;
}

.search-container .select-province {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 95%;
}

.search-container .select-province li {
    width: 55px;
    height: 32px;
    line-height: 32px;
    background: #f6f6f6;
    margin-right: 10px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
}

.search-container .select-province li.active {
    background: #dc2121;
    color: #fff;
}


/*列表*/
.list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.list li {
    width: 380px;
    padding: 20px 20px;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 5px #ddd;
    cursor: pointer;
}

.list li:hover {
    box-shadow: 0 0 1px #dc2121;
}

.list li .list-name {
    display: flex;
    align-items: center;
}

.list li .list-name .avatar {
    width: 36px;
    height: 36px;
    line-height: 36px;
    background: #dc2121;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}

.list li .list-name .name {
    flex: 1;
    margin-left: 10px;
}

.list li .list-name .name p {
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    max-width: 270px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list li .list-name .name span {
    font-size: 12px;
    color: #999;
}

.list li .list-name .attend {
    width: 16px;
    height: 16px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABtUlEQVQ4T6WSO0vDUBTHzcO01sVYlEJXwUXBRT+DDi4KXZzSYNP4GooOgoWgjlIphKQNpZWWgnQQncTFL6CIi8VRcHDQRcQibZr6v6UpsS8CBi735txzfvd/HtTQPz+qMz6Xy43VarVgJBJ5ct7puj5D0/SrJEmfTnsbkM1mJxB40Gg0qhRFcdjn4XiMxWDtwvYAm4Wdxf8RQB8E1ATk8/nRSqVyDodtWZZfiC2RSIz4fL4iAr55nhdDoVCV2DOZzJRpmkmPx7MqCMJPEwB56wzDPEL2nVOepmk8HE1RFL+cdsMwlur1+jgeKzYBqVRKj0ajstt6QsU4VCiI2bEBMY7jCuFw+N0NBMqmUdBFAJJ2CgswzKEwhhtAOp2Oo17XANy3uwCjBhUxUphBEFVV/SzLniBYaHeBHACYxbYFFVI/gKIodCAQuEJn9uD2/AfQ6sYaUpnE5WkvCB5RIf0Wr1/Y912TCKdNOPnhdGg7wTZMxsWyrBu07swJ7wK02rqCfRnDteHFhxkpkBmCsstOZT0BrXSCSCeOsxdrH8FvvdLqCyDOpVKJK5fLFopn9ivsQICbmfgF4CSuEYk+g18AAAAASUVORK5CYII=);
}

.list li .list-name .unAttend {
    width: 16px;
    height: 16px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC1ElEQVRIS7WVS2gTURSG772ZllSNqBSjsZm50zQoFdSVqEhRulKoblSkuhQtlZYu1K50IRaEutCFUupCum3BhQhVi6joSt1YF1XzmEkmkUiJWNzkMZnrP4XUJu3k0dBsksk95//OPa+hZJ0/dJ31iSNAENIc9fv3uRhL81hMKw8E5zQuy6opxLZ2w5iFUG61YFcAoqraVSDkOhWim1AaEkJsopRKcB7p0LRxWySkKFfx3zWc5/GYBSyI71cu0xwF7P1yUAkgzPmgoHSUWtZtkc2OB1Opeds44vPJorl5Aj8/QnQDEcInMpm+4nnc7/flJKkfoGEmxEBA18eKkCWAxvmeAqVvqWn2BAzjU/l1U17vxr8tLZ8ReTqgacfgaJbbhBXlBAJ4KgnRWUzrEgDRP8HDF9DvOxUe6duNs0y7psWcbMKq+ti2QToHbJv/AFX9LnK57mAymWiks0KcH4L/WFDXD5QDfoHqbUTc9o3J8ta8yzUHrR3lgB/uXO5wWzKZbgQSkuW9hLEp3KCzFMD5BDroeVDTphoBRDgfQmt3dsRil0sAEUU5aTHWB8CpRgAo8ldiWYMAvCkB2JMZUdVvjJCz6JLZtUDQZT0WIXeQ//0r5mBxQlX1HCZ4qEPXj9QLMNraWrJNTXNIzxXk/+WqgEUI5y9wi2nMw4N6IAjuISZ8C8QvLPdbsYvmW1s9Cx7PB6TsJurxrBYIhvQGJviMS4guVdczFQH2IXLpRS5nUKxhFGu6EgSLrx/ilxhjxwPR6EK5reO6Dvt8fiy4d3AedmpdtOQtBHLebZpH/YnE79UCqfjC0RVlp8nYJAo/067rIzDGJicEi9GNTfcIi2870nIRafnjdMuqbzTUwoUc34PhQUZpr8jnN1uSNAnBCRT0brUaVQUUBdBdp/HbjlqihUJvIB5/XU28ZNBqMUav78I6EbJh/KzFvm5AraJV23QtQk4+/wACqxwoSkGULQAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
}

.list li .list-name .attend:hover {
    width: 16px;
    height: 16px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAC1ElEQVRIS7WVS2gTURSG772ZllSNqBSjsZm50zQoFdSVqEhRulKoblSkuhQtlZYu1K50IRaEutCFUupCum3BhQhVi6joSt1YF1XzmEkmkUiJWNzkMZnrP4XUJu3k0dBsksk95//OPa+hZJ0/dJ31iSNAENIc9fv3uRhL81hMKw8E5zQuy6opxLZ2w5iFUG61YFcAoqraVSDkOhWim1AaEkJsopRKcB7p0LRxWySkKFfx3zWc5/GYBSyI71cu0xwF7P1yUAkgzPmgoHSUWtZtkc2OB1Opeds44vPJorl5Aj8/QnQDEcInMpm+4nnc7/flJKkfoGEmxEBA18eKkCWAxvmeAqVvqWn2BAzjU/l1U17vxr8tLZ8ReTqgacfgaJbbhBXlBAJ4KgnRWUzrEgDRP8HDF9DvOxUe6duNs0y7psWcbMKq+ti2QToHbJv/AFX9LnK57mAymWiks0KcH4L/WFDXD5QDfoHqbUTc9o3J8ta8yzUHrR3lgB/uXO5wWzKZbgQSkuW9hLEp3KCzFMD5BDroeVDTphoBRDgfQmt3dsRil0sAEUU5aTHWB8CpRgAo8ldiWYMAvCkB2JMZUdVvjJCz6JLZtUDQZT0WIXeQ//0r5mBxQlX1HCZ4qEPXj9QLMNraWrJNTXNIzxXk/+WqgEUI5y9wi2nMw4N6IAjuISZ8C8QvLPdbsYvmW1s9Cx7PB6TsJurxrBYIhvQGJviMS4guVdczFQH2IXLpRS5nUKxhFGu6EgSLrx/ilxhjxwPR6EK5reO6Dvt8fiy4d3AedmpdtOQtBHLebZpH/YnE79UCqfjC0RVlp8nYJAo/067rIzDGJicEi9GNTfcIi2870nIRafnjdMuqbzTUwoUc34PhQUZpr8jnN1uSNAnBCRT0brUaVQUUBdBdp/HbjlqihUJvIB5/XU28ZNBqMUav78I6EbJh/KzFvm5AraJV23QtQk4+/wACqxwoSkGULQAAAABJRU5ErkJggg==);
    background-size: 100% 100%;
}

.list .list-purchase {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    margin-bottom: 15px;
}

.list .list-purchase div {
    width: 160px;
    background: #f8f8f8;
    padding: 10px;
    border-radius: 8px;
}

.list .list-purchase div:last-of-type {
    background: #fcf0f0;
}

.list .list-purchase div span {
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #dc2121;
}

.list .list-purchase div span:last-of-type {
    margin-top: 4px;
    font-size: 12px;
    color: #999;
    font-weight: normal;
}

.list .list-date {
    display: flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 6px;
}

.list .list-date img {
    display: block;
    width: 14px;
    height: 14px;
    margin-left: 15px;
    margin-right: 8px;
}

.list .list-date span {
    display: block;
    font-size: 12px;
    height: 28px;
    line-height: 30px;
}

.list .list-date span:first-of-type {
    color: #666;
}

.list .list-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
}

.list .list-user .list-user-left {
    display: flex;
    align-items: center;
}

.list .list-user .list-user-left .list-user-avatar {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #e45656;
    color: #fff;
    border-radius: 50%;
}

.list .list-user .list-user-left .list-user-info {
    margin-left: 10px;
    font-size: 12px;
}

.list .list-user .list-user-left .list-user-info span {
    color: #999;
}

.list .list-user .list-user-right {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    color: #666;
    background: #f2f2f2;
    border-radius: 5px;
}

.list .list-user .list-user-right:hover {
    background: #fcf0f0;
    color: #dc2121;
}

.list .list-user .list-user-right img {
    width: 10px;
    height: 10px;
}

.list .list-user .list-user-right p {
    margin-left: 3px;
}