<template>
    <med-container
        :menu="menu"
        :title="pageTitle"
        :is-skt-show="!isPageRender"
        skt-tpl="speTopicActivity"
    >
        <view
            class="spe-topic-activity"
            :class="showLogClass"
            :data-show="from ? 'speTopicActivity-' + from : 'speTopicActivity'"
        >
            <view
                v-if="banners && banners.length > 0"
            >
                <view
                    v-for="(banner, index) in banners"
                    :key="index"
                    class="spe-topic-activity-header"
                >
                    <c-image
                        width="100%"
                        height="43.24vw"
                        :src="banner.imgUrl"
                        :is-round="false"
                        :hack-white-stroke="false"
                    >
                    </c-image>
                    <view class="spe-topic-activity-header-inner">
                        <view
                            v-if="banner && banner.link && banner.link.length > 0"
                            class="spe-topic-activity-header-maps"
                        >
                            <view
                                v-for="(link, linkIndex) in banner.link"
                                :key="linkIndex"
                                :class="[
                                    'spe-topic-activity-header-map-' + linkIndex
                                ]"
                                class="spe-topic-activity-header-map"
                                @tap="onClickBannerLink(link)"
                            >
                                <view
                                    v-if="linkIndex === 0"
                                    class="spe-topic-activity-header-map-icon c-gap-right-small m-icon m-icon-ditu"
                                >
                                </view>
                                <view>{{ link.text }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="spe-topic-activity-content">
                <view
                    v-if="scrollBanners && scrollBanners.length"
                    class="spe-topic-activity-scroll-topic c-gap-bottom"
                >
                    <view
                        class="spe-topic-activity-content-header padding-top-zero"
                    >
                        <view class="spe-topic-activity-content-header-title">
                            <!-- eslint-disable max-len -->
                            <view
                                class="spe-topic-activity-content-header-title-icon small c-gap-right m-icon m-icon-jinxuan"
                            ></view>
                            <!-- eslint-enable max-len -->
                            <text>精选专题</text>
                        </view>
                    </view>
                    <view class="spe-topic-activity-scroll-topic-wrapper">
                        <scroll-view
                            scroll-x
                            @scroll="onTopicScroll"
                        >
                            <view class="spe-topic-activity-scroll-topic-inner">
                                <view
                                    v-for="(scrollBanner, scrollIndex) in scrollBanners"
                                    :key="scrollIndex"
                                    class="spe-topic-activity-scroll-topic-item"
                                    @tap="onClickScrollBanner(scrollBanner, scrollIndex)"
                                >
                                    <c-image
                                        has-compress
                                        :src="scrollBanner.imgUrl"
                                        width="20.51vw"
                                        height="14.32vw"
                                        :is-round="false"
                                        radius="5px"
                                        :hack-white-stroke="false"
                                    ></c-image>
                                    <view
                                        class="spe-topic-activity-scroll-topic-item-text"
                                    >{{ scrollBanner.name }}</view>
                                    <view class="spe-topic-activity-scroll-topic-item-masking"></view>
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
                <view
                    v-if="peoples && peoples.length > 0"
                    class="spe-topic-activity-peoples"
                >
                    <view class="spe-topic-activity-content-header">
                        <view class="spe-topic-activity-content-header-title">
                            <view
                                class="spe-topic-activity-content-header-title-icon c-gap-right m-icon m-icon-redian"
                            ></view>
                            <text>新型冠状病毒热搜榜</text>
                        </view>
                    </view>
                    <view class="spe-topic-activity-content-cards">
                        <b-navigate
                            v-for="(people, peopleIndex) in peoples"
                            :key="peopleIndex"
                            :url="people.tab[0].unifiUrl"
                            :extra="{
                                mod: 'spe-topic-activity-people-' + peopleIndex
                            }"
                        >
                            <view
                                class="spe-topic-activity-content-card"
                            >
                                <view
                                    :class="{
                                        'normal': peopleIndex === 0,
                                        'touch': peopleIndex === 1,
                                        'doubt': peopleIndex === 2,
                                        'confirm': peopleIndex === 3
                                    }"
                                    class="spe-topic-activity-peoples-left"
                                >
                                    <text v-if="people.text && people.text[0]">{{ people.text[0] }}</text>
                                    <text v-if="people.text && people.text[1]">{{ people.text[1] }}</text>
                                </view>
                                <view class="spe-topic-activity-peoples-tabs" @tap="onStop($event)">
                                    <b-navigate
                                        v-for="(tab, tabIndex) in people.tab"
                                        :key="tabIndex"
                                        :url="tab.unifiUrl"
                                        :extra="{
                                            mod: 'spe-topic-activity-people-tab-' + peopleIndex
                                        }"
                                    >
                                        <view
                                            class="spe-topic-activity-peoples-tab"
                                        >
                                            <!-- eslint-disable max-len -->
                                            <view
                                                class="spe-topic-activity-peoples-tab-icon c-gap-right-small m-icon m-icon-up-long"
                                            ></view>
                                            <!-- eslint-enable max-len -->
                                            <view class="spe-topic-activity-peoples-tab-text">{{ tab.text }}</view>
                                        </view>
                                    </b-navigate>
                                </view>
                                <view v-if="people.total" class="spe-topic-activity-peoples-right">
                                    <b-navigate
                                        :url="people.unifiUrl"
                                        :extra="{
                                            mod: 'spe-topic-activity-people-more' + peopleIndex
                                        }"
                                    >
                                        <view class="spe-topic-activity-peoples-right-content">
                                            <c-icon name="arrow-right-circle" font-size="24px"/>
                                            <view>共{{ people.total }}篇</view>
                                        </view>
                                    </b-navigate>
                                </view>
                            </view>
                        </b-navigate>
                    </view>
                </view>
                <view
                    v-if="gossip && gossip.list && gossip.list.length > 0"
                    class="spe-topic-activity-rumor c-gap-top-large"
                >
                    <view class="spe-topic-activity-content-header">
                        <view class="spe-topic-activity-content-header-title">
                            <view
                                class="spe-topic-activity-content-header-title-icon c-gap-right m-icon m-icon-chuanbo"
                            ></view>
                            <text>{{ gossip.title }}</text>
                        </view>
                        <b-navigate
                            :url="gossip.unifiUrl"
                            :extra="{
                                mod: 'spe-topic-activity-rumor-more'
                            }"
                        >
                            <view
                                class="spe-topic-activity-content-header-more"
                            >更多<c-icon name="right" font-size="15px"></c-icon></view>
                        </b-navigate>
                    </view>
                    <view class="spe-topic-activity-content-cards">
                        <b-navigate
                            v-for="(rumor, rumorIndex) in gossip.list"
                            :key="rumorIndex"
                            :url="rumor.unifiUrl"
                            :extra="{
                                mod: 'spe-topic-activity-rumor-' + rumorIndex
                            }"
                        >
                            <view
                                class="spe-topic-activity-content-card"
                            >
                                <view class="spe-topic-activity-rumor-left">
                                    <view
                                        :class="[
                                            rumor.attitude === 0 ? 'error' : 'right',
                                            rumor.attitude === 0 ? 'm-icon-cuo' : 'm-icon-right'
                                        ]"
                                        class="spe-topic-activity-rumor-icon m-icon"
                                    ></view>
                                </view>
                                <view class="spe-topic-activity-rumor-content">
                                    <view class="spe-topic-activity-rumor-content-title">{{ rumor.title }}</view>
                                    <view
                                        class="spe-topic-activity-rumor-content-description c-line-clamp2"
                                    >{{ rumor.description }}</view>
                                </view>
                            </view>
                        </b-navigate>
                    </view>
                </view>
                <view v-if="lives && lives.list && lives.list.length > 0" class="spe-topic-activity-lives c-gap-top">
                    <view class="spe-topic-activity-content-header">
                        <view class="spe-topic-activity-content-header-title">
                            <view
                                class="spe-topic-activity-content-header-title-icon c-gap-right m-icon m-icon-shipin"
                            ></view>
                            <text>{{ lives.title }}</text>
                        </view>
                        <view
                            v-if="lives.moreurl"
                            class="spe-topic-activity-content-header-more"
                            @tap="onClickLivesMore(lives.moreurl)"
                        >更多<c-icon name="right" font-size="15px">
                        </c-icon></view>
                    </view>
                    <view>
                        <view
                            v-for="(live, liveIndex) in lives.list"
                            :key="liveIndex"
                            :class="{
                                'c-gap-top-large': liveIndex !== 0
                            }"
                            class="spe-topic-activity-lives-list"
                            @tap="onClickLives(live.url)"
                        >
                            <view
                                :class="[live.status === 1 ? 'red' : 'gray']"
                                class="spe-topic-activity-lives-list-status"
                            >
                                <view
                                    :class="live.status === 1
                                        ? 'm-icon-shipin shipin'
                                        : (live.status === 2 ? 'm-icon-huifang huifang' : 'm-icon-yugao yugao')"
                                    class="m-icon icon"
                                ></view>
                                <view
                                    :class="live.status === 1 ? 'shipin' : (live.status === 2 ? 'huifang' : 'yugao')"
                                    class="c-font-small txt"
                                >{{ live.statusText }}</view>
                            </view>
                            <view class="spe-topic-activity-lives-list-time">
                                <view>{{ live.time }}</view>
                                <view>{{ live.date }}</view>
                            </view>
                            <view class="spe-topic-activity-lives-list-info c-line-clamp1">
                                <view
                                    :class="[live.name ? 'c-line-clamp1' : 'c-line-clamp2']"
                                    class="spe-topic-activity-lives-list-info-title"
                                >
                                    {{ live.title }}
                                </view>
                                <!-- 医生信息 -->
                                <view v-if="live.name" class="c-line-clamp1">
                                    <text class="spe-topic-activity-lives-list-info-name">{{ live.name }}</text>
                                    <text
                                        v-if="live.level"
                                        class="c-gap-left-small spe-topic-activity-lives-list-info-name"
                                    >{{ live.level }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="wz-intrance-banner">
                    <b-navigate
                        v-if="wzBanner && wzBanner.url"
                        :url="wzBanner.url"
                    >
                        <view
                            class="wz-intrance-banner-img"
                        >
                            <c-image
                                has-compress
                                :src="wzBanner.img"
                                mode="widthFix"
                                width="100%"
                                height="auto"
                                :extra="{column: 12}"
                                :is-round="false"
                                :hack-white-stroke="false"
                                radius="5px"
                            />
                        </view>
                    </b-navigate>
                </view>
                <view v-if="nextApi || topics && topics.length > 0" class="spe-topic-activity-ask c-gap-top-large">
                    <view class="spe-topic-activity-content-header">
                        <view class="spe-topic-activity-content-header-title">
                            <view
                                class="spe-topic-activity-content-header-title-icon c-gap-right m-icon m-icon-wenda"
                            ></view>
                            <text>{{ topic.title }}</text>
                        </view>
                    </view>
                    <view class="spe-topic-activity-content-cards">
                        <b-navigate
                            v-for="(topic, topicIndex) in topics"
                            :key="topicIndex"
                            :url="topic.unifiUrl"
                            :extra="{
                                mod: 'spe-topic-activity-ask-' + topicIndex
                            }"
                        >
                            <view
                                class="spe-topic-activity-content-card"
                            >
                                <view class="spe-topic-activity-ask-inner">
                                    <view class="spe-topic-activity-ask-title">{{ topic.title }}</view>
                                    <view class="spe-topic-activity-ask-content">
                                        <view class="spe-topic-activity-ask-content-text">{{ topic.desc }}</view>
                                        <view class="spe-topic-activity-ask-content-button">立即查看</view>
                                    </view>
                                </view>
                            </view>
                        </b-navigate>
                    </view>
                </view>
                <view class="spe-topic-activity-share-wrapper swan-security-padding-bottom">
                    <view class="spe-topic-activity-share" @tap="onTapShare">分享给我的家人或朋友</view>
                </view>
                <list-loading
                    v-show="loadStatus === 'loading'"
                    :status="loadStatus"
                />
                <view :style="{height: '45px'}" class="swan-security-padding-bottom"></view>
            </view>
        </view>
        <share-img
            v-show="shareImg.show"
            :src="shareImg.src"
            @close="onCloseShare"
        />
    </med-container>
