udxcms 1.0.9 → 1.0.10

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

@@ -1,1686 +0,0 @@
-
-<template>
-	<div class="dex-page-home">
-		<div class="visible-pc">
-			<Header :childPage="tabIndex" />
-		</div>
-		<div class="visible-h5">
-			<Top :logoPosition='commonConf.logoPosition' />
-		</div>
-		<!-- <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>