udxcms 1.0.1

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

@@ -0,0 +1,1686 @@
+
+<template>
+	<div class="dex-page-home">
+		<div class="visible-pc">
+			<Header :childPage="tabIndex" />
+		</div>
+		<div class="visible-h5">
+			<Top :logoPosition='commonConf.logoPosition' />
+		</div>
+		<!-- <Top class="top"  /> -->
+        <div class='top-left-img'>
+            <!-- <img src="@/assets/img/dex/home-bg-top-left.svg" alt="" /> -->
+        </div>
+		<section class="one-container">
+			<div class="container section-one">
+				<div class="content">
+					<p class="small">{{ $t('cms_home_first_powered_p1') }}</p>
+					<p class="small">{{ $t('cms_home_first_powered_p2') }}</p>
+					<h1 class="h1-1">{{ $t('cms_home_first_h1') }}</h1>
+					<h1 class="h1-2">{{ $t('cms_home_first_h1_2') }}</h1>
+					<p>{{ $t('cms_home_first_slogan_p1', {siteName: $t('site_common_site_name')}) }}</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>
+				<!-- <div class="img"></div> -->
+			</div>
+		</section>
+		<section>
+			<div class="container section-two">
+				<div class="content">
+					<h2>{{$t('cms_home_dex_market_trend')}}</h2>
+                    <router-link :to="marketUrl" class="home-dex-btn">
+						<span>{{$t('cms_home_dex_market_view_more')}}</span>
+                        <img src='../../../assets/img/arrowDown.png' class='arrow-img'/>
+					</router-link>
+				</div>
+				<div class="line-wrapper">
+					<div v-for="item in formatedTradeOverview" :key="item.display_name" class="line-item" :style="{borderColor: getRandomColor()}" @click="goTrade(item)">
+						<div class="coin-row">
+							<div class="icon">
+								<img
+									:src="coinMap[item.coin_symbol] && coinMap[item.coin_symbol]['icon_url']"
+									alt=""
+								/>
+							</div>
+							<div class="text">
+								<p class="name">{{ item.display_name }}</p>
+								<p class="symbol">{{ coinMap[item.coin_symbol] && coinMap[item.coin_symbol]['name'] }}</p>
+							</div>
+						</div>
+						<div class="price-row">
+							<div class="price">{{ symbol }}{{ numberFormat(formatPrice(item.close.replace(/,/g, ''), item.base_symbol), 2) }}</div>
+							<div class="price-right">
+								<div class="prop-row">
+									<label for="">{{$t('cms_home_dex_market_chg')}}</label>
+									<p :class="['value', (item.chg > 0 ? 'green' : 'red')]">{{ item.chg > 0 ? ('+' + item.chg) : item.chg }}%</p>
+								</div>
+								<div class="prop-row">
+									<label for="">{{$t('cms_home_dex_market_vol')}}</label>
+									<p class="value">{{ symbol }}{{ numberFormatMillion(formatPrice(item.totalVolume, item.base_symbol)) }}</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+		<section>
+			<div class="container section-three">
+				<div class="content">
+					<h2>{{$t('cms_home_dex_friendly_professional')}}</h2>
+					<p>
+						{{ $t('cms_home_professional_desc', {siteName: $t('site_common_site_name')}) }}
+					</p>
+					<div class="btns-row">
+						<router-link v-if="tradeUrl" :to="tradeUrl" class="home-dex-btn">
+							{{ $t('cms_home_professional_btn_trade_text') }}
+						</router-link>
+						<router-link to="/apidoc" class="api-btn">
+							{{ $t('cms_home_professional_btn_api_text') }}
+						</router-link>
+					</div>
+				</div>
+                <div class='content-img'>
+                    <div class='msg'>
+                        <div class='msg-item'>
+                            <div class='title'>{{$t('cms_home_dex_professional_item1_title')}}</div>
+                            <div class='desc'>{{$t('cms_home_dex_professional_item1_content', {siteName: $t('site_common_site_name')})}}</div>
+                        </div>
+                        <div class='msg-item'>
+                            <div class='title'>{{$t('cms_home_dex_professional_item2_title')}}</div>
+                            <div class='desc'>{{$t('cms_home_dex_professional_item2_content')}}</div>
+                        </div>
+                        <div class='msg-item'>
+                            <div class='title'>{{$t('cms_home_dex_professional_item3_title')}}</div>
+                            <div class='desc'>{{$t('cms_home_dex_professional_item3_content')}}</div>
+                        </div>
+                    </div>
+                    <div class="img">
+                        <img
+                            class="visible-h5"
+                            src="../../../assets/component_img/index-dex/home-item-3-h5.png"
+                            alt=""
+                        />
+                        <img
+                            class="visible-pc"
+                            src="../../../assets/component_img/index-dex/home-item-3.png"
+                            alt=""
+                        />
+                        <div class='content-img-bg-01'></div>
+                        <div class='content-img-bg-02'></div>
+                    </div>
+                </div>
+			</div>
+		</section>
+		<section>
+			<div class="container section-four" >
+				<div class="content">
+					<h2>{{ $t('cms_home_feature_title', {siteName: $t('site_common_site_name')}) }}</h2>
+					<p>
+						{{ $t('cms_home_feature_subtitle') }}
+					</p>
+				</div>
+				<div class="feature-wrapper">
+					<div class="feature-item">
+						<p class="title">{{$t('cms_home_dex_feature_item1_title')}}</p>
+						<p class="desc">
+							{{$t('cms_home_dex_feature_item1_content')}}
+						</p>
+                        <div class='icon-bg feature-item-icon-bg-1'></div>
+					</div>
+					<div class="feature-item bg">
+						<p class="title">{{$t('cms_home_dex_feature_item2_title')}}</p>
+						<p class="desc">
+							{{$t('cms_home_dex_feature_item2_content')}}
+						</p>
+                        <div class='icon-bg feature-item-icon-bg-2'></div>
+					</div>
+					<div class="feature-item">
+						<p class="title">{{$t('cms_home_dex_feature_item3_title')}}</p>
+						<p class="desc">
+							{{$t('cms_home_dex_feature_item3_content')}}
+						</p>
+                        <div class='icon-bg feature-item-icon-bg-3'></div>
+					</div>
+				</div>
+			</div>
+		</section>
+		<section v-if="backerList.length > 0">
+        <!-- <section> -->
+			<div :class="['container','section-five', partnerMode == 'scroll' && 'section-five-scroll']">
+				<div class="content">
+					<h2>{{ this.$t('cms_home_backer_title') }}</h2>
+					<p>
+						{{$t('cms_home_backer_subtitle', {siteName: $t('site_common_site_name')})}}
+					</p>
+				</div>
+                <div class='partner-box' v-if="partnerMode == 'scroll'">
+                    <Partnermedias :partnerList='backerList.slice(0, Math.round(backerList.length / 2))'/>
+                </div>
+                <div class='partner-box' v-if="partnerMode == 'scroll'">
+                    <Partnermedias :partnerList='backerList.slice(-Math.round(backerList.length / 2))' direction='right'/>
+                </div>
+				<div class="backer-wrapper" v-if="partnerMode != 'scroll'">
+					<div v-for="(item, index) in backerList" :key="index" class="backer-item">
+                        <a :href="item.site" target="_blank">
+                            <img
+                            class="img1"
+                            :src="item.logo"
+                            alt=""
+                        />
+                        </a>
+                    </div>
+				</div>
+                <div class='content-bg'></div>
+			</div>
+		</section>
+		<section>
+			<div class="container section-six">
+				<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">
+						<div class="img-box">
+							<img
+								:src="
+									require('../../../assets/component_img/index-dex/started-icon-01.svg')
+								"
+								alt=""
+							/>
+						</div>
+						<p>{{ $t("cms_home_firstpage_item9_wallet_text1") }}</p>
+                        <div class='arrow-box'>
+                            <img :src="require('../../../assets/component_img/index-dex/started-icon-arrow.svg')" alt="" class='arrow'>
+                        </div>
+
+					</div>
+					<div class="process-item process-item-2">
+						<div class="img-box">
+							<img
+								:src="
+									require('../../../assets/component_img/index-dex/started-icon-02.svg')
+								"
+								alt=""
+							/>
+						</div>
+						<p>{{ $t("cms_home_firstpage_item9_wallet_text2") }}</p>
+                        <div class='arrow-box'>
+                            <img :src="require('../../../assets/component_img/index-dex/started-icon-arrow.svg')" alt="" class='arrow'>
+                        </div>
+					</div>
+					<div class="process-item process-item-3">
+						<div class="img-box">
+							<img
+								:src="
+									require('../../../assets/component_img/index-dex/started-icon-03.svg')
+								"
+								alt=""
+							/>
+						</div>
+						<p>{{ $t("cms_home_firstpage_item9_wallet_text3") }}</p>
+                        <div class='arrow-box'>
+                            <img :src="require('../../../assets/component_img/index-dex/started-icon-arrow.svg')" alt="" class='arrow'>
+                        </div>
+					</div>
+					<div class="process-item process-item-4">
+						<div class="img-box">
+							<img
+								:src="
+									require('../../../assets/component_img/index-dex/started-icon-04.svg')
+								"
+								alt=""
+							/>
+						</div>
+						<p>{{ $t("cms_home_firstpage_item9_wallet_text4", {coin: rewardSymbol}) }}</p>
+                        <div class='arrow-box'>
+                            <img :src="require('../../../assets/component_img/index-dex/started-icon-arrow.svg')" alt="" class='arrow'>
+                        </div>
+					</div>
+				</div>
+                <div class='content-bg'></div>
+			</div>
+		</section>
+
+        <section v-if="communityList.length > 0">
+			<div class="section-seven">
+                <div class="container">
+                    <div class='el-content'>
+                        <h2>{{$t('cms_home_dex_community_title')}}</h2>
+                        <p>{{$t('cms_home_dex_community_content')}}</p>
+                    </div>
+                    <div class='el-content-items'>
+                        <a :href="item.site" target="_blank" v-for="(item, index) in communityList" :key='index'>
+                            <div class='item'>
+                                <img :src="item.logo" alt="">
+                                <span>{{item.name}}</span>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- <DexFooter /> -->
+        <Footer class='index-dex'/>
+	</div>
+</template>
+
+<script>
+// 此页面仅可用在 rinkeby
+// import { getLocation } from "../../../api/common";
+import DexFooter from "./component/DexFooter";
+import { getRewardsOverview, getTradeOverview, getTokens, fetchNetworkList } from './../../../api/common';
+// import { ConnectSocketTool} from '@/utils/connect';
+// import { tradeSymbol } from '@/api/socket';
+import { numberFormat } from '@cms/utils';
+import { getStyleObj } from '../../../utils/index';
+import BNP from "bignumber.js";
+
+export default {
+	name: "index-dex",
+	components: {
+		DexFooter
+	},
+	data() {
+		return {
+            chainId: '',
+			tabIndex: 1,
+            tradeOverview: [],
+            rewardsOverview: {},
+			communityList: [],
+            coinSymbolList: [],
+            coinMap: {},
+            backerList: [],
+			tradeBorderColors: [
+				'rgba(98, 126, 234, 0.25)',
+				'rgba(141, 195, 81, 0.25)',
+				'rgba(255, 0, 122, 0.25)',
+				'rgba(249, 153, 66, 0.25)',
+			],
+			apiUrl: '',
+			marketUrl: '/market',
+            mobieMarketUrl: '/market-mobile',
+			explorerUrl: '',
+			networkList: [],
+            commonConf: {
+                logoPosition: 'center',
+                topBannerType: 'dex'
+            } // h5导航栏配置
+		};
+	},
+    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;
+		},
+        formatedTradeOverview() {
+			return this.tradeOverview.map(item => {
+				// 显示2种币的总额
+				// turnover * 副币price + volume * 主币price
+				const primaryTokenPrice = this.priceMap[item.coin_symbol] || "0";
+				const secondaryTokenPrice = this.priceMap[item.base_symbol] || "0";
+				const totalVolume = new BNP(item.turnover.replace(/\,/g, '')).times(secondaryTokenPrice).plus(new BNP(item.volume.replace(/\,/g, '')).times(primaryTokenPrice)).toString();
+
+				return {
+					...item,
+					totalVolume,
+				};
+			})
+		},
+        tradeOverviewBaseSymbols() {
+            return [...new Set(this.tradeOverview.map(item => item.base_symbol).concat(this.tradeOverview.map(item => item.coin_symbol)))];
+        },
+		priceMap() {
+			return this.$store.state.priceMap;
+		},
+        partnerMode() {
+            return this.$store.state.partnerMode
+        }
+    },
+    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;
+			}
+		},
+	},
+	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);
+    &:hover{
+        color: #fff;
+    }
+}
+.dex-page-home {
+    position:relative;
+	background: white;
+	color: #000;
+	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: #525252;
+		}
+		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;
+    }
+	.section-one {
+		display: grid;
+		gap: 40px;
+		margin-top: 60px;
+        z-index: 3;
+		.content {
+            font-family: Font;
+			p {
+				font-size: 20px;
+				line-height: 24px;
+				color: #555555;
+			}
+            p.small{
+				font-size: 17px;
+                color: #525252;
+            }
+			h1 {
+				font-size: 42px;
+				line-height: 51px;
+				margin: 24px 0;
+			}
+			.home-dex-btn {
+				margin-top: 48px;
+			}
+		}
+	}
+	.section-two {
+		display: grid;
+		gap: 40px;
+        .content {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            flex-direction: row;
+            h2 {
+                width: 136px;
+                font-size: 36px;
+                text-align: left;
+                line-height: 1;
+                margin-bottom: 0px;
+            }
+            .home-dex-btn {
+                width: 160px;
+                height: 38px;
+                font-size: 14px;
+                .arrow-img {
+                    width: 14px;
+                    transform: rotate(-90deg);
+                    margin-left: .2em;
+                    margin-top: .1em;
+                }
+            }
+        }
+		.line-wrapper {
+			display: grid;
+			gap: 20px;
+		}
+		.line-item {
+			padding: 20px;
+			border: 1px solid rgba(249, 153, 66, 0.25);
+			border-radius: 16px;
+			cursor: pointer;
+			transition: all ease-in-out .3s;
+
+			// background-size:  contain;
+			// background-image: url(../../../assets/component_img/index-common/line-item-bg.png);
+			background-position: center;
+			background-repeat: no-repeat;
+			&:hover{
+				transform: translateY(-10px);
+			}
+			.coin-row {
+				display: flex;
+				margin-bottom: 22px;
+				.icon {
+					flex: none;
+				}
+				.text {
+					flex: auto;
+				}
+			}
+			.icon {
+				width: 50px;
+				height: 50px;
+				border-radius: 50px;
+				overflow: hidden;
+				margin-right: 10px;
+			}
+			.name {
+				font-size: 18px;
+				line-height: 25px;
+			}
+			.symbol {
+				font-size: 16px;
+				line-height: 19px;
+				color: #c0c3cc;
+			}
+			.price-row {
+				display: grid;
+				grid-template-columns: 1fr minmax(100px, 0.6fr);
+				align-items: center;
+			}
+			.price {
+				font-size: 26px;
+				line-height: 31px;
+			}
+			.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: #B7B7B7;
+					// margin-right: 6px;
+				}
+				.value {
+					font-size: 14px;
+					line-height: 18px;
+                    text-align: right;
+				}
+			}
+		}
+	}
+	.section-three {
+		margin: 60px 20px;
+		display: grid;
+		gap: 40px;
+		position: relative;
+		.content {
+			position: relative;
+			z-index: 1;
+            h2, p {
+                width: 100%;
+                text-align: left;
+            }
+			.btns-row {
+                margin-top: 16px; // h5
+                display: grid;
+                gap: 20px;
+                width: 100%;
+                .home-dex-btn {
+                    width: 209px;
+                    height: 56px;
+                    font-size: 16px;
+                    line-height: 56px;
+                }
+                .api-btn {
+                    height: 56px;
+                    line-height: 56px;
+                    width: 209px;
+                    height: 56px;
+                    border: 1px solid var(--text-color);
+                    border-radius: 10px;
+                    font-size: 16px;
+                    background: white;
+                    color: var(--text-color);
+                }
+			}
+		}
+        .content-img {
+            margin-top: 60px;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 60px;
+            .msg .msg-item {
+                &:not(:last-child) {
+                    margin-bottom: 30px;
+                }
+                .title {
+                    color: var(--primary-color);
+                    font-size: 20px;
+                    font-family: FontBold;
+                    line-height: 32px;
+                }
+                .desc {
+                    margin-top: 10px;
+                    font-size: 14px;
+                    line-height: 25px;
+                    color: #4F4F4F;
+                    font-family: Font;
+                }
+            }
+            .img {
+                position: relative;
+                img {
+                    position: relative;
+                    z-index: 2;
+                }
+                .content-img-bg-01 {
+                    position: absolute;
+                    top: 0;
+                    z-index: 0;
+                    width: 159px;
+                    height: 172px;
+                    background: #b9a0e0;
+                    filter: blur(80px);
+                }
+                .content-img-bg-02 {
+                    position: absolute;
+                    z-index: 0;
+                    width: 159px;
+                    height: 101px;
+                    left: 50%;
+                    background: #edc895;
+                    filter: blur(80px);
+                    bottom: 20px;
+                }
+            }
+        }
+	}
+
+	.section-four {
+		position: relative;
+        margin-top: 80px;
+		.content {
+			position: relative;
+			z-index: 1;
+            margin-bottom: 40px;
+            h2, p {
+                width: 100%;
+                text-align: left;
+            }
+		}
+		.feature-wrapper {
+			position: relative;
+			z-index: 1;
+			display: grid;
+			gap: 40px;
+		}
+		.feature-item {
+            position: relative;
+            background: #F9F9F9;
+            border: 1px solid #EFEEF2;
+            box-shadow: 0px 4px 4px rgba(177, 169, 200, 0.11);
+            border-radius: 10px;
+            padding: 35px 25px 0px 25px;
+            height: 412px;
+            &.bg {
+                background-image: url('../../../assets/component_img/index-dex/mutilChain.svg');
+                background-repeat: no-repeat;
+            }
+			.title {
+				font-family: FontSemiBold;
+				font-weight: bold;
+				font-size: 24px;
+				line-height: 1;
+				margin-bottom: 10px;
+                color: #181818;
+			}
+			.desc {
+				font-size: 16px;
+				line-height: 20px;
+				color: #4F4F4F;
+			}
+			.icon-bg {
+                position: absolute;
+				width: calc(100% - 50px);
+				padding-top: 100%;
+                // background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center bottom;
+                bottom: 0;
+                left: 25px;
+                &.feature-item-icon-bg-1 {
+                    background-image: url('../../../assets/component_img/index-dex/feature-item-icon-bg-1.svg');
+                }
+                &.feature-item-icon-bg-2 {
+                    background-image: url('../../../assets/component_img/index-dex/feature-item-icon-bg-2.svg');
+                }
+                &.feature-item-icon-bg-3 {
+                    background-image: url('../../../assets/component_img/index-dex/feature-item-icon-bg-3.svg');
+                }
+			}
+		}
+	}
+
+	.section-five {
+		display: grid;
+		gap: 40px;
+        position: relative;
+        &.section-five-scroll {
+            max-width: 100vw;
+            width: 100vw;
+        }
+        .partner-box {
+            width: 100vw;
+        }
+        .content {
+            z-index: 1;
+            h2, p {
+                width: 100%;
+                text-align: left;
+            }
+        }
+        .backer-wrapper{
+            display: grid;
+            gap: 20px;
+            z-index: 1;
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .backer-item{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img{
+                width: 160px;
+                height: auto;
+            }
+        }
+        .content-bg {
+            position: absolute;
+            z-index: 0;
+            top: -60px;
+            left: -200px;
+            background: rgba(240, 231, 255,  .49);
+            filter: blur(80px);
+            width: 300px;
+            height: 300px;
+        }
+	}
+	.section-six {
+		display: grid;
+		gap: 40px;
+        position: relative;
+        .content {
+            z-index: 1;
+            h2, p {
+                width: 100%;
+                text-align: left;
+            }
+        }
+		.process {
+			display: grid;
+			gap: 60px;
+            z-index: 1;
+			.process-item {
+				position: relative;
+				display: flex;
+				align-items: center;
+                justify-content: flex-start;
+				img {
+					width: 72px;
+					height: 72px;
+				}
+				p {
+					font-size: 16px;
+					line-height: 28px;
+					text-align: left;
+                    margin-left: 50px;
+                    font-family: FontMedium;
+				}
+                .arrow-box {
+                    position: absolute;
+                    z-index: 2;
+                    text-align: right;
+                    transform: rotate(0deg) translate(0, 0);
+                    transform: rotate(90deg) translate(150%, 50%);
+                    left: 50%;
+                    .arrow {
+                        width: 36px;
+                        height: 36px;
+                    }
+                }
+                &.process-item-4 {
+                    .arrow-box {
+                        display: none;
+                    }
+                }
+			}
+		}
+        .content-bg {
+            position: absolute;
+            z-index: 0;
+            top: -100px;
+            left: -200px;
+            background: rgba(253, 233, 208, .49);
+            filter: blur(100px);
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+        }
+	}
+    .section-seven {
+        width: 100%;
+        position: relative;
+        background: url('../../../assets/component_img/index-dex/bottom-img-bg.svg');
+        background-size: cover;
+        height: fit-content;
+        background-repeat: no-repeat;
+        .container {
+            margin-top: 0px;
+            display: block;
+            padding-bottom: 26.5%;
+        }
+        .el-content {
+            padding-top: 30px;
+            max-width: 100%;
+            h2 {
+                font-size: 36px;
+                line-height: 42px;
+                color: white;
+            }
+            p {
+                margin-top: 16px;
+                font-size: 16px;
+                line-height: 25px;
+                color: #FFFFFF;
+            }
+        }
+        .el-content-items {
+            padding-top: 30px;
+            width: 100%;
+            display: grid;
+            gap: 10px 5px;
+            justify-items: center;
+            .item {
+                padding: 10px 20px;
+                width: 180px;
+                img {
+                    width: 40px;
+                    height: 40px;
+                }
+                span {
+                    color: white;
+                    margin-left: 16px;
+                }
+                &:hover, &.active{
+                    background: rgba(167, 191, 255, 0.35);
+                    border-radius: 20px;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+    .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;
+                }
+                p {
+                    font-size: 20px;
+                    line-height: 24px;
+                }
+				p.small {
+					font-size: 16px;
+				}
+            }
+        }
+		.section-two {
+            gap: 60px;
+            .content {
+                h2 {
+                    width: 400px;
+                    font-size: 40px;
+                }
+                p {
+                    font-size: 16px;
+                    line-height: 20px;
+                }
+                .home-dex-btn {
+                    width: fit-content;
+                    height: 36px;
+                    font-size: 16px;
+                    padding: 0 10px;
+                    .arrow-img {
+                        width: 14px;
+                        transform: rotate(-90deg);
+                        margin-left: .2em;
+                        margin-top: .1em;
+                    }
+                }
+            }
+			.line-wrapper {
+				grid-template-columns: repeat(2, 1fr);
+			}
+		}
+        .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;
+                    }
+				}
+            }
+            .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(3, 1fr);
+                gap: 25px;
+			}
+            .feature-item {
+                height: 440px;
+                .title {
+                    font-size: 22px;
+                    margin-bottom: 8px;
+                }
+                .desc {
+                    font-size: 14px;
+                    line-height: 18px;
+                    color: #4F4F4F;
+                }
+            }
+        }
+        .section-five {
+            gap: 90px;
+            .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;
+                }
+            }
+            .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: 50% 40%;
+				.process-item {
+                    .arrow-box {
+                        transform: rotate(0deg) translate(0, 0);
+                    }
+                    &.process-item-2 {
+                        .arrow-box {
+                            transform: rotate(90deg) translate(160%, 400%);
+                        }
+                    }
+                    &.process-item-3 {
+                        order: 4;
+                        .arrow-box {
+                            display: none;
+                        }
+                    }
+                    &.process-item-4 {
+                        order: 3;
+                        .arrow-box {
+                            display: block;
+                            img {
+                                transform: rotate(180deg);
+                            }
+                        }
+                    }
+ 				}
+			}
+        }
+        .section-seven {
+            background: url('../../../assets/component_img/index-dex/eleven-bg.svg');
+            background-size: cover;
+            .container {
+                display: flex;
+                justify-content: space-between;
+                padding-bottom: 5%;
+            }
+            .el-content {
+                padding-top: 70px;
+                max-width: 427px;
+                h2 {
+                    font-size: 40px;
+                    line-height: 50px;
+                    color: white;
+                    margin-bottom: 0;
+                }
+                p {
+                    margin-top: 18px;
+                    font-size: 16px;
+                    line-height: 20px;
+                    color: #FFFFFF;
+                }
+            }
+            .el-content-items {
+                padding-top: 70px;
+                width: 456px;
+                display: grid;
+                gap: 40px 20px;
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+	}
+}
+
+@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;
+			background-image: url(../../../assets/component_img/index-dex/home-item-1.svg);
+			background-position: calc(50% + 350px) bottom;
+			background-repeat: no-repeat;
+            z-index: 2;
+            background-size: 90% 100%;
+		}
+		.section-one {
+            position: relative;
+			height: 660px;
+			grid-template-columns: 1fr 。8fr;
+			align-items: center;
+            z-index: 2;
+			.content {
+				align-items: flex-start;
+				// max-width: 490px;
+				text-align: left;
+				h1 {
+					font-size: 50px;
+					line-height: 72px;
+				}
+                .h1-1{
+                    margin-bottom: 0;
+                }
+                .h1-2{
+                    margin-top: 0;
+                }
+
+				p {
+					font-size: 18px;
+					line-height: 30px;
+				}
+				p.small {
+					font-size: 18px;
+					line-height: 25px;
+				}
+                .home-dex-btn {
+                    font-size: 24px;
+                    width: 209px;
+                    height: 56px;
+                    color: white;
+                }
+			}
+		}
+
+		.section-two {
+            .content {
+                h2 {
+                    width: 400px;
+                    font-size: 50px;
+                }
+                p {
+                    font-size: 18px;
+                    line-height: 25px;
+                }
+                .home-dex-btn {
+                    width: 243px;
+                    height: 45px;
+                    font-size: 20px;
+                }
+            }
+			.line-wrapper {
+				grid-template-columns: repeat(4, 1fr);
+			}
+		}
+
+		.section-three {
+			.content {
+				width: 100%;
+				margin: 0 auto;
+                text-align: left;
+                h2 {
+                    width: 100%;
+                    font-size: 50px;
+                    line-height: 68px;
+                    margin-bottom: 0px;
+                }
+                p {
+                    margin-top: 30px;
+                    font-size: 18px;
+                    line-height: 25px;
+                }
+				.btns-row {
+                    display: flex;
+					margin: 20px 0;
+                    width: 100%;
+                    justify-content: flex-start;
+					// grid-template-columns: repeat(2, 1fr);
+                    .api-btn {
+                        width: 154px;
+                    }
+				}
+			}
+
+            .content-img {
+                margin-top: 40px;
+                display: grid;
+                grid-template-columns: 490px 1fr;
+                gap: 100px;
+                .msg .msg-item {
+                    &:not(:last-child) {
+                        margin-bottom: 40px;
+                    }
+                    .title {
+                        color: var(--primary-color);
+                        font-size: 24px;
+                        font-family: FontBold;
+                        line-height: 68px;
+                    }
+                    .desc {
+                        margin-top: 10px;
+                        font-size: 18px;
+                        line-height: 25px;
+                        color: #4F4F4F;
+                        font-family: Font;
+                    }
+                }
+            }
+		}
+
+
+		.section-four {
+            display: grid;
+            gap: 40px;
+            position: relative;
+            gap: 60px;
+            margin: 120px auto;
+            .content {
+                h2 {
+                    font-size: 50px;
+                    line-height: 1;
+                    margin-bottom: 0px;
+                }
+                h2, p {
+                    width: 100%;
+                    text-align: left;
+                }
+                p {
+                    margin-top: 30px;
+                    line-height: 1;
+                    font-size: 18px;
+                }
+            }
+			.feature-wrapper {
+				grid-template-columns: repeat(3, 1fr);
+                gap: 25px;
+			}
+            .feature-item {
+                height: 440px;
+                .title {
+                    font-size: 26px;
+                    margin-bottom: 12px;
+                }
+                .desc {
+                    font-size: 17px;
+                    line-height: 21px;
+                    color: #4F4F4F;
+                }
+            }
+		}
+
+
+        .section-five {
+            .content {
+                h2 {
+                    font-size: 50px;
+                    line-height: 1;
+                    margin-bottom: 0px;
+                }
+                h2, p {
+                    width: 100%;
+                    text-align: left;
+                }
+                p {
+                    margin-top: 30px;
+                    line-height: 1;
+                    font-size: 18px;
+                }
+            }
+            .backer-wrapper{
+                grid-template-columns: repeat(5, 1fr);
+            }
+        }
+
+		.section-six {
+            gap: 80px;
+            .content {
+                h2 {
+                    font-size: 50px;
+                    line-height: 1;
+                    margin-bottom: 0px;
+                }
+                h2, p {
+                    width: 100%;
+                    text-align: left;
+                }
+                p {
+                    margin-top: 30px;
+                    line-height: 1;
+                    font-size: 18px;
+                }
+            }
+			.process {
+                gap: 100px;
+                .process-item {
+                    position: relative;
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    img {
+                        width: 100px;
+                        height: 100px;
+                    }
+                    p {
+                        font-weight: 500;
+                        font-size: 24px;
+                        line-height: 28px;
+                        text-align: left;
+                        margin-left: 50px;
+                    }
+                    .arrow-box {
+                        position: relative;
+                        flex: 1;
+                        text-align: right;
+                        left: 0;
+                        .arrow {
+                            width: 44px;
+                            height: 44px;
+                        }
+                    }
+                }
+				grid-template-columns: 60% 40%;
+				.process-item {
+                    .arrow-box {
+                        transform: rotate(0deg) translate(0, 0);
+                    }
+                    &.process-item-2 {
+                        .arrow-box {
+                            transform: rotate(90deg) translate(60%, 400%);
+                        }
+                    }
+                    &.process-item-3 {
+                        order: 4;
+                        .arrow-box {
+                            display: none;
+                        }
+                    }
+                    &.process-item-4 {
+                        order: 3;
+                        .arrow-box {
+                            display: block;
+                            img {
+                                transform: rotate(180deg);
+                            }
+                        }
+                    }
+ 				}
+			}
+		}
+
+        .section-seven {
+            background: url('../../../assets/component_img/index-dex/eleven-bg.svg');
+            background-size: cover;
+            .container {
+                display: flex;
+                justify-content: space-between;
+                padding-bottom: 12.5%;
+            }
+            .el-content {
+                padding-top: 90px;
+                max-width: 427px;
+                h2 {
+                    font-size: 50px;
+                    line-height: 68px;
+                    color: white;
+                    margin-bottom: 0;
+                }
+                p {
+                    margin-top: 24px;
+                    font-size: 18px;
+                    line-height: 25px;
+                    color: #FFFFFF;
+                }
+            }
+            .el-content-items {
+                padding-top: 70px;
+                width: 456px;
+                display: grid;
+                gap: 40px 20px;
+                grid-template-columns: repeat(2, 1fr);
+                .item {
+                    width: fit-content;
+                    padding: 20px 40px;
+                    span {
+                        color: white;
+                        margin-left: 16px;
+                    }
+                    &:hover, &.active{
+                        background: rgba(167, 191, 255, 0.35);
+                        border-radius: 20px;
+                        cursor: pointer;
+                    }
+                }
+            }
+        }
+	}
+}
+</style>