<template>
    <view :class="['covid-kill-' + topic]">
        <view class="covid-kill">
            <view class="covid-kill-before">
                <view class="covid-kill-before_cont">
                    <view v-if="custom.title" class="covid-kill-before_title">{{ custom.title }}</view>
                    <view v-if="custom.subTitle" class="covid-kill-before_sub">{{ custom.subTitle }}</view>
                </view>
            </view>
            <view class="covid-kill-rule" @tap.stop="popupChange(true, custom.topBtn.type)">{{ custom.topBtn.text }}</view>
            <view class="covid-kill-timer">
                <view class="covid-kill-timer_img"/>
                <scroll-view
                    scroll-x
                    class="covid-kill-timer_flex"
                    scroll-with-animation
                    :scroll-into-view="'mitem' + (selectIndex - 2)"
                >
                    <view
                        v-for="(item, index) in list"
                        :id="'mitem' + index"
                        :key="index"
                        class="covid-kill-timer_i"
                        :class="{
                            'covid-kill-timer_i_selected': index === selectIndex,
                        }"
                        @tap.stop="onTimeChange(index)"
                    >
                        <view class="covid-kill-timer_i_time c-font-normal cl-bold">{{ item.dateText }}</view>
                        <view class="covid-kill-timer_i_text c-font-13">{{ item.timeText }}</view>
                    </view>
                </scroll-view>
            </view>
            <view class="covid-kill-ticket_wrap c-gap-top-large c-gap-bottom-small">
                <view class="covid-kill-ticket">
                    <view class="covid-kill-ticket_price">
                        <view
                            v-if="coupon.price"
                            class="covid-kill-ticket_del"
                            :style="{textDecoration: 'line-through'}"
                        >￥{{ coupon.price }}</view>
                        <view>
                            <text class="c-font-normal cl-bold">￥</text>
                            <text>{{ coupon.finalPrice }}</text>
                            <text v-if="custom.afterPrice" class="c-font-normal">{{ custom.afterPrice }}</text>
                        </view>
                        <view v-if="coupon.priceTip" class="covid-kill-ticket_del">{{ coupon.priceTip }}</view>
                    </view>
                    <view class="covid-kill-ticket_cont">
                        <view class="cl-bold c-line-clamp1">{{ coupon.name }}</view>
                        <view class="c-font-small c-line-clamp1" :style="{opactiy: '0.9'}">{{ coupon.subtitle }}</view>
                    </view>
                    <view class="covid-kill-ticket_btn_wrap">
                        <view v-if="countDownTime < 300 && countDownTime > 0 && selectIndex === 0" class="covid-kill-ticket_btn_begin">距离开始</view>
                        <login-btn
                            :z-index="9"
                            @onTapStart="onBtnTapStart"
                            @onLoginSuccess="onBtnTap"
                        >
                            <view
                                class="covid-kill-ticket_btn c-font-13"
                                :class="['covid-kill-ticket_btn_' + coupon.status]"
                            >
                                <text v-if="countDownTime < 300 && countDownTime > 0 && selectIndex === 0">{{ countDownTime }}s</text>
                                <text v-else>{{ coupon.status | getBtnText }}</text>
                            </view>
                        </login-btn>
                    </view>
                </view>
            </view>
            <view v-if="isLogin === 0" class="covid-kill-tip c-font-small c-gap-top-small">
                <view>*</view>
                <text>抢购秒杀免单前需要您登录百度账号，</text>
                <view class="covid-kill-tip-btn c-font-small">
                    <login-btn
                        :z-index="9"
                        text="去登录"
                        @onTapStart="onTapStart"
                    />
                </view>
            </view>
            <!-- 活动规则 -->
            <rule-popup
                :show="popupShow"
                :title="'活动规则'"
                :content="ruleContent"
                @close="popupChange(false)"
            />
            <c-popup
                :show="actPopupShow"
                :z-index="'921'"
                :title="'获奖名单'"
                :show-close="true"
                :show-title-line="true"
                :show-close-handler="false"
                :max-height="'calc(100vh - 120px)'"
                :height="'calc(100vh - 120px)'"
                border-radius="12px"
                close-icon="close-circle"
                class="rule-popup"
                scroll-view
                stop-scroll-through
                @close="popupChange(false)"
                @masktap="popupChange(false)"
            >
                <view :style="{margin: '0 -17px'}">
                    <!-- <view :style="{position: 'fixed', top: '53px', 'background': '#fff'}"> -->
                    <c-navs
                        v-if="prizeInfo && prizeInfo.date && prizeInfo.date.length"
                        :options="prizeInfo.date"
                        selected-color="#FF6161"
                        is-left
                        border-bottom
                        scroll
                        @itemtap="prizeNavItemTap"
                    />
                    <view class="c-gap-top-large">
                        <m-tab
                            v-if="prizeInfo && prizeInfo.time && prizeInfo.time.length > 1"
                            :tabs="prizeInfo.time"
                            selected-color="rgba(255,96,80,0.06)"
                            selected-font-color="#FF6050"
                            label-color="#F6F6F6"
                            label-font-color="#555"
                            :topic="'hpv-38'"
                            :show-border="false"
                            @onTap="prizeTabItemTap"
                        />
                    </view>
                    <!-- </view> -->
                    <view v-if="prizeInfo && prizeInfo.list && prizeInfo.list.length" :style="{padding: '15px 17px'}">
                        <view
                            v-for="(itm, index) in prizeInfo.list"
                            :key="index"
                            class="c-row c-color-normal c-font-13 c-gap-bottom"
                        >
                            <view class="c-span5 c-line-clamp1">
                                <text>用户</text>
                                <text class="c-color-orange c-gap-left">{{ itm }}</text>
                            </view>
                            <view class="c-span7 c-line-clamp1" :style="{textAlign: 'right'}">{{ prizeInfo.listText }}</view>
                        </view>
                    </view>
                    <view v-else class="c-color-333 act-ticket-none">{{ !prizeInfo.init ? '加载中...' : '暂未开始/公布' }}</view>
                </view>
            </c-popup>
            <!-- 弹窗 -->
            <act-modal
                v-if="modalShow"
                custom
                @onClose="modalChange(false)"
            >
                <view :class="['covid-kill-modal-' + topic]">
                    <view
                        v-if="modalType === 'success'"
                        class="covid-kill-modal_success"
                        :style="{backgroundImage: 'url(' + custom.modal.success + ')'}"
                    >
                        <view class="covid-kill-modal_success_btn" @tap.stop="onJump(coupon)"/>
                        <!-- <view class="covid-kill-modal_success_num">已有{{ 1242 }}人抢到</view> -->
                    </view>
                    <view
                        v-else-if="modalType === 'fail'"
                        class="covid-kill-modal_fail"
                        :style="{backgroundImage: 'url(' + custom.modal.fail + ')'}"
                    >
                        <view class="covid-kill-modal_fail_btn" @tap.stop="onJump(coupon)"/>
                    </view>
                </view>
            </act-modal>
        </view> 
    </view>
