<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <view class="info-card">
            <cwg-header :title="t('Custom.Activity.Single')" />
            <view id="News_Content">

                <view class="content crm-border-radius" v-if="!ActivitySingle20 &&
                    !ActivitySingle23 &&
                    !ActivitySingle23nz_zx &&
                    !ActivitySingle23jx &&
                    !ActivitySingle23nz &&
                    !ActivitySingle23nzTwo &&
                    !ActivitySingle23jxVip &&
                    !ActivitySingle24JYB &&
                    !ActivitySingle23xinjia &&
                    !ActivitySingle23jnhcj &&
                    !ActivitySingleNewList &&
                    !ActivitySingleNoWorries &&
                    !ActivitySingleNewYear24">
                    <view class="img">
                        <cwg-image :lazy="false"
                            :src="imgUrl + (singleData.activityImage ? singleData.activityImage : singleData.coverImage)">
                        </cwg-image>
                    </view>
                    <view v-html="singleData.content" />
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingleNewList">
                    <view class="img">
                        <cwg-image style="width: 500px;" :src="imgUrl + singleData.coverUrl">
                        </cwg-image>
                    </view>
                    <view v-html="singleData.content" />
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle20">
                    <view v-if="country == 'CN'">
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.ActivitiesContent.item0'">CWG 20%赠金入会礼</h4>
                            <view style="font-size: 14px;" v-t="'news_add_field1.ActivitiesContent.item1'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item2'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item3'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item4'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item5'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item6'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item7'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item8'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item9'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item10'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item11'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item12'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item13'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item14'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item15'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item16'" />
                                    </view>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item17'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item18'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item19'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item20'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item21'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item22'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item23'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item24'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item25'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item26'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item27'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item28'" />
                            </view>
                        </view>
                    </view>
                    <view v-else>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.ActivitiesContent.item0'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.ActivitiesContent.item29'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item30'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item31'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item32'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item33'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item34'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item35'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item36'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item37'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item38'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item39'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <span v-t="'news_add_field1.ActivitiesContent.item40'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item41'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item42'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item43'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item44'" />
                                    </view>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item45'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item46'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item47'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item48'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item49'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item50'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item51'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item52'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item53'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item54'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item55'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item56'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item57'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.ActivitiesContent.item58'" />
                            <view class="uls" style="font-size: 14px;">
                                <h4 v-t="'news_add_field1.ActivitiesContent.item60_1'" />
                                <view class="lis" style="margin-left: 15px;">
                                    <h4 v-t="'news_add_field1.ActivitiesContent.item59'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis"><span v-t="'news_add_field1.ActivitiesContent.item60'" />
                                            <span class="toDocumentary crm-cursor" @click="toDocumentary"
                                                v-t="'news_add_field1.ActivitiesContent.item60_1'" />
                                        </view>
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item61'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item61_1'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <h4 v-t="'news_add_field1.ActivitiesContent.item62'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item63'" />
                                    </view>
                                </view>
                                <view class="lis" style="margin-left: 15px;">
                                    <h4 v-t="'news_add_field1.ActivitiesContent.item64'" />
                                    <view class="uls" style="margin-left: 15px;">
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item65'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item65_5'" />
                                        <view class="lis" v-t="'news_add_field1.ActivitiesContent.item66'" />
                                    </view>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.ActivitiesContent.item67'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item68'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item69'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item70'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item71'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item72'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item73'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item74'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item75'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item76'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item77'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item78'" />
                                <view class="lis" v-t="'news_add_field1.ActivitiesContent.item79'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23nz_zx">
                    <view>
                        <view v-if="country == 'CN'">
                            <h4 v-if="isGuoQin" style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activities10_trading_aoyun.item1_1'" />
                            <h4 v-else style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activities10_trading_aoyun.item1'" />
                            <view class="uls" v-if="isGuoQin">
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item2'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item3'" />
                                <view class="lis">
                                    <view class="uls">
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item31'" />
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item32'" />
                                    </view>
                                </view>
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item4'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item5'" />
                                <view class="lis">
                                    <view class="uls">
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item51'" />
                                    </view>
                                </view>
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item6'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item7'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item8'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9_1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item10'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item11'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item12'" />
                            </view>
                            <view class="uls" v-else>
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item2'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item3'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item4'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item5'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item6'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item7'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item8'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item9_1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item9'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item10'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item11'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item11_1'" />
                                <view class="lis">
                                    <view class="uls">
                                        <view class="lis" v-t="'news_add_field.CWGActivity.item111'" />
                                        <view class="lis" v-t="'news_add_field.CWGActivity.item112'" />
                                        <view class="lis" v-t="'news_add_field.CWGActivity.item113'" />
                                        <view class="lis" v-t="'news_add_field.CWGActivity.item114'" />
                                    </view>
                                </view>
                                <view class="lis" v-t="'news_add_field.CWGActivity.item12'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity.item13'" />
                            </view>
                        </view>
                        <view v-if="country != 'CN'">
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activities10_trading_aoyun.item1_1'" />
                            <view class="uls">
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.deposit.item23'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item2'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item3'" />
                                <view class="lis">
                                    <view class="uls">
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item31'" />
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item32'" />
                                    </view>
                                </view>
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item4'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item5'" />
                                <view class="lis">
                                    <view class="uls">
                                        <view class="lis" v-t="'news_add_field.CWGActivity_1.item51'" />
                                    </view>
                                </view>
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item6'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item7'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item8'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9_1'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item9'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item10'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item11'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item12'" />
                                <view class="lis" v-t="'news_add_field.CWGActivity_1.item13'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23jx">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJX.item6'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item7'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4><span v-t="'news_add_field1.activitiesJX.item8'" />{{
                                        timeJx.applicationStartTime
                                    }}
                                        - {{ timeJx.applicationEndTime }}</h4>
                                    <h4><span v-t="'news_add_field1.activitiesJX.item9'" />{{
                                        timeJx.activityStartTime
                                    }} -
                                        {{ timeJx.activityEndTime }}</h4>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJX.item10'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item11'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item12'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item14'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item15'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item16'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item17'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item18'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item19'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item20'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item21'" />
                            </view>
                            <view style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;">
                                <cwg-link type="html" title="news_add_field1.activitiesJX.item22" class="crm-cursor"
                                    style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;" :url="imgUrl + '/activity/jiangx/index.html'" target="_blank" />
                            </view>
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item23'" />
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23jxVip">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJX.item6'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item7'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4><span v-t="'news_add_field1.activitiesJX.item8'" />截止到 2024年7月19日</h4>
                                    <h4><span v-t="'news_add_field1.activitiesJX.item9'" />2024年7月22日到9月22日</h4>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJX.item10'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item11'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item12'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item14'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item15'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item16'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item17'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item18'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item19'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item20'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJX.item21'" />
                            </view>
                            <view style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;">
                                <cwg-link type="html" title="news_add_field1.activitiesJX.item22" class="crm-cursor"
                                    style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;" :url="imgUrl + '/activity/jiangx/indexVip.html'" target="_blank" />
                            </view>
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJX.item23'" />
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle24JYB">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJYB.item6'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYB.item7'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4>
                                        <span v-t="'news_add_field1.activitiesJYB.item8'" />
                                        <span v-t="'news_add_field1.activitiesJYB.item8_1'" />
                                    </h4>
                                    <h4><span v-t="'news_add_field1.activitiesJYB.item9'" />
                                        <span v-t="'news_add_field1.activitiesJYB.item9_1'" />
                                    </h4>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYB.item10'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item11'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item12'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item14'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item15'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item16'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item17'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item18'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item19'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item20'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYB.item21'" />
                            </view>
                            <view style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;">
                                <cwg-link type="html" title="news_add_field1.activitiesJYB.item22" class="crm-cursor"
                                    style="font-size: 16px;
                      font-weight: bold;
                      color: #3490CE;
                      text-align: center;
                      margin: 20px 0;" :url="imgUrl + '/activity/jiangx/indexJYB.html'" target="_blank" />
                            </view>
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYB.item23'" />
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23nz">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesNZ.item6'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesNZ.item7'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4><span v-t="'news_add_field1.activitiesNZ.item8'" />{{
                                        timeJx.applicationStartTime
                                    }}
                                        - {{ timeJx.applicationEndTime }}</h4>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNZ.item10'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item11'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item12'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item14'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item15'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item16'" />
                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                    <tr>
                                        <th v-t="'news_add_field1.activitiesNZ.item31'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item41'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item51'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item61'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item71'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item81'" />
                                        <th v-t="'news_add_field1.activitiesNZ.item91'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZ.item32'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item42'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item52'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item62'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item72'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item82'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item92'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZ.item33'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item43'" />
                                        <td><span style="color:#F56C6C;" v-t="'news_add_field1.activitiesNZ.item53'" />
                                        </td>
                                        <td v-t="'news_add_field1.activitiesNZ.item63'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item73'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item83'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item93'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZ.item34'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item44'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item54'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item64'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item74'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item84'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item94'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZ.item35'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item45'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item55'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item65'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item75'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item85'" />
                                        <td v-t="'news_add_field1.activitiesNZ.item95'" />
                                    </tr>
                                </table>
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item17'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item18'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item19'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item20'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZ.item21'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23nzTwo">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesNZTwo.item6'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesNZTwo.item7'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4><span v-t="'news_add_field1.activitiesNZTwo.item8'" />{{
                                        timeJx.applicationStartTime }}
                                        - {{ timeJx.applicationEndTime }}</h4>
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNZTwo.item10'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item11'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item12'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item14'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item15'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item16'" />
                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                    <tr>
                                        <th v-t="'news_add_field1.activitiesNZTwo.item31'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item41'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item51'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item61'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item71'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item81'" />
                                        <th v-t="'news_add_field1.activitiesNZTwo.item91'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZTwo.item32'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item42'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item52'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item62'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item72'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item82'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item92'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZTwo.item33'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item43'" />
                                        <td><span style="color:#F56C6C;"
                                                v-t="'news_add_field1.activitiesNZTwo.item53'" />
                                        </td>
                                        <td v-t="'news_add_field1.activitiesNZTwo.item63'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item73'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item83'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item93'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZTwo.item34'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item44'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item54'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item64'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item74'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item84'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item94'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'news_add_field1.activitiesNZTwo.item35'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item45'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item55'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item65'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item75'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item85'" />
                                        <td v-t="'news_add_field1.activitiesNZTwo.item95'" />
                                    </tr>
                                </table>
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item17'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item18'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item19'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item20'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNZTwo.item21'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23xinjia">
                    <view>
                        <!-- CWG交易之星（中国·新疆）特邀巅峰赛 -->
                        <view v-if="0">
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJYDS.item6'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item7'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item8'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item9'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item10'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item11'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item12'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4 v-t="'news_add_field1.activitiesJYDS.item13'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item14'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item15'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item16'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item17'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item18'" />
                                </view>
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4 v-t="'news_add_field1.activitiesJYDS.item19'" />
                                    <view v-t="'news_add_field1.activitiesJYDS.item20'" />
                                </view>
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item21'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item22'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item23'" />
                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <th v-t="'news_add_field1.activitiesJYDS.item24'" />
                                    <th v-t="'news_add_field1.activitiesJYDS.item25'" />
                                    <th v-t="'news_add_field1.activitiesJYDS.item26'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item27'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item28'" />
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS.item29'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item29_1'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item30'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item31'" />
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS.item32'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item32_1'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item33'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item34'" />
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS.item35'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item35_1'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item36'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item37'" />
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS.item38'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item38_1'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item39'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item40'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item41'" />
                                </tr>
                            </table>
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS.item42'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item43'" />
                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <th colspan="2" v-t="'news_add_field1.activitiesJYDS.item44'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item45'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item46'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item47'" />
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS.item48'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item49'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item50'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item51'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item52'" />
                                        <view v-t="'news_add_field1.activitiesJYDS.item53'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item54'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item55'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item56'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item57'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item58'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item59'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item60'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item61'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item62'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item63'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS.item64'" />
                                    <td v-t="'news_add_field1.activitiesJYDS.item65'" />
                                </tr>
                            </table>


                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS.item66'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item67'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item68'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item69'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item70'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item71'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item72'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item73'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item74'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item75'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS.item76'" />
                            </view>
                        </view>
                        <!--CWG Markets  African Forex Trading Challenge 2025 -->
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJYDS2025.item6'" />
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesJYDS2025.item6_1'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item7'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item8'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item9'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item10'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item11'" />
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item11_1'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item12'" />
                            <view class="uls" style="font-size: 14px;">
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item13'" />
                                    <view v-t="'news_add_field1.activitiesJYDS2025.item14'" />

                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item15'" />
                                    <view v-t="'news_add_field1.activitiesJYDS2025.item16'" />

                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item17'" />
                                    <view v-t="'news_add_field1.activitiesJYDS2025.item18'" />
                                </view>
                                <view class="lis" style="margin-left: 15px;margin-top: 20px;">
                                    <h4 v-t="'news_add_field1.activitiesJYDS2025.item19'" />
                                    <view v-t="'news_add_field1.activitiesJYDS2025.item20'" />
                                </view>
                            </view>
                            <view style="font-size: 14px;margin-top: 20px;"
                                v-t="'news_add_field1.activitiesJYDS2025.item21'">
                            </view>
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item23'" />
                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <th v-t="'news_add_field1.activitiesJYDS2025.item24'" />
                                    <th v-t="'news_add_field1.activitiesJYDS2025.item25'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item26'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item27'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item28'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item30'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item31'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item32'" />
                                </tr>
                                <tr>
                                    <td>
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item33'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item34'" />
                                    </td>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item35'" />
                                </tr>
                            </table>
                            <view style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item42'" />
                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item43'" />
                            <h4 style="font-size: 14px;" v-t="'news_add_field1.activitiesJYDS2025.item43_1'" />
                            <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                <tr>
                                    <th colspan="2" v-t="'news_add_field1.activitiesJYDS2025.item44'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item45'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item46'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item47'" />
                                    <td style="text-align: left;">
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item48'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item49'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item50'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item51'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item52'" />
                                        <view v-t="'news_add_field1.activitiesJYDS2025.item53'" />
                                    </td>
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item54'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item55'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item56'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item57'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item58'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item59'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item60'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item61'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item62'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item63'" />
                                </tr>
                                <tr>
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item64'" />
                                    <td v-t="'news_add_field1.activitiesJYDS2025.item65'" />
                                </tr>
                            </table>


                            <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesJYDS2025.item66'" />
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item67'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item68'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item69'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item70'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item71'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item72'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item73'" />
                                <view class="lis" v-t="'news_add_field1.activitiesJYDS2025.item74'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingle23jnhcj">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;" v-t="'wallet.item21'">
                            </h4>
                            <view class="uls" style="margin-left: 15px;font-size: 14px;">
                                <!-- <view class="lis" v-t="'wallet.item21_1'" /> -->
                                <view class="lis" v-t="'wallet.item22'" />
                                <table class="nz_table" border="1" cellpadding="10" cellspacing="0" width="100%">
                                    <tr>
                                        <td v-t="'wallet.item23'" />
                                        <td v-t="'wallet.item24'" />
                                        <td v-t="'wallet.item25'" />
                                        <td v-t="'wallet.item26'" />
                                        <td v-t="'wallet.item27'" />
                                    </tr>
                                    <tr>
                                        <td v-t="'wallet.item28'" />
                                        <td v-t="'wallet.item29'" />
                                        <td v-t="'wallet.item30'" />
                                        <td v-t="'wallet.item31'" />
                                        <td v-t="'wallet.item32'" />
                                    </tr>
                                </table>
                                <view class="lis" v-t="'wallet.item33'" />
                                <view class="lis" v-t="'wallet.item34'" />
                                <view class="lis" v-t="'wallet.item35'" />
                                <view class="lis" v-t="'wallet.item36'" />
                                <view class="lis" v-t="'wallet.item37'" />
                                <view class="lis" v-t="'wallet.item38'" />
                                <view class="lis" v-t="'wallet.item39'" />
                                <view class="lis" v-t="'wallet.item40'" />
                                <view class="lis" v-t="'wallet.item41'" />
                                <view class="lis" v-t="'wallet.item42'" />
                                <view class="lis" v-t="'wallet.item43'" />
                                <view class="lis" v-t="'wallet.item44'" />
                                <view class="lis" v-t="'wallet.item45'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingleNoWorries">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.activitiesNoWorries.item1'" />
                            <view class="uls">
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_31'" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_1'" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_2'" />
                                <view class="lis">
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_3'" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_4'"
                                        style="font-weight: bold;" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_5'" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_6'"
                                        style="font-weight: bold;" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_7'" />
                                </view>
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_8'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_9'" />
                                <view class="lis">
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_10'" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_11'"
                                        style="font-weight: bold;color: #EB3F57;" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_12'" />
                                </view>
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_13'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_14'" />
                                <view class="lis">
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_15'" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_16'"
                                        style="font-weight: bold;" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_17'" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_18'"
                                        style="font-weight: bold;" />
                                    <span v-t="'news_add_field1.activitiesNoWorries.item1_19'" />
                                </view>
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_20'"
                                    style="color: #EB3F57;" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_21'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_22'" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_23'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_24'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_25'" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_26'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_27'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_28'" />
                                <view class="lis" v-t="'news_add_field1.activitiesNoWorries.item1_29'" />
                                <h4 style="margin-top: 20px;" v-t="'news_add_field1.activitiesNoWorries.item1_30'" />
                            </view>
                        </view>
                    </view>
                </view>
                <view class="content crm-border-radius" v-if="ActivitySingleNewYear24">
                    <view>
                        <view>
                            <h4 style="text-align: center;font-size: 18px;margin-bottom: 15px;"
                                v-t="'news_add_field1.NewYear24.item1'" />
                            <view class="NewYear_quan">
                                <view class="crm-title-box">
                                    <span class="tit" v-t="'news_add_field1.NewYear24.item9'" />
                                </view>
                                <view class="tip">
                                    <view v-t="'news_add_field1.NewYear24.item10'" />
                                    <view v-t="'news_add_field1.NewYear24.item10_1'" />
                                    <view v-t="'news_add_field1.NewYear24.item10_3'" />
                                    <view v-t="'news_add_field1.NewYear24.item10_2'" />
                                </view>
                                <view class="quanBox">
                                    <view v-for="(item, index) in tableDataNewYear24.extraConfigs" :key="index"
                                        class="couponRed"
                                        :class="{ 'couponBlack': quanStatus(item) == 1 || item.use == 1 }">
                                        <view class="price">
                                            <view class="dec" v-t="'news_add_field1.NewYear24.item10BG1'" />
                                            <span class="num" v-if="item.interestRateExtraDay == 1"
                                                v-t="'news_add_field1.NewYear24.item10BG2'" />
                                            <span class="num" v-if="item.interestRateExtraDay == 3"
                                                v-t="'news_add_field1.NewYear24.item10BG3'" />
                                            <span class="num" v-if="item.interestRateExtraDay == 5"
                                                v-t="'news_add_field1.NewYear24.item10BG4'" />
                                            <span class="num" v-if="item.interestRateExtraDay == 7"
                                                v-t="'news_add_field1.NewYear24.item10BG5'" />
                                        </view>
                                        <view class="describe">
                                            <view
                                                v-if="item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE'">
                                                <view>
                                                    <span v-t="'news_add_field1.NewYear24.item10BG9'" v-if="!isZh" />
                                                    <span v-if="item.interestRateExtraDay == 1">{{ isCountDown1
                                                    }}</span>
                                                    <span v-if="item.interestRateExtraDay == 3">{{ isCountDown3
                                                    }}</span>
                                                    <span v-if="item.interestRateExtraDay == 5">{{ isCountDown5
                                                    }}</span>
                                                    <span v-if="item.interestRateExtraDay == 7">{{ isCountDown7
                                                    }}</span>
                                                    <span v-t="'news_add_field1.NewYear24.item10BG9'" v-if="!isZh" />
                                                </view>
                                                <view v-t="'news_add_field1.NewYear24.item10BG10'" />
                                            </view>
                                            <view v-if="item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_BALANCE'">
                                                <span v-t="'news_add_field1.NewYear24.item10BG6'" />${{ (item.min -
                                                    tableDataNewYear24.balance).toFixed(2) > 0 ? (item.min -
                                                        tableDataNewYear24.balance).toFixed(2) : 0 }}
                                                <span v-t="'news_add_field1.NewYear24.item10BG7'" />${{ item.min
                                                }}<span v-t="'news_add_field1.NewYear24.item10BG8'" />
                                            </view>
                                        </view>
                                        <view class="btns" v-if="quanStatus(item) == 1">
                                            <button v-t="'news_add_field1.NewYear24.item13'" />
                                        </view>
                                        <view class="btns" v-if="quanStatus(item) == 2">
                                            <button v-t="'news_add_field1.NewYear24.item13'" v-if="item.use == 0"
                                                @click="ActivityNewYear24Receive(item.id)" />
                                            <button v-t="'news_add_field1.NewYear24.item14'" v-if="item.use == 1"
                                                class="use" />
                                        </view>
                                        <view class="quan_guoqi" v-if="item.use == 0">
                                            <span v-if="!isZh">2025-4-1
                                            </span>
                                            <span v-t="'news_add_field1.NewYear24.item15'" />
                                            <span v-if="!isZh">
                                                2025-4-1</span>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>


                <!--弹出框-->
                <uni-popup ref="popupRef" type="center" background-color="#fff">
                    <view class="dia-content">
                        <view class="des1" style="font-size: 16px;line-height: 1.6;margin: 30px 0 50px;"
                            v-t="'news_add_field1.NewYear24.itemQ2'" v-if="NewYear24Status == 1" />
                        <view class="des1" style="font-size: 16px;line-height: 1.6;margin: 30px 0 50px;"
                            v-t="'news_add_field1.NewYear24.itemQ3'" v-if="NewYear24Status == 2" />
                        <view slot="footer" class="dialog-footer">
                            <el-button type="primary" v-t="'Btn.Confirm'"
                                @click="NewYear24StatusFlag = false"></el-button>
                        </view>
                    </view>
                </uni-popup>
            </view>
        </view>

    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { activityApi } from "@/service/activity"
