udxcms 1.0.8 → 1.0.10

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

@@ -1,2007 +0,0 @@
-
-<template>
-    <div class="dex-page-home">
-        <div class="visible-pc">
-            <Header :childPage="tabIndex" />
-        </div>
-        <div class="visible-h5">
-            <Top :logoPosition='commonConf.logoPosition' />
-        </div>
-    <!-- <div class='top-left-img'>
-                        </div> -->
-        <!-- 1 -->
-        <section class="one-container">
-            <div class="container section-one">
-                <div class="content">
-                    <p class="small">{{ $t('cms_home_first_powered_p1', {siteName: $t('site_common_site_name')}) }}</p>
-                    <h1 class="h1-1">{{ $t('cms_home_first_h1') }}</h1>
-                    <div class="normal">
-                        <div>{{ $t('cms_home_first_powered_p2') }}</div>
-                        <div class="line"></div>
-                        <div>{{ $t('cms_home_first_powered_p3') }}</div>
-                    </div>
-                    <p class="middle">{{ $t('cms_home_first_powered_p4') }}</p>
-                    <!-- <p>{{ $t('cms_home_first_slogan_p2', {siteName: $t('site_common_site_name')}) }}</p> -->
-                    <router-link v-if="tradeUrl" :to="tradeUrl" class="home-dex-btn">
-                        {{ $t('cms_home_first_btn_text') }}
-                    </router-link>
-                </div>
-                <img class="right-img" src="../../../assets/component_img/index-morse/home-item-right-1-1.png" alt="">
-            </div>
-            <img class="left-line-img" src="../../../assets/component_img/index-morse/home-item-left-line.png" alt="">
-        </section>
-        <!-- 2 -->
-        <section class="two-container">
-            <div class="container section-two">
-                <div class="content">
-                    <!-- <h2>{{$t('cms_home_dex_market_trend')}}</h2> -->
-                    <h1>{{ $t('cms_home_dex_market_trend') }}</h1>
-                    <div class="info info-1">
-                        <div class="left">
-                            <h2>{{ $t('cms_home_seconde_powered_h2_1') }}</h2>
-                            <div class="desc">{{ $t('cms_home_seconde_powered_p1') }}</div>
-                            <router-link :to="tradeUrl" class="home-dex-btn">
-                                <span>
-                                    {{ $t('cms_home_first_btn_text') }}
-                                    <!-- Trade Now -->
-                                </span>
-                            </router-link>
-                        </div>
-                        <img class="lock-img" src="../../../assets/component_img/index-morse/home-item2-lock.png" alt="">
-                    </div>
-                    <div class="info info-2">
-                        <img class="around-img" src="../../../assets/component_img/index-morse/home-item2-around.png"
-                            alt="">
-                        <div class="right">
-                            <h2>{{ $t('cms_home_seconde_powered_h2_2') }}</h2>
-                            <div class="desc">{{ $t('cms_home_seconde_powered_p2') }}</div>
-                        </div>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-        <!-- 3 -->
-        <section class="three-container">
-            <div class="container section-three">
-                <div class="content">
-                    <!-- <h2>{{ $t('cms_home_dex_friendly_professional') }}</h2> -->
-                    <h2>{{ $t('cms_home_dex_friendly_professional') }}</h2>
-                </div>
-                <div class="line-list">
-                    <!-- <Swiper ref="mySwiper" :options="swiperOptions" class='line-wrapper'> -->
-                        <!-- <swiper-slide class="line-item" v-for='(item, index) in tradeOverview' :key='index'> -->
-                        <div class='line-wrapper'>
-                            <div class='line-item' v-for='(item, index) in tradeOverview' :key='index' @click='checkTrade(item)'>
-                                <div class="coin-row">
-                                    <img class="icon" :src="coinMap[item.coin_symbol]['icon_url']" alt="" />
-                                </div>
-                                <div class="price-row">
-                                    <div class="price-left">
-                                        <div class="name">
-                                            <span class="symbol">
-                                                {{ item.display_name }}
-                                            </span>
-                                            <span class="ratio">
-                                                {{ item.chg > 0 ? ('+' + item.chg) : item.chg }}%
-                                            </span>
-                                        </div>
-                                        <div class="price">
-                                            <!-- {{ symbol }} -->
-                                            {{ numberFormat(formatPrice(item.close.replace(/,/g, ''), item.base_symbol), 2) }}
-                                        </div>
-                                    </div>
-                                    <div class="price-right">
-                                        <MarketChartmini :data='item.trend' :chg='item.chg' footerColor="transparent"/>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <!-- </swiper-slide> -->
-                    <!-- </Swiper> -->
-                </div>
-            </div>
-        </section>
-        <!-- 4 -->
-        <section>
-            <div class="container section-four">
-                <div class="content">
-                    <img class="arrow" src="../../../assets/component_img/index-morse/home-item4-arrow.png" alt="">
-                    <h2>{{ $t('cms_home_feature_subtitle') }}</h2>
-                    <!-- <h2>{{ $t('cms_home_feature_title', { siteName: $t('site_common_site_name') }) }}</h2> -->
-                </div>
-                <div class="feature-wrapper">
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-1.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item1_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item1_content') }}
-                        </p>
-                    </div>
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-2.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item2_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item2_content') }}
-                        </p>
-                    </div>
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-3.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item3_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item3_content') }}
-                        </p>
-                    </div>
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-4.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item4_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item4_content') }}
-                        </p>
-                    </div>
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-5.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item5_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item5_content') }}
-                        </p>
-                    </div>
-                    <div class="feature-item">
-                        <img src="../../../assets/component_img/index-morse/home-item4-feature-6.png" alt="">
-                        <p class="title">
-                            {{ $t('cms_home_dex_feature_item6_title') }}
-                        </p>
-                        <p class="desc">
-                            {{ $t('cms_home_dex_feature_item6_content') }}
-                        </p>
-                    </div>
-
-                </div>
-            </div>
-        </section>
-        <!-- 5 -->
-        <section>
-            <div class="container section-five">
-                <div class="content">
-                    <h2>
-                        {{ this.$t('cms_home_backer_title') }}
-                    </h2>
-                    <p>
-                        {{ this.$t('cms_home_five_powered_p1') }}
-                    </p>
-                    <router-link v-if="tradeUrl" :to="tradeUrl" class="home-dex-btn">
-                        {{ $t('cms_home_five_btn_text') }}
-                    </router-link>
-                </div>
-                <img src="../../../assets/component_img/index-morse/home-item5-computer.png" alt="">
-            </div>
-        </section>
-        <!-- 6 -->
-        <section class="six-container">
-            <div class="container section-six">
-                <div class='content-bg'></div>
-                <div class="content">
-                    <h2>
-                        {{ $t("cms_home_firstpage_item9_title") }}
-                    </h2>
-                    <p>
-                        {{ $t("cms_home_firstpage_item9_subtitle") }}
-                    </p>
-                </div>
-                <div class="process">
-                    <div class="process-item process-item-1">
-                        <img src="../../../assets/component_img/index-morse/home-item6-feature-1.png" alt="" />
-                        <p>
-                            {{ $t("cms_home_firstpage_item9_wallet_text1") }}
-                        </p>
-                    </div>
-                    <div class="process-item process-item-2">
-                        <img src="../../../assets/component_img/index-morse/home-item6-feature-2.png" alt="" />
-                        <p>
-                            {{ $t("cms_home_firstpage_item9_wallet_text2") }}
-                        </p>
-                    </div>
-                    <div class="process-item process-item-3">
-                        <img src="../../../assets/component_img/index-morse/home-item6-feature-3.png" alt="" />
-                        <p>
-                            {{ $t("cms_home_firstpage_item9_wallet_text3") }}
-                        </p>
-                    </div>
-                    <div class="process-item process-item-4">
-                        <img src="../../../assets/component_img/index-morse/home-item6-feature-4.png" alt="" />
-                        <p>
-                            {{ $t("cms_home_firstpage_item9_wallet_text4") }}
-                        </p>
-                    </div>
-                </div>
-
-            </div>
-        </section>
-        <Footer class='index-dex' />
-    </div>
-</template>
-
-<script>
-// 此页面仅可用在 rinkeby
-// import { getLocation } from "../../../api/common";
-import { getRewardsOverview, getTradeOverview, getTokens, fetchNetworkList } from '../../../api/common';
-// import { ConnectSocketTool} from '@/utils/connect';
-// import { tradeSymbol } from '@/api/socket';
-import { numberFormat } from '@cms/utils';
-import { getStyleObj } from '../../../utils/index';
-import BNP from "bignumber.js";
-import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
-export default {
-    name: "index-morse",
-    components: {
-        Swiper,
-        SwiperSlide
-    },
-    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: '',
-            marketUrl: '/market',
-            mobieMarketUrl: '/market-mobile',
-            explorerUrl: '',
-            networkList: [],
-            commonConf: {
-                logoPosition: 'center',
-                topBannerType: 'dex'
-            }, // h5导航栏配置
-            // swiperOptions: {
-            //     slidesPerView: 3,
-            //     spaceBetween: 30
-            // }
-        };
-    },
-    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 || '';
-        },
-        tradeOverviewBaseSymbols() {
-            return [...new Set(this.tradeOverview.map(item => item.base_symbol))];
-        },
-        priceMap() {
-            return this.$store.state.priceMap;
-        },
-    },
-    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();
-    },
-    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();
-        },
-        initStyleConfig() {
-            let pageName = this.$route.name
-            let styleObj = getStyleObj(pageName, ['commonConf'])
-            // todo: commonConf
-            // this.commonConf = styleObj.commonConf || {}
-        },
-        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"))
-                    : [];
-        },
-        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;
-            }
-        },
-        checkTrade(item) {
-            this.$router.push({
-                path: `/trade/spot?symbol=${item.coin_symbol}-${item.base_symbol}`
-            })
-        },
-    },
-    beforeDestroy() {
-        this.clearPriceInterval();
-    },
-};
-</script>
-
-<style lang="less" scoped>
-
-
-.home-dex-btn {
-    --borderWidth: 6px;
-    --bRadius: 50px;
-    width: 202px;
-    height: 72px;
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-    z-index: 3;
-    border-radius: 10px;
-    text-align: center;
-    font-weight: 500;
-    font-size: 20px;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    // background: var(--primary-bg-color);
-    // background-color: #0ABD8B;
-    background: #0098ea;
-    background-color: #07acff;
-    &:hover {
-        color: #fff;
-    }
-}
-
-.dex-page-home {
-
-    --morseBlue: #2A82EB;
-    --morseTextColor: #04060b;
-    --accent-light: #0098ea;
-    --accent-dark: #090b0c;
-    --primary-color: var(--morseBlue);
-    --primary-bg-color: var(--accent-light);
-    --imgFilter: hue-rotate(50deg);
-    position: relative;
-    // background: #0A1017;
-    background: white;
-    color: var(--morseTextColor);
-    overflow: hidden;
-    .top {
-        height: 56px;
-    }
-
-    .api-btn {
-        width: 202px;
-        height: 72px;
-        display: inline-block;
-        background: #302c3f;
-        border-radius: 50px;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-weight: 500;
-        font-size: 16px;
-        line-height: 24px;
-    }
-
-    .container {
-        max-width: 1250px;
-        margin: 60px 20px;
-    }
-
-    section {
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-        // overflow: hidden;
-    }
-
-    .content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-
-        p {
-            font-size: 14px;
-            line-height: 25px;
-            color: #fff;
-        }
-
-        // h2 {
-        //     font-size: 36px;
-        //     line-height: 42px;
-        // }
-    }
-
-    section img {
-        max-width: 100%;
-    }
-
-    .top-left-img {
-        position: absolute;
-        top: 0px;
-        z-index: 0;
-        width: 100%;
-        height: 278px;
-        background: url('../../../assets/component_img/index-dex/top-img-bg.svg');
-        background-position: 0 0;
-        background-repeat: no-repeat;
-    }
-
-    .one-container {
-        position: relative;
-
-        .left-line-img {
-            position: absolute;
-            z-index: 0;
-            top: 200px;
-            left: 0;
-            display: none;
-        }
-    }
-
-    .section-one {
-        display: grid;
-        gap: 0px;
-        margin-top: 30px;
-        z-index: 3;
-
-        .content {
-            order: 2;
-            font-family: Font;
-
-            p {
-                font-size: 20px;
-                line-height: 24px;
-                color: #fff;
-            }
-
-            p.small {
-                font-size: 12px;
-                line-height: 14px;
-                color: #fff;
-            }
-
-            h1 {
-                line-height: 36px;
-                margin: 21px 0;
-                color: var(--morseTextColor);
-            }
-
-            .normal {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                margin-bottom: 10px;
-
-                &>div {
-                    color: var(--primary-color);
-                    font-size: 18px;
-                    line-height: 20px;
-                    text-align: right;
-                }
-
-                .line {
-                    margin: 0 20px;
-                    width: 2px;
-                    height: 11px;
-                    background: var(--primary-bg-color);
-                }
-            }
-
-            p.middle {
-                color: #FFF;
-                font-size: 16px;
-                line-height: 18px;
-            }
-
-            .home-dex-btn {
-                margin-top: 24px;
-                width: 160px;
-                height: 38px;
-                font-size: 14px;
-            }
-        }
-
-        .right-img {
-            order: 1;
-            width: 70%;
-            display: block;
-            margin: 30px auto 30px;
-            filter: var(--imgFilter);
-        }
-    }
-
-    .section-two {
-        display: grid;
-        gap: 40px;
-
-        .content {
-            width: 100%;
-
-            h1 {
-                text-align: center;
-                color: var(--morseTextColor);
-            }
-
-            .info {
-                display: grid;
-                gap: 5px;
-
-                .left {
-                    h2 {
-                        color: var(--morseTextColor);
-                        line-height: 30px;
-                        text-align: center;
-                        margin-bottom: 20px;
-                    }
-
-                    .desc {
-                        color: var(--morseTextColor);
-                        font-size: 16px;
-                        line-height: 20px;
-                        text-align: center;
-                    }
-
-                    .home-dex-btn {
-                        width: 160px;
-                        height: 38px;
-                        font-size: 14px;
-                        margin: 20px auto 0;
-                    }
-                }
-
-                .right {
-                    h2 {
-                        color: var(--morseTextColor);
-                        line-height: 30px;
-                        text-align: center;
-                        margin-bottom: 20px;
-                    }
-
-                    .desc {
-                        color: var(--morseTextColor);
-                        font-size: 16px;
-                        line-height: 20px;
-                        text-align: center;
-                    }
-                }
-            }
-
-            .info-1 {
-                margin-top: 30px;
-
-                .lock-img {
-                    order: 1;
-                    width: 60%;
-                    display: block;
-                    margin: 0 auto 30px;
-                    filter: hue-rotate(60deg);
-                }
-
-                .left {
-                    order: 2;
-                }
-            }
-
-            .info-2 {
-                margin-top: 30px;
-                filter: hue-rotate(60deg);
-                .around-img {
-                    width: 60%;
-                    margin: 0 auto 30px;
-                    
-                }
-            }
-        }
-    }
-
-    .three-container {}
-
-    .section-three {
-        margin: 30px 0px;
-
-        .content {
-            position: relative;
-            z-index: 1;
-            margin-bottom: 60px;
-
-            h2,
-            p {
-                width: 100%;
-                text-align: center;
-                color: var(--morseBlue);
-            }
-
-        }
-        .line-wrapper {
-            display: grid;
-            gap: 20px;
-        }
-
-        .line-item {
-            padding: 20px 10px;
-            border: 2px solid var(--primary-color);
-            border-radius: 16px;
-            cursor: pointer;
-            transition: all ease-in-out .3s;
-
-            background-position: center;
-            background-repeat: no-repeat;
-            display: grid;
-            grid-template-columns: 0.2fr 1fr;
-            margin: 0 20px;
-            align-items: center;
-
-
-            // &:hover {
-            //     transform: translateY(-10px);
-            // }
-
-            .coin-row {
-                margin-right: 5px;
-
-                .icon {
-                    width: 50px;
-                    height: 50px;
-                    border-radius: 50px;
-                    overflow: hidden;
-                }
-            }
-
-            .price-row {
-                flex: 1;
-                display: grid;
-                gap: 10px;
-                grid-template-columns: 1fr 1fr;
-
-                .price-left {
-                    .name {
-                        display: flex;
-                        flex-direction: row;
-                        align-items: flex-end;
-                        justify-content: flex-start;
-
-                        .symbol {
-                            font-size: 18px;
-                            line-height: 18px;
-                            color: var(--morseBlue);
-                            font-family: FontBold;
-                        }
-
-                        .ratio {
-                            font-size: 12px;
-                            color: var(--morseBlue);
-                            margin-left: 5px;
-                        }
-                    }
-
-                    .price {
-                        font-size: 14px;
-                        line-height: 16px;
-                        margin-top: 6px;
-                        color: var(--morseBlue);
-                    }
-
-                }
-
-                .price-right {
-                    &>img {
-                        margin-left: 10px;
-                        width: 60px;
-                    }
-                }
-
-
-            }
-        }
-
-    }
-
-    .section-four {
-        position: relative;
-        margin-top: 60px;
-
-        .content {
-            position: relative;
-            z-index: 1;
-            margin-bottom: 40px;
-            img {
-                filter: hue-rotate(85deg);
-            }
-            h2 {
-                width: 100%;
-                text-align: center;
-                color: var(--morseBlue);
-                margin: 30px 0 0;
-
-            }
-
-            .arrow {
-                width: 20px;
-            }
-        }
-
-        .feature-wrapper {
-            position: relative;
-            z-index: 1;
-            display: grid;
-            gap: 40px;
-            justify-content: center;
-        }
-
-        .feature-item {
-            position: relative;
-            background: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent-light) 100%);
-            border-radius: 22px;
-            height: 350px;
-            width: 320px;
-            margin: 0 auto;
-
-            &>img {
-                width: 100%;
-                border-radius: 20px;
-                overflow: hidden;
-            }
-
-            .title {
-                font-family: FontSemiBold;
-                font-weight: bold;
-                font-size: 22px;
-                line-height: 1;
-                color: #fff;
-                padding: 0 20px;
-                margin-top: 20px;
-            }
-
-            .desc {
-                margin-top: 17px;
-                font-size: 14px;
-                line-height: 18px;
-                color: #fff;
-                padding: 0 20px;
-            }
-        }
-    }
-
-    .section-five {
-        display: grid;
-        gap: 40px;
-        justify-content: center;
-
-        .content {
-            z-index: 1;
-            position: relative;
-
-            h2,
-            p {
-                width: 100%;
-                text-align: left;
-                color: var(--morseBlue);
-            }
-
-            &>h2 {
-                margin-bottom: 20px;
-                font-size: 21px;
-            }
-
-            &>p {
-                line-height: 18px;
-            }
-
-            .home-dex-btn {
-                margin-top: 20px;
-                width: 160px;
-                height: 38px;
-                font-size: 14px;
-            }
-
-            &>img {
-                width: 692px;
-                position: absolute;
-                
-            }
-        }
-
-        &>img {
-            display: block;
-            width: 79%;
-            margin: 0 auto;
-            filter: var(--imgFilter);
-        }
-    }
-
-    .six-container {
-        width: 100%;
-        position: relative;
-        background: url('../../../assets/component_img/index-morse/home-item6-bg.png');
-        background-size: cover;
-        height: fit-content;
-        background-repeat: no-repeat;
-    }
-
-    .section-six {
-        .content {
-            z-index: 3;
-            position: relative;
-
-            h2,
-            p {
-                width: 100%;
-                text-align: left;
-                color: #FFF;
-            }
-        }
-
-        .process {
-            display: grid;
-            gap: 40px;
-            z-index: 4;
-            position: relative;
-            margin-top: 20px;
-            grid-template-columns: repeat(2, 1fr);
-
-            .process-item {
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                transform: skew(-16deg, 0);
-                border: 1px solid var(--morseBlue);
-                border-radius: 10px;
-                padding: 12px 17px;
-                // width: 376px;
-                // height: 140px;
-
-                &>img {
-                    width: 26px;
-                    height: 26px;
-                    transform: skew(16deg, 0);
-                    filter: var(--imgFilter);
-                }
-
-                &>p {
-                    font-size: 15px;
-                    line-height: 14px;
-                    text-align: left;
-                    margin-left: 5px;
-                    font-family: FontMedium;
-                    transform: skew(16deg, 0);
-                    color: white;
-                }
-            }
-
-            .process-item-1 {
-                &>img {
-                    width: 29px;
-                    height: 29px;
-                }
-            }
-
-            .process-item-4 {
-                &>img {
-                    width: 27px;
-                    // height: 71px;
-                }
-            }
-        }
-
-        .content-bg {
-            position: absolute;
-            z-index: 1;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: linear-gradient(180deg, #07524F 0%, #0A1017 100%);
-            opacity: 0.6;
-        }
-    }
-
-
-    .index-dex {
-        ul li.site-icon {
-            filter: invert(1);
-        }
-    }
-}
-
-
-@media screen and (min-width: 768px) {
-    .home-dex-btn {
-        font-size: 16px;
-        width: 209px;
-        height: 56px;
-        color: white;
-    }
-
-    .dex-page-home {
-        .top-left-img {
-            position: absolute;
-            top: -272px;
-            left: -180px;
-            z-index: 0;
-            width: 550px;
-            height: 418px;
-            background: radial-gradient(circle at 70% 45%, #FEBF61 -3.62%, #f3c07291 18.76%, #7616d0 54.71%);
-            background-position: 0 0;
-            filter: blur(100px);
-        }
-
-        .content {
-            h2 {
-                font-size: 50px;
-            }
-
-            p {
-                font-size: 17px;
-            }
-        }
-
-        .section-one {
-            .content {
-                h1 {
-                    font-size: 50px;
-                    line-height: 61px;
-                }
-
-                p {
-                    font-size: 20px;
-                    line-height: 24px;
-                }
-
-                p.small {
-                    font-size: 16px;
-                }
-
-                .normal {
-                    margin-bottom: 20px;
-
-                    &>div {
-                        font-size: 20px;
-                    }
-
-                    .line {
-                        width: 2px;
-                        height: 11px;
-                    }
-                }
-            }
-
-            .right-img {
-                order: 1;
-                width: 40%;
-                display: block;
-                margin: 30px auto 30px;
-            }
-        }
-
-        .section-two {
-            gap: 60px;
-
-            .content {
-                h2 {
-                    // width: 400px;
-                    font-size: 32px;
-                    color: #FFF;
-                }
-
-                p {
-                    font-size: 16px;
-                    line-height: 20px;
-                    color: #FFF;
-                }
-
-                .info {
-                    .left {
-                        order: 1;
-                        &>h2 {
-                            text-align: left;
-                            color: #FFF;
-                        }
-
-                        .desc {
-                            text-align: left;
-                            color: #FFF;
-                        }
-
-                        .home-dex-btn {
-                            height: 36px;
-                            font-size: 16px;
-                            padding: 0 10px;
-                            margin: 20px 0 0;
-                        }
-                    }
-
-                    .lock-img {
-                        order: 2;
-                        width: 60%;
-                        filter: hue-rotate(60deg);
-                    }
-
-                    .right {
-                        &>h2 {
-                            text-align: right;
-                            color: #FFF;
-                        }
-                        .desc {
-                            text-align: right;
-                            color: #FFF;
-                        }
-                    }
-
-                    .around-img {
-                        width: 60%;
-                    }
-                }
-
-                .info-1 {
-                    grid-template-columns: 1fr minmax(100px, 0.8fr);
-                }
-
-                .info-2 {
-                    grid-template-columns: minmax(100px, 1fr) 1fr;
-                    filter: hue-rotate(60deg);
-                }
-
-
-            }
-
-            .line-wrapper {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-
-        .three-container {}
-
-        .section-three {
-            .content {
-                h2 {
-                    font-size: 40px;
-                    line-height: 50px;
-                    margin-bottom: 0px;
-                }
-
-                p {
-                    margin-top: 12px;
-                    font-size: 16px;
-                    line-height: 20px;
-                }
-
-                .btns-row {
-                    display: flex;
-                    margin: 20px 0;
-                    width: 100%;
-                    justify-content: flex-start;
-
-                    // grid-template-columns: repeat(2, 1fr);
-                    .api-btn {
-                        width: 130px;
-                    }
-                }
-
-            }
-            .line-list {
-                overflow-x: hidden;
-                overflow-y: visible;
-            }
-
-            .line-wrapper {
-                // padding-left: 40px;
-                padding: 0 20px;
-                display: grid;
-                flex-direction: row;
-                align-items: center;
-                flex-wrap: nowrap;
-                scrollbar-width: none;
-                /* firefox */
-                -ms-overflow-style: none;
-                grid-template-columns: repeat(2, 1fr);
-                /* IE 10+ */
-            }
-
-            .line-wrapper::-webkit-scrollbar {
-                display: none;
-            }
-
-            .line-item {
-                padding: 25px 20px;
-                border: 2px solid var(--primary-color);
-                border-radius: 20px;
-                cursor: pointer;
-                transition: all ease-in-out .3s;
-
-                background-position: center;
-                background-repeat: no-repeat;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                margin: 0;
-                // margin-right: 20px;
-
-
-                .coin-row {
-                    place-content: center;
-                    display: flex;
-                    margin-right: 14px;
-                    width: 53px;
-
-                    .icon {
-                        width: 53px;
-                        height: 53px;
-                        border-radius: 53px;
-                        overflow: hidden;
-                    }
-                }
-
-
-
-                .price-row {
-                    display: grid;
-                    grid-template-columns: 1fr minmax(100px, 0.6fr);
-                    align-items: center;
-                }
-
-                .price {
-                    font-size: 26px;
-                    line-height: 31px;
-                    color: #FFF;
-                }
-
-                .prop-row {
-                    display: flex;
-                    justify-content: space-between;
-                    margin-bottom: 12px;
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-
-                    label {
-                        width: 30px;
-                        flex: none;
-                        font-size: 14px;
-                        line-height: 18px;
-                        color: #FFF;
-                        // margin-right: 6px;
-                    }
-
-                    .value {
-                        font-size: 14px;
-                        line-height: 18px;
-                        text-align: right;
-                        color: #FFF;
-                    }
-                }
-            }
-
-            .content-img {
-                grid-template-columns: 500px 1fr;
-                gap: 20px;
-            }
-        }
-
-        .section-four {
-            .content {
-                h2 {
-                    font-size: 40px;
-                    line-height: 1;
-                }
-
-                p {
-                    font-size: 16px;
-                    line-height: 1;
-                }
-            }
-
-            .feature-wrapper {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 25px;
-                justify-items: center;
-            }
-
-            .feature-item {
-                // height: 440px;
-                width: 320px;
-                height: 350px;
-
-                .title {
-                    font-size: 22px;
-                    margin-bottom: 8px;
-                }
-
-                .desc {
-                    font-size: 14px;
-                    line-height: 18px;
-                    color: #fff;
-                }
-            }
-        }
-
-        .section-five {
-            gap: 20px;
-            grid-template-columns: 1fr 50%;
-
-            .content {
-                align-items: flex-start;
-
-                h2 {
-                    font-size: 40px;
-                    line-height: 1;
-                    margin-bottom: 0px;
-                }
-
-                h2,
-                p {
-                    width: 100%;
-                    text-align: left;
-                }
-
-                p {
-                    margin-top: 20px;
-                    line-height: 1;
-                    font-size: 16px;
-                }
-            }
-
-            .backer-wrapper {
-                grid-template-columns: repeat(3, 1fr);
-            }
-        }
-
-        .section-six {
-            gap: 40px;
-
-            .content {
-                h2 {
-                    font-size: 40px;
-                    line-height: 1;
-                    margin-bottom: 0px;
-                }
-
-                h2,
-                p {
-                    width: 100%;
-                    text-align: left;
-                }
-
-                p {
-                    margin-top: 20px;
-                    line-height: 1;
-                    font-size: 16px;
-                }
-            }
-
-            .process {
-                gap: 100px;
-
-                .process-item {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
-
-                    // img {
-                    //     width: 80px;
-                    //     height: 80px;
-                    // }
-
-                    p {
-                        font-weight: 500;
-                        font-size: 20px;
-                        line-height: 24px;
-                        text-align: left;
-                        margin-left: 20px;
-                    }
-
-                    .arrow-box {
-                        position: relative;
-                        flex: 1;
-                        text-align: right;
-                        left: 0;
-
-                        .arrow {
-                            width: 36px;
-                            height: 36px;
-                        }
-                    }
-                }
-
-                grid-template-columns: 1fr 1fr;
-
-                .process-item {
-                    .arrow-box {
-                        transform: rotate(0deg) translate(0, 0);
-                    }
-
-                    &.process-item-2 {
-                        .arrow-box {
-                            transform: rotate(90deg) translate(160%, 400%);
-                        }
-                    }
-
-                    &.process-item-3 {
-
-                        .arrow-box {
-                            display: none;
-                        }
-                    }
-
-                    &.process-item-4 {
-
-                        .arrow-box {
-                            display: block;
-
-                            img {
-                                transform: rotate(180deg);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-    }
-}
-
-@media screen and (min-width: 1200px) {
-    .dex-page-home {
-        .container {
-            margin-left: auto;
-            margin-right: auto;
-        }
-
-        .content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            text-align: center;
-
-            p {
-                font-size: 20px;
-                line-height: 1;
-            }
-
-            h2 {
-                font-size: 50px;
-                line-height: 68px;
-            }
-        }
-
-        .top-left-img {
-            position: absolute;
-            top: -272px;
-            left: -180px;
-            z-index: 0;
-            width: 850px;
-            height: 578px;
-            background: radial-gradient(circle at 70% 45%, #FEBF61 -3.62%, #f3c07291 18.76%, #7616d0 54.71%);
-            background-position: 0 0;
-            filter: blur(100px);
-        }
-
-        .one-container {
-            position: relative;
-            // margin-top: -81px;
-            overflow: hidden;
-            z-index: 3;
-
-            .left-line-img {
-                // top: 308px;
-                // width: 86.51%;
-                display: block;
-                top: 264px;
-                width: 75.51%;
-                filter: var(--imgFilter);
-            }
-        }
-
-        .section-one {
-            position: relative;
-            min-height: 660px;
-            grid-template-columns: 1fr 0.5fr;
-            align-items: center;
-            z-index: 2;
-            margin-top: 60px;
-            gap: 10px;
-
-            .content {
-                order: 1;
-                align-items: flex-start;
-                text-align: left;
-
-                h1 {
-                    font-size: 50px;
-                    line-height: 72px;
-                    margin: 25px auto 20px;
-                }
-
-                p.small {
-                    font-size: 18px;
-                    line-height: 25px;
-                    color: #525252;
-                }
-
-                .normal {
-                    align-items: center;
-                    margin-bottom: 0;
-
-                    &>div {
-                        color: var(--primary-color);
-                        font-size: 24px;
-                        line-height: 24px;
-                    }
-
-                    .line {
-                        width: 2px;
-                        height: 14px;
-                    }
-                }
-
-                p.middle {
-                    font-size: 18px;
-                    line-height: 40px;
-                    margin-top: 20px;
-                }
-
-                .home-dex-btn {
-                    margin-top: 140px;
-                    width: 209px;
-                    height: 56px;
-                    font-size: 20px;
-                }
-            }
-
-            .right-img {
-                width: 100%;
-                // height: 395px;
-                order: 2;
-            }
-
-        }
-
-        .two-container {
-            position: relative;
-            margin-top: -420px;
-            background-image: url(../../../assets/component_img/index-morse/home-item-1.png);
-            background-position: 0px 0px;
-            background-repeat: no-repeat;
-            z-index: 2;
-            background-size: 100% 100%;
-            filter: drop-shadow(2px 2px 0px black);
-        }
-
-        .section-two {
-            height: 1385px;
-            // height: 1785px;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-
-            .content {
-                h1 {
-                    font-size: 50px;
-                    text-align: center;
-                    color: white;
-                }
-
-                .info {
-                    width: 100%;
-                    .left,
-                    .right {
-                        width: 100%;
-                        h2 {
-                            font-size: 50px;
-                            line-height: 54px;
-                            color: #FFF;
-                            width: 100%;
-                            text-align: left;
-                        }
-
-                        .desc {
-                            color: #FFF;
-                            margin-top: 30px;
-                            font-size: 24px;
-                            line-height: 30px;
-                            text-align: left;
-                        }
-
-                        .home-dex-btn {
-                            margin: 30px 0 0 0;
-                            width: 209px;
-                            height: 56px;
-                            color: white;
-                            font-size: 20px;
-                        }
-                    }
-
-                    .lock-img {
-                        width: auto;
-                    }
-
-                    .around-img {
-                        width: auto;
-                    }
-
-                }
-
-                .info-1 {
-                    margin-top: 100px;
-                    gap: 310px;
-                    grid-template-columns: 1fr 253px;
-                }
-
-                .info-2 {
-                    margin-top: 80px;
-                    margin-bottom: 63px;
-                    grid-template-columns: 314px 1fr;
-                    gap: 47px;
-                    place-items: center;
-
-                    .right {
-                        h2 {
-                            text-align: right;
-                        }
-
-                        .desc {
-                            text-align: right;
-                        }
-                    }
-                }
-            }
-
-            .line-wrapper {
-                grid-template-columns: repeat(4, 1fr);
-            }
-        }
-
-        .three-container {}
-
-        .section-three {
-            margin: 80px auto 60px auto;
-            .line-list {
-                overflow-x: hidden;
-                overflow-y: visible;
-            }
-            .line-wrapper {
-                display: grid;
-                // gap: 20px;
-                // grid-template-columns: repeat(1fr);
-                // display: flex;
-                flex-direction: row;
-                align-items: center;
-                flex-wrap: nowrap;
-                /* firefox */
-                -ms-overflow-style: none;
-                grid-template-columns: repeat(3, 1fr);
-                /* IE 10+ */
-            }
-            .line-wrapper::-webkit-scrollbar {
-                display: none;
-            }
-
-            .line-item {
-                padding: 25px 20px;
-                border: 2px solid var(--primary-color);
-                border-radius: 20px;
-                cursor: pointer;
-                transition: all ease-in-out .3s;
-
-                background-position: center;
-                background-repeat: no-repeat;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                // margin: 0 20px 0;
-
-                .coin-row {
-                    place-content: center;
-                    display: flex;
-                    margin-right: 14px;
-                    width: 53px;
-
-                    .icon {
-                        width: 53px;
-                        height: 53px;
-                        border-radius: 53px;
-                        overflow: hidden;
-                    }
-                }
-
-
-
-                .price-row {
-                    display: grid;
-                    grid-template-columns: 1fr minmax(100px, 0.6fr);
-                    align-items: center;
-                }
-
-                .price {
-                    font-size: 26px;
-                    line-height: 31px;
-                    color: var(--morseBlue);
-                }
-
-                .prop-row {
-                    display: flex;
-                    justify-content: space-between;
-                    margin-bottom: 12px;
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-
-                    label {
-                        width: 30px;
-                        flex: none;
-                        font-size: 14px;
-                        line-height: 18px;
-                        color: var(--morseBlue);
-                        // margin-right: 6px;
-                    }
-
-                    .value {
-                        font-size: 14px;
-                        line-height: 18px;
-                        text-align: right;
-                        color: var(--morseBlue);
-                    }
-                }
-            }
-            .content {
-                position: relative;
-                z-index: 1;
-
-                h2 {
-                    width: 100%;
-                    font-size: 50px;
-                    line-height: 54px;
-                    text-align: center;
-                }
-            }
-
-        }
-
-
-        .section-four {
-            margin: 60px auto;
-            display: block;
-
-            .content {
-                .arrow {
-                    margin: 0 auto;
-                    display: block;
-                    height: 150px;
-                }
-
-                h2 {
-                    font-size: 50px;
-                    text-align: center;
-                    margin: 40px auto;
-                }
-            }
-
-            .feature-wrapper {
-                grid-template-columns: repeat(3, 1fr);
-                gap: 50px;
-            }
-
-            .feature-item {
-                height: 448px;
-                width: 400px;
-
-                // border-radius: 11px;
-                .title {
-                    padding: 0 20px;
-                    font-size: 30px;
-                    margin-top: 15px;
-                }
-
-                .desc {
-                    padding: 0 20px;
-                    margin-top: 13px;
-                    font-size: 24px;
-                    line-height: 30px;
-                    color: rgba(255, 255, 255, 0.7);
-                }
-            }
-        }
-
-
-        .section-five {
-            margin-bottom: 80px;
-            grid-template-columns: 1fr 45%;
-            gap: 10px;
-
-            .content {
-                display: block;
-                flex: 1;
-
-                h2 {
-                    font-size: 48px;
-                    line-height: 54px;
-                    width: 999px;
-                }
-
-                h2,
-                p {
-                    width: 100%;
-                    text-align: left;
-                }
-
-                p {
-                    margin-top: 30px;
-                    font-size: 24px;
-                    line-height: 30px;
-                }
-
-                .home-dex-btn {
-                    margin-top: 60px;
-                    width: 209px;
-                    height: 56px;
-                    font-size: 20px;
-                }
-            }
-
-            &>img {
-                // position: absolute;
-                // right: 15px;
-                // top: 0;
-            }
-        }
-
-        .section-six {
-            // height: 800px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 160px 0;
-
-            .content {
-                &>h2 {
-                    font-size: 50px;
-                    line-height: 54px;
-                    margin-bottom: 0px;
-                }
-
-                &>h2,
-                p {
-                    width: 100%;
-                    text-align: center;
-                }
-
-                &>p {
-                    margin-top: 50px;
-                    line-height: 1;
-                    font-size: 24px;
-                    line-height: 30px;
-                }
-            }
-
-            .process {
-                grid-template-columns: repeat(4, 1fr);
-                gap: 40px;
-
-                .process-item {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-                    justify-content: center;
-                    padding: 14px 7px 14px 25px;
-
-                    &>p {
-                        font-size: 24px;
-                        line-height: 30px;
-                        margin-left: 20px;
-                    }
-
-                    &>img {
-                        width: 56px;
-                        height: 56px;
-                    }
-                }
-
-                .process-item-1 {
-                    &>img {
-                        width: 59px;
-                        height: 59px;
-                    }
-                }
-
-                .process-item-4 {
-                    &>img {
-                        width: 57px;
-                        // height: 71px;
-                    }
-                }
-            }
-        }
-
-    }
-}
-</style>