</template>

<script>
/**
* @file 体检卡片
* @author chenshuo04
* @categories 体检卡片
* @tags [component]
*/

import LoginBtn from '@components/common/login-btn';
import CPopup from '@baidu/med-ui/components/Popup/Popup';
import RulePopup from '@components/act/cps/RulePopup';
import ActModal from '@components/act/act-modal';
import MTab from '../marketing/tabs';
import CNavs from '@baidu/med-ui/components/Navs/Navs';
import * as login from '../../../utils/login';
import {request} from '../../../utils/request';
import {apiHost} from '../../../utils/conf';
import {navigate} from '../../../utils/navigate';

let seckillTimer = null;
let isLocking = false;

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        CNavs,
        CPopup,
        RulePopup,
        ActModal,
        MTab,
        LoginBtn
    },
    props: {
        /* 登录状态 */
        isLogin: {
            type: Number,
            default: 0
        },
        /* 倒计时 */
        countDown: {
            type: Number,
            default: 0
        },
        /* 规则 */
        ruleContent: {
            type: Array,
            default: () => []
        },
        /* 时间 */
        times: {
            type: Array,
            default: () => []
        },
        /* 弹窗 */
        modal: {
            type: Object,
            default: () => {}
        },
        /* ref */
        query: {
            type: Object,
            default: () => {}
        },
        /* 获奖信息 */
        prize: {
            type: Object,
            default: () => {}
        },
        /* topic */
        topic: {
            type: String,
            default: 'test'
        },
        /* 自定义 */
        customData: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            nowIndex: 0,
            selectIndex: 0,
            popupShow: false,
            actPopupShow: false,
            modalShow: false,
            modalType: 'success',
            modalData: null,
            coupon: {},
            list: [],
            countDownTime: 0,
            covidKillModalStatus: false,
            custom: {
                afterPrice: '起',
                topBtn: {
                    text: '活动规则'
                }
            },
            prizeInfo: {
                date: [],
                list: [],
                form: {
                    date: '',
                    round: '',
                },
                listText: '',
                init: false
            }
        };
    },
    filters: {
        getBtnText(status) {
            if (!status) {
                return '';
            }
            else if (status === 1) {
                return '抢';
            }
            else if (status === 2) {
                return '提醒我';
            }
            else if (status === 3) {
                return '去使用';
            }
            else if (status === 4) {
                return '取消提醒';
            }
            else if (status === 5) {
                return '已抢光';
            }
            else if (status === 6) {
                return '即将开始';
            }
            else if (status === 7) {
                return '已使用';
            }
        }
    },
    created() {
        this.custom = Object.assign({}, this.custom, this.customData);
        if (seckillTimer) {
            clearInterval(seckillTimer);
        }
        const covidKillModalStatus = this.$api.getStorageSync(this.topic + '_kill_modal_status');
        this.covidKillModalStatus = covidKillModalStatus;
        const date = new Date();
        const day = date.getMonth() * 31 + date.getDate();


        this.times.forEach((itm, index) => {
            if (itm.isSelect) {
                this.nowIndex = index;
                this.selectIndex = index;
            }
        });
        this.list = this.times;
        this.countDownTime = this.countDown || 0;
        this.coupon = Object.assign({}, this.times[this.selectIndex].coupon, {status: this.times[this.selectIndex].status});
        this.countDownTime > 0 && this.onCountDown(this.countDownTime);

        this.prizeInfo = Object.assign({}, this.prizeInfo, this.prize);

        if (this.modal && (!covidKillModalStatus || (covidKillModalStatus && Number(covidKillModalStatus) < day)) ) {
            this.modalType = this.modal.type;
            setTimeout(() => {
                this.modalShow = true;
                this.$api.setStorage({
                    key: this.topic + '_kill_modal_status',
                    data: day
                });
            }, 3000);
        }
    },
    watch: {
        times() {
            if (seckillTimer) {
                clearInterval(seckillTimer);
            }
            this.selectIndex = 0;
            this.nowIndex = 0;
            this.times.forEach((itm, index) => {
                if (itm.isSelect) {
                    this.nowIndex = index;
                    this.selectIndex = index;
                }
            });
            this.list = this.times;
            this.coupon = Object.assign({}, this.times[this.selectIndex].coupon, {status: this.times[this.selectIndex].status});

            this.countDownTime > 0 && this.onCountDown(this.countDownTime);
        },
        countDown(nval, oval) {
            if (seckillTimer) {
                clearInterval(seckillTimer);
            }
            this.selectIndex = 0;
            this.nowIndex = 0;
            this.times.forEach((itm, index) => {
                if (itm.isSelect) {
                    this.nowIndex = index;
                    this.selectIndex = index;
                }
            });
            this.list = this.times;
            this.coupon = Object.assign({}, this.times[this.selectIndex].coupon, {status: this.times[this.selectIndex].status});

            this.countDownTime = nval || 0;
            this.countDownTime > 0 && this.onCountDown(this.countDownTime);
        }
    },
    methods: {
        onTapStart() {
            if (process.env.MARS_ENV === 'h5') {
                if (!this.isLogin) {
                    login.toH5LoginPage({isReplaceUrl: true});
                }
            }
        },
        onTimeChange(index) {
            if (index === this.selectIndex) {
                return;
            }
            this.selectIndex = index;
            this.coupon = Object.assign({}, this.list[index].coupon, {status: this.list[index].status});
        },
        popupChange(status, type) {
            if (type === 'act-prize') {
                if (!this.prizeInfo.init) {
                    this.prizeInfo.form.date = this.prizeInfo.date[0].value;
                    this.prizeInfo.form.round = this.prizeInfo.time[0].value;
                    this.prizeListChange();
                }
                this.actPopupShow = status;
                return;
            }
            this.popupShow = status;
            this.actPopupShow = false;
        },
        modalChange(status) {
            this.modalShow = status;
        },
        onJump(data) {
            this.modalShow = false;
            if (data.url || data.path) {
                navigate({url: data.url || data.path});
            }
        },
        onBtnTapStart() {
            if (process.env.MARS_ENV === 'h5') {
                if (!this.isLogin) {
                    login.toH5LoginPage({isReplaceUrl: true});
                }
                else {
                    this.onBtnTap();
                }
            }
        },
        onBtnTap() {
            const data = this.list[this.selectIndex];
            if (!this.isLogin) {
                this.onLogin();
                return;
            }
            if (data.status === 1) {
                this.onKill(data);
            }
            else if (data.status === 2) {
                this.onGetTip(data);
            }
            else if (data.status === 3) {
                this.onJump(data.coupon);
            }
            else if (data.status === 4) {
                this.onCancelTip(data);
            }
            else if (data.status === 6) {
                this.$api.showToast({title: '即将开始', icon: 'none'});
            }
        },
        onKill(data) {
            if (isLocking) {
                return;
            }
            isLocking = true;
            let urlPath = '/med/api/coupon_take?vn=med&svcType=vacc&autoGetPage=vaccautoget';
            request({
                url: apiHost + urlPath,
                data: {
                    status: data.status,
                    strDate: data.date + (data.startTime || ''),
                    metaId: data.coupon.metaId,
                    topic: this.topic
                },
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                isLocking = false;
                if (res.data.status === 3) {
                    this.$set(this.list[this.selectIndex], 'status', 3);
                    this.coupon = Object.assign({}, this.list[this.selectIndex].coupon, {status: this.list[this.selectIndex].status});
                    this.modalType = 'success';
                    this.modalShow = true;
                }
                else if (res.data.status === 5) {
                    this.$set(this.list[this.selectIndex], 'status', 5);
                    this.coupon = Object.assign({}, this.list[this.selectIndex].coupon, {status: this.list[this.selectIndex].status});
                    this.modalType = 'fail';
                    this.modalShow = true;
                }
                else if (res.data.toast) {
                    this.$api.showToast({title: res.data.toast, icon: 'none'});
                }
            }).catch(err => {
                isLocking = false;
            });
        },
        onGetTip(data) {
            request({
                url: apiHost + `/med/api/physical/doappoint?vn=med&topic=${this.topic}`,
                data: {
                    status: data.status,
                    strDate: data.date + (data.startTime || '')
                },
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                if (res.data.status) {
                    this.$set(this.list[this.selectIndex], 'status', 4);
                    this.coupon = Object.assign({}, this.list[this.selectIndex].coupon, {status: this.list[this.selectIndex].status});
                    this.$api.showToast({title: '恭喜您！预约成功，开始前短信通知您哦~', icon: 'none'});
                }
            });
        },
        onCancelTip(data) {
            request({
                url: apiHost + `/med/api/physical/doappoint?vn=med&topic=${this.topic}`,
                data: {
                    status: data.status,
                    strDate: data.date + (data.startTime || '')
                },
                isNeedLogin: true,
                isFirstScreen: false
            }).then(res => {
                if (res.data.status) {
                    this.$set(this.list[this.selectIndex], 'status', 2);
                    this.coupon = Object.assign({}, this.list[this.selectIndex].coupon, {status: this.list[this.selectIndex].status});
                    this.$api.showToast({title: '提醒已取消，您可能会错过抢券哦~', icon: 'none'});
                }
            });
        },
        onCountDown(downTime) {
            let timediff = downTime;
            if (seckillTimer) {
                clearInterval(seckillTimer);
            }
            if (!downTime) {
                return;
            }
            // eslint-disable-next-line consistent-this
            const vm = this;
            seckillTimer = setInterval(() => {
                timediff = timediff - 1;

                if (timediff > 0) {
                    this.$set(this, 'countDownTime', this.countDownTime - 1);
                    if (timediff < 300 && this.list[this.nowIndex].status !== 6) {
                        this.$set(this.list[this.nowIndex], 'status', 6);
                        if (this.selectIndex === this.nowIndex) {
                            this.$set(this.coupon, 'status', 6);
                        }
                    }
                    /* eslint-enable */
                }
                else {
                    this.$set(this, 'countDownTime', this.countDownTime - 1);
                    clearInterval(seckillTimer);
                    this.$set(this.list[this.nowIndex], 'status', 1);
                    if (this.selectIndex === this.nowIndex) {
                        this.$set(vm.coupon, 'status', 1);
                    }
                }
            }, 1000);
        },
        prizeNavItemTap(e) {
            this.prizeInfo.form.date = e.item.value;
            this.prizeListChange();
        },
        prizeTabItemTap(e) {
            this.prizeInfo.form.round = e.value;
            this.prizeListChange();
        },
        prizeListChange() {
            request({
                url: apiHost + '/med/page/vaccine/vaccine_drawlist?vn=med',
                data: this.prizeInfo.form,
                isNeedLogin: false,
                isFirstScreen: false
            }).then(res => {
                this.$set(this.prizeInfo, 'list', res.data.list);
                this.prizeInfo.listText = res.data.text;
                this.prizeInfo.init = true;
            });
        },

    }
};
</script>

