app.wxss

.detail-list .list-item {
    background-color: #fff;
    margin-bottom: 6rpx;
    overflow: hidden;
}

.detail-list .list-item .hd {
    display: flex;
    padding: 20rpx 20rpx 0;
    align-items: center;
}

.detail-list .hd .hot-wrap {
    margin: 0 auto;
    font-size: 12px;
    width: 40rpx;
    line-height: 1.5;
    text-align: center;
    background: #ff819f;
    color: #fff;
    margin-right: 2rpx;
    transform: scale(.6);
}

.detail-list .hd .avatar {
    display: block;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 1rpx solid #f3f3f3;
}

.detail-list .hd .username {
    flex: 1;
    color: #787878;
    font-size: 14px;
}


/* 中间内容 */

.detail-list .bd {
    font-size: 16px;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.5;
}

.detail-list .bd .text-wrapper {
    padding: 5px 10px;
}

.detail-list .bd .bar-link {
    display: inline-block;
    border-radius: 12rpx;
    padding: 0 10rpx;
    border: 2rpx solid #5e96b4;
    color: #5e96b4;
    font-size: 14px;
}

.detail-list .bd .video-wrapper {
    display: flex;
    position: relative;
    max-height: 600rpx;
    overflow: hidden;
}

.detail-list .video-wrapper .video-thumb {
    width: 100%;
}

.detail-list .video-wrapper .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(data:image/png;base64,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) no-repeat center center;
    background-size: 100%;
    width: 120rpx;
    height: 120rpx;
}

