<template>
    <b-med-container
        class="med-theme-home"
        bg-color="#ffffff"
        :hide-header="true"
        :share-config="shareInfo4Bd"
        :class="{real: isPageRender}"
    >
        <!-- 顶部 -->
        <top-bar
            :new-home-url="homeurl"
            bar-bg="transparent"
            :text-color="textColor"
            :blank="false"
            :title="title"
            :z-index="202"
            :hide-home="isOppoWebview"
            :hide-back="isOppoWebview"
            @topbarHeightHandle="topbarHeightHandle"
        />
        <view
            v-if="reloadBar"
            class="custom-header-topbar-bg"
            :style="{
                height: topbarHeight + 'px',
                background: topBarBg,
            }"
        />
        <view class="theme-card">
            <!-- 头部图片 -->
            <view
                v-if="topicBaseInfo && topicBaseInfo.list && topicBaseInfo.list.length > 0"
                class="head-image"
                :style="{
                    height: isHideTopBar() ? '521px' : '',
                }"
            >
                <c-image
                    has-compress
                    :src="topicBaseInfo.list[0].topicHeadImage"
                    mode="widthFix"
                    width="100%"
                    height="auto"
                    :is-round="false"
                    :hack-white-stroke="false"
                />
            </view>
            <!-- 过年插进来的图只在id=143展示 请求410动态配置好的图片-->
            <view v-if="bannerImages && bannerImages.length && channelId * 1 === 143">
                <swiper
                    :style="{
                        height: bannerHeight,
                        overflowY: 'visible',
                        width: screenWidth + 'px',
                        marginTop: '12px',
                    }"
                    autoplay
                    :duration="300"
                    :interval="3000"
                    :current="currentIndex"
                    :previous-margin="'13px'"
                    :next-margin="'13px'"
                    @change="onPageChange"
                >
                    <swiper-item
                        v-for="(item, index) in bannerImages"
                        :key="index"
                        :style="{
                            overflow: 'visible',
                        }"
                    >
                        <view
                            class="spe-swiper-item"
                            :style="{
                                margin: '0 4px',
                                boxShadow: true ? '0 3.3px 17.3px 0 rgba(0,0,0,.08)' : '',
                            }"
                        >
                            <image
                                :src="item.url"
                                :style="{height: bannerHeight}"
                                class="spe-swiper-item-image"
                            />
                        </view>
                    </swiper-item>
                </swiper>
                <view :style="{top: '10px', position: 'relative', height: '8px'}">
                    <c-dot
                        :length="bannerImages.length"
                        :cur-index="currentIndex"
                        :selected-color="'#00C8C8'"
                        :color="'#ccc'"
                    />
                </view>
            </view>
            <!-- 模块区 -->
            <view v-for="(item, index) in topicModuleList" :key="index">
                <!-- 自定义内容区 -->
                <view v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicCustomContent'">
                    <view
                        v-if="item.list[0].customTitle"
                        class="haad-line-padd"
                        :style="{marginBottom: '-15px'}"
                    >
                        <head-line
                            :title="item.list[0].customTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-book-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 :
                                        (index < 14 ? index - 8 : (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <view
                        v-for="(customItem, customIndex) in item.list[0].customList"
                        :key="'customItem' + customIndex"
                    >
                        <view class="article-card-line">
                            <recommend-item
                                :top-line="false"
                                :bottom-line="customIndex !== item.list[0].customList.length - 1"
                                :is-yd="true"
                                :title="customItem.customContent || ''"
                                :image="customItem.image"
                                :doctor="{
                                    name: customItem.customSubContent || '',
                                }"
                                :out-link="customItem.jumpType === 'tcUrl' ? customItem.link : ''"
                                :url="customItem.jumpType === 'tcUrl' ? '' : customItem.link"
                            />
                        </view>
                    </view>
                </view>
                <!-- 直播强卡 -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicLiveCard'"
                    :style="{marginBottom: item.list[0].liveList.length > 1 ? '20px' : '0px'}"
                    class="coop-hide-element"
                    :class="liveCardUbcShowLogClass"
                    :data-extra="item.list[0].itemId"
                >
                    <view class="padd-two margin-down">
                        <head-line
                            v-if="item.list[0].liveCardTitle"
                            :title="item.list[0].liveCardTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-video-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                        (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <live-card-banner
                        :data="item.list[0].liveList"
                        :banner-height="screenWidth * 0.6022 - 34 + 52 + 34"
                        :bottom-dot-gap="-11"
                        :width-gap="0"
                        :type="'strong'"
                        :is-iframe="isHideTopBar() ? true : false"
                        @liveCardTap="themeIndexUbcSend('mbzt_zhibokapian', item.list[0].itemId)"
                    />
                </view>
                <!-- 直播弱卡 -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicLiveList'"
                    :style="{marginBottom: item.list[0].liveListThree.length > 1 ? '20px' : '0px'}"
                    class="coop-hide-element"
                    :class="liveListUbcShowLogClass"
                    :data-extra="item.list[0].itemId"
                >
                    <view class="padd-two margin-down">
                        <head-line
                            v-if="item.list[0].liveListTitle"
                            :title="item.list[0].liveListTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-video-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                        (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <live-card-banner
                        :data="item.list[0].liveListThree"
                        :banner-height="234"
                        :bottom-dot-gap="-20"
                        :width-gap="0"
                        :type="'weak'"
                        @liveListTap="themeIndexUbcSend('mbzt_zhiboliebiao', item.list[0].itemId)"
                    />
                </view>
                <!--  弱卡区  -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicDiseaseWeek'"
                    class="weak-card"
                    :class="btnWordCardUbcShowLogClass"
                    :data-extra="item.list[0].itemId"
                >
                    <view v-if="item.list[0].diseaseWeekTitle" class="haad-line-padd">
                        <head-line
                            :title="item.list[0].diseaseWeekTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="'https://bj.bcebos.com/v1/medical-cms/pic/med-disease-icon1.png'"
                        />
                    </view>
                    <weak-card
                        :list="item.list[0].diseaseWeek"
                        :mod="'theme-weak-card'"
                        :dot-prop="{dotValue: 'mbzt_citiaoanniu', dotExt: item.list[0].itemId}"
                    />
                </view>
                <!--  强卡区  -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicDiseaseStrong'"
                    class="weak-card"
                >
                    <view v-if="item.list[0].diseaseStrongTitle" class="haad-line-padd">
                        <head-line
                            :title="item.list[0].diseaseStrongTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="'https://bj.bcebos.com/v1/medical-cms/pic/med-disease-icon1.png'"
                        />
                    </view>
                    <view
                        v-if="item.list[0].diseaseStrong && item.list[0].diseaseStrong.length > 0"
                        class="strong-card-list-padd"
                    >
                        <view
                            v-for="(diseaseStrongItem, diseaseStrongIndex) in item.list[0].diseaseStrong"
                            :key="'diseaseStrongItem' + diseaseStrongIndex"
                            :class="
                                diseaseStrongIndex !== item.list[0].diseaseStrong.length - 1 ? 'c-gap-bottom-large' : ''
                            "
                        >
                            <strong-card
                                :strong-data="diseaseStrongItem"
                                :mod="'theme-strong-card'"
                                :class="wordCardUbcShowLogClass"
                                :data-extra="item.list[0].itemId"
                                :dot-props="{dotValue: 'mbzt_citiaokapian', dotExt: item.list[0].itemId}"
                            />
                        </view>
                    </view>
                </view>
                <!-- 药品商业化卡区 -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicText'"
                    class="drug-card"
                >
                    <view v-if="item.list[0].textTitle" class="haad-line-padd">
                        <head-line
                            :title="item.list[0].textTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-book-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                        (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <view v-if="item.list[0].textArea" class="drug-content">{{ item.list[0].textArea }}</view>
                </view>
                <!-- 内容卡区 -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicContent'"
                    class="content-card"
                    :class="contentUbcShowLogClass"
                    :data-extra="item.list[0].itemId"
                >
                    <view
                        v-if="item.list[0].contentTitle"
                        class="haad-line-padd"
                        :style="{marginBottom: '-15px'}"
                    >
                        <head-line
                            :title="item.list[0].contentTitle"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-book-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                        (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <view
                        v-for="(contentItem, contentIndex) in item.list[0].content"
                        :key="'contentItem' + contentIndex"
                    >
                        <!-- 视频卡区 -->
                        <view v-if="contentItem.contentType === '2'" class="padd-two">
                            <view
                                class="video-card-line-bottom"
                                :class="contentIndex !== item.list[0].content.length - 1 ? 'c-line-bottom' : ''"
                                @tap="themeIndexUbcSend('mbzt_neirongqu', item.list[0].itemId)"
                            >
                                <view v-if="contentItem.title" class="video-card-title c-line-clamp1">
                                    {{ contentItem.title }}
                                </view>
                                <view class="video-wrap">
                                    <c-video
                                        :id="'video' + index + contentIndex"
                                        :video-data="{
                                            duration: contentItem.duration,
                                            poster: contentItem.poster,
                                            title: contentItem.title,
                                            video: contentItem.video,
                                        }"
                                        :has-gap="false"
                                        :object-fit="contentItem.isVertical === '1' ? 'contain' : 'cover'"
                                        :is-iframe="isHideTopBar() ? true : false"
                                    />
                                </view>
                                <view v-if="contentItem.author" class="video-card-name c-line-clamp1">
                                    {{ contentItem.author.name }} {{ contentItem.author.introduction }}
                                </view>
                            </view>
                        </view>
                        <!-- 文章卡区 -->
                        <view v-if="contentItem.contentType === '1'" class="article-card-line">
                            <recommend-item
                                :top-line="false"
                                :bottom-line="contentIndex !== item.list[0].content.length - 1"
                                :is-yd="true"
                                :title="contentItem.title || ''"
                                :doctor="{
                                    name: contentItem.author.name || '',
                                    rank:
                                        contentItem.author.authorType * 1 === 1
                                            ? contentItem.author.title
                                            : contentItem.author.introduction || '',
                                    hospital: contentItem.author.hospital || '',
                                }"
                                :image="contentItem.coverPic"
                                :url="contentItem.url || ''"
                                @articlesDetailDot="themeIndexUbcSend('mbzt_neirongqu', item.list[0].itemId)"
                            />
                        </view>
                    </view>
                </view>
                <!--  图片卡区 -->
                <view
                    v-if="item.list && item.list.length > 0 && item.moduleKey === 'topicImage'"
                    class="banner-card"
                    :class="picsUbcShowLogClass"
                    :data-extra="item.list[0].itemId"
                >
                    <head-line
                        v-if="item.list[0].imageTitle"
                        :title="item.list[0].imageTitle"
                        :more-url="item.moreUrl"
                        :more-text="item.moreName"
                        :show-arrow="false"
                        :icon="
                            'https://bj.bcebos.com/v1/medical-cms/pic/med-book-icon' +
                                (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                    (index < 19 ? index - 13 : romdernum))) +
                                '.png'
                        "
                    />
                    <view
                        class="banner-card-pic"
                    >
                        <c-image
                            has-compress
                            :src="item.list[0].image"
                            width="100%"
                            height="auto"
                            radius="4px"
                            mode="widthFix"
                            :is-round="false"
                            :hack-white-stroke="false"
                            @tap="goUrl(item.list[0].jumpType, item.list[0].link, item.list[0].itemId, 3)"
                        />
                    </view>
                </view>
                <!-- pk卡区 -->
                <view v-if="item.list && item.moduleKey === 'topicPK'" class="pk-card">
                    <head-line
                        v-if="item.list.moduleDisPlayName"
                        :title="item.list.moduleDisPlayName"
                        :more-url="item.moreUrl"
                        :more-text="item.moreName"
                        :show-arrow="false"
                        :icon="
                            'https://bj.bcebos.com/v1/medical-cms/pic/med-pk-icon' +
                                (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                    (index < 19 ? index - 13 : romdernum))) +
                                '.png'
                        "
                    />
                    <view class="pk-card-in">
                        <view class="pk-card-name c-line-clamp2">
                            {{ item.list.pkTitle }}
                        </view>
                        <view class="pk-card-desc c-line-clamp2">
                            {{ item.list.pkText }}
                        </view>
                        <view
                            v-if="item.list.options && item.list.options.length > 1"
                            class="pk-card-btn"
                            :class="pkChooseUbcShowLogClass"
                            :data-extra="item.list.itemId"
                        >
                            <view
                                class="pk-card-btn-left"
                                :style="{width: item.list.options[0].percent + '%'}"
                                :class="item.list.isChooseOption ? 'pk-card-btn-left-active' : ''"
                                @tap="goPk(index, 0, item.list.itemId)"
                            >
                                <view v-if="!item.list.isChooseOption" class="pk-card-zan">
                                    <image
                                        src="http://bj.bcebos.com/v1/medical-cms/pic/pic_1588659597697bkvb3mLb.png"
                                        class="pk-card-zan-line"
                                        :class="item.list.options[0].isChoose ? 'pk-card-zan-line-active' : ''"
                                    />
                                    <image
                                        v-if="!item.list.isChooseOption"
                                        src="http://bj.bcebos.com/v1/medical-cms/pic/pic_1588238971256kRoFmuky.png"
                                        class="pk-card-zan"
                                        :class="item.list.options[0].isChoose ? 'pk-card-btn-zan-active' : ''"
                                    />
                                </view>
                                <view>
                                    <view
                                        class="pk-card-btn-title"
                                        :class="item.list.isChooseOption ? 'pk-card-btn-title-normal' : ''"
                                    >
                                        {{
                                            item.list.options[0].isChoose && item.list.isChooseOption
                                                ? item.list.options[0].title + '(已选)'
                                                : item.list.options[0].title
                                        }}
                                    </view>
                                    <view
                                        v-if="item.list.isChooseOption"
                                        class="pk-card-btn-number"
                                        :class="item.list.isChooseOption ? 'card-see-book-active' : ''"
                                    >
                                        {{ item.list.options[0].number }}
                                    </view>
                                </view>
                            </view>
                            <view
                                class="pk-card-btn-right"
                                :style="{width: item.list.options[1].percent + '%'}"
                                :class="item.list.isChooseOption ? 'pk-card-btn-right-active' : ''"
                                @tap="goPk(index, 1, item.list.itemId)"
                            >
                                <view v-if="!item.list.isChooseOption" class="pk-card-zan">
                                    <view
                                        class="pk-card-zan-line"
                                        :class="item.list.options[1].isChoose ? 'pk-card-zan-line-active' : ''"
                                    >
                                        <c-image
                                            has-compress
                                            width="20px"
                                            height="7px"
                                            src="http://bj.bcebos.com/v1/medical-cms/pic/pic_1588659597697bkvb3mLb.png"
                                            :is-round="false"
                                            :hack-white-stroke="false"
                                        />
                                    </view>
                                    <view
                                        v-if="!item.list.isChooseOption"
                                        class="pk-card-zan"
                                        :class="item.list.options[1].isChoose ? 'pk-card-btn-zan-active' : ''"
                                    >
                                        <c-image
                                            has-compress
                                            width="18px"
                                            height="18px"
                                            src="http://bj.bcebos.com/v1/medical-cms/pic/pic_1588238971256kRoFmuky.png"
                                            :is-round="false"
                                            :hack-white-stroke="false"
                                        />
                                    </view>
                                </view>
                                <view>
                                    <view
                                        class="pk-card-btn-title"
                                        :class="item.list.isChooseOption ? 'pk-card-btn-title-normal' : ''"
                                    >
                                        {{
                                            item.list.options[1].isChoose && item.list.isChooseOption
                                                ? item.list.options[1].title + '(已选)'
                                                : item.list.options[1].title
                                        }}
                                    </view>
                                    <view
                                        v-if="item.list.isChooseOption"
                                        class="pk-card-btn-number"
                                        :class="item.list.isChooseOption ? 'card-see-book-active' : ''"
                                    >
                                        {{ item.list.options[1].number }}
                                    </view>
                                </view>
                            </view>
                            <view
                                class="pk-card-btn-middle"
                                :style="{left: item.list.options[0].percent + '%' || '50%'}"
                            >
                                <c-image
                                    has-compress
                                    width="62px"
                                    height="62px"
                                    src="https://medical-cms.cdn.bcebos.com/pic/pic_15892711650375qXfkQPe.png"
                                    :hack-white-stroke="false"
                                />
                            </view>
                        </view>
                        <view class="pk-card-bottom">
                            <view> {{ item.list.total }}人参与 </view>
                            <view> 选择后即可查看结果 </view>
                        </view>
                        <view
                            class="card-see-book-out"
                            :class="pkNavigateUbcShowLogClass"
                            :data-extra="item.list.itemId"
                        >
                            <view
                                v-if="item.list.isChooseOption && item.list.link"
                                class="card-see-book"
                                :class="item.list.isChooseOption ? 'card-see-book-active' : ''"
                                @tap="goUrl(item.list.jumpType, item.list.link, item.list.itemId, 1)"
                            >
                                {{ item.list.linkText || '查看权威解读' }}
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 投票卡区 -->
                <view v-if="item.list && item.moduleKey === 'topicVote'" class="pk-card ticket-card">
                    <head-line
                        v-if="item.list.moduleDisPlayName"
                        :title="item.list.moduleDisPlayName"
                        :more-url="item.moreUrl"
                        :more-text="item.moreName"
                        :show-arrow="false"
                        :icon="
                            'https://bj.bcebos.com/v1/medical-cms/pic/med-ticket-icon' +
                                (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                    (index < 19 ? index - 13 : romdernum))) +
                                '.png'
                        "
                    />
                    <view class="pk-card-in">
                        <view class="pk-card-name c-line-clamp2">
                            {{ item.list.voteTitle }}
                        </view>
                        <view class="pk-card-desc c-line-clamp2">
                            {{ item.list.voteText }}
                        </view>
                        <view
                            v-for="(optionsItem, optionsIndex) in item.list.options"
                            :key="optionsIndex"
                            class="pk-card-btn-line"
                            :class="
                                item.list.isChooseOption
                                    ? optionsItem.isChoose
                                        ? 'pk-card-btn-line-active' + ' ' + ticketChooseUbcShowLogClass
                                        : 'pk-card-btn-line-normal' + ' ' + ticketChooseUbcShowLogClass
                                    : ticketChooseUbcShowLogClass
                            "
                            :data-extra="item.list.itemId"
                            @tap="goTicket(index, optionsIndex, item.list.itemId)"
                        >
                            <view class="pk-card-btn-line-left" :style="{width: optionsItem.percent + '%'}"/>
                            <view
                                class="pk-card-btn-line-up"
                                :class="!item.list.isChooseOption ? 'pk-card-btn-line-up-center' : ''"
                            >
                                <text class="c-font-normal">
                                    {{ optionsItem.title }}
                                </text>
                                <text v-if="item.list.isChooseOption" class="c-font-small">
                                    {{ optionsItem.number }}
                                </text>
                            </view>
                        </view>
                        <view class="pk-card-bottom">
                            <view> {{ item.list.total }}人参与 </view>
                            <view> 选择后即可查看结果 </view>
                        </view>
                        <view
                            class="card-see-book-out"
                            :class="ticketNavigateUbcShowLogClass"
                            :data-extra="item.list.itemId"
                        >
                            <view
                                v-if="item.list.isChooseOption && item.list.link"
                                class="card-see-book"
                                :class="item.list.isChooseOption ? 'card-see-book-active ' : ''"
                                @tap="goUrl(item.list.jumpType, item.list.link, item.list.itemId, 2)"
                            >
                                {{ item.list.linkText || '查看权威解读' }}
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 往期专题 -->
                <view v-if="item.list && item.list.length > 0 && item.moduleKey === 'moduleMore'">
                    <view
                        v-if="item.moduleDisPlayName"
                        class="haad-line-padd"
                        :class="yetTopicsUbcShowLogClass"
                    >
                        <head-line
                            :title="item.moduleDisPlayName"
                            :more-url="item.moreUrl"
                            :more-text="item.moreName"
                            :show-arrow="false"
                            :icon="
                                'https://bj.bcebos.com/v1/medical-cms/pic/med-theme-icon' +
                                    (index < 5 ? index + 1 : index < 9 ? index - 4 : (index < 14 ? index - 8 :
                                        (index < 19 ? index - 13 : romdernum))) +
                                    '.png'
                            "
                        />
                    </view>
                    <topic-scroll :topics="item" @yetTopicsItem="yetTopicsItem"/></view>
            </view>
        </view>
        <!-- 底部 -->
        <view
            v-if="!isHideTopBar() && topicBrandInfo && topicBrandInfo.list && topicBrandInfo.list.length > 0"
            class="footer-card"
        >
            <view
                v-if="topicBrandInfo.list[0].brandImage"
                class="footer-card-icon"
            >
                <c-image
                    has-compress
                    width="140px"
                    height="14px"
                    :src="topicBrandInfo.list[0].brandImage"
                    mode="widthFix"
                    :is-round="false"
                    :hack-white-stroke="false"
                />
            </view>
            <view v-if="topicBrandInfo.list[0].brandTitle" class="footer-card-name">
                {{ topicBrandInfo.list[0].brandTitle }}
            </view>
            <view v-if="topicBrandInfo.list[0].brandText" class="footer-card-tips">
                {{ topicBrandInfo.list[0].brandText }}
            </view>
        </view>
        <!-- 分享区 -->
        <view
            v-if="
                !isHideTopBar() &&
                    topicShareInfo &&
                    topicShareInfo.list &&
                    topicShareInfo.list.length > 0 &&
                    topicShareInfo.list[0].shareInnerImage
            "
            class="theme-share"
            @tap="goShare"
        >
            <c-image
                has-compress
                width="96px"
                height="42px"
                mode="widthFix"
                :src="topicShareInfo.list[0].shareInnerImage"
                :is-round="false"
                :hack-white-stroke="false"
            />
        </view>
        <view
            v-if="showShare"
            class="theme-mask"
            @tap="showShare = !showShare"
        >
            <view class="theme-mask-image">
                <c-image
                    has-compress
                    width="235px"
                    height="98px"
                    src="https://medical-cms.cdn.bcebos.com/pic/pic_1589344997015cd5iFInc.png"
                    :is-round="false"
                    :hack-white-stroke="false"
                />
            </view>
        </view>
    </b-med-container>