</template>
<script>
/* globals getCurrentPages */

/**
* @file 活动页
* @author yantingxi
*/
import * as conf from '../../../utils/conf';
import * as core from '../../../utils/core';
import {navToBdBoxH5, navigate} from '../../../utils/navigate';
import {request} from '../../../utils/request';
import {send, ShowLog} from '../../../utils/log';
import {shareBdBox} from '../../../utils/share';
import Container from '../../../components/common/container';
import ShareImg from '../../../components/common/share-img';
// import CButton from '@baidu/med-ui/components/Button/Button';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import Navigate from '../../../components/common/navigate';
import ListLoading from '../../../components/common/list-loading';
import CImage from '@components/common/image';

export default {
    data() {
        return {
            pageTitle: '新冠肺炎防护手册',
            isPageRender: false,
            menu: [],
            loadStatus: 'init',
            nextApi: '',
            requesting: false,
            banners: [],
            peoples: [],
            topic: {},
            topics: [],
            gossip: {},
            scrollBanners: [],
            lives: [],

            from: '',

            showLogClass: 'SHOW_LOG_MODULE_' + core.rand(6),
            showLogIns: null,

            shareInfo4Bd: {
                title: '新冠肺炎防护手册',
                content: '关于新冠肺炎的全人群实用指南，有它，一本就够',
                imageUrl: 'https://expertimg.cdn.bcebos.com/expertcms/med/sari_icon.png'
            },
            shareImg: {
                show: false,
                src: 'https://expertimg.cdn.bcebos.com/expertcms/med/sari_share.jpg'
            },
            wzBanner: {}
        };
    },
    onLoad(options) {
        this.getPageData(options);
        this.from = options.sf_ref || '';
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    onHide() {
        if (this.showLogIns) {
            this.showLogIns.reset();
            this.showLogIns.remove();
        }
    },
    mounted() {
        if (process.env.MARS_ENV === 'h5') {
            shareBdBox(this.shareInfo4Bd);
        }
    },
    onReachBottom() {
        this.nextApi && !this.requesting && this.onLoadMore();
    },
    methods: {
        onStop(e) {
            if (process.env.MARS_ENV === 'h5') {
                e.stopPropagation();
            }
        },
        getPageData(options) {

            request({
                url: conf.apiHost + '/med/page/sarihome',
                method: 'GET',
                data: Object.assign({
                    vn: 'med'
                }, options),
                isFirstScreen: true,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(({data, update}) => {

                    const banners = data.banner && data.banner.item;
                    const scrollBanners = banners && banners[0] && banners[0].zhuanlan;

                    let peoples = [];
                    if (data.people) {
                        data.people.normal && peoples.push(data.people.normal);
                        data.people.touch && peoples.push(data.people.touch);
                        data.people.doubt && peoples.push(data.people.doubt);
                        data.people.confirm && peoples.push(data.people.confirm);

                        Object.keys(peoples).map(key => {
                            if (peoples[key].text) {
                                peoples[key].text = [
                                    peoples[key].text.slice(0, 3),
                                    peoples[key].text.slice(3)
                                ];
                            }
                        });
                    }

                    Object.assign(this, {
                        banners,
                        scrollBanners,
                        peoples
                    });

                    if (process.env.MARS_ENV === 'swan') {
                        this.$mp.scope.removeSkeleton();
                    }
                    update.call(this, () => {
                        this.isPageRender = true;
                        this.$mpUpdated().then(() => {
                            // 分屏渲染
                            let topic;
                            let nextApi;
                            if (data.topic && data.topic.feed) {
                                topic = data.topic;
                                nextApi = data.topic.feed.nextApi;
                            }
                            Object.assign(this, {
                                gossip: data.gossip,
                                lives: data.lives,
                                wzBanner: data.wzBanner || {},
                                topic,
                                nextApi
                            });

                            // 更新数据，页面渲染完成后，获取nav的top值，用于吸顶判断
                            try {
                                this.showLogIns = new ShowLog();
                                this.showLogIns.SIGN = '.' + this.showLogClass;
                                this.showLogIns.init();
                            } catch (error) {
                                console.error(error);
                            }
                        });
                    });
                })
                .catch(error => console.error(error));
        },
        onClickBannerLink(link) {
            link.url && navToBdBoxH5(link.url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        },
        onClickScrollBanner(banner, index) {
            banner.tcUrl && navigate({
                url: banner.tcUrl, // 跳转的小程序页面
                extra: {
                    mod: `spe-topic-activity-scroll-topic${index}`,
                    atn: getCurrentPages()[getCurrentPages().length - 1].route
                }
            });
        },
        onClickLives(url) {
            navToBdBoxH5(url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        },
        onClickLivesMore(url) {
            navToBdBoxH5(url, {
                module: 'browser',
                action: 'open',
                parameters: {
                    simple: '1'
                }
            });
        },
        onCloseShare() {
            this.shareImg.show = false;
        },
        onTapShare() {
            this.shareImg.show = true;
            send({
                type: 't',
                action: 'o',
                extra: {
                    page: 'activityShare'
                }
            });
        },
        onLoadMore() {
            // let next;
            this.requesting = true;

            this.nextApi && (this.loadStatus = 'loading');

            this.nextApi && request({
                url: this.nextApi,
                method: 'GET',
                isFirstScreen: false,
                isNeedLogin: false,
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                }
            })
                .then(({data, update}) => {
                    this.topics = this.topics.concat(data.list);
                    this.nextApi = data.feed.nextApi;

                    this.loadStatus = 'init';
                    this.requesting = false;

                    send({
                        type: 't',
                        action: 'slideUp',
                        extra: {
                            page: 'spetopicActivity'
                        }
                    });
                })
                .catch(error => console.error(error));
        },
        onTopicScroll() {
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                send({
                    type: 't',
                    action: 'scroll',
                    extra: {
                        mod: 'scroll-banner-' + this.page
                    }
                });
            }, 700);
        }
    },
    components: {
        CIcon,
        ListLoading,
        // 'c-btn': CButton,
        'b-navigate': Navigate,
        'med-container': Container,
        'share-img': ShareImg,
        CImage
    }
};
</script>

<style lang="less" scoped>
.spe-topic-activity {
    &-header {
        width: 100%;
        // padding-top: 43.4%;
        background-size: cover;
        position: relative;

        &-maps {
            position: absolute;
            display: flex;
            bottom: 0;
            left: 0;
            margin-left: 4.58%;
            margin-bottom: 9.6%;
        }

        &-map {
            display: flex;
            align-items: center;
            background-image: linear-gradient(-135deg, #ffd999 0%, #ffefd1 100%);
            border-radius: 14px;
            font-size: 13px;
            color: #895924;
            padding: 3px 16px;

            &-0 {
                margin-right: 10px;
            }

            &-1 {
                color: #006f7b;
                background-image: linear-gradient(-135deg, #91eff8 0%, #cff7f8 100%);
            }
        }
    }

    &-content {
        position: relative;
        border-radius: 15px 15px 0 0;
        padding: 17px;
        margin-top: -4.83%;
        background: #fff;
        z-index: 1;

        &-header {
            display: flex;
            justify-content: space-between;
            padding: 15px 0;

            &-title {
                display: flex;
                align-items: center;
                font-size: .19rem;
                color: #333;

                &-icon {
                    color: #00cfa3;
                    font-size: .22rem;
                }
            }

            &-more {
                font-size: .16rem;
                color: #999;
            }

            &.padding-top-zero {
                padding: 0 0 15px;
            }
        }

        &-card {
            display: flex;
            margin-bottom: .15rem;
            justify-content: space-between;
            background: #fff;
            box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.08);
            border-radius: 8px;
            padding: 12px 0;
        }
    }

    &-scroll-topic {
        &-wrapper {
            margin: 0 -17px;
        }

        &-inner {
            margin: 0 17px;
            white-space: nowrap;
        }

        &-item {
            display: inline-block;
            position: relative;
            // width: 22.35%;
            // padding-top: 15.6%;
            flex: 0 0 auto;
            border-radius: 5px;
            background-size: cover;

            &:nth-child(n+2) {
                margin-left: 12px;
            }

            &:last-child {
                margin-right: 17px;
            }

            &-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                white-space: nowrap;
                color: #fff;
                font-weight: bold;
                z-index: 2;
            }

            &-masking {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                background: rgba(0, 0, 0, .1);
            }
        }
    }

    &-peoples {
        &-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 20%;
            font-size: .17rem;
            color: #fff;
            flex: 0 0 auto;
            padding: 0 10px;
            margin: -12px 0;
            border-radius: 8px 0 0 8px;
            font-weight: bold;
        }

        &-tabs {
            flex: 1 1 auto;
            margin-left: 15px;
        }

        &-tab {
            display: flex;
            align-items: center;
            font-size: .15rem;
            color: #333;
            line-height: 1;
            padding: 7px 0;

            &-text {
                border-bottom: 1px dashed #333;
            }

            &-icon {
                color: #ff6050;
            }
        }

        &-right {
            display: flex;
            align-items: center;
            color: #ccc;
            margin-right: 20px;
            flex: 0 0 auto;

            &-content {
                display: flex;
                justify-content: center;
                flex-flow: column;
                align-items: center;
            }
        }
    }

    &-rumor {
        &-left {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
        }

        &-icon {
            font-size: .3rem;
            width: 30px;
            height: 30px;
            margin: 0 26px;
        }

        &-content {
            flex: 1 1 auto;
            padding-right: 16px;

            &-title {
                font-size: .17rem;
                color: #333;
            }

            &-description {
                font-size: .14rem;
                color: #252525;
            }
        }
    }

    &-lives {
        &-list {
            display: flex;
            justify-content: flex-start;
            align-items: stretch;
            color: #333;
            font-size: 13px;
            line-height: 23px;
            box-shadow: 0 3.3px 16.7px 0 rgba(0, 0, 0, .08);
            background: #fff;
            border-radius: 6px;

            &-status {
                flex: none;
                white-space: nowrap;
                background: #fafafa;
                padding-top: 7px;
                padding-bottom: 7px;
                width: 60px;
                text-align: center;
                font-family: PingFang-SC-Regular;
                font-size: 10px;
                color: #00c8c8;
                letter-spacing: 0;
                line-height: 12px;
            }

            &-time {
                flex: none;
                white-space: nowrap;
                margin-top: 7px;
                margin-bottom: 7px;
                border-right: 1px solid #f6f6f6;
                margin-right: 10px;
                width: 54px;
                text-align: center;
            }

            &-info {
                flex: 1;
                padding-top: 7px;
                padding-bottom: 7px;
                padding-right: .15rem;
                font-weight: bold;
                font-family: PingFang-SC-Medium;
                font-size: 14px;
                color: #333;
                letter-spacing: 0;
                line-height: 21px;

                &-name {
                    font-size: 12px;
                    color: #999;
                }

                &-title {
                    margin: 0.03rem 0 0 0;
                    font-family: PingFang-SC-Medium;
                    font-size: 14px;
                    color: #333;
                    letter-spacing: 0;
                }
            }
        }
    }

    &-ask {
        &-title {
            font-size: .17rem;
            color: #333;
        }

        &-inner {
            width: 100%;
            padding: 0 15px;
        }

        &-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 7px;
            width: 100%;

            &-text {
                flex: 1 1 auto;
                font-size: .14rem;
                color: #555;
            }

            &-button {
                padding: 7px 12px;
                font-size: 14px;
                color: #fff;
                background: #00c8c8;
                border-radius: 14px;
                line-height: 1;
                flex: 0 0 auto;
            }
        }
    }

    &-share {
        background-image: linear-gradient(-134deg, #00d3ea 0%, #05cfcd 61%, #00cfa3 100%);
        border-radius: 22px;
        font-size: .17rem;
        padding: .11rem;
        text-align: center;
        color: #fff;
        margin: .08rem .17rem;

        &-wrapper {
            position: fixed;
            bottom: 0;
            left: 0;
            background: #f6f6f6;
            width: 100%;
            z-index: 999;
        }
    }
}

.wz-intrance-banner {
    margin-top: 30px;

    &-img {
        width: 100%;
        border-radius: 5px;
    }
}
</style>

<style lang="stylus">
.spe-topic-activity {
    &-content-header-title-icon.small {
        font-size: .2rem;
    }

    &-peoples {
        &-left {
            &.normal {
                background: #26d1b7;
            }

            &.touch {
                background: #5fadff;
            }

            &.doubt {
                background: #45c5ec;
            }

            &.confirm {
                background: #ff6050;
            }
        }
    }

    &-rumor {
        &-icon {
            &.error {
                color: #ff6050;
            }

            &.right {
                color: #00c8c8;
            }
        }
    }

    &-lives-list {
        &-status {
            &.red {
                color: #f86b62;
            }

            &.gray {
                color: #00c8c8;
                background: #fafafa;
                border-radius: 6px 0px 0px 6px;
            }

            .icon {
                font-size: 22px;
                line-height: 26px;
                padding-top: 1px;
            }

            .txt {
                line-height: 1;
                padding-top: 6px;
            }
        }
    }
}
</style>