.detail-list .video-wrapper .video-desc {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.detail-list .video-desc .play-count {
    float: left;
}

.detail-list .video-desc .num {
    color: #ff819f;
}

.detail-list .video-desc .play-duration {
    float: right;
}

.detail-list .preview-wrapper {
    position: relative;
    overflow: hidden;
    max-height: 1000rpx;
}

.detail-list .preview-wrapper .preview-img {
    width: 100%;
}

.detail-list .preview-wrapper .long-img {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    background: url(//s3.pstatp.com/resource/neihan_wap/static/image/long-img-bg_b8c6002.png) repeat-x center center;
    background-size: auto 100%;
}

.detail-list .preview-wrapper .long-text {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 60rpx;
    background: url(//s3a.pstatp.com/resource/neihan_wap/static/image/long-img-icon_e84cd76.png) no-repeat left center;
    background-size: auto 40%;
}

.detail-list .preview-wrapper .preview-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAFM0lEQVR4Xu1b4XnbNhB9N0HVCZpOUGWCOBPEmSCmFog6AcEuEGcB0Zkg9gRxJogzQZUJ6kxw/Q6EZIIECICkSNox//gHReDu4d3h7gEm/OIP/eL+4xmAZwZMgAD/s3sFpjMw1gBWIJw5p2XcAdiD5C/fUb65ObV5JwsBLnbvwHQOwvkgJxjXIL4G0w2p7H7QWI6PRwWAVSmr+x6MLQirsY0F4wpAQSrbjzX2KAAcHQfUWIZ1jlMB8fcYjBgMAKtSKP4BhBeTOH+YhHEPgqI8+zhk3t4A6FWvHL8YYsDgbyVHAFlfNvQCwDj/BaSz+vwPQ3LCW1KZ7CJJTzIArEpx+vPklA+5JSEBvE4FIQkA47ys/PgZPuRgzPseIEQDYGj/bXEr3wQmEYQUAMT5ZcR8iA1VTngZkxijAOCivATwPjTvot4zrkllb0M2BQFgVZ6B8CU00CLfsy6WZPG8TycAjybufe5V+eDPrlDoBqAopbTNF7m60UbxJ8o33mLNC4BZ/X8Xu+VFAwCANQucDZQfgCex+sfGwcuCLgbI6kc0OPwTkHqcagizfLcG6K+UhTrpbxm/u3KBEwDd4RE+dxvEP8C0JZVJM+J8dOVIrAB64x2Ldfl6K++dO07tfQpAXJRs/Z51wyRttPW4ASh2VwC980/YnVhaxZkqL0Ao3ShNBAD4hvJNS53yMeA/f/JrO8/F7g1Aa7DW+vYgvm1KWF5WTcUATbF2GLQAqGiLbx5Sf6d8cyyHTXNUOktkR03OxU5yhR0OCQAMLspYt8xWyLoAED3vQwRdpSPsbo4qEKQm1wkyFOO93qckBtET88yS7doAeOt+/kr55ihnJ/QHHynPtscNqdjdA/Tb0e4pGeDIAw4AdrcAvWoB26irWZUdeaL2dcWCulIjIfagJ0wJAOOOVPay7lsKAEJl7cjgWKxbMCUAACjPLJ9dOcC5svUPecwqMQ0AYU5IkxCGuXNYFADNAsKsVhwA/AOgVrFhhxOfWSGWAEBMvguxM8yAYQBYidJlcIs9ywNgtwfoj1bJWIsdfwjYO8XYAJi6w0tvM58cz3nDJIIB3l0gnATbGf+AgSgzVQJt5o8EBoToHRMiQwCw5CVu7udds9dK0HkBYKuSFZNdhZBbBWLckspePxQ0sUKpPenMALQaotRSuB4GK930hHr+Rv09LwAxpXBXM9SopEy/L62zW/hw9OCzAuDQFnx6gHMn0PRnXJHKMquYqwSUNSB7PPZgkoQnuvyhCVod1Jg5AWgmQGcOqDJ1QBBxgODLgYet65A/5gMgTRAJH4bI8RPxtusiExdlfrwuY3aC2QBIkcQMC/xhYDcz0u1dg/R5XPWwFlMlLBZyisw/wfQiWhR1FiwxVcZyf2NpEnUzuw9GiIUFD+LFch3stqzPwcgTYoF39b27gBXihbs5ehxk8Mf+wf6nfjzeUoGbCxcE4PGGQtzhTRQAZlt0i6WLjAX+LpezR7siowHQ94Ajmp/ZAdFxv469TxzNgBoIC94atfOy8tEXJpMAWDYT0p2P2gZdjDbhIOd87QOUWUIgPuZ77QLeTm/M84HewPEnc0+h1z9TJIdA085KqGQRRVpKcm+foj4MX9CIGWYwAIdJqjaXt6fvHeRKDl2CcRmzzYVAGA2AhwSJLcAX4zNiXMejS+EQgt78oGUylisp5/1ZYS5gMYm85r2L1NfG3rtA6oRGFhOVaWV0QxlCbpHVWm3+Wo1Ld6guO4sMH72fp9p0cgb0NWjq70bNAVMbP8Z8zwCMgeJjHuN/4YdWbp2mTacAAAAASUVORK5CYII=) no-repeat center center;
    background-size: 100%;
    width: 120rpx;
    height: 120rpx;
}

.detail-list .thumb-wrapper {
    display: flex;
    flex-flow: wrap;
    background-color: #f2f2f5;
}

.detail-list .thumb-wrapper .thumb-item {
    width: 32%;
    margin-left: 1%;
    margin-bottom: 1%;
    box-sizing: border-box;
    position: relative;
}

.detail-list .thumb-wrapper .thumb-item.is_gif::after {
    content: 'GIF';
    position: absolute;
    right: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    font-size: 10px;
    border-radius: 16rpx 0 0 0;
    padding: 6rpx 10rpx;
}


/* 底部*/

.detail-list .ft {
    display: flex;
    height: 90rpx;
    align-items: center;
    font-size: 14px;
    background-color: #fff;
}

.bdr-top,
.bdr-bottom {
    position: relative
}

.bdr-top:before {
    height: 1px;
    content: '';
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    position: absolute;
    top: -1px;
    right: 0;
    transform: scaleY(0.5);
    z-index: 10;
}

.bdr-bottom:after {
    height: 1px;
    content: '';
    width: 100%;
    border-top: 1px solid #f0f0f0;
    position: absolute;
    bottom: -1px;
    right: 0;
    transform: scaleY(0.5);
    z-index: 10;
}

.detail-list .ft .btn {
    flex: 1;
    text-align: center;
    color: #999;
}

.detail-list .ft .btn-text {
    display: inline-block;
    text-align: left;
    background-repeat: no-repeat;
    padding-left: 50rpx;
    background-size: auto 60%;
    line-height: 60rpx;
    box-sizing: border-box;
    white-space: nowrap;
}

.detail-list .ft .btn-digg .btn-text {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAeCAMAAACVFoclAAAAP1BMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzFR7UUAAAAFHRSTlMAHt938PzJjQUQmE861aqpfW5WLxpLLXgAAAB+SURBVCjPrdBJDsIwEETR9th2Eua6/1lBkUBYsfgb/vqpFmXHwsm7/SpEqTYA0kpAiYBWAqUDUCWgKwE9CESbdtanmt7dwpfImpU3095LaF5FUVDoDxsRhZMogcTFSGwkqpG4k4iNRDIQuZNwG0SevDUKP4jFRtF8XMlL28ETgFgt8tnmHnEAAAAASUVORK5CYII=);
    background-position: left 8rpx;
}

.detail-list .ft .btn-bury .btn-text {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAeCAMAAACVFoclAAAAOVBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz15oL/AAAAEnRSTlMAH9+I7/zJkHUKUdSqNxfhmC76jFC/AAAAgElEQVQoz6XPSQ6DQBBDUTddPTIk8f0PGyVSKAIIL/jrJ0sGvwFoxbjNSsMnF4X7njthB5HCv+CxKIU1JVileEjBLkWWgrMUkxQpKMEoxSBFkoK4v5GxZqfAZhcT18b4qwZ4y7B5eF5w8pKkQpEMRdIiSYciFYp0CJJxWRhLg/cGqOMpfVnLTBcAAAAASUVORK5CYII=);
    background-position: left 16rpx;
}