import Config from "@/config/index"
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

const { Code, Host05 } = Config
const isZh = computed(() => ['cn', 'zhHant'].includes(locale.value))
// ==================== 路由参数 ====================
const myId = ref('')
const type = ref('')
const active = ref('')

// ==================== 响应式数据 ====================
const imgUrl = Host05
const imgContent = ref('https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg')
const singleData = ref<any>([])

// 活动类型标志
const ActivitySingle20 = ref(false)
const ActivitySingle23 = ref(false)
const ActivitySingle23jx = ref(false)
const ActivitySingle23jxVip = ref(false)
const ActivitySingle23nz = ref(false)
const ActivitySingle23nzTwo = ref(false)
const ActivitySingle23xinjia = ref(false)
const ActivitySingle23jnhcj = ref(false)
const ActivitySingleNewList = ref(false)
const ActivitySingle23nz_zx = ref(false)
const ActivitySingle24JYB = ref(false)
const ActivitySingleNoWorries = ref(false)
const ActivitySingleNewYear24 = ref(false)

const timeJx = ref<any>({})

// 新年庆典相关
const tableDataNewYear24Flag = ref(false)
const tableDataNewYear24 = ref<any>(false)
const NewYear24DataBalance = ref('')
const NewYear24Data = reactive({
    balance: 0,
    income: 0
})
const popupRef = ref<any>(null)
const NewYear24StatusFlag = ref(false)
const NewYear24Status = ref(0)
// 监听弹窗可见性
watch(() => NewYear24StatusFlag.value, (newVal) => {
    if (newVal) {
        popupRef.value?.open()
    } else {
        popupRef.value?.close()
    }
}, { deep: true })
// 倒计时相关
const interval1 = ref<any>(null)
const interval3 = ref<any>(null)
const interval5 = ref<any>(null)
const interval7 = ref<any>(null)
const isCountDown1 = ref('')
const isCountDown3 = ref('')
const isCountDown5 = ref('')
const isCountDown7 = ref('')

