<template>
    <view class="feed-live">
        <view
            class="feed-live-content"
            @tap="toLink({
                url: video.outLink,
                xcxUrl: video.xcxUrl,
                extra,
                isNaLink: video.status != -1,
            })"
        >
            <view
                :style="{
                    borderRadius,
                    boxShadow: actConfig && 'none',
                }"
                class="feed-live-content-card"
            >
                <view class="feed-live-content-card-live">
                    <view class="feed-live-content-card-poster">
                        <c-image
                            :src="video.img"
                            width="100%"
                            :height="imgHeight"
                            has-compress
                            mode="widthFix"
                            :hack-white-stroke="false"
                            :is-round="false"
                            radius="0.09rem"
                            :extra="{column: 12}"
                        />
                    </view>
                    <view class="feed-live-content-card-play">
                        <c-icon
                            name="play"
                            font-size="24px"
                            class="feed-live-content-card-play-icon"
                        />
                        <!-- <view class="med-icon icon med-icon-play feed-live-content-card-play-icon"/> -->
                    </view>

                    <template v-if="!actConfig">
                        <!-- eslint-disable max-len -->
                        <view
                            :class="video.status == 0 ? 'feed-live-content-card-shipin' : (video.status == 1 ? 'feed-live-content-card-huifang' : 'feed-live-content-card-yugao')"
                            class="feed-live-content-card-btn c-gap-right-small"
                        >
                            <view :class="video.status == 0 ? 'feed-live-content-card-shipin-bg' : ''"/>
                            {{ video.statusText }}
                        </view>
                        <!-- eslint-enable max-len -->

                        <!-- 浮层 -->
                        <view class="feed-live-content-card-mask">
                            <view class="feed-live-content-card-mask-text">
                                <view
                                    v-if="video.title"
                                    class="c-line-clamp1"
                                    :style="{fontWeight: 'bold'}"
                                >{{ video.title }}</view>
                                <view
                                    v-if="videoTime || video.time"
                                    class="c-line-clamp1 c-font-small"
                                >
                                    <text>{{ videoTime }}</text>
                                    <text v-if="videoTime" class="c-gap-right-small"/>
                                    <text>{{ video.time }}开播</text>
                                </view>
                            </view>
                        </view>
                    </template>
                </view>
                <view
                    v-if="actConfig"
                    class="feed-live-content-card-act"
                    :style="{
                        backgroundColor: actConfig.backgroundColor,
                        padding: actConfig.padding,
                    }"
                >
                    <view class="feed-live-content-card-act-left">
                        <view
                            class="cfont-13 c-color-title feed-live-content-card-act-status"
                            style="font-weight: bold;"
                        >
                            <view v-if="video.status == -1">
                                <view>距离</view>
                                <view>直播</view>
                            </view>
                            <view v-else-if="video.status == 0">
                                <view>正在</view>
                                <view>直播</view>
                            </view>
                            <view v-else-if="video.status == 1">
                                <view>历史</view>
                                <view>直播</view>
                            </view>
                        </view>
                        <!-- eslint-disable max-len -->
                        <template>
                            <view
                                v-if="video.status == -1"
                                class="c-gap-left c-gap-inner-left c-font-large"
                                :style="{color: actConfig.fontColor}"
                            >
                                <text class="feed-live-content-card-box"><text>{{ count.day }}</text> <text class="c-font-small c-color-gray">天</text></text>
                                <text class="feed-live-content-card-box"><text>{{ count.hour }}</text> <text class="c-font-small c-color-gray">时</text></text>
                                <text class="feed-live-content-card-box"><text>{{ count.min }}</text> <text class="c-font-small c-color-gray">分</text></text>
                                <text class="feed-live-content-card-box"><text>{{ count.second }}</text> <text class="c-font-small c-color-gray">秒</text></text>
                            </view>
                            <view v-else class="c-gap-left c-gap-inner-left">
                                <view
                                    v-if="videoTime || video.time"
                                    class="c-line-clamp1 c-font-normal c-color"
                                >{{ videoTime }}<text v-if="videoTime" class="c-gap-right-small"/>{{ video.time }}</view>
                            </view>
                        </template>
                        <!-- eslint-enable max-len -->
                    </view>
                    <view style="width: 0.90rem;">
                        <!-- eslint-disable max-len -->
                        <c-button
                            type="primary"
                            :font-size="14"
                            :primary-color="video.status == -1 ? '#ff6161' : (video.status == 1 ? '#999' : '#00c8c8')"
                            border-radius="0.20rem"
                            :height="28"
                        >
                            <text :class="['feed-live-content-card-act-icon', 'feed-live-content-card-act-icon' + video.status]"/>
                            <text>{{ video.status == 0 ? '观看直播' : (video.status == 1 ? '观看回放' : '立即预约') }}</text>
                        </c-button>
                        <!-- eslint-enable max-len -->
                    </view>
                </view>
                <view
                    v-else-if="!hideDesc && (video.status == 0 || video.audience || video.brief)"
                    class="feed-live-content-card-wrapper"
                >
                    <view v-if="video.status == -1">
                        <view class="feed-live-content-card-count">
                            <view class="feed-live-content-card-time">
                                <!-- eslint-disable max-len -->
                                <text class="feed-live-content-card-box"><text class="c-font-big-less c-font-wb"> {{ count.day }} </text> <text class="c-color-gray	c-font-big-less">天</text></text>
                                <text class="feed-live-content-card-box"><text class="c-font-big-less c-font-wb"> {{ count.hour }} </text> <text class="c-color-gray c-font-big-less">时</text></text>
                                <text class="feed-live-content-card-box"><text class="c-font-big-less c-font-wb"> {{ count.min }} </text> <text class="c-color-gray	c-font-big-less">分</text></text>
                                <text class="feed-live-content-card-box"><text class="c-font-big-less c-font-wb"> {{ count.second }} </text> <text class="c-color-gray c-font-big-less">秒</text></text>
                                <!-- eslint-enable max-len -->
                            </view>
                            <view class="feed-live-content-card-distance">距离直播开始还有</view>
                            <view v-if="video.audience || video.brief" class="feed-live-content-card-line"/>
                        </view>
                    </view>
                    <view v-if="video.audience || video.brief">
                        <view v-if="video.audience">观看人数：{{ video.audience }} 人</view>
                        <view
                            v-if="video.brief"
                            class="feed-live-content-card-desc c-line-clamp3"
                        >简介：{{ video.brief }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 视频大图位带倒计时
 * @author lixue25
*/
import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import {send} from '../../../utils/log';
import * as core from '../../../utils/core';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    computed: {
        extra() {
            return {
                mod: this.page + '-live',
                logStr: encodeURIComponent(this.log)
            };
        },
        videoTime() {
            if (this.video.date) {
                const date = this.video.date.split('/');
                return date[1] + '月' + date[2] + '日';
            }
            return '';
        }
    },
    props: {
        imgHeight: {
            type: String,
            default: ''
        },
        video: {
            type: Object,
            default: () => ({})
        },
        page: {
            type: String,
            default: 'feed'
        },
        borderRadius: {
            type: String,
            default: '0.10rem'
        },
        hideDesc: Boolean,
        log: String,
        livesource: {
            type: String,
            default: 'jiankang'
        },
        actConfig: Object
    },
    data() {
        return {
            count: {
                day: 0,
                hour: 0,
                min: 0,
                second: 0
            },
            timer: null
        };
    },
    mounted() {
        this.countDown();
        clearInterval(this.timer);
        this.timer = setInterval(this.countDown, 1000);
    },
    methods: {
        toLink(params) {
            if (params.xcxUrl) {
                navigate({url: params.xcxUrl, extra: params.extra});
            } else if (params.url) {
                navToBdBoxH5(params.url, params.isNaLink ? {
                    module: 'live',
                    action: 'enterRoom',
                    parameters: {
                        params: {
                            /* eslint-disable */
                            roomId: core.getQueryObject(params.url)['room_id'],
                            /* eslint-enable */
                            source: {
                                livesource: this.livesource
                            }
                        }
                    }
                } : {});
                send({
                    type: 'l',
                    action: 'navigate2h5',
                    extra: params.extra
                });
            }
        },
        countDown() {
            let endtime = new Date(this.video.date + ',' + this.video.time);
            let nowtime = new Date();
            let lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000, 10);
            this.count.day = parseInt(lefttime / 3600 / 24, 10);
            this.count.hour = parseInt(lefttime / (60 * 60), 10) % 24;
            this.count.min = parseInt(lefttime / (60), 10) % 60;
            this.count.second = parseInt(lefttime % 60, 10);

            if (lefttime <= 0) {
                clearInterval(this.timer);
                this.count.day = this.count.hour = this.count.min = this.count.second = 0;
            }
        }
    },
    components: {
        CButton,
        CIcon,
        CImage
    }
};
</script>

