udxcms 1.0.10 → 1.0.11

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

@@ -0,0 +1,1715 @@
+<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 '../../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>