// ==================== 计算属性 ====================
const country = computed(() => {
    try {
        const userStr = uni.getStorageSync('user')
        const user = JSON.parse(userStr)
        return user.customInfo?.country || ''
    } catch {
        return ''
    }
})

const isGuoQin = computed(() => {
    let flag = false
    const startTime1 = '2024/10/01 00:00:00'
    const endTime1 = '2024/10/07 23:59:59'
    const timezone = 8
    const offset_GMT = new Date().getTimezoneOffset()
    const nowDate = new Date().getTime()
    const now = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
    const end = new Date(endTime1).getTime()
    const start = new Date(startTime1).getTime()

    if (now > start && now < end) {
        flag = true
    }
    return flag
})

watch(
)

// ==================== 方法 ====================
// 详情
const getSingle = async (id: string) => {
    try {
        const res = await activityApi.ActivitySingle({ id })
        if (res.code === Code.StatusOK) {
            singleData.value = res.data
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (error) {
        console.error('获取活动详情失败', error)
        uni.showToast({ title: '获取失败', icon: 'none' })
    }
}

// 详情
const getSingle1 = async (id: string) => {
    try {
        const res = await activityApi.ActivityExtensionGiveSingle({ id })
        if (res.code === Code.StatusOK) {
            singleData.value = res.data
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (error) {
        console.error('获取赠送活动详情失败', error)
        uni.showToast({ title: '获取失败', icon: 'none' })
    }
}

// 24新年庆典
const ActivityNewYear24 = async () => {
    try {
        const res = await activityApi.ActivityNewYear24({})
        if (res.code === Code.StatusOK) {
            tableDataNewYear24.value = res.data
            if (typeof tableDataNewYear24.value === 'object') {
                tableDataNewYear24Flag.value = true
                tableDataNewYear24.value?.extraConfigs?.forEach((item: any) => {
                    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE') {
                        countdownQuan(item)
                    }
                })
            }
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (error) {
        console.error('获取新年庆典数据失败', error)
        uni.showToast({ title: '获取失败', icon: 'none' })
    }
}

// 计算收益
const toIncome = () => {
    NewYear24Data.balance = Number(NewYear24DataBalance.value) || 0
    let rate = 0
    tableDataNewYear24.value?.details?.forEach((item: any) => {
        if (NewYear24Data.balance > item.min && NewYear24Data.balance <= item.max) {
            rate = item.rate
        } else if (NewYear24Data.balance > item.min && NewYear24Data.balance >= item.max && item.max == 0) {
            rate = item.rate
        }
    })
    NewYear24Data.income = Number((NewYear24Data.balance * rate / 100 / 365 * 30).toFixed(2))
}

// 获取优惠券状态
const quanStatus = (item: any) => {
    let status = 1
    if (tableDataNewYear24.value?.lastMonthTradeNumber == 0) {
        status = 1
        return status
    }
    // 天数
    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_EXTRA_ACCUMULATE') {
        if (tableDataNewYear24.value?.cumulativeWithdrawDay >= item.min) {
            status = 2
        }
    }
    // 金额
    if (item.type == 'CUSTOM_ACTIVITY_INTEREST_RATE_TYPE_BALANCE') {
        if (tableDataNewYear24.value?.balance >= item.min) {
            status = 2
        }
    }
    return status
}

// 优惠券倒计时
const countdownQuan = (item: any) => {
    let time = ''
    let days = (item.min - (tableDataNewYear24.value?.cumulativeWithdrawDay || 0)) > 0 ? item.min - (tableDataNewYear24.value?.cumulativeWithdrawDay || 0) : 0
    if (days == 0 || item.use == 1) {
        time = '00:00:00'
        if (item.interestRateExtraDay == 1) isCountDown1.value = time
        if (item.interestRateExtraDay == 3) isCountDown3.value = time
        if (item.interestRateExtraDay == 5) isCountDown5.value = time
        if (item.interestRateExtraDay == 7) isCountDown7.value = time
        return
    }

    let timezone = 2
    let offset_GMT = new Date().getTimezoneOffset()
    let nowDate = new Date().getTime()
    let nowTime = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)

    let today = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
    today.setHours(0, 0, 0, 0)
    today.setDate(today.getDate() + days)

    let startTime = new Date(today).getTime()

    if (nowTime < startTime) {
        let interval: any = null
        if (item.interestRateExtraDay == 1) interval1.value = setInterval(() => {
            let timezone = 2
            let offset_GMT = new Date().getTimezoneOffset()
            let nowDate = new Date().getTime()
            let nowTime = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000)
            let sec = 1000, min = 60 * sec, hour = min * 60, day = 24 * hour
            let times = startTime - nowTime.getTime()
            let DAY = getzero(Math.floor(times / day))
            let HOUR = getzero(Math.floor((times % day) / hour))
            let MIN = getzero(Math.floor((times % hour) / min))
            let SEC = getzero(Math.floor((times % min) / sec))

            const timeStr = `${DAY}${DAY}${HOUR}:${MIN}:${SEC}`
            if (item.interestRateExtraDay == 1) isCountDown1.value = timeStr
            if (item.interestRateExtraDay == 3) isCountDown3.value = timeStr
            if (item.interestRateExtraDay == 5) isCountDown5.value = timeStr
            if (item.interestRateExtraDay == 7) isCountDown7.value = timeStr

            if (nowTime >= startTime) {
                if (item.interestRateExtraDay == 1) clearInterval(interval1.value)
                if (item.interestRateExtraDay == 3) clearInterval(interval3.value)
                if (item.interestRateExtraDay == 5) clearInterval(interval5.value)
                if (item.interestRateExtraDay == 7) clearInterval(interval7.value)
                if (item.interestRateExtraDay == 1) isCountDown1.value = '00:00:00'
                if (item.interestRateExtraDay == 3) isCountDown3.value = '00:00:00'
                if (item.interestRateExtraDay == 5) isCountDown5.value = '00:00:00'
                if (item.interestRateExtraDay == 7) isCountDown7.value = '00:00:00'
            }
        }, 1000)
    }
}

// 时间补0
const getzero = (time: number) => {
    return time > 9 ? time : '0' + time
}

// 打开优惠券提示
const openQuanTip = (status: number) => {
    NewYear24Status.value = status
    NewYear24StatusFlag.value = true
}

// 领取新年优惠券
const ActivityNewYear24Receive = async (id: string) => {
    try {
        const res = await activityApi.ActivityNewYear24Receive({ extraConfigId: id })
        if (res.code === Code.StatusOK) {
            uni.showToast({ title: res.msg, icon: 'success' })
            await ActivityNewYear24()
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (error) {
        console.error('领取优惠券失败', error)
        uni.showToast({ title: '领取失败', icon: 'none' })
    }
}

// 返回活动
const backActivity = () => {
    if (type.value == 1) {
        uni.navigateTo({ url: "/pages/customer/activities" })
    } else if (type.value == 2) {
        uni.navigateTo({ url: "/pages/ib/activities" })
    } else {
        uni.navigateBack()
    }
}

// 跳转到信号源列表
const toDocumentary = () => {
    uni.navigateTo({ url: "/pages/documentary/trading/center" })
}

// ==================== 生命周期 ====================
onLoad((query) => {
    myId.value = query.id || ''
    type.value = query.type || ''
    active.value = query.active || ''

    if (active.value == '20zj' ||
        active.value == '23yx' ||
        active.value == '23jx' ||
        active.value == '23jxVip' ||
        active.value == '24JYB' ||
        active.value == '23nz' ||
        active.value == '23nzTwo' ||
        active.value == '23xinjia' ||
        active.value == '23jnhcj' ||
        active.value == '23nz_zx' ||
        active.value == 'NoWorries' ||
        active.value == 'NewYear24') {

        if (active.value == '20zj') {
            ActivitySingle20.value = true
        } else if (active.value == '23yx') {
            ActivitySingle23.value = true
        } else if (active.value == '23jx') {
            ActivitySingle23jx.value = true
            timeJx.value = {
                activityStartTime: query.data1,
                activityEndTime: query.data2,
                applicationStartTime: query.data3,
                applicationEndTime: query.data4
            }
        } else if (active.value == '23jxVip') {
            ActivitySingle23jxVip.value = true
            timeJx.value = {
                activityStartTime: query.data1,
                activityEndTime: query.data2,
                applicationStartTime: query.data3,
                applicationEndTime: query.data4
            }
        } else if (active.value == '24JYB') {
            ActivitySingle24JYB.value = true
            timeJx.value = {
                activityStartTime: query.data1,
                activityEndTime: query.data2,
                applicationStartTime: query.data3,
                applicationEndTime: query.data4
            }
        } else if (active.value == '23nz') {
            ActivitySingle23nz.value = true
            timeJx.value = {
                applicationStartTime: query.data3,
                applicationEndTime: query.data4
            }
        } else if (active.value == '23nzTwo') {
            ActivitySingle23nzTwo.value = true
            timeJx.value = {
                applicationStartTime: query.data3,
                applicationEndTime: query.data4
            }
        } else if (active.value == '23xinjia') {
            ActivitySingle23xinjia.value = true
        } else if (active.value == '23jnhcj') {
            ActivitySingle23jnhcj.value = true
        } else if (active.value == '23nz_zx') {
            ActivitySingle23nz_zx.value = true
        } else if (active.value == 'NoWorries') {
            ActivitySingleNoWorries.value = true
        } else if (active.value == 'NewYear24') {
            ActivitySingleNewYear24.value = true
            ActivityNewYear24()
        }

    } else if (active.value == 'newList') {
        ActivitySingleNewList.value = true
        getSingle1(myId.value)
    } else {
        getSingle(myId.value)
        ActivitySingle20.value = false
        ActivitySingle23.value = false
        ActivitySingle23jx.value = false
        ActivitySingle23jxVip.value = false
        ActivitySingle23nz.value = false
        ActivitySingle23nzTwo.value = false
        ActivitySingle23xinjia.value = false
        ActivitySingle23jnhcj.value = false
        ActivitySingleNewList.value = false
        ActivitySingle23nz_zx.value = false
        ActivitySingle24JYB.value = false
        ActivitySingleNoWorries.value = false
        ActivitySingleNewYear24.value = false
    }
})

// 清理定时器
onUnmounted(() => {
    clearInterval(interval1.value)
    clearInterval(interval3.value)
    clearInterval(interval5.value)
    clearInterval(interval7.value)
})
</script>
<style lang="scss" scoped>
.content {
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: auto;
    text-align: left;
    padding: 20px 25px;
    box-sizing: border-box;
    line-height: 2;

    .img {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;

    }
}

.toDocumentary {
    text-decoration: underline;
    color: blue;
}

table,
tr,
td,
th {
    border: 1px solid;
    text-align: center;
}

.nz_table {
    margin: 20px 0;
}

.NewYear_calculator {
    .content {
        // margin-bottom: 20px;
    }

    .tip {
        margin-top: 10px;
        font-size: 16px;
    }

    .red {
        color: #EB3F57;
    }
}

.NewYear_quan {
    .quanBox {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .quan_guoqi {
        text-align: center;
        font-size: 14px;
    }

    .tip {
        padding: 0 25px;
    }

    .quan_table {
        margin-top: 20px;
    }

    .couponRed {
        background-color: #E0E0E0;
        width: 200px;
        min-height: 215px;
        margin: 15px;
        --main-color: #EB3F57;
        --f-color: #444;
    }

    .couponGreen {
        background-color: #E0E0E0;
        width: 200px;
        min-height: 215px;
        margin: 15px;
        --main-color: #4CB01A;
        --f-color: #444;
    }

    .couponBlack {
        background-color: #E0E0E0;
        width: 200px;
        min-height: 215px;
        margin: 15px;
        --main-color: #5f595a;
        --f-color: #444;
    }

    .isUser {
        opacity: 0.6;
    }

    .price {
        position: relative;
        height: 80px;
        background-image: radial-gradient(circle at 100px -8px, #fff 20px, var(--main-color) 21px);
        color: #fff;
        font-size: 14px;
        text-align: center;
        padding-top: 30px;
    }

    .price .timeout {
        color: var(--f-color);
        font-size: 14px;
        margin-top: 25px;
    }

    .price .num {
        font-size: 20px;
    }

    .price .dec {
        line-height: 1.5;
    }

    .price::after {
        position: absolute;
        content: '';
        display: block;
        bottom: -5px;
        width: 100%;
        border-bottom: 10px dotted #E0E0E0;
    }

    .describe {
        color: #333;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
        text-align: center;
        min-height: 90px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }

    .btns {
        /* 使其button可以居中 */
        text-align: center;
    }

    .btns button {
        /* 重置按钮样式 */
        border: none;
        box-shadow: none;
        outline: none;
        background-color: var(--main-color);
        color: #fff;
        width: 50%;
        border-radius: 20px;
        line-height: 30px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .btns button.use {
        background-color: #5f595a;
    }
}
</style>