</template>
<script>
/* global getApp */
/**
 * @file 百度健康医典 模板专题页
 * @author yumingzhi
 */
import container from '@components/common/container';
import TopBar from '@components/common/topbar';
import RecommendItem from '@components/speTopic/Recommend/RecommendItem';
import Video from '@components/common/video';
import TopicScroll from '@components/speTopic/dict/topicScroll';
import HeadLine from '@components/speTopic/dict/headLine';
import WeakCard from '@components/speTopic/dict/theme/WeakCard';
import StrongCard from '@components/speTopic/dict/theme/StrongCard';
import LiveCardBanner from '@components/speTopic/dict/theme/LiveCardBanner';
import Dot from '@components/common/indicator';
import {send, CollectLog, ubcSend} from '@utils/log';
import * as core from '@utils/core';
import * as Conf from '@utils/conf';
import {request} from '@utils/request';
import {navToBdBoxH5, navigate} from '@utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
import {setPageInfo, DICT_PREFIX} from '@utils/pagetit';
import {COOKIE_KEY} from '@utils/constant';
import cookie from '@utils/cookie';

import CImage from '@components/common/image';

export default {
    config: {
        navigationStyle: 'custom',
        navigationBarTextStyle: 'black'
    },
    components: {
        BMedContainer: container,
        TopBar: TopBar,
        RecommendItem: RecommendItem,
        CVideo: Video,
        TopicScroll: TopicScroll,
        HeadLine: HeadLine,
        WeakCard: WeakCard,
        StrongCard: StrongCard,
        LiveCardBanner: LiveCardBanner,
        CDot: Dot,
        CImage
    },
    data() {
        let isSwan = true;
        let isOppoWebview = false;
        if (process.env.MARS_ENV === 'h5') {
            isSwan = false;
            isOppoWebview = !!cookie(COOKIE_KEY.IS_OPPO_WEBVIEW);
        }
        return {
            romdernum: 3,
            screenWidth: 375,
            isSwan: isSwan,
            title: ' ',
            barTextColor: '#ffffff',
            barClass: 'transparent',
            isPageRender: false,
            topicBaseInfo: {}, // 标题、头图等
            topicBrandInfo: {}, // 底部品牌信息
            topicShareInfo: {}, // 分享信息
            topicModuleList: [], // 模块列表
            shareInfo4Bd: {
                title: '百度健康医典',
                content: '医典联合顶级专家机构，共建权威健康科普知识平台',
                imageUrl: 'https://med-fe.cdn.bcebos.com/yd%2Fyd-share-dis.png'
            },
            canClick: true,
            reloadBar: true,
            needTimer: true,
            textColor: '#FFF',
            topbarHeight: 44,
            topBarBg: 'transparent',
            showShare: false,
            currentIndex: 0,
            channelId: '',
            bannerImages: [],
            bannerHeight: '520px',
            isOppoWebview: isOppoWebview,
            homeurl: '/pages/speTopic/dict/home/index', // 指定home跳转地址
            isInApp: getApp().globalData.isInApp,
            pkChooseUbcShowLogClass: 'pkChooseUbcShowLogClass' + core.rand(6),
            pkNavigateUbcShowLogClass: 'pkNavigateUbcShowLogClass' + core.rand(6),
            ticketChooseUbcShowLogClass: 'ticketChooseUbcShowLogClass' + core.rand(6),
            ticketNavigateUbcShowLogClass: 'ticketNavigateUbcShowLogClass' + core.rand(6),
            picsUbcShowLogClass: 'picsUbcShowLogClass' + core.rand(6),
            contentUbcShowLogClass: 'contentUbcShowLogClass' + core.rand(6),
            wordCardUbcShowLogClass: 'wordCardUbcShowLogClass' + core.rand(6),
            yetTopicsUbcShowLogClass: 'yetTopicsUbcShowLogClass' + core.rand(6),
            btnWordCardUbcShowLogClass: 'btnWordCardUbcShowLogClass' + core.rand(6),
            liveCardUbcShowLogClass: 'liveCardUbcShowLogClass' + core.rand(6),
            liveListUbcShowLogClass: 'liveListUbcShowLogClass' + core.rand(6)
        };
    },
    onShareAppMessage() {
        return this.shareInfo4Bd;
    },
    onHide() {},
    onLoad(options) {
        this.getThemeInfo(options);
        this.channelId = options.channelId || 143;
        // 如果channelId=== 143 获取春节专题下的动态图片
        if (+this.channelId === 143) {
            this.getBannerImages();
        }
        // PV日志发送
        send({
            type: 'l',
            action: 'ydThemePage',
            extra: {
                channelId: options.channelId || ''
            }
        });
    },
    created() {
        if (!getSystemInfo().system) {
            this.bannerWidth = 323;
        } else {
            this.screenWidth = getSystemInfo().screenWidth;
        }
        // 获取新年banner高度
        this.bannerHeight = (getSystemInfo().screenWidth - 26) * 948 / 620 + 'px';
    },
    mounted() {
        this.$nextTick(function () {
            const ubcSendInfos = [
                {signClass: this.pkChooseUbcShowLogClass, value: 'mbzt_pkxuanze1'},
                {signClass: this.pkNavigateUbcShowLogClass, value: 'mbzt_pktiaozhuan1'},
                {signClass: this.ticketChooseUbcShowLogClass, value: 'mbzt_toupiaoxuanze1'},
                {signClass: this.ticketNavigateUbcShowLogClass, value: 'mbzt_toupiaotiaozhuan1'},
                {signClass: this.picsUbcShowLogClass, value: 'mbzt_tupianqu1'},
                {signClass: this.contentUbcShowLogClass, value: 'mbzt_neirongqu1'},
                {signClass: this.wordCardUbcShowLogClass, value: 'mbzt_citiaokapian1'},
                {signClass: this.yetTopicsUbcShowLogClass, value: 'mbzt_wangqizhuanti1'},
                {signClass: this.btnWordCardUbcShowLogClass, value: 'mbzt_citiaoanniu1'},
                {signClass: this.liveCardUbcShowLogClass, value: 'mbzt_zhibokapian1'},
                {signClass: this.liveListUbcShowLogClass, value: 'mbzt_zhiboliebiao1'}
            ];
            for (let i = 0, length = ubcSendInfos.length; i < length; i++) {
                new CollectLog({
                    SIGN: ubcSendInfos[i].signClass,
                    sendCallback: itemId => {
                        ubcSend({
                            type: 'view',
                            value: ubcSendInfos[i].value,
                            page: 'pages/speTopic/dict/theme/index',
                            ext: {
                                value_id: itemId ? itemId : ''
                            }
                        });
                    }
                });
            }
        });

        // iframe嵌入时 隐藏
        if (this.isHideTopBar()) {
            this.reloadBar = false;
        }
    },
    onPageScroll(e) {
        this.needTimer = true;
        this.setBarBgByScroll(e.scrollTop);
    },
    methods: {
        onPageChange(e) {
            this.currentIndex = e.detail.current;
        },
        getThemeInfo(options) {
            if (!options.channelId) {
                Object.assign(options, {channelId: 26});
            }
            request({
                url: Conf.apiHost + '/med/page/jp/special/info',
                method: 'GET',
                data: options,
                isNeedLogin: false,
                isFirstScreen: true
            })
                .then(res => {
                    if (res.data) {
                        const {topicBaseInfo = {}, topicBrandInfo, topicShareInfo} = res.data;
                        Object.assign(this, {
                            topicBaseInfo,
                            topicBrandInfo,
                            topicShareInfo
                        });
                        if (topicBaseInfo.list && topicBaseInfo.list[0] && topicBaseInfo.list[0].topicTitle) {
                            setPageInfo({title: DICT_PREFIX + topicBaseInfo.list[0].topicTitle});
                        }
                        // 过滤一些数据（1、字符长度问题 2、进度条默认宽度问题3、专题列表字段名称问题）
                        if (res.data.topicModuleList && res.data.topicModuleList.length > 0) {
                            res.data.topicModuleList.forEach(item => {
                                if (item.moduleKey === 'topicDiseaseWeek' && item.list.length > 0) {
                                    item.list[0].diseaseWeek.forEach(weakItem => {
                                        if (this.getByteLen(weakItem.name) > 10) {
                                            weakItem.moreWords = true;
                                        }
                                    });
                                }
                                if (item.moduleKey === 'topicPK' && item.list) {
                                    if (item.list.isChooseOption) {
                                        item.list.options.forEach(pkItem => {
                                            if (pkItem.percent > 70) {
                                                pkItem.percent = 70;
                                            } else if (pkItem.percent < 30) {
                                                pkItem.percent = 30;
                                            }
                                        });
                                    }
                                }
                                if (item.moduleKey === 'moduleMore' && item.list) {
                                    item.list.forEach(moduleItem => {
                                        moduleItem.name = moduleItem.topicTitle || '';
                                        moduleItem.imgUrl = moduleItem.topicHeadImage || '';
                                        moduleItem.jumpUrl = moduleItem.url || '';
                                    });
                                }
                                // 格式化直播的数据
                                if (item.moduleKey === 'topicLiveList' && item.list) {
                                    item.list.forEach(moduleItem => {
                                        moduleItem.liveList.forEach(liveItem => {
                                            let date = liveItem.date.split('/');
                                            liveItem.formatDate = date[1] + '/' + date[2];
                                        });
                                        let liveListThree = [];
                                        if (moduleItem.liveList.length <= 3) {
                                            liveListThree[0] = moduleItem.liveList;
                                        } else {
                                            // 单层数组转多层数组 每组3个
                                            let len = Math.ceil(moduleItem.liveList.length / 3);
                                            for (let i = 0; i < len; i++) {
                                                let arr = [];
                                                for (let j = 0; j < 3; j++) {
                                                    if (i * 3 + j < moduleItem.liveList.length) {
                                                        arr[j] = moduleItem.liveList[i * 3 + j];
                                                    }
                                                }
                                                liveListThree.push(arr);
                                            }
                                        }
                                        moduleItem.liveListThree = liveListThree;
                                    });
                                }
                            });
                        }
                        // 设置分享数据
                        if (res.data.topicShareInfo && res.data.topicShareInfo.list.length > 0) {
                            const shareData = {};
                            /* eslint-disable max-len */
                            shareData.title =
                                res.data.topicShareInfo.list[0] && res.data.topicShareInfo.list[0].shareTitle;
                            shareData.content =
                                res.data.topicShareInfo.list[0] && res.data.topicShareInfo.list[0].shareText;
                            shareData.imageUrl =
                                res.data.topicShareInfo.list[0] && res.data.topicShareInfo.list[0].shareImage;
                            Object.assign(this, {
                                shareInfo4Bd: shareData
                            });
                        }
                        Object.assign(this, {
                            topicModuleList: res.data.topicModuleList
                        });
                        res.update.call(this, () => {
                            this.isPageRender = true;
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        goPk(index, optionsIndex, thisItemId) {
            this.themeIndexUbcSend('mbzt_pkxuanze', thisItemId);
            if (!this.topicModuleList[index].list.isChooseOption && this.canClick) {
                this.canClick = false;
                request({
                    url: Conf.apiHost + '/med/page/jp/special/select',
                    method: 'GET',
                    data: {
                        itemId: this.topicModuleList[index].list.itemId,
                        option: optionsIndex,
                        type: 0 // 0是PK 1是投票
                    },
                    isNeedLogin: false
                })
                    .then(res => {
                        if (res.data) {
                            this.topicModuleList[index].list.options[optionsIndex].number =
                                res.data.options[optionsIndex].number;
                            this.topicModuleList[index].list.total = res.data.total;
                            this.topicModuleList[index].list.options[optionsIndex].isChoose = true;
                            setTimeout(() => {
                                this.topicModuleList[index].list.isChooseOption = res.data.isChooseOption;
                                // 兼容过少情况
                                if (res.data.options[0].percent < 30) {
                                    res.data.options[0].percent = 30;
                                    res.data.options[1].percent = 70;
                                } else if (res.data.options[0].percent > 70) {
                                    res.data.options[0].percent = 70;
                                    res.data.options[1].percent = 30;
                                }
                                this.topicModuleList[index].list.options[0].percent = res.data.options[0].percent;
                                this.topicModuleList[index].list.options[1].percent = res.data.options[1].percent;
                                this.canClick = true;
                            }, 1500);
                        }
                    })
                    .catch(err => {
                        this.canClick = true;
                        console.log(err);
                    });
            }
        },
        goTicket(index, optionsIndex, thisItemId) {
            this.themeIndexUbcSend('mbzt_toupiaoxuanze', thisItemId);
            if (!this.topicModuleList[index].list.isChooseOption && this.canClick) {
                this.canClick = false;
                request({
                    url: Conf.apiHost + '/med/page/jp/special/select',
                    method: 'GET',
                    data: {
                        itemId: this.topicModuleList[index].list.itemId,
                        option: optionsIndex,
                        type: 1 // 0是PK 1是投票
                    },
                    isNeedLogin: false
                })
                    .then(res => {
                        if (res.data) {
                            this.topicModuleList[index].list.total = res.data.total;
                            this.topicModuleList[index].list.isChooseOption = res.data.isChooseOption;
                            this.topicModuleList[index].list.options = res.data.options;
                        }
                        this.canClick = true;
                    })
                    .catch(err => {
                        this.canClick = true;
                        console.log(err);
                    });
            }
        },
        getByteLen(val) {
            let len = 0;
            for (let i = 0; i < val.length; i++) {
                let a = val.charAt(i);
                if (a.match(/[^\x00-\xff]/gi) != null) {
                    len += 2;
                } else {
                    len += 1;
                }
            }
            return len;
        },
        goUrl(jumpType, jumpUrl, thisItemId, number) {
            let dotValue = '';
            switch (number) {
                case 1:
                    dotValue = 'mbzt_pktiaozhuan';
                    break;
                case 2:
                    dotValue = 'mbzt_toupiaotiaozhuan';
                    break;
                case 3:
                    dotValue = 'mbzt_tupianqu';
                    break;
                default:
                    dotValue = '';
                    break;
            }
            this.themeIndexUbcSend(dotValue, thisItemId);
            if (jumpType === 'unifiUrl') {
                navigate({url: jumpUrl});
            } else {
                if (this.isSwan) {
                    navToBdBoxH5(jumpUrl);
                } else {
                    navigate({url: jumpUrl, urlType: '2'});
                }
            }
        },
        goShare() {
            if (this.isSwan || this.isInApp) {
                this.$api.openShare({
                    ...this.shareInfo4Bd,
                    imageUrl:
                        this.shareInfo4Bd.imageUrl ||
                        'https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2652066159,3382944355&fm=179&app=35&f=JPEG?w=144&h=144',
                    success: res => {
                        this.$api.showToast({
                            title: '分享成功'
                        });
                    }
                });
            } else {
                this.showShare = true;
            }
        },
        parseIntFloat(float) {
            const n = Math.floor(float * 10) / 10;
            return n > 1 ? 1 : n < 0 ? 0 : n;
        },
        topbarHeightHandle(e) {
            this.topbarHeight = e;
        },
        setBarBgByScroll(scrollTop) {
            const ratio = this.parseIntFloat(scrollTop / 100);
            // 背景色渐变
            this.topBarBg = `rgba(255, 255, 255, ${ratio})`;
            if (scrollTop < 22) {
                this.textColor = '#fff';
                this.title = ' ';
            } else {
                this.textColor = '#000';
                if (
                    this.topicBaseInfo &&
                    this.topicBaseInfo.list &&
                    this.topicBaseInfo.list.length &&
                    this.topicBaseInfo.list[0].topicTitle
                ) {
                    this.title = this.topicBaseInfo.list[0].topicTitle;
                }
            }
            // ios中回弹效果导致顶部bar渲染不正确，此处更新topbar
            if (!this.isHideTopBar() && scrollTop < 10) {
                this.reloadBar = false;
                this.$mpUpdated().then(() => {
                    this.reloadBar = true;
                });
            }
            if (this.needTimer && process.env.MARS_ENV === 'h5') {
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.setBarBgByScroll(window.pageYOffset);
                    this.needTimer = false;
                }, 200);
            }
        },
        themeIndexUbcSend(value, valueItem) {
            ubcSend({
                type: 'clk',
                value: value,
                page: 'pages/speTopic/dict/theme/index',
                ext: {
                    value_id: valueItem
                }
            });
        },
        yetTopicsItem() {
            this.themeIndexUbcSend('mbzt_wangqizhuanti', '');
        },
        // 判断是否为iframe嵌入页面 若是则隐藏topbar
        isHideTopBar() {
            if (process.env.MARS_ENV === 'h5' && self.location !== top?.location && (/selfLocationFrom=topic/g).test(self.location.href)) {
                return true;
            }
            return false;
        },
        // 判断当前时间是否在某个时间段
        compareTime(stime, etime) {
            let startTime = this.tranDate(stime);
            let endTime = this.tranDate(etime);
            let thisDate = new Date().getTime();
            if (thisDate >= startTime && thisDate <= endTime) {
                return true;
            }
            return false;
        },
        tranDate(time) {
            return new Date(time.replace(/-/g, '/')).getTime();
        },
        getBannerImages() {
            const params = {
                channelId: 410
            };
            request({
                url: Conf.apiHost + '/med/page/jp/special/info',
                method: 'GET',
                data: params,
                isNeedLogin: false,
                isFirstScreen: true
            }).then(res => {
                let imagesList = (res.data && res.data.topicModuleList) || [];
                let resultImageList = [];
                let currentIndex = 0;
                if (imagesList.length) {
                    imagesList.forEach((item, index) => {
                        if (item.list && item.list.length) {
                            item.list.forEach((listItem, listIndex) => {
                                resultImageList.push({
                                    url: listItem.image
                                });
                                if (this.compareTime(listItem.imageTitle + ' 00:00', listItem.imageTitle + ' 23:59')) {
                                    currentIndex = index + listIndex;
                                }
                            });
                        }
                    });
                }
                this.currentIndex = currentIndex;
                this.bannerImages = resultImageList;
            });
        }
    }
};
</script>
<style lang="less" scoped>
.med-theme-home {
    min-height: 105vh;
    position: relative;

    &.real {
        min-height: initial;
    }

    .spe-swiper-item-image {
        width: 100%;
        display: block;
        border-radius: 10px;
        overflow: hidden;
    }

    .custom-header-topbar-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 201;
    }
    @keyframes pkZan {
        0% {
            transform: rotate(0deg);
        }

        50% {
            transform: rotate(22.5deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }
    @keyframes pkZanLine {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
    @keyframes pkSeeMore {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }
    @keyframes pkBorderLeft {
        0% {
            border-radius: 30px 0 0 30px;
        }

        50% {
            border-radius: 20px 0 0 20px;
        }

        100% {
            border-radius: 30px 0 0 30px;
        }
    }
    @keyframes pkBorderRight {
        0% {
            border-radius: 0 30px 30px 0;
        }

        50% {
            border-radius: 0 20px 20px 0;
        }

        100% {
            border-radius: 0 30px 30px 0;
        }
    }

    .padd-two {
        padding: 0 17px;
    }

    .margin-down {
        margin-bottom: -15px;
    }

    .head-image {
        width: 100%;
        display: block;
    }

    .theme-card {
        padding-bottom: 36px;

        .haad-line-padd {
            padding: 0 17px;
        }

        .card-see-book-out {
            display: flex;
            justify-content: center;
        }

        .card-see-book {
            padding: 0 14px;
            height: 33px;
            border-radius: 20px;
            text-align: center;
            line-height: 33px;
            color: #fff;
            background: #00c8c8;
            font-size: 13px;
            font-weight: 500;
            margin: 10px auto 0;
        }

        .card-see-book-active {
            animation: pkSeeMore 0.5s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }

        .weak-card {
            margin: 20px 0;

            .strong-card-list-padd {
                padding: 0 17px;
            }
        }

        .content-card {
            margin-bottom: 5px;
        }

        .drug-card {
            margin-bottom: 20px;

            .drug-content {
                padding: 0 17px;
            }
        }

        .video-card-line-bottom {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .video-card-title {
            color: #333;
            font-size: 0.17rem;
        }

        .video-card-name {
            color: #999;
            font-size: 0.12rem;
        }

        .video-wrap {
            margin: 20px 0;
        }

        .banner-card {
            padding: 0 17px;
            margin: 20px 0;

            .banner-card-pic {
                width: 100%;
                border-radius: 4px;
                display: block;
            }
        }

        .pk-card {
            padding: 0 17px;
            margin-bottom: 20px;

            .pk-card-in {
                background: #f5f6f8;
                border-radius: 7px;
                padding: 23px 13px;

                .pk-card-name {
                    color: #333;
                    font-size: 0.24rem;
                    font-weight: 500;
                    line-height: 1.5;
                }

                .pk-card-desc {
                    color: #364252;
                    font-size: 0.14rem;
                    margin-top: 17px;
                }

                .pk-card-btn {
                    width: 100%;
                    height: 53px;
                    display: flex;
                    margin-top: 14px;
                    position: relative;

                    .pk-card-btn-left,
                    .pk-card-btn-right {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #fff;
                        line-height: 1;
                        transition: width 0.5s ease-in-out;

                        .pk-card-btn-title {
                            font-size: 17px;
                            font-weight: 500;
                            text-align: center;
                        }

                        .pk-card-btn-title-normal {
                            font-size: 12px;
                            font-weight: 500;
                        }

                        .pk-card-btn-number {
                            font-size: 18px;
                            font-weight: 700;
                            text-align: center;
                            margin-top: 4px;
                        }
                    }

                    .pk-card-zan {
                        width: 18px;
                        height: 18px;
                        margin-right: 6px;
                        margin-top: -1px;
                        position: relative;

                        .pk-card-zan-line {
                            position: absolute;
                            width: 20px;
                            height: 7px;
                            left: 50%;
                            margin-left: -10px;
                            top: -9px;
                            opacity: 0;
                        }

                        .pk-card-zan-line-active {
                            animation: pkZanLine 1s;
                            animation-iteration-count: 1;
                            animation-fill-mode: forwards;
                            animation-delay: 500ms;
                        }
                    }

                    .pk-card-btn-zan-active {
                        animation: pkZan 1s;
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                    }

                    .pk-card-btn-left {
                        background: #ff4253;
                        border-radius: 30px 0 0 30px;
                    }

                    .pk-card-btn-left-active {
                        animation: pkBorderLeft 0.5s;
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                        padding-right: 15px;
                        box-sizing: border-box;
                    }

                    .pk-card-btn-right {
                        background: #3e91fb;
                        border-radius: 0 30px 30px 0;
                    }

                    .pk-card-btn-right-active {
                        animation: pkBorderRight 0.5s;
                        animation-iteration-count: 1;
                        animation-fill-mode: forwards;
                        padding-left: 15px;
                        box-sizing: border-box;
                    }

                    .pk-card-btn-middle {
                        position: absolute;
                        width: 62px;
                        height: 62px;
                        border-radius: 50%;
                        left: 50%;
                        top: 50%;
                        margin-left: -31px;
                        margin-top: -31px;
                        transition: left 0.5s ease-in-out;
                    }
                }

                .pk-card-btn-line {
                    width: 100%;
                    height: 40px;
                    border-radius: 20px;
                    background-image: linear-gradient(134deg, #00cfa3 0%, #05cfcd 61%, #00d3ea 100%);
                    margin-top: 14px;
                    color: #fff;
                    font-weight: 500;
                    font-size: 13px;
                    display: flex;
                    align-items: center;
                    box-sizing: border-box;
                    position: relative;
                    overflow: hidden;

                    .pk-card-btn-line-left {
                        width: 100%;
                        text-align: center;
                        box-sizing: border-box;
                        height: 100%;
                        line-height: 40px;
                        transition: width 0.5s linear;
                    }

                    .pk-card-btn-line-up {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        padding: 0 16px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }

                    .pk-card-btn-line-up-center {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }

                .pk-card-btn-line-normal {
                    background: #fff;

                    .pk-card-btn-line-left {
                        background: #e5e5e5;
                        border-radius: 20px 0 0 20px;
                    }

                    .pk-card-btn-line-up {
                        color: #999;
                    }
                }

                .pk-card-btn-line-active {
                    background: #fff;
                    border: 2px solid #00c8c8;

                    .pk-card-btn-line-left {
                        background: rgba(0, 200, 200, 0.2);
                        border-radius: 20px 0 0 20px;
                    }

                    .pk-card-btn-line-up {
                        color: #00c8c8;
                    }
                }

                .pk-card-bottom {
                    display: flex;
                    align-items: center;
                    margin-top: 13px;
                    justify-content: space-between;
                    color: #768699;
                    font-size: 13px;
                }
            }
        }
    }

    .footer-card {
        background: #eff4fe;
        padding: 25px 0 58px;
        text-align: center;
        color: #333;
        font-size: 0.13rem;

        .footer-card-icon {
            width: 140px;
            object-fit: cover;
            margin: 2px auto;
        }

        .footer-card-name {
            margin-top: 6px;
            font-size: 0.17rem;
            font-weight: 500;
            margin-bottom: 17px;
        }
    }

    .theme-share {
        position: fixed;
        right: 0;
        bottom: 100px;
        z-index: 10;

        .theme-share-btn {
            width: 96px;
        }
    }

    .theme-mask {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 201;
        background: rgba(0, 0, 0, 0.6);
        left: 0;
        top: 0;

        .theme-mask-image {
            width: 235px;
            height: 98px;
            position: absolute;
            right: 20px;
            top: 20px;
        }
    }
}
</style>
