udxcms 1.0.8 → 1.0.10

package/dist/components/pageComponents/index/IndexVortex.vue

@@ -1,1715 +0,0 @@
-<template>
-<div class="page-home" ref='vortexIndex'>
-    <div class="visible-pc">
-        <Header :childPage="tabIndex" />
-    </div>
-    <div class="visible-h5">
-        <Top class="top" />
-    </div>
-    <!-- <Top class="top"  /> -->
-
-    <section class="section-one">
-        <div class="container">
-            <div class="content">
-                <h1>{{$t('cms_home_vortex_first_title_1')}}</h1>
-                <h1>{{$t('cms_home_vortex_first_title_2')}}</h1>
-                <h1>{{$t('cms_home_vortex_first_title_3')}}</h1>
-
-                <p>{{$t('cms_home_vortex_first_title_4')}}</p>
-
-                <div class="btn-group">
-                    <router-link v-if="tradeUrl" :to="tradeUrl"> {{ $t('cms_home_first_btn_text') }}</router-link>
-                    <router-link v-if="claimRewardsUrl" :to="marketingRewardsApi"> {{$t('cms_home_vortex_claim_rewards')}}</router-link>
-                </div>
-            </div>
-            <img class="img  visible-pc" src="../../../assets/component_img/index-vortex/new/section-one-1.png">
-            <!-- <img class="img  visible-pc" src="../../../assets/component_img/index-vortex/indexVortex.gif"> -->
-        </div>
-    </section>
-
-    <section class="section-two">
-        <div class="container">
-            <!-- <iframe width="440" height="248" src="https://www.youtube.com/embed/Hovpoz-sm80?si=mHV46Qmlg1Ecsxh0&autoplay=1&mute=1&loop=1&playlist=Hovpoz-sm80" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen autoplay></iframe> -->
-            <iframe width="440" height="248" :src="mediaUrl" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen autoplay></iframe>
-            <div @click='saveScorll'>
-                <h1>{{$t('cms_home_vortex_second_subtitle')}}</h1>
-            </div>
-        </div>
-    </section>
-
-    <section class="section-three">
-        <div class="container">
-            <div class="content">
-                <h1>{{$t('cms_home_vortex_thrid_title')}}</h1>
-                <p>{{$t('cms_home_vortex_thrid_subtitle_1')}}</p>
-                <p>{{$t('cms_home_vortex_thrid_subtitle_2')}}</p>
-                <div class="btn-group visible-pc">
-                    <router-link v-if="tradeUrl" :to="tradeUrl">
-                        {{ $t('cms_home_professional_btn_trade_text') }}
-                    </router-link>
-                    <router-link :to="apidocUrl">
-                        {{ $t('cms_home_professional_btn_api_text') }}
-                    </router-link>
-                </div>
-            </div>
-
-            <ul>
-                <li>
-                    <strong>{{$t('cms_home_vortex_thrid_list_1_title')}}</strong><span>{{$t('cms_home_vortex_thrid_list_1_subtitle')}}</span>
-                </li>
-                <li>
-                    <strong>{{$t('cms_home_vortex_thrid_list_2_title')}}</strong><span>{{$t('cms_home_vortex_thrid_list_2_subtitle')}}</span>
-                </li>
-                <li>
-                    <strong>{{$t('cms_home_vortex_thrid_list_3_title')}}</strong><span>{{$t('cms_home_vortex_thrid_list_3_subtitle')}}</span>
-                </li>
-                <li>
-                    <strong>{{$t('cms_home_vortex_thrid_list_4_title')}}</strong><span>{{$t('cms_home_vortex_thrid_list_4_subtitle')}}</span>
-                </li>
-                <li>
-                    <strong>{{$t('cms_home_vortex_thrid_list_5_title')}}</strong><span>{{$t('cms_home_vortex_thrid_list_5_subtitle')}}</span>
-                </li>
-            </ul>
-
-            <div class="content visible-h5">
-                <div class="btn-group">
-                    <router-link v-if="tradeUrl" :to="tradeUrl">
-                        {{ $t('cms_home_professional_btn_trade_text') }}
-                    </router-link>
-                    <router-link :to="apidocUrl">
-                        {{ $t('cms_home_professional_btn_api_text') }}
-                    </router-link>
-                </div>
-            </div>
-        </div>
-
-        <div class="container">
-            <div class="card-list">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-item-bg.png" alt="">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-01.png" alt="">
-                <div class="main-title">{{ $t('cms_home_advantage_item1_title') }}</div>
-                <div class="desc">{{$t('cms_home_vortex_thrid_item1_subtitle')}}</div>
-            </div>
-            <div class="card-list">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-item-bg.png" alt="">
-                <img class="special" src="../../../assets/component_img/index-vortex/new/section-three-02.png" alt="">
-                <div class="main-title">{{ $t('cms_home_advantage_item2_title') }}</div>
-                <div class="desc">{{$t('cms_home_vortex_thrid_item2_subtitle')}}</div>
-            </div>
-            <div class="card-list">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-item-bg.png" alt="">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-03.png" alt="">
-                <div class="main-title">{{$t('cms_home_vortex_thrid_item3_title')}}</div>
-                <div class="desc">{{$t('cms_home_vortex_thrid_item3_subtitle')}}</div>
-            </div>
-            <div class="card-list">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-item-bg.png" alt="">
-                <img src="../../../assets/component_img/index-vortex/new/section-three-04.png" alt="">
-                <div class="main-title">{{$t('cms_home_vortex_thrid_item4_title')}}</div>
-                <div class="desc">{{$t('cms_home_vortex_thrid_item4_subtitle')}}</div>
-            </div>
-        </div>
-    </section>
-
-    <section class="section-four">
-        <div class="container">
-            <h1>{{$t('cms_home_vortex_four_title')}}</h1>
-            <p>{{$t('cms_home_vortex_four_sutitle')}}</p>
-
-            <div class="tag-list">
-                <div class="tag-item">
-                    <div class="tag-item-line">
-                        <div class="tag-item-fill">
-                            <img src="../../../assets/component_img/index-vortex/new/section-four-01.png" alt="">
-                        </div>
-                    </div>
-                    <h4>{{$t('cms_home_vortex_four_scalable')}}</h4>
-                </div>
-
-                <div class="tag-item">
-                    <div class="tag-item-line">
-                        <div class="tag-item-fill pd25">
-                            <img src="../../../assets/component_img/index-vortex/new/section-four-02.png" alt="">
-                        </div>
-                    </div>
-                    <h4>{{$t('cms_home_vortex_four_composable')}}</h4>
-                </div>
-
-                <div class="tag-item">
-                    <div class="tag-item-line">
-                        <div class="tag-item-fill pd25">
-                            <img src="../../../assets/component_img/index-vortex/new/section-four-03.png" alt="">
-                        </div>
-                    </div>
-                    <h4>{{$t('cms_home_vortex_four_divisible')}}</h4>
-                </div>
-
-                <div class="tag-item">
-                    <div class="tag-item-line">
-                        <div class="tag-item-fill pd25">
-                            <img src="../../../assets/component_img/index-vortex/new/section-four-04.png" alt="">
-                        </div>
-                    </div>
-                    <h4>{{$t('cms_home_vortex_four_transferable')}}</h4>
-                </div>
-
-                <div class="tag-item">
-                    <div class="tag-item-line">
-                        <div class="tag-item-fill">
-                            <img src="../../../assets/component_img/index-vortex/new/section-four-05.png" alt="">
-                        </div>
-                    </div>
-                    <h4>{{$t('cms_home_vortex_four_tradable')}}</h4>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section class="section-five">
-        <div class="container">
-            <div class="show-img">
-                <img src="../../../assets/component_img/index-vortex/new/section-five-1.png" alt="">
-                <img src="../../../assets/component_img/index-vortex/new/section-five-2.png" alt="">
-            </div>
-            <div class="desc">
-                <h1>{{$t('cms_home_vortex_five_title')}}</h1>
-                <ul class="long-tip">
-                    <li>{{$t('cms_home_vortex_five_subtitle_1')}}: <div>{{$t('cms_home_vortex_five_subtitle_2')}}</div>
-                    </li>
-                    <li>{{$t('cms_home_vortex_five_subtitle_3')}}</li>
-                </ul>
-                <ul class="short-tip">
-                    <li>
-                        <div> <img class="burn" src="../../../assets/component_img/index-vortex/new/section-five-item-01.png" alt=""></div>
-                        {{$t('cms_home_vortex_five_list_1_title')}}
-                    </li>
-                    <li>
-                        <div><img class="user" src="../../../assets/component_img/index-vortex/new/section-five-item-02.png" alt="">
-                        </div>
-                        {{$t('cms_home_vortex_five_list_2_title')}}
-                    </li>
-                    <li>
-                        <div>
-                            <img class="dividend" src="../../../assets/component_img/index-vortex/new/section-five-item-03.png" alt="">
-                        </div>
-                        {{$t('cms_home_vortex_five_list_3_title')}}
-                    </li>
-                    <li>
-                        <div>
-                            <img class="reward" src="../../../assets/component_img/index-vortex/new/section-five-item-04.png" alt="">
-                        </div>
-                        {{$t('cms_home_vortex_five_list_4_title')}}
-                    </li>
-                </ul>
-                <div class="btn-group">
-                    <a href="https://medium.com/@vortexdex0/vortex-burn-mining-high-rewards-to-promote-dynamic-ecosystem-enhancement-cf4ead734290" target="_blank" rel="noopener noreferrer">Know more</a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section class="section-six">
-        <div class="container">
-            <div class="content">
-                <h1 class="sigener-bold">{{ $t("cms_home_firstpage_item9_title") }}</h1>
-                <p>{{$t("cms_home_firstpage_item9_subtitle")}}</p>
-            </div>
-            <div class="process">
-                <div class="process-item">
-                    <div class="img-box">
-                        <div class="img connect"></div>
-                    </div>
-                    <h2>01</h2>
-                    <p>{{ $t("cms_home_firstpage_item9_wallet_text1").slice(2).replace('your', '') }}</p>
-                </div>
-                <div class="process-item">
-                    <div class="img-box">
-                        <div class="img deposit"></div>
-                    </div>
-                    <h2>02</h2>
-                    <p>{{ $t("cms_home_firstpage_item9_wallet_text2").slice(2).replace('your', '') }}</p>
-                </div>
-                <div class="process-item">
-                    <div class="img-box">
-                        <div class="img account"></div>
-                    </div>
-                    <h2>03</h2>
-                    <p>{{ $t("cms_home_firstpage_item9_wallet_text3").slice(2) }}</p>
-                </div>
-                <div class="process-item">
-                    <div class="img-box">
-                        <div class="img rewards"></div>
-                    </div>
-                    <h2>04</h2>
-                    <p>{{ $t("cms_home_firstpage_item9_wallet_text4", { coin: rewardSymbol }).slice(2) }}</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <section class="section-seven" v-if="backerList.length > 0">
-        <div :class="['container', backerList.length > 6 && 'section-eight', backerList.length > 6 && partnerMode == 'scroll' && 'section-eight-scroll']">
-            <div class="content">
-                <h2 class="sigener-bold">{{ this.$t('cms_home_backer_title') }}</h2>
-            </div>
-            <div class='partner-box' v-if="partnerMode == 'scroll' && backerList.length > 6">
-                <Partnermedias :partnerList='backerList.slice(0, Math.round(backerList.length / 2))' />
-            </div>
-            <div class='partner-box' v-if="partnerMode == 'scroll' && backerList.length > 6">
-                <Partnermedias :partnerList='backerList.slice(-Math.round(backerList.length / 2))' direction='right' />
-            </div>
-            <div class="backer-wrapper" v-if="partnerMode != 'scroll' || backerList.length <= 6">
-                <div v-for="(item, index) in backerList" :key="index" class="backer-item">
-                    <a :href="item.site" target="_blank">
-                        <img class="img1" :src="item.logo" alt="" />
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- <section v-if="backerList.length > 0">
-      <div class="container section-nine">
-        <div class="content">
-          <h2>{{ $t("cms_home_firstpage_item8_title") }}</h2>
-          <p>
-            {{ $t("cms_home_firstpage_item8_subtitle") }}
-          </p>
-        </div>
-        <div class="community-list">
-          <a
-            class="community-item"
-            v-for="(item, index) in communityList"
-            :key="index"
-            :href="item.site"
-            target="_blank"
-          >
-            <img :src="item.logo" alt="" class="img" />
-            <div class="right-item">
-              <div class="right-title">{{ item.name }}</div>
-              <div class="right-subtitle">
-                {{ item.description }}
-              </div>
-            </div>
-          </a>
-        </div>
-      </div>
-    </section> -->
-
-    <!-- <DexFooter /> -->
-    <Footer />
-</div>
-</template>
-
-<script>
-// 此页面仅可用在 rinkeby
-// import { getLocation } from "../../../api/common";
-import DexFooter from "./component/DexFooter";
-import {
-    getRewardsOverview,
-    getTradeOverview,
-    getTokens,
-    fetchNetworkList
-} from './../../../api/common';
-// import { ConnectSocketTool} from '@/utils/connect';
-// import { tradeSymbol } from '@/api/socket';
-import {
-    numberFormat
-} from '../../../utils/index';
-import BNP from "bignumber.js";
-import Img from '@/common_modules/cms-submodule/components/basicComponents/Img.vue';
-
-export default {
-    name: "home",
-    components: {
-        Img,
-        DexFooter
-    },
-    data() {
-        return {
-            chainId: '',
-            tabIndex: 1,
-            tradeOverview: [],
-            rewardsOverview: {},
-            communityList: [],
-            coinSymbolList: [],
-            coinMap: {},
-            backerList: [],
-            tradeBorderColors: [
-                'rgba(98, 126, 234, 0.25)',
-                'rgba(141, 195, 81, 0.25)',
-                'rgba(255, 0, 122, 0.25)',
-                'rgba(249, 153, 66, 0.25)',
-            ],
-            apiUrl: '',
-            explorerUrl: '',
-            networkList: [],
-            advantageList: [],
-            claimRewardsUrl: '/marketing/trading-rewards'
-        };
-    },
-    computed: {
-        currency() {
-            return this.$store.state.user.currency;
-        },
-        symbol() {
-            return this.currency.symbol;
-        },
-        // rate() {
-        //     return this.$store.state.cmsstore.exchangeRate
-        // },
-        rewardSymbol() {
-            return this.$store.getters.rewardSymbol
-        },
-        reserveCurrency() {
-            return (this.rewardsOverview.reserve || 0) * 1 // 因查询不到USDR的价格，暂时按 1:1 计算。
-        },
-        siteConfig() {
-            return this.$store.state.siteConfig;
-        },
-        tradeUrl() {
-            return this.siteConfig.tradeUrl;
-        },
-        apidocUrl() {
-            return this.siteConfig.apidocUrl || 'apidoc';
-        },
-        formatedTradeOverview() {
-            return this.tradeOverview.map(item => {
-                // 显示2种币的总额
-                // turnover * 副币price + volume * 主币price
-                const primaryTokenPrice = this.priceMap[item.coin_symbol] || "0";
-                const secondaryTokenPrice = this.priceMap[item.base_symbol] || "0";
-                const totalVolume = new BNP(item.turnover.replace(/\,/g, '')).times(secondaryTokenPrice).plus(new BNP(item.volume.replace(/\,/g, '')).times(primaryTokenPrice)).toString();
-
-                return {
-                    ...item,
-                    totalVolume,
-                };
-            })
-        },
-        tradeOverviewBaseSymbols() {
-            return [...new Set(this.tradeOverview.map(item => item.base_symbol).concat(this.tradeOverview.map(item => item.coin_symbol)))];
-        },
-        priceMap() {
-            return this.$store.state.priceMap;
-        },
-        partnerMode() {
-            return this.$store.state.partnerMode
-        },
-        mediaUrl() {
-            return this.$t('site_common_advertise_video_url')
-        },
-        marketingRewardsApi() {
-            return this.$t('cms_home_vortex_marketing_rewards_url')
-        }
-    },
-    watch: {
-        '$store.state.wallet.checkDataChanId'(val, oldval) {
-            if (val != oldval && oldval && val) {
-                this.chainId = val
-            }
-        },
-        currency(val, oldVal) {
-            this.fetchTokenPrice();
-        },
-    },
-    created() {
-        this.init();
-        this.getTradeOverview();
-        this.getRewardsOverview();
-        // this.initSocket();
-        this.initCommunityList();
-        this.getOurBackerList();
-        this.initAdvantageList();
-        document.addEventListener("fullscreenchange", res => {
-            if (document.fullscreen == false) {
-                let scrollT = localStorage.getItem('vortexIndexScorll')
-                window.scrollTo(0, scrollT)
-            }
-        }, false);
-    },
-    methods: {
-        numberFormat,
-        numberFormatMillion(value) {
-            // console.log('value:', value);
-            if (value >= 100000) {
-                return numberFormat(value / 1000000, 2) + 'M';
-            } else {
-                return numberFormat(value, 2);
-            }
-        },
-        formatPrice(value, baseSymbol) {
-            const price = this.priceMap[baseSymbol] || 0;
-            const result = new BNP(value).times(price);
-            return result;
-        },
-        getRandom(max = 4) {
-            return Math.floor(Math.random() * 3);
-        },
-        getRandomColor() {
-            return this.tradeBorderColors[this.getRandom()];
-        },
-        goTrade(item) {
-            let pathUrl = '/trade?symbol=' + item.symbol;
-            this.$router.push(pathUrl)
-        },
-        init() {
-            this.chainId = this.getChainId();
-            this.getMenuUrl();
-            this.fetchNetworkList();
-        },
-        getChainId() {
-            let chainId = localStorage.getItem('networkId');
-            if (!chainId) {
-                try {
-                    let netWorkConfig = window.site_config['networks']
-                    let chainArr = netWorkConfig && JSON.parse(netWorkConfig)
-                    chainId = chainArr && chainArr.length && chainArr[0].chainId
-                } catch (error) {
-
-                }
-            }
-            return chainId;
-        },
-        getMenuUrl() {
-            try {
-                const menu = this.$store.state.navigation.header;
-                const pcMenu = menu.filter(item => item.client === 'WEB');
-                // console.log('pcMenu', pcMenu);
-                pcMenu.forEach(item => {
-                    // if (item.bar_name === 'Trade') {
-                    // 	this.tradeUrl = item.click_url;
-                    // }
-                    if (item.bar_name === 'Explorer') {
-                        this.explorerUrl = item.click_url;
-                    }
-                })
-            } catch (error) {
-
-            }
-        },
-        // async initSocket(chain_id) {
-        //     chain_id = chain_id || this.chainId
-        //     let connect = new ConnectSocketTool(chain_id);
-        //     await connect.connect(errMsg => {
-        //         this.initScoket(chain_id)
-        //     })
-        //     connect.subscribe(tradeSymbol.url, (greeting) => {
-        //         let data = JSON.parse(greeting.body);
-        //         console.log('subscribe data:', data);
-        //         this.updateTrade(data);
-        //     })
-        // },
-        fetchNetworkList() {
-            fetchNetworkList().then(res => {
-                // console.log('fetchNetworkList res:', res);
-                this.networkList = res;
-            }).catch(e => e)
-        },
-        updateTrade(data) {
-            // this.listData
-            let updateIndex = -1
-            this.tradeOverview.map((v, i) => {
-                if (v.symbol == data.symbol) {
-                    updateIndex = i
-                }
-            })
-            if (updateIndex != -1) {
-                this.$set(this.tradeOverview, updateIndex, data);
-            }
-        },
-        getRewardsOverview() {
-            getRewardsOverview().then(res => {
-                this.rewardsOverview = res.data;
-            }).catch(e => {
-                console.error('e:', e);
-            })
-        },
-        getTradeOverview() {
-            const url = this.$store.state.siteConfig.marketApi[0];
-            Promise.all([getTokens(), getTradeOverview({
-                url,
-            })]).then(res => {
-                console.log('getTradeOverview res:', res);
-                if (res[1].data) {
-                    this.tradeOverview = res[1].data.top_gainers;
-                    this.coinSymbolList = [...new Set(res[1].data.top_gainers.map(item => item.coin_symbol))];
-
-                    // 处理币种数据
-                    let coinMap = {}
-                    res[0]['0'].forEach(item => {
-                        if (this.coinSymbolList.includes(item.symbol)) {
-                            coinMap[item.symbol] = {
-                                icon_url: item.icon_url,
-                                name: item.name,
-                            }
-                        }
-                    })
-                    this.coinMap = coinMap;
-                    console.log('this.coinMap', this.coinMap);
-
-                    this.fetchTokenPrice();
-                }
-            }).catch(e => {
-                console.error('e:', e);
-            })
-        },
-        // getTradeOverview() {
-        //     getTradeOverview().then(res => {
-        //         this.tradeOverview = res.data && res.data.top_gainers;
-        //     }).catch(e => {
-        //         console.error('e:', e);
-        //     })
-        // },
-        initCommunityList() {
-            this.communityList =
-                this.$t("media_common_media_channel") !=
-                "media_common_media_channel" ?
-                JSON.parse(this.$t("media_common_media_channel")) :
-                [];
-        },
-        initAdvantageList() {
-            this.advantageList =
-                this.$t("media_common_advantage_channel") !=
-                "media_common_advantage_channel" ?
-                JSON.parse(this.$t("media_common_advantage_channel")) :
-                [];
-        },
-        getOurBackerList() {
-            this.backerList =
-                this.$t("media_common_backer_channel") !=
-                "media_common_backer_channel" ?
-                JSON.parse(this.$t("media_common_backer_channel")) :
-                [];
-        },
-
-        // price
-        fetchTokenPrice() {
-            this.$store.dispatch("fetchTokenPrice", this.tradeOverviewBaseSymbols.join(","));
-        },
-        initPriceInterval() {
-            this.clearPriceInterval();
-            this.priceIntervalTimer = setInterval(() => {
-                this.fetchTokenPrice();
-            }, this.updatePriceTimer);
-        },
-        clearPriceInterval() {
-            if (this.priceIntervalTimer) {
-                clearInterval(this.priceIntervalTimer);
-                this.priceIntervalTimer = null;
-            }
-        },
-        saveScorll() {
-            console.log('scrollY', window.scrollY)
-        }
-    },
-    beforeDestroy() {
-        this.clearPriceInterval();
-    },
-};
-</script>
-
-<style lang="less" scoped>
-.btn-group {
-    a {
-        display: inline-block;
-        padding: 15px 43px;
-        border-radius: 5px;
-        background: linear-gradient(90deg, #4426FF, #AC22F1);
-    }
-
-    a+a {
-        margin-left: 16px;
-        background: #18151F;
-        border: 2px solid #999999;
-    }
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin-bottom: 0.5em;
-    font-weight: 500;
-}
-
-.section-one {
-    background-image: url(../../../assets/component_img/index-vortex/new/section-one-bg.png);
-    background-repeat: no-repeat;
-
-    .container {
-        display: flex;
-
-        .content {
-            flex: 1;
-            padding-top: 24px;
-            h1 {
-                margin-bottom: 0;
-                font-weight: 800;
-                color: #FFFFFF;
-                line-height: 70px;
-                text-shadow: 4px 0px 9px #000000;
-            }
-
-            h1:last-of-type {
-                color: #B156FF
-            }
-
-            p {
-                margin-top: 40px;
-                font-size: 24px;
-                font-weight: 800;
-                color: #CCCCCC;
-            }
-
-            .btn-group {
-                margin-top: 84px;
-            }
-        }
-
-        .img {
-            width: 637px;
-        }
-    }
-}
-
-.section-two .container {
-    display: flex;
-    align-items: center;
-
-    iframe {
-        border-width: 2px;
-        border-image: linear-gradient(180deg, #AF24F2, transparent 50%) 1
-    }
-
-    div {
-        width: 787px;
-        height: 315px;
-        display: flex;
-        text-align: center;
-        align-items: center;
-        justify-content: space-evenly;
-        background-image: url(../../../assets/component_img/index-vortex/new/section-two-bg.png);
-        background-repeat: no-repeat;
-        background-position: 100px -68px;
-
-    }
-
-}
-
-.section-three {
-    background-position-y: -20px;
-    background-image: url(../../../assets/component_img/index-vortex/new/section-three-bg.png);
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-
-.section-three .container {
-    display: flex;
-
-    .content {
-        padding-top: 40px;
-        &.visible-h5 {
-            padding-top: 0px;
-            .btn-group {
-                margin-top: 0px;
-            }
-        }
-    }
-
-    ul {
-        li {
-            width: 590px;
-            position: relative;
-            padding-left: 37px;
-            margin-bottom: 16px;
-            line-height: 54px;
-            background: linear-gradient(90deg, #e6c4fe40 0%, #ffffff17 100%);
-            border-radius: 5px;
-            padding-right: 20px;
-            &::before {
-                content: '';
-                width: 10px;
-                height: 10px;
-                position: absolute;
-                left: 15px;
-                top: 24px;
-                background: #AF24F2;
-                border-radius: 50%;
-            }
-            span {
-                margin-left: 10px;
-            }
-            &:last-child {
-                margin-bottom: 0px;
-            }
-        }
-    }
-
-    .card-list {
-        width: 290px;
-        height: 330px;
-        position: relative;
-        background: #211e28;
-        border-radius: 5px;
-
-        img+img {
-            position: absolute;
-            left: 102px;
-            top: 52px;
-        }
-
-        .main-title {
-            font-weight: 800;
-            margin-top: 80px;
-            text-align: center;
-            font-size: 24px;
-            line-height: 48px;
-        }
-
-        .desc {
-            text-align: center;
-            font-size: 18px;
-            font-weight: 400;
-            line-height: 22px;
-            color: #CCCCCC;
-        }
-
-    }
-
-    .card-list+.card-list {
-        margin-left: 20px;
-    }
-
-    &+.container {
-        margin-top: 12vw;
-    }
-}
-
-.section-four .container {
-    h1 {
-        text-align: center;
-    }
-
-    p {
-        text-align: center;
-        font-size: #CCCCCC;
-    }
-
-    .tag-list {
-        display: flex;
-        margin-top: 75px;
-        justify-content: space-evenly;
-
-        .tag-item {
-            text-align: center;
-
-            .tag-item-line {
-                width: 120px;
-                padding: 13px;
-                height: 120px;
-                border: 2px solid #AF24F2;
-                border-radius: 50%;
-
-                .tag-item-fill {
-                    width: 90px;
-                    height: 90px;
-                    padding: 20px;
-                    background: #af24f21f;
-                    border-radius: 50%;
-
-                    &.pd25 {
-                        padding: 25px;
-                    }
-                }
-
-            }
-
-            h4 {
-                margin-top: 60px;
-                font-weight: 800;
-                color: #FFFFFF;
-                line-height: 30px;
-            }
-        }
-    }
-}
-
-.section-five .container {
-    display: flex;
-
-    .show-img {
-        position: relative;
-        height: 600px;
-
-        img+img {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-        }
-    }
-
-    .desc {
-        width: 650px;
-        margin-left: 76px;
-
-        .long-tip li {
-            position: relative;
-            color: #fff;
-            line-height: 30px;
-            padding-left: 24px;
-            font-size: 24px;
-            font-weight: bold;
-
-            &+li {
-                margin-top: 30px;
-            }
-
-            &::before {
-                content: '';
-                width: 10px;
-                height: 10px;
-                position: absolute;
-                top: 12px;
-                left: 0;
-                background: #AF24F2;
-                border-radius: 50%;
-            }
-
-            div {
-                font-size: 18px;
-                font-weight: 500;
-                line-height: 22px;
-                margin-top: 10px;
-            }
-        }
-
-        .short-tip {
-            display: flex;
-            flex-wrap: wrap;
-            margin-top: 42px;
-
-            li {
-                width: 40%;
-                margin-bottom: 24px;
-                white-space: nowrap;
-                div {
-                    display: inline-block;
-                    background: linear-gradient(360deg, #4426FF, #AC22F1);
-                    width: 44px;
-                    height: 44px;
-                    padding: 2px;
-                    margin-right: 16px;
-                    border-radius: 50%;
-
-                    img {
-                        background: #060709;
-                        padding: 10px 12px;
-                        border-radius: 50%;
-                    }
-
-                    .burn {
-                        padding: 10px 12px;
-                    }
-
-                    .user {
-                        padding: 9px 8px;
-                    }
-
-                    .dividend {
-                        padding: 10.5px;
-                    }
-
-                    .reward {
-                        padding: 9.5px 9px;
-                    }
-                }
-            }
-        }
-
-        .btn-group {
-            margin-top: 62px;
-        }
-    }
-}
-
-.section-six .container {
-    display: flex;
-    margin-top: 30px;
-    justify-content: space-between;
-
-    .content {
-
-        h1 {
-            width: 380px;
-            // line-height: 48px;
-            margin: 0;
-        }
-
-        p {
-            margin-top: 57px;
-            max-widtH: 450px;
-            line-height: 1.2;
-            white-space: break-spaces;
-        }
-
-    }
-
-    .process {
-        display: flex;
-        justify-content: space-around;
-
-        .process-item {
-            display: flex;
-            width: 20%;
-            flex-direction: column;
-            align-items: center;
-            p {
-                text-align: center;
-            }
-        }
-    }
-
-    .img-box {
-        width: 86px;
-        height: 86px;
-        display: inline-block;
-        background: linear-gradient(360deg, #4426FF, #AC22F1);
-        padding: 3px;
-        margin-bottom: 12px;
-        border-radius: 50%;
-
-        .img {
-            width: 80px;
-            height: 80px;
-            background-repeat: no-repeat;
-            background-size: 40%;
-            background-position: center;
-            background-color: #08090a;
-            border-radius: 50%;
-        }
-
-        .img.connect {
-            background-image: url(../../../assets/component_img/index-vortex/new/section-six-01.png);
-        }
-
-        .img.deposit {
-            background-image: url(../../../assets/component_img/index-vortex/new/section-six-02.png);
-        }
-
-        .img.account {
-            background-image: url(../../../assets/component_img/index-vortex/new/section-six-03.png);
-        }
-
-        .img.rewards {
-            background-image: url(../../../assets/component_img/index-vortex/new/section-six-04.png);
-        }
-    }
-
-    h2 {
-        text-align: center;
-    }
-}
-
-.section-seven {
-    padding-top: 200px;
-    background-image: url("../../../assets/component_img/index-vortex/new/section-seven.png");
-    background-size: cover;
-    background-position: left;
-    background-repeat: no-repeat;
-    // mix-blend-mode: difference;
-    .container .content .sigener-bold {
-        text-align: center;
-    }
-    .backer-wrapper {
-        display: grid;
-        gap: 20px;
-        z-index: 1;
-        grid-template-columns: repeat(2, 1fr);
-    }
-
-    .backer-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: #1E1C24;
-        img {
-            width: 160px;
-            height: auto;
-            
-        }
-    }
-}
-
-  .section-eight {
-    display: grid;
-    gap: 40px;
-    &.section-eight-scroll {
-        max-width: 100vw;
-        width: 100vw;
-    }
-    .partner-box {
-        width: 100vw;
-    }
-    .backer-wrapper {
-      display: grid;
-      gap: 20px;
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .backer-item {
-      background-color: #1E1C24;
-      border-radius: 9px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 12px 0;
-
-      img {
-        width: 120px;
-        height: 48px;
-        object-fit: contain;
-      }
-    }
-  }
-
-@media screen and (max-width: 768px) {
-    section .container {
-        padding: 0 20px;
-    }
-
-    .btn-group a {
-        display: block;
-
-        &+a {
-            margin-top: 16px;
-            margin-left: 0;
-        }
-    }
-
-    .section-one .container {
-        flex-direction: column;
-        text-align: center;
-
-        .content {
-
-            h1 {
-                line-height: 50px;
-            }
-        }
-
-        .img {
-            width: 80vw;
-            margin-left: 10vw;
-            margin-top: 64px;
-        }
-
-    }
-
-    .section-two .container {
-        flex-direction: column-reverse;
-
-        iframe {
-            width: 80vw;
-        }
-
-        div {
-            width: inherit;
-            background-size: 80vw;
-            background-position: 11vw -7vw;
-            height: 164px;
-            margin-top: 24px;
-        }
-
-    }
-
-    .section-three .container {
-        flex-direction: column;
-        text-align: center;
-        margin-top: 16px;
-
-        .btn-group {
-            margin-top: 16px;
-        }
-
-        ul {
-            margin: 32px 0;
-
-            li {
-                width: initial;
-                text-align: left;
-                line-height: 32px;
-                padding-left: 34px;
-                padding-right: 12px;
-
-                &::before {
-                    left: 12px;
-                    top: 12px;
-                }
-            }
-        }
-
-        &+.container {
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: space-around;
-
-            .card-list {
-                margin-left: 0;
-                margin-top: 16px;
-                width: 80vw;
-                height: inherit;
-
-                img {
-                    width: inherit;
-
-                    &+img {
-                        width: 26vw;
-                        left: 27vw;
-                        top: 53px;
-
-                        &.special {
-                            width: 22vw;
-                            left: 28vw;
-                            top: 60px;
-                        }
-                    }
-                }
-
-                .desc {
-                    font-size: 18px;
-                    padding: 0 20px 20px;
-                    line-height: 22px;
-
-                }
-            }
-        }
-    }
-
-    .section-four .container {
-        margin-top: 60px;
-
-        p {
-            line-height: 24px;
-            padding: 0 36px;
-        }
-
-        .tag-list {
-            justify-content: space-around;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 5vw;
-
-            .tag-item {
-                h4 {
-                    margin-top: 20px;
-                    margin-bottom: 40px;
-                }
-            }
-        }
-    }
-
-    .section-five .container {
-        flex-direction: column;
-        margin-top: 64px;
-
-        .show-img {
-            height: 93vw;
-
-            img {
-                width: 80vw;
-                margin-left: 8vw;
-
-                &+img {
-                    bottom: 0;
-                    right: 13vw;
-                    width: 80vw;
-                }
-            }
-        }
-
-        .desc {
-            width: initial;
-            margin-left: 0;
-
-            h1 {
-                text-align: center;
-            }
-
-            .long-tip {
-                margin-left: 0;
-            }
-
-            .short-tip {
-                justify-content: flex-end;
-
-                li {
-                    width: 50%;
-                    font-size: 12px;
-
-                    div {
-                        margin-right: 8px;
-                    }
-                }
-            }
-
-            .btn-group {
-                width: 60vw;
-                margin-top: 32px;
-                margin-left: 15vw;
-                text-align: center;
-            }
-        }
-
-    }
-
-    .section-six .container {
-        flex-direction: column;
-        margin-top: 60px;
-        justify-content: center;
-        .content {
-            text-align: center;
-
-            h1 {
-                width: initial;
-            }
-
-            p {
-                margin: 16px auto;
-                line-height: 24px;
-            }
-        }
-
-        .process {
-            margin-top: 32px;
-
-            .img-box {
-                width: 66px;
-                height: 66px;
-
-                .img {
-                    width: 60px;
-                    height: 60px;
-                }
-
-            }
-
-            p {
-                font-size: 12px;
-            }
-        }
-
-    }
-
-    .section-seven {
-        // background-image: none;
-        padding: 60px 0 100px 0;
-        overflow: hidden;
-
-        .partner-box {
-            margin-top: 30px;
-        }
-        .backer-wrapper {
-            margin-top: 30px;
-        }
-        .backer-item {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            img {
-                width: 160px;
-                height: auto;
-                max-width: 100%;
-            }
-        }
-    }
-}
-
-@media screen and (min-width: 800px) {
-    section .container {
-        padding: 0 60px;
-    }
-
-    .btn-group a {
-        display: inline-block;
-
-        &+a {
-            margin-top: 16px;
-            margin-left: 30px;
-        }
-    }
-
-    .section-one .container {
-        flex-direction: row;
-        align-items: center;
-
-        .content {
-
-            h1 {
-                line-height: 40px;
-            }
-        }
-
-        .img {
-            width: 50%;
-            margin-left: 0vw;
-            // margin-top: 64px;
-            display: block;
-        }
-
-    }
-
-    .section-two .container {
-        margin-top: 50px;
-        flex-direction: row;
-        iframe {
-            width: 30vw;
-        }
-
-        div {
-            flex: auto;
-            background-size: 80vw;
-            background-position: 11vw -7vw;
-            height: 164px;
-            margin-top: 24px;
-        }
-
-    }
-
-    .section-three .container {
-        flex-direction: row;
-        justify-content: space-between;
-        margin-top: 16px;
-
-        .btn-group {
-            margin-top: 16px;
-            display: block;
-        }
-        .content.visible-h5 {
-            display: none;
-        }
-        ul {
-            margin: 32px 0;
-
-            li {
-                width: initial;
-                text-align: left;
-                line-height: 32px;
-                padding-left: 34px;
-                padding-right: 12px;
-
-                &::before {
-                    left: 12px;
-                    top: 12px;
-                }
-            }
-        }
-
-        &+.container {
-            flex-direction: row;
-            flex-wrap: wrap;
-            justify-content: space-around;
-
-            .card-list {
-                margin-left: 0;
-                margin-top: 16px;
-                width: 22%;
-                height: inherit;
-                img {
-                    width: 100%;
-
-                    &+img {
-                        width: 30%;
-                        left: 50%;
-                        transform: translate(-50%);
-                        top: 40px;
-
-                        &.special {
-                            width: 26%;
-                            top: 50px;
-                        }
-                    }
-                }
-
-                .main-title {
-                    padding: 0 20px;
-                    line-height: 1;
-                }
-
-                .desc {
-                    margin-top: 10px;
-                    font-size: 18px;
-                    padding: 0 20px 20px;
-                    line-height: 22px;
-                }
-            }
-        }
-    }
-
-    .section-four .container {
-        margin-top: 60px;
-
-        p {
-            line-height: 24px;
-            padding: 0 36px;
-        }
-
-        .tag-list {
-            justify-content: space-around;
-            flex-direction: row;
-            flex-wrap: wrap;
-            gap: 5vw;
-
-            .tag-item {
-                h4 {
-                    margin-top: 20px;
-                    margin-bottom: 40px;
-                }
-            }
-        }
-    }
-
-    .section-five .container {
-        flex-direction: row;
-        margin-top: 64px;
-        justify-content: space-between;
-        .show-img {
-            width: 40%;
-            padding-right: 40px; 
-            height: fit-content;
-            img {
-                width: 100%;
-                margin-left: 0;
-
-                &+img {
-                    bottom: 0;
-                    right: 0;
-                    width: 100%;
-                }
-            }
-        }
-
-        .desc {
-            margin-left: 10px;
-            width: 50%;
-            h1 {
-                text-align: left;
-            }
-
-            .long-tip {
-                margin-left: 0;
-            }
-
-            .short-tip {
-                justify-content: flex-end;
-
-                li {
-                    width: 50%;
-                    font-size: 14px;
-
-                    div {
-                        margin-right: 8px;
-                    }
-                }
-            }
-
-            .btn-group {
-                width: 100%;
-                margin-top: 32px;
-                margin-left: 0;
-                text-align: left;
-            }
-        }
-
-    }
-
-    .section-six .container {
-        flex-direction: row;
-        margin-top: 60px;
-
-        .content {
-            text-align: center;
-
-            h1 {
-                width: initial;
-            }
-
-            p {
-                margin-top: 16px;
-                line-height: 24px;
-                text-align: left;
-            }
-        }
-
-        .process {
-            margin-top: 20px;
-
-            .img-box {
-                width: 66px;
-                height: 66px;
-
-                .img {
-                    width: 60px;
-                    height: 60px;
-                }
-
-            }
-
-            p {
-                font-size: 12px;
-            }
-        }
-
-    }
-
-    .section-seven {
-        // background-image: none;
-        padding: 60px 0 60px 0;
-        overflow: hidden;
-
-        .partner-box {
-            margin-top: 20px;
-        }
-        .backer-wrapper {
-            margin-top: 20px;
-        }
-        .backer-item {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-            img {
-                width: 160px;
-                height: auto;
-                max-width: 100%;
-            }
-        }
-    }
-    .section-eight {
-      .backer-wrapper {
-        grid-template-columns: repeat(3, 1fr);
-      }
-    }
-}
-@media screen and (min-width: 1280px) {
-    section .container {
-        width: 1250px;
-    }
-
-    .section-one .container {
-        padding-top: 114px;
-
-        .content {
-            padding-top: 61px;
-        }
-    }
-   .section-two .container {
-        margin-top: 100px;
-
-    }
-    .section-three .container {
-        margin-top: 50px;
-
-        .content {
-            width: 560px;
-            padding-top: 40px;
-
-            h1 {
-                margin-bottom: 54px;
-            }
-
-            p {
-                font-weight: 500;
-                color: #CCCCCC;
-                line-height: 30px;
-            }
-
-            .btn-group {
-                margin-top: 48px;
-            }
-        }
-    }
-
-    .section-four .container {
-        margin-top: 160px;
-    }
-
-    .section-five .container {
-        margin-top: 170px;
-    }
-
-    .section-six .container {
-        .content p {
-            margin: 16px auto;
-            text-align: left;
-        }
-        .process {
-            margin-top: 32px;
-
-            .img-box {
-                width: 66px;
-                height: 66px;
-
-                .img {
-                    width: 60px;
-                    height: 60px;
-                }
-
-            }
-
-            h2 {
-                font-size: 30px;
-                line-height: 1;
-                margin: 4px 0 18px 0;
-            }
-
-            p {
-                font-size: 20px;
-                line-height: 24px;
-            }
-        }
-
-    }
-    .section-seven {
-        // // background-image: none;
-        // // padding: 30px 0;
-        // padding-top: 200px;
-        // background-image: url("../../../assets/component_img/index-vortex/new/section-seven.png");
-        // overflow: hidden;
-        // background-position: center;
-        // mix-blend-mode: difference;
-        margin-top: -100px;
-        padding-top: 300px;
-        padding-bottom: 100px;
-        overflow: hidden;
-        .partner-box {
-            margin-top: 16px;
-        }
-
-        .backer-wrapper {
-            padding: 30px 0;
-            grid-template-columns: repeat(4, 1fr);
-
-            .backer-item {
-                width: 290px;
-            }
-        }
-    }
-
-    .section-eight {
-        h2 {
-            font-size: 48px;
-            line-height: 1;
-        }
-        .backer-wrapper {
-            grid-template-columns: repeat(4, 1fr);
-        }
-
-        .backer-item {
-            padding: 26px 0;
-            img {
-            width: 240px;
-            height: 84px;
-            }
-        }
-    }
-}
-</style>