<style lang="less" scoped>
.feed-live {
    &-content {
        position: relative;
        z-index: 1;
        height: 100%;

        &-text {
            text-align: center;
            font-family: PingFang-SC-Medium;
            font-size: .2rem;
            color: #fff;
            letter-spacing: 0;
            line-height: .11rem;
        }

        &-group {
            margin-top: 0.30rem;
        }

        &-card {
            margin: .09rem 0 0 0;
            // padding: 0 0 .15rem 0;
            font-family: PingFang-SC-Regular;
            font-size: .14rem;
            color: #555;
            letter-spacing: 0;
            line-height: .21rem;
            background: #fff;
            box-shadow: 0 0.033rem 0.167rem 0 rgba(0, 0, 0, 0.08);
            border-radius: 10rem;
            overflow: hidden;

            &-wrapper {
                padding: 0.07rem 0.17rem 0 0.17rem;
                margin: 0.05rem 0 .15rem 0;
            }

            &-live {
                position: relative;
            }

            &-btn {
                width: 0.5301rem;
                position: absolute;
                right: 0;
                bottom: 0.0602rem;
                background: rgba(0, 0, 0, .4) !important;
                padding: 0.04rem 0.09rem;
                color: white !important;
                border: none !important;
                font-size: 0.12rem;
                text-align: center;
                border-radius: 0.50rem;
                z-index: 1;
            }

            &-mask {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                padding: .2rem .15rem .05rem .15rem;
                color: #fff;
                font-size: .17rem;
                font-family: PingFang-SC-Regular;
                line-height: .18rem;
                background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);

                &-text {
                    width: 75%;
                }
            }

            &-shipin {
                background: #fa463f !important;
                opacity: 1 !important;

                &-bg {
                    display: inline-block;
                    width: 0.10rem;
                    height: 0.10rem;
                    margin-right: .01rem;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-image: url(data:image/gif;base64,R0lGODlhCgAKAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEQ3QkM1NDcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEQ3QkM1NTcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RDdCQzUyNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RDdCQzUzNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQMAAQAsAAAAAAoACgAAAhCMj6nLnQAYNPPUC2PAmIICACH5BAUDAAEALAAABAAKAAMAAAIHBIKpaOthCgAh+QQFAwABACwIAAUAAgABAAACAgQKACH5BAUDAAEALAAAAwAKAAIAAAIGBIKpaAkFACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpYetQAAAh+QQFAwABACwEAAIABgACAAACBASCiVYAIfkEBQMAAQAsAAABAAoAAgAAAgUEgqkbVgAh+QQJAwABACwAAAAABgACAAACBASCiVYAIfkEBQMAAQAsAAAAAAoACgAAAg2MA3CobLminLTai2kBACH5BAkDAAEALAAAAAAKAAIAAAIFjG8AyFEAIfkECQMAAQAsAAAAAAoACgAAAgyMbwCouQijnLTaKwsAIfkECQMAAQAsAAAAAAoACgAAAhSMjwkGe82ag0HOS7OMUff7cRVQAAAh+QQJAwABACwAAAAACgAKAAACFIyPqQdgHVyUDc5XMbY839lt1FgAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB2CNYGiy0ufm1dj2bHlaAQAh+QQJAwABACwAAAAACgAKAAACEoyPqasA5lAMbtoKH8U7X69dBQAh+QQJAwABACwAAAAACgAKAAACEYyPqbvA4AJEU8JYL96ZbwMVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+pywxgHpLh0WsjrJlrrBUAIfkECQMAAQAsAAAAAAoACgAAAhCMj6nLDOBgeIjOJy3OXPMCACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py90ADEQzwIqvjFb3XQAAIfkEBQMAAQAsAAAAAAoACgAAAhGMj6nL3QAQNDPAii+NVvddAAAh+QQFAwABACwEAAQAAgABAAACAgQKACH5BAUDAAEALAEABQABAAEAAAICRAEAIfkEBQMAAQAsAAADAAoAAwAAAgeMA3DLpo0KACH5BAUDAAEALAQAAgAFAAQAAAIFBIKpi1AAIfkEBQMAAQAsAAAEAAIAAQAAAgIECgAh+QQFAwABACwEAAEAAgABAAACAgQKACH5BAUDAAEALAAAAwACAAEAAAICBAoAIfkECQMAAQAsAAAAAAoABQAAAgiMA3DL7Q9TAQAh+QQJAwABACwAAAAACgAKAAACD4wDcIvKlh50szaJs96sAAAh+QQJAwABACwAAAAACgAKAAACFIyPCJC3bZ5jQS5Lb944Xu91FVAAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB7DRkoOzRWps3bfbzG1gAQAh+QQJAwABACwAAAAACgAKAAACEoyPqQew0V5kDtY2MzZa8219BQAh+QQJAwABACwAAAAACgAKAAACEYyPqasA7FAM09VHrbl36+wVACH5BAUDAAEALAAAAAAKAAoAAAIRjI+pywzgYHjP1EmtpLvfDxQAIfkECQMAAQAsBAAEAAYAAgAAAgOMj1YAIfkECQMAAQAsAAAAAAoACgAAAgqMj6nL3QCcnLIAACH5BAkDAAEALAAAAAAKAAoAAAIQjI+py+0NgIlxykBvxdTaAgAh+QQFAwABACwAAAAACgAKAAACD4yPqcvtjwAwksoZar7WFgAh+QQFAwABACwAAAYAAgABAAACAgQKACH5BAUDAAEALAAABQAGAAIAAAIEBIKJVgAh+QQFAwABACwAAAQACgADAAACBgSCqctrBQAh+QQFAwABACwEAAUABgABAAACAwQSVgAh+QQFAwABACwAAAMACgACAAACBQSCqYtQACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpu4ZQAAAh+QQFAwABACwIAAMAAgABAAACAgQKACH5BAUDAAEALAAAAQAKAAMAAAIHBIKpG6aeCgAh+QQJAwABACwAAAAAAgABAAACAgQKACH5BAUDAAEALAAAAAAKAAoAAAILjI95AMgKo5y00gIAIfkECQMAAQAsAAAAAAoAAgAAAgWMbwDIUQAh+QQJAwABACwAAAAACgAKAAACC4xvAIjKD6OctNYCACH5BAkDAAEALAAAAAAKAAoAAAIUjI95AGrMXgtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhSMj3kAahxalAzO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);
                }
            }

            &-poster {
                width: 100%;
                height: calc(60.22vw - 0.34rem);
                display: block;
                border-radius: 9px;
            }

            &-play {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 0.48rem;
                height: 0.48rem;
                border-radius: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, .5);
                color: #fff !important;

                // &-icon {
                //     font-size: 0.24rem;
                //     margin: 0.134rem;
                // }
            }

            &-box {
                font-family: Helvetica Neue, Consolas, Monaco, monospace;
            }

            &-count {
                margin: 0.05rem 0 0.10rem 0;
            }

            &-time {
                font-family: PingFang-SC-Light;
                font-size: 0.28rem;
                color: #555;
                line-height: 0.30rem;
                text-align: center;
                margin: 0.03rem 0;
            }

            &-distance {
                font-family: PingFangSC-Regular;
                font-size: 0.13rem;
                color: #999;
                text-align: center;
                line-height: 0.13rem;
                margin-bottom: 0.15rem;
            }

            &-line {
                border-bottom: 0.01rem solid #f4f4f4;
            }

            &-desc {
                margin-bottom: 0.15rem;
                font-family: PingFang-SC-Regular;
                font-size: 0.14rem;
                color: #333;
                letter-spacing: 0;
                line-height: 0.233rem;
            }

            &-act {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.10rem 0.08rem;
                background: #fafafa;

                &-left {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                &-status {
                    position: relative;

                    &::after {
                        content: ' ';
                        position: absolute;
                        right: -0.10rem;
                        top: 0rem;
                        height: 0.40rem;
                        width: 0.01rem;
                        background: #f1f1f1;
                    }
                }

                &-icon {
                    display: inline-block;
                    width: 0.10rem;
                    height: 0.10rem;
                    margin-right: .05rem;
                    background-size: 100% auto;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                    position: relative;

                    &0 {
                        background-image: url(data:image/gif;base64,R0lGODlhCgAKAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBOEQ3QkM1NDcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBOEQ3QkM1NTcyNDQxMUU2QTVFRDg5Q0IwRUY3QjFDQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkE4RDdCQzUyNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkE4RDdCQzUzNzI0NDExRTZBNUVEODlDQjBFRjdCMUNDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQMAAQAsAAAAAAoACgAAAhCMj6nLnQAYNPPUC2PAmIICACH5BAUDAAEALAAABAAKAAMAAAIHBIKpaOthCgAh+QQFAwABACwIAAUAAgABAAACAgQKACH5BAUDAAEALAAAAwAKAAIAAAIGBIKpaAkFACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpYetQAAAh+QQFAwABACwEAAIABgACAAACBASCiVYAIfkEBQMAAQAsAAABAAoAAgAAAgUEgqkbVgAh+QQJAwABACwAAAAABgACAAACBASCiVYAIfkEBQMAAQAsAAAAAAoACgAAAg2MA3CobLminLTai2kBACH5BAkDAAEALAAAAAAKAAIAAAIFjG8AyFEAIfkECQMAAQAsAAAAAAoACgAAAgyMbwCouQijnLTaKwsAIfkECQMAAQAsAAAAAAoACgAAAhSMjwkGe82ag0HOS7OMUff7cRVQAAAh+QQJAwABACwAAAAACgAKAAACFIyPqQdgHVyUDc5XMbY839lt1FgAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB2CNYGiy0ufm1dj2bHlaAQAh+QQJAwABACwAAAAACgAKAAACEoyPqasA5lAMbtoKH8U7X69dBQAh+QQJAwABACwAAAAACgAKAAACEYyPqbvA4AJEU8JYL96ZbwMVACH5BAkDAAEALAAAAAAKAAoAAAIRjI+pywxgHpLh0WsjrJlrrBUAIfkECQMAAQAsAAAAAAoACgAAAhCMj6nLDOBgeIjOJy3OXPMCACH5BAkDAAEALAAAAAAKAAoAAAIRjI+py90ADEQzwIqvjFb3XQAAIfkEBQMAAQAsAAAAAAoACgAAAhGMj6nL3QAQNDPAii+NVvddAAAh+QQFAwABACwEAAQAAgABAAACAgQKACH5BAUDAAEALAEABQABAAEAAAICRAEAIfkEBQMAAQAsAAADAAoAAwAAAgeMA3DLpo0KACH5BAUDAAEALAQAAgAFAAQAAAIFBIKpi1AAIfkEBQMAAQAsAAAEAAIAAQAAAgIECgAh+QQFAwABACwEAAEAAgABAAACAgQKACH5BAUDAAEALAAAAwACAAEAAAICBAoAIfkECQMAAQAsAAAAAAoABQAAAgiMA3DL7Q9TAQAh+QQJAwABACwAAAAACgAKAAACD4wDcIvKlh50szaJs96sAAAh+QQJAwABACwAAAAACgAKAAACFIyPCJC3bZ5jQS5Lb944Xu91FVAAACH5BAkDAAEALAAAAAAKAAoAAAITjI+pB7DRkoOzRWps3bfbzG1gAQAh+QQJAwABACwAAAAACgAKAAACEoyPqQew0V5kDtY2MzZa8219BQAh+QQJAwABACwAAAAACgAKAAACEYyPqasA7FAM09VHrbl36+wVACH5BAUDAAEALAAAAAAKAAoAAAIRjI+pywzgYHjP1EmtpLvfDxQAIfkECQMAAQAsBAAEAAYAAgAAAgOMj1YAIfkECQMAAQAsAAAAAAoACgAAAgqMj6nL3QCcnLIAACH5BAkDAAEALAAAAAAKAAoAAAIQjI+py+0NgIlxykBvxdTaAgAh+QQFAwABACwAAAAACgAKAAACD4yPqcvtjwAwksoZar7WFgAh+QQFAwABACwAAAYAAgABAAACAgQKACH5BAUDAAEALAAABQAGAAIAAAIEBIKJVgAh+QQFAwABACwAAAQACgADAAACBgSCqctrBQAh+QQFAwABACwEAAUABgABAAACAwQSVgAh+QQFAwABACwAAAMACgACAAACBQSCqYtQACH5BAUDAAEALAAAAgAJAAMAAAIHBIKpu4ZQAAAh+QQFAwABACwIAAMAAgABAAACAgQKACH5BAUDAAEALAAAAQAKAAMAAAIHBIKpG6aeCgAh+QQJAwABACwAAAAAAgABAAACAgQKACH5BAUDAAEALAAAAAAKAAoAAAILjI95AMgKo5y00gIAIfkECQMAAQAsAAAAAAoAAgAAAgWMbwDIUQAh+QQJAwABACwAAAAACgAKAAACC4xvAIjKD6OctNYCACH5BAkDAAEALAAAAAAKAAoAAAIUjI95AGrMXgtwRgqlvDzjbYWdVAAAIfkECQMAAQAsAAAAAAoACgAAAhSMj3kAahxalAzO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);
                    }

                    &1 {
                        background-image: url(https://medactivity.cdn.bcebos.com/hpv%2F%E5%9B%9E%E6%94%BE.png?x-bce-process=image/auto-orient,o_1/resize,w_207,limit_1/quality,Q_85);
                    }

                    &-1 {
                        background-image: url(https://medactivity.cdn.bcebos.com/hpv%2F%E9%A2%84%E5%91%8A.png?x-bce-process=image/auto-orient,o_1/resize,w_207,limit_1/quality,Q_85);
                    }
                }
            }
        }
    }
}
@media only screen and (max-width: 385px) {
    .feed-live-content-card-box {
        font-size: 0.15rem;
    }

    .feed-live-content-card-act {
        padding: 0.10rem 0.07rem;
    }

    .feed-live-content-card-act-status {
        font-size: 0.13rem;
    }
}
</style>