.detail-list .ft .btn-comment .btn-text {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAElBMVEUAAADMzMzMzMzMzMzMzMzMzMyxZd59AAAABXRSTlMA7o6ABs2AO04AAAA+SURBVBjTY3ASDUWAQBUG1VBkEMQgisIPZAhFBaN8vHz08ApC5QPDOzQ0mAEZhIYaoPJRpRnQpBnQpBnQpAGK5HnV4Uw80wAAAABJRU5ErkJggg==);
    background-position: left 16rpx;
}

.detail-list .ft .btn-share .btn-text {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAeCAMAAACVFoclAAAAVFBMVEUAAADMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzg5ipKAAAAG3RSTlMAS/f8QGF4aVhHEQPs3MW7oFEn0LirgG9NMZTadDR6AAAApUlEQVQoz82SSRKDIBBFFdEoKCAOifn3v2cqKYqhmLL0LeHRfOhu6sDjYVfpVDNa8vKMVOUWZK0Z6MaCwegbVokNPQgTq+sTBh9FED0y1gUhz9BgOyIG37hmJBicQQlSnNbQrkL6FmYy5pMqWMi2HzJ6LTW7s+ov/v316Me232E1cdcXIxhjAiB6VujcsZy63H1qqtcnKDOFTR4pawZwK6PAf0adD3EtJfZ0oWPxAAAAAElFTkSuQmCC);
    background-position: left 12rpx;
}

.bdr-r {
    position: relative;
}

.bdr-r:after {
    height: 100%;
    content: '';
    width: 1px;
    border-right: 1px solid #f0f0f0;
    position: absolute;
    top: 0;
    right: 0;
    transform: scaleX(0.5);
    z-index: 10;
}


/* 加载更多*/

.loadMore {
    width: 100%;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    color: #ff819f;
    padding: 20rpx 0;
    margin: 0 auto;
    height: 30rpx;
}

.loadMore view {
    display: inline-block;
    width: 4rpx;
    height: 100%;
    margin-right: 10rpx;
    border-radius: 4rpx;
    background: #ff819f;
    animation: load 1s ease infinite;
}

@keyframes load {
    0%,
    100% {
        height: 10rpx;
        background: #ff819f;
    }
    50% {
        height: 40rpx;
        margin: -10rpx 0;
        background: lightgreen;
    }
}

.loadMore view:nth-child(2) {
    animation-delay: 0.2s;
}

.loadMore view:nth-child(3) {
    animation-delay: 0.4s;
}

.loadMore view:nth-child(4) {
    animation-delay: 0.6s;
}

.loadMore view:nth-child(5) {
    animation-delay: 0.8s;
}