<style lang="less" scoped>
.covid-kill {
    position: relative;
    background-image: linear-gradient(134deg, #FFF7EA 0%, #FFEDD1 100%);
    border-radius: 10px;
    padding: 0px 10px 10px 10px;
    &-before {
        z-index: 9;
        position: absolute;
        top: -5px;
        left: 50%;
        transform: translateX(-50%);
        width: 37vw;
        height: 8vw;
        content: ' ';
        background-image: url(https://med-fe.cdn.bcebos.com/brand/covid-title.png);
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
        // position: relative;
    }
    &-rule {
        z-index: 9;
        position: absolute;
        right: 15px;
        top: 10px;
        color: #FF5700;
        font-size: 12px;
        line-height: 12px;
        text-decoration: underline;
    }
    &-timer {
        overflow: hidden;
        position: relative;
        margin: 0 -10px;
        padding: calc(8vw + 5px) 0 15px 13px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-image: linear-gradient(179deg, rgba(255,242,206,0.5) 0%, rgba(254,230,179,0.5) 51%, rgba(255,211,133,0.5) 100%);
        &_flex {
            white-space: nowrap;
            overflow: scroll;
            margin-left: 54px;
            &::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
                color: transparent;
            }
        }
        &_img {
            background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fcovid-time.png);
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
            position: absolute;
            left: 10px;
            width: 50px;
            min-width: 50px;
            height: 50px;
        }
        &_i {
            display: inline-block;
            color: #8A2900;
            text-align: center;
            // padding: 0 8px;
            min-width: 64px;
            margin-right: 5px;
            &_time {
                font-size: 16px;
                line-height: 26px;
                font-weight: 600;
                opacity: 0.6;
            }
            &_text {
                border-radius: 27px;
                padding: 0 5px;
                display: inline-block;
                opacity: 0.6;
            }
            &_selected {
                .covid-kill-timer_i_time {
                    color: #FF3D45;
                    opacity: 1;
                }
                .covid-kill-timer_i_text {
                    color: #fff;
                    background-image: linear-gradient(125deg, #FF7200 0%, #FF2905 100%);
                    border-radius: 27px;
                    padding: 0 8px;
                    display: inline-block;
                    font-weight: bold;
                    opacity: 1;
                    // margin-left: 5px;
                }
            }
            &:first-child {
                // padding-left: 64px;
            }
            &:last-child {
                margin-right: 64px;
            }
        }
    }
    &-ticket {
        width: 89vw;
        height: 16.4vw;
        color: #fff;
        background-image: url(https://med-fe.cdn.bcebos.com/brand/covid-quan.png);
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;
        &_wrap {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        &_price {
            width: 25%;
            font-size: 28px;
            line-height: 28px;
            font-weight: 600;
            text-align: center;
        }
        &_del {
            font-size: 12px;
            font-weight: 300;
            line-height: 12px;
            opacity: 0.8;
        }
        &_cont {
            box-sizing: border-box;
            padding-left: 10px;
            width: 50%;
        }
        &_btn {
            min-width: 16.7vw;
            text-align: center;
            border-radius: 30px;
            border: 1px solid #FFE4B5;
            background: linear-gradient(145deg, #FF7200 0%, #FF2905 94%);
            &_wrap {
                width: 25%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
            }
            &_begin {
                position: relative;
                top: -1px;
                font-size: 12px;
                line-height: 12px;
                margin-bottom: 5px;
            }
            // 抢
            &_1 {
                font-size: 22px;
                font-weight: 600;
                line-height: 10.6vw;
                min-width: 10.6vw;
                width: 10.6vw;
                height: 10.6vw;
                border: 2px solid #FFE4B5;
                background: linear-gradient(145deg, #FF7200 0%, #FF2905 94%);
                box-shadow: 0 2px 7px 0 #F87681;
                animation: breathe 2s infinite;
            }
            // 取消提醒
            &_4 {
                background: linear-gradient(0deg, #FFA81E 0%, #FF4F00 98%);
            }
            // 已抢光
            &_5 {
                background: rgba(255,254,254,0.40);
            }
        }
    }
    &-tip {
        padding: 0 3px;
        display: flex;
        align-items: center;
        color: #9A552A;
        &-btn {
            color: #FF5700;
            text-decoration: underline;
        }
    }
    &-modal {
        &_success {
            width: 100vw;
            height: 76.7vw;
            background-image: url(https://med-fe.cdn.bcebos.com/brand%2F10294eef8de3e0d431af0ab2c.png);
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
            &_num {
                position: absolute;
                bottom: 3px;
                left: 50%;
                transform: translateX(-50%);
                color: #F9E1CB;
                font-size: 11px;
            }
            &_btn {
                position: absolute;
                bottom: 7vw;
                left: 10vw;
                width: 80vw;
                height: 11vw;
            }
        }
        &_fail {
            box-sizing: border-box;
            width: 300px;
            color: #fff;
            background: linear-gradient(180deg, #FF7821 0%, #FF5519 100%);
            border-radius: 10px;
            padding: 15px 20px;
            &_btns {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            &_away, &_go {
                color: #fff;
                height: 36px;
                line-height: 36px;
                width: 120px;
                border-radius: 22px;
                border: 1px solid #fff;
                background: transparent;
            }
            &_go {
                color: #FE6C1A;
                border-radius: 1px solid #fff;
                background: #fff;
            }
            &_quan {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 260px;
                height: 68px;
                position: relative;
                background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fcard-bg.png);
                background-size: 100% auto;
                background-position: 0 0;
                background-repeat: no-repeat;
                color: #EF510D;
                &_wrap {
                    box-sizing: border-box;
                    padding-left: 15px;
                    width: 182px;
                    text-align: left;
                }
                &_price {
                    width: 75px;
                    font-size: 30px;
                    line-height: 30px;
                }
            }
        }
    }
    .act-ticket-none {
        padding: 21vh 0 21vh 0;
        text-align: center;
    }
}
.covid-kill-hpv .covid-kill {
    background-image: linear-gradient(134deg, #FFEAEA 0%, #FFD1D1 100%);
    &-before {
        top: -4px;
        width: 44.5vw;
        height: 10.2vw;
        background-image: url(https://med-fe.cdn.bcebos.com/brand/hpv-title.png);
        color: #fff;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        &_title {
            font-size: 16px;
            line-height: 20px;
        }
        &_sub {
            font-size: 10px;
            line-height: 14px;
        }
    }
    &-rule {
        color: #FF6161;
    }
    &-timer {
        padding: calc(10vw + 5px) 0 15px 13px;
        background-image: linear-gradient(179deg, rgba(255,217,206,0.2) 0%, rgba(254,187,179,0.2) 51%, rgba(255,139,133,0.2) 100%);
        &_i {
            color: #C0001F;
            &_selected {
                .covid-kill-timer_i_time {
                    color: #FF3D45;
                }
                .covid-kill-timer_i_text {
                    color: #fff;
                    background-image: linear-gradient(146deg, #FF5B51 0%, #FA4360 100%);
                }
            }
        }
        &_img {
            background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fhpv-time.png);
        }
    }
    &-ticket {
        background-image: url(https://med-fe.cdn.bcebos.com/brand/hpv-quan.png);
        &_btn {
            border: 1px solid #FFC496;
            background-image: linear-gradient(145deg, #FE78A1 0%, #F83232 94%);
            // box-shadow: 0 2px 2px 0 #FF96A6;
            // 抢
            &_1 {
                border: 2px solid #FFC496;
                background-image: linear-gradient(145deg, #FE78A1 0%, #F83232 94%);
                // box-shadow: 0 2px 2px 0 #FF96A6;
            }
            // 取消提醒
            &_4 {
                background-image: linear-gradient(145deg, #FE78A1 0%, #F83232 94%);
            }
            // 已抢光
            &_5 {
                background: rgba(255,255,255,0.40);
            }
        }
    }
    &-tip {
        color: #9A552A;
        &-btn {
            color: #ff6161;
        }
    }
    &-modal {
        &_success {
            width: 100vw;
            height: 81.5vw;
            // background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fhpv-38-success.png);
            &_btn {
                position: absolute;
                bottom: 10vw;
                left: 10vw;
                width: 80vw;
                height: 11vw;
            }
        }
        &_fail {
            width: 100vw;
            height: 87.3vw;
            // background-image: url(https://med-fe.cdn.bcebos.com/brand%2Fhpv-38-fail.png);
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
            &_btn {
                position: absolute;
                bottom: 5vw;
                left: 10vw;
                width: 80vw;
                height: 11vw;
            }
        }
    }
}
@media only screen and (max-width: 390px) {
    .covid-kill-ticket_price {
        font-size: 24px;
        line-height: 24px;
    }
}
@media only screen and (max-width: 340px) {
    .covid-kill-ticket_price {
        font-size: 20px;
        line-height: 20px;
    }
    .covid-kill-ticket_cont {
        font-size: 13px;
    }
}
.cl-bold {
    font-weight: 600;
}
@keyframes breathe {
    0%{ transform: scale(.92); }
    25%{ transform: scale(1); }
    50%{ transform: scale(.92); }
    75%{ transform: scale(1); }
    100%{ transform: scale(.92); }
}
</style>
