udxcms 1.0.10 → 1.0.12

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

@@ -0,0 +1,1419 @@
+
+<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 '../../../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>