udxcms 1.0.8 → 1.0.10

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

@@ -1,1419 +0,0 @@
-
-<template>
-	<div class="page-darkHome">
-		<div class="visible-pc">
-			<Header :childPage="tabIndex" />
-		</div>
-		<div class="visible-h5">
-			<Top class="top" />
-		</div>
-		<!-- <Top class="top"  /> -->
-
-		<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>{{ $t('cms_home_first_h1') }}</h1>
-					<p>{{ $t('cms_home_first_slogan_p1') }}</p>
-					<p>{{ $t('cms_home_first_slogan_p2', {siteName: $t('site_common_site_name')}) }}</p>
-					<router-link v-if="tradeUrl" :to="tradeUrl" class="home-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_professional_title') }}</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-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="img">
-					<img
-						class="visible-h5"
-						src="../../../assets/component_img/index-dark/home-phone.png"
-						alt=""
-					/>
-					<img
-						class="visible-pc"
-						src="../../../assets/component_img/index-dark/home-trade.png"
-						alt=""
-					/>
-				</div>
-				<div class="light1 visible-pc"></div>
-				<div class="light2 visible-pc"></div>
-			</div>
-		</section>
-		<section>
-			<div class="container section-three">
-				<div class="img">
-					<img
-						src="../../../assets/component_img/index-common/home-img-three.png"
-						alt=""
-					/>
-				</div>
-				<div class="content">
-					<h2>{{ $t('cms_home_secure_title') }}</h2>
-					<p>
-						{{ $t('cms_home_secure_subtitle') }}
-					</p>
-					<a :href="explorerUrl" target="_blank" class="home-btn">
-						{{ $t('cms_home_secure_btn_text') }}
-					</a>
-				</div>
-			</div>
-		</section>
-		<section>
-			<div class="container section-four">
-				<div class="content">
-					<h2>{{ $t('cms_home_trade_title') }}</h2>
-					<p>
-						{{ $t('cms_home_trade_subtitle') }}
-					</p>
-				</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]['icon_url']"
-									alt=""
-								/>
-							</div>
-							<div class="text">
-								<p class="name">{{ item.display_name }}</p>
-								<p class="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="">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="">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-five">
-				<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">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-1.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item1_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item1_subtitle') }}
-						</p>
-					</div>
-					<div class="feature-item">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-2.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item2_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item2_subtitle') }}
-						</p>
-					</div>
-					<div class="feature-item">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-3.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item3_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item3_subtitle') }}
-						</p>
-					</div>
-					<div class="feature-item">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-4.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item4_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item4_subtitle') }}
-						</p>
-					</div>
-					<div class="feature-item">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-5.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item5_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item5_subtitle') }}
-						</p>
-					</div>
-					<div class="feature-item">
-						<div class="icon">
-							<img
-								src="../../../assets/component_img/index-common/feature-6.svg"
-								alt=""
-							/>
-						</div>
-						<p class="title">{{ $t('cms_home_feature_item6_title') }}</p>
-						<p class="desc">
-							{{ $t('cms_home_feature_item6_subtitle') }}
-						</p>
-					</div>
-				</div>
-
-				<div class="light1 visible-pc"></div>
-				<div class="light2 visible-pc"></div>
-			</div>
-		</section>
-		<section v-if="rewardSymbol">
-			<div class="container section-seven">
-				<div class="bg"></div>
-				<div class="box">
-					<div class="box-item">
-						<div class="value">{{ rewardsOverview.totalReward }}</div>
-						<div class="title">{{ $t('cms_home_overview_mined', {coin: rewardSymbol}) }}</div>
-					</div>
-					<div class="box-item">
-						<div class="value">$ {{ reserveCurrency }}</div>
-						<div class="title">{{ $t("cms_home_overview_reserve") }}</div>
-					</div>
-					<div class="box-item">
-						<div class="value">{{ rewardsOverview.averageAPY }}</div>
-						<div class="title">{{ $t('cms_home_overview_average', {coin: rewardSymbol}) }}</div>
-					</div>
-				</div>
-			</div>
-		</section>
-		<section v-if="backerList.length > 0">
-			<div :class="['container','section-eight', partnerMode == 'scroll' && 'section-eight-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>
-		</section>
-		<!-- <section v-if="backerList.length > 0">
-			<div class="container section-nine">
-				<div class="content">
-					<h2>{{ $t("cms_home_firstpage_item8_title") }}</h2>
-					<p>
-						{{ $t("cms_home_firstpage_item8_subtitle") }}
-					</p>
-				</div>
-				<div class="community-list">
-					<a
-						class="community-item"
-						v-for="(item, index) in communityList"
-						:key="index"
-						:href="item.site"
-						target="_blank"
-					>
-						<img :src="item.logo" alt="" class="img" />
-						<div class="right-item">
-							<div class="right-title">{{ item.name }}</div>
-							<div class="right-subtitle">
-								{{ item.description }}
-							</div>
-						</div>
-					</a>
-				</div>
-			</div>
-		</section> -->
-		<section>
-			<div class="container section-ten">
-				<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">
-						<div class="img-box">
-							<img
-								:src="
-									require('../../../assets/component_img/index-common/process-01.svg')
-								"
-								alt=""
-							/>
-						</div>
-						<p>{{ $t("cms_home_firstpage_item9_wallet_text1") }}</p>
-					</div>
-					<div class="process-item">
-						<div class="img-box">
-							<img
-								:src="
-									require('../../../assets/component_img/index-common/process-02.svg')
-								"
-								alt=""
-							/>
-						</div>
-						<p>{{ $t("cms_home_firstpage_item9_wallet_text2") }}</p>
-					</div>
-					<div class="process-item">
-						<div class="img-box">
-							<img
-								:src="
-									require('../../../assets/component_img/index-common/process-03.svg')
-								"
-								alt=""
-							/>
-						</div>
-						<p>{{ $t("cms_home_firstpage_item9_wallet_text3") }}</p>
-					</div>
-					<div class="process-item">
-						<div class="img-box">
-							<img
-								:src="
-									require('../../../assets/component_img/index-common/process-04.svg')
-								"
-								alt=""
-							/>
-						</div>
-						<p>{{ $t("cms_home_firstpage_item9_wallet_text4", {coin: rewardSymbol}) }}</p>
-					</div>
-				</div>
-			</div>
-		</section>
-
-        <!-- <DexFooter /> -->
-        <Footer />
-	</div>
-</template>
-
-<script>
-// 此页面仅可用在 rinkeby
-// import { getLocation } from "../../../api/common";
-import DexFooter from "./component/DexFooter";
-import { getRewardsOverview, getTradeOverview, getTokens, fetchNetworkList } from './../../../api/common';
-// import { ConnectSocketTool} from '@/utils/connect';
-// import { tradeSymbol } from '@/api/socket';
-import { numberFormat } from '@cms/utils';
-import BNP from "bignumber.js";
-
-export default {
-	name: "indexBlack",
-	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: '',
-			explorerUrl: '',
-			networkList: [],
-		};
-	},
-    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();
-        },
-        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 === '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-btn{
-    --borderWidth: 6px;
-    --bRadius: 50px;
-    width: 202px;
-    height: 72px;
-    position: relative;
-    z-index: 0;
-    overflow: hidden;
-    z-index: 3;
-    border-radius: var(--bRadius);
-    text-align: center;
-    font-weight: 500;
-    font-size: 20px;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    &:hover{
-        color: #fff;
-    }
-
-    &::after, &::before {
-        box-sizing: border-box;
-    }
-
-    &::before {
-        content: '';
-        display: block;
-        position: absolute;
-        // top: 0;
-        // right: 0;
-        // bottom: 0;
-        // left: 0;
-        // left: -50%;
-        // top: -100%;
-        // transform: translate(-50%, -50%);
-        width: 100%;
-        height: 100%;
-        z-index: -2;
-        background-image: linear-gradient(90deg, #7353E5 0%, #CE4DA4 50%, #CE4DA4 100%);
-        // animation: rotate 3s linear infinite;
-
-        @keyframes rotate {
-            100% {
-                transform: rotate(1turn);
-            }
-        }
-    }
-    &::after {
-		content: '';
-		position: absolute;
-		z-index: -1;
-		left: calc(var(--borderWidth) / 2);
-		top: calc(var(--borderWidth) / 2);
-		width: calc(100% - var(--borderWidth));
-		height: calc(100% - var(--borderWidth));
-		background: #13111A;
-        border-radius: var(--bRadius);
-        /*  这一行是为了方便查看原来的样子的 */
-		// animation: opacityChange 3s infinite alternate;
-	}
-    @keyframes opacityChange {
-        50% {
-            opacity:1;
-        }
-        100% {
-            opacity: .5;
-        }
-    }
-}
-.page-darkHome {
-	background: #13111a;
-	color: #fff;
-	overflow: hidden;
-	// .home-btn {
-	// 	width: 202px;
-	// 	height: 72px;
-	// 	display: inline-block;
-	// 	border-radius: 50px;
-	// 	background: #13111a;
-	// 	border: 3px solid #7353e5;
-	// 	// border-image-source: linear-gradient(90deg, #7353E5 0%, #CE4DA4 50%, #CE4DA4 100%);
-	// 	text-align: center;
-	// 	font-weight: 500;
-	// 	font-size: 20px;
-	// 	color: #fff;
-	// 	display: flex;
-	// 	align-items: center;
-	// 	justify-content: center;
-	// }
-	.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;
-		// margin-left: auto;
-		// margin-right: auto;
-	}
-	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: #c8c8c8;
-		}
-		h2 {
-			font-size: 36px;
-			line-height: 42px;
-		}
-	}
-	section img {
-		max-width: 100%;
-	}
-	.section-one {
-		display: grid;
-		gap: 40px;
-		margin-top: 60px;
-		.content {
-			p {
-				font-size: 20px;
-				line-height: 24px;
-				color: rgba(229, 229, 229, 0.5);
-			}
-            p.small{
-				font-size: 17px;
-                color: #C8C8C8;
-            }
-			h1 {
-				font-size: 42px;
-				line-height: 51px;
-				margin: 24px 0;
-			}
-			.home-btn {
-				margin-top: 48px;
-			}
-		}
-	}
-	.section-two {
-		margin: 60px 20px;
-		display: grid;
-		gap: 40px;
-		position: relative;
-		.content {
-			position: relative;
-			z-index: 10;
-			.btns-row {
-                display: grid;
-                gap: 20px;
-				margin: 24px auto;
-			}
-		}
-		.img {
-			position: relative;
-			z-index: 10;
-			img {
-				margin: 20px auto;
-			}
-		}
-		.light1 {
-			position: absolute;
-			width: 420px;
-			height: 420px;
-			border-radius: 420px;
-			left: 0;
-			top: 280px;
-			background: rgba(206, 77, 164, 0.7);
-			filter: blur(100px);
-			z-index: 50;
-		}
-		.light2 {
-			position: absolute;
-			width: 428px;
-			height: 428px;
-			right: 0;
-			bottom: 20px;
-
-			background: rgba(115, 83, 229, 0.7);
-			filter: blur(100px);
-			z-index: 50;
-		}
-	}
-	.section-three {
-		margin: 60px 20px;
-		display: grid;
-		gap: 40px;
-		.img {
-			img {
-				display: block;
-				margin: 20px auto;
-			}
-		}
-		.content {
-			.home-btn {
-				width: 238px;
-				margin-top: 48px;
-			}
-		}
-	}
-
-	.section-four {
-		display: grid;
-		gap: 40px;
-		.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: 44px;
-				height: 44px;
-				border-radius: 44px;
-				overflow: hidden;
-				margin-right: 10px;
-			}
-			.name {
-				font-size: 17px;
-				line-height: 25px;
-			}
-			.symbol {
-				font-size: 14px;
-				line-height: 17px;
-				color: #c0c3cc;
-			}
-			.price-row {
-				display: grid;
-				grid-template-columns: 1fr minmax(100px, 0.6fr);
-				align-items: center;
-			}
-			.price {
-				font-size: 24px;
-				line-height: 29px;
-			}
-			.prop-row {
-				display: flex;
-				justify-content: space-between;
-				margin-bottom: 8px;
-				&:last-child {
-					margin-bottom: 0;
-				}
-				label {
-					width: 30px;
-					flex: none;
-					font-size: 12px;
-					line-height: 17px;
-					color: rgba(229, 229, 229, 0.5);
-					margin-right: 6px;
-				}
-				.value {
-					font-size: 14px;
-					line-height: 17px;
-				}
-			}
-		}
-	}
-
-	.section-five {
-		display: grid;
-		gap: 40px;
-		position: relative;
-        margin: 120px 20px;
-		.content {
-			position: relative;
-			z-index: 100;
-		}
-		.feature-wrapper {
-			position: relative;
-			z-index: 10;
-			display: grid;
-			gap: 25px;
-		}
-		.feature-item {
-			background: #1d1a27;
-			box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.5);
-			border-radius: 30px;
-			padding: 27px;
-			.icon {
-				width: 90px;
-				height: 90px;
-				margin-bottom: 28px;
-			}
-			.title {
-				font-family: FontSemiBold;
-				font-weight: bold;
-				font-size: 25px;
-				line-height: 30px;
-				margin-bottom: 16px;
-			}
-			.desc {
-				font-size: 17px;
-				line-height: 21px;
-
-				color: rgba(255, 255, 255, 0.5);
-			}
-		}
-		.light1 {
-			position: absolute;
-			width: 430px;
-			height: 430px;
-			border-radius: 430px;
-			left: 40%;
-			top: 320px;
-			transform: translateX(-50%);
-
-			background: rgba(115, 83, 229, 0.5);
-			filter: blur(100px);
-			z-index: 50;
-		}
-		.light2 {
-			position: absolute;
-			width: 430px;
-			height: 430px;
-			border-radius: 430px;
-			left: 55%;
-			top: 280px;
-			transform: translateX(-50%);
-			background: rgba(206, 77, 164, 0.5);
-			filter: blur(100px);
-			z-index: 50;
-		}
-	}
-
-	.section-six {
-		display: grid;
-		gap: 40px;
-		position: relative;
-		.content {
-			position: relative;
-			z-index: 100;
-			max-width: 840px;
-			margin: 0 auto;
-		}
-		.pioneer-wrapper {
-			position: relative;
-			z-index: 100;
-			display: grid;
-			gap: 56px;
-		}
-		.pioneer-item {
-			.img-wrapper {
-				margin: 0 auto;
-				max-width: 305px;
-				max-height: 305px;
-			}
-			.img {
-				width: 100%;
-				padding-top: 100%;
-				background: rgba(255, 255, 255, 0.04);
-				border: 0.575472px solid rgba(255, 255, 255, 0.12);
-				box-sizing: border-box;
-				border-radius: 11.5094px;
-				position: relative;
-				// img {
-				// 	position: absolute;
-				// 	top: 50%;
-				// 	left: 50%;
-				// 	transform: translate(-50%, -50%);
-				// }
-				img {
-					max-width: inherit;
-				}
-				.img1 {
-					position: absolute;
-					width: 372.04px;
-					height: 305px;
-					left: -42.7px;
-					top: 0px;
-				}
-				.img2 {
-					position: absolute;
-					width: 288.18px;
-					height: 218.68px;
-					left: 8.63px;
-					top: 43.16px;
-				}
-			}
-			.text-wrapper {
-				text-align: center;
-				margin-bottom: 32px;
-				&.top{
-					margin-bottom: 15px;
-				}
-			}
-			.title {
-				font-family: FontSemiBold;
-				font-weight: 600;
-				font-size: 32px;
-				line-height: 48px;
-				margin-bottom: 10px;
-			}
-			.desc {
-				font-size: 20px;
-				line-height: 24px;
-				color: rgba(255, 255, 255, 0.5);
-			}
-		}
-		.light1 {
-			position: absolute;
-			width: 777px;
-			height: 811px;
-			border-radius: 800px;
-			left: 0px;
-			top: 301px;
-
-			background: linear-gradient(
-				158.55deg,
-				rgba(83, 194, 229, 0.32) 5.96%,
-				rgba(137, 83, 229, 0.243555) 32%,
-				rgba(229, 83, 171, 0.16) 85.9%
-			);
-			filter: blur(300px);
-			z-index: 50;
-		}
-	}
-
-	.section-seven {
-		position: relative;
-		.bg {
-			position: absolute;
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			// height: 290px;
-			background: linear-gradient(
-				90deg,
-				rgba(138, 121, 255, 0.8) 0%,
-				rgba(206, 77, 164, 0.8) 100%
-			);
-			filter: blur(60px);
-			border-radius: 20px;
-			z-index: 50;
-		}
-		.box {
-			// position: absolute;
-			// left: 0;
-			// right: 0;
-			// height: 290px;
-            position: relative;
-			background: #13111a;
-			border-radius: 20px;
-			z-index: 100;
-			display: grid;
-            gap: 80px;
-            padding: 80px 20px;
-		}
-		.box-item {
-            text-align: center;
-			.value {
-				font-family: FontSemiBold;
-				font-weight: 600;
-				font-size: 32px;
-				line-height: 39px;
-                margin-bottom: 10px;
-			}
-			.title {
-				font-family: FontMedium;
-				font-weight: 500;
-				font-size: 18px;
-				line-height: 27px;
-			}
-		}
-	}
-
-	.section-eight {
-		display: grid;
-		gap: 40px;
-        &.section-eight-scroll {
-            max-width: 100vw;
-            width: 100vw;
-        }
-        .partner-box {
-            width: 100vw;
-        }
-        .backer-wrapper{
-            display: grid;
-            gap: 20px;
-            grid-template-columns: repeat(2, 1fr);
-        }
-        .backer-item{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            img{
-                width: 160px;
-                height: 64px;
-            }
-        }
-	}
-	.section-nine {
-		display: grid;
-		gap: 40px;
-		.community-list {
-			display: grid;
-			gap: 20px;
-			.community-item {
-				background: #ffffff;
-				border-radius: 20px;
-				box-shadow: 0px 4px 11px 0px rgba(1, 1, 1, 0.1);
-				padding: 20px 30px;
-				display: flex;
-				align-items: center;
-				.img {
-					width: 48px;
-					height: 48px;
-                    filter: invert(1);
-				}
-				.right-item {
-					margin-left: 16px;
-					.right-title {
-						font-size: 20px;
-						font-family: FontSemiBold;
-
-						text-align: left;
-						color: var(--text-color-four);
-						line-height: 24px;
-						margin-bottom: 4px;
-					}
-					.right-subtitle {
-						font-size: 16px;
-
-						text-align: center;
-						color: var(--text-color-four);
-						line-height: 24px;
-					}
-				}
-			}
-		}
-	}
-	.section-ten {
-		display: grid;
-		gap: 40px;
-		.process {
-			display: grid;
-			gap: 100px;
-			.process-item {
-				position: relative;
-				display: flex;
-				align-items: center;
-				flex-direction: column;
-				.img-box {
-					margin-bottom: 22px;
-				}
-				img {
-					width: 90px;
-					height: 90px;
-				}
-				p {
-					font-weight: 500;
-					font-size: 20px;
-					line-height: 28px;
-					text-align: center;
-				}
-				&::after {
-					content: "";
-					display: block;
-					width: 2px;
-					height: 40px;
-					background-color: var(--border-color-base);
-					position: absolute;
-					bottom: -65px;
-				}
-				&:last-child::after {
-					display: none;
-				}
-			}
-		}
-	}
-}
-@media screen and (min-width: 768px) {
-	.page-darkHome {
-		.section-four {
-			.line-wrapper {
-				grid-template-columns: repeat(2, 1fr);
-			}
-		}
-		.section-nine {
-			.community-list {
-				grid-template-columns: repeat(2, 1fr);
-			}
-		}
-        .section-eight {
-            .backer-wrapper{
-                grid-template-columns: repeat(3, 1fr);
-            }
-        }
-	}
-}
-
-@media screen and (min-width: 1200px) {
-	.page-darkHome {
-        .container{
-            margin-left: auto;
-            margin-right: auto;
-        }
-		.content {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			text-align: center;
-			p {
-				font-size: 17px;
-				line-height: 25px;
-			}
-			h2 {
-				font-size: 50px;
-				line-height: 68px;
-			}
-		}
-		.one-container {
-			overflow: hidden;
-			background-image: url(../../../assets/component_img/demo-first-bg.png);
-			background-position: calc(50% + 350px) bottom;
-			background-repeat: no-repeat;
-            background-size: auto 110%;
-		}
-		.section-one {
-			height: 660px;
-			grid-template-columns: 1fr 1fr;
-			align-items: center;
-			.content {
-				align-items: flex-start;
-				max-width: 490px;
-				text-align: left;
-				h1 {
-					font-size: 60px;
-					line-height: 73px;
-				}
-				p {
-					font-size: 25px;
-					line-height: 30px;
-				}
-				p.small {
-					font-size: 17px;
-					line-height: 25px;
-				}
-			}
-		}
-		.section-two {
-			.content {
-				max-width: 660px;
-				margin: 0 auto;
-				.btns-row {
-					margin: 42px auto;
-					grid-template-columns: repeat(2, 1fr);
-				}
-			}
-		}
-
-		.section-three {
-			grid-template-columns: 1fr 1.2fr;
-			align-items: center;
-			.content {
-				align-items: flex-start;
-				text-align: left;
-			}
-		}
-		.section-four {
-			.line-wrapper {
-				grid-template-columns: repeat(4, 1fr);
-			}
-		}
-		.section-five {
-            gap: 80px;
-			.feature-wrapper {
-				grid-template-columns: repeat(3, 1fr);
-			}
-		}
-
-		.section-six {
-			.pioneer-item {
-				display: grid;
-				grid-template-columns: 1fr 530px;
-				align-items: center;
-				gap: 72px;
-				.img-wrapper {
-					margin: 0 auto;
-					width: 530px;
-					height: 530px;
-					max-width: 530px;
-					max-height: 530px;
-				}
-				.text-wrapper {
-					text-align: left;
-				}
-				.title {
-					font-size: 40px;
-					line-height: 60px;
-				}
-				.desc {
-					font-size: 24px;
-					line-height: 29px;
-				}
-				.img {
-					position: relative;
-					.img1 {
-						width: 646.5px;
-						height: 530px;
-						left: -74.2px;
-						top: 0px;
-					}
-					.img2 {
-						width: 500.78px;
-						height: 380px;
-						left: 15px;
-						top: 75px;
-					}
-				}
-				&.reverse {
-					grid-template-columns: 530px 1fr;
-					.text-wrapper {
-						grid-column-start: 2;
-						grid-column-end: 3;
-					}
-					.img-wrapper {
-						grid-column-start: 1;
-						grid-column-end: 2;
-						grid-row-start: 1;
-					}
-				}
-			}
-		}
-
-
-        .section-eight {
-            .backer-wrapper{
-                grid-template-columns: repeat(5, 1fr);
-            }
-        }
-
-		.section-seven {
-			.box {
-				grid-template-columns: repeat(3, 1fr);
-			}
-		}
-
-		.section-nine {
-			.community-list {
-				display: flex;
-				justify-content: center;
-				grid-template-columns: repeat(3, 1fr);
-				.community-item {
-					flex: auto;
-					max-width: 33.33%;
-				}
-			}
-		}
-
-		.section-ten {
-			.process {
-				grid-template-columns: repeat(4, 1fr);
-				.process-item {
-					&::after {
-						content: "";
-						display: block;
-						width: 124px;
-						height: 2px;
-
-						background-color: var(--border-color-base);
-						position: absolute;
-						right: -110px;
-						top: 44px;
-					}
-				}
-			}
-		}
-	}
-}
-</style>