udxcms 1.0.1

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

@@ -0,0 +1,2007 @@
+
+<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>