udxcms 1.0.10 → 1.0.12

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

@@ -0,0 +1,1262 @@
+
+<template>
+	<div class="page-home">
+		<div class="visible-pc">
+			<Header :childPage="tabIndex" />
+		</div>
+		<div class="visible-h5">
+			<Top class="top" />
+		</div>
+		<!-- <Top class="top"  /> -->
+
+		<!-- 1 -->
+		<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>
+					<!-- <p class="small">The Orbits of Blockchain</p> -->
+					<h1 class="big">
+						<div>{{ $t('cms_home_first_h1') }}</div>
+						<div>{{ $t('cms_home_first_slogan_p1') }}</div>
+						<div>{{ $t('cms_home_first_slogan_p2') }}</div>
+					</h1>
+					<p class="middle">{{ $t('cms_home_pioneer_title') }}</p>
+					<router-link v-if="tradeUrl" :to="tradeUrl" class="home-btn">
+						{{ $t('cms_home_first_btn_text') }}
+					</router-link>
+				</div>
+			</div>
+		</section>
+		<!-- 2 -->
+		<section class="two-container">
+			<div class="container section-two">
+				<div class="content">
+					<h2>{{ $t('cms_home_professional_title') }}</h2>
+					<p>
+						{{ $t('cms_home_professional_desc') }}
+					</p>
+					<p>
+						{{ $t('cms_home_pioneer_subtitle') }}
+					</p>
+					<p>
+						{{ $t('cms_home_pioneer_item1_title') }}
+					</p>
+					<p>
+						{{ $t('cms_home_pioneer_item2_title') }}
+					</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-common/home-phone.png" alt="" />
+					<img class="visible-pc" src="../../../assets/component_img/index-common/home-trade.png" alt="" />
+				</div>
+				<!-- <div class="light2 visible-pc"></div> -->
+			</div>
+			<div class="light1 visible-pc"></div>
+		</section>
+		<!-- 3 -->
+		<section>
+			<div class="container section-three">
+				<div class="img">
+					<img src="../../../assets/component_img/index-orbits/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>
+		<!-- 4-1 Team -->
+		<section class="four-container-team" v-if="teamList.length">
+			<div class="container section-four-team">
+				<div class="content">
+					<h2>{{ $t('cms_home_team_title') }}</h2>
+				</div>
+				<div class="user-wrapper">
+					<div v-for="item in teamList" :key="item.name" class="user-item">
+						<div class="user-row">
+							<div class="avatar">
+								<img :src="item.logo" alt="" />
+							</div>
+							<div class="text">
+								<p class="name">{{ item.name }}</p>
+								<p class="role">{{ item.role }}</p>
+							</div>
+						</div>
+						<div class="info-row">
+							<div class="desc">{{ item.description }}</div>
+							<div class="link">
+								<a :href="item.site" target="_blank">{{ item.site }}</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+		<!-- 4-2 -->
+		<section class="four-container">
+			<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] && coinMap[item.coin_symbol]['icon_url'] || require('../../../assets/img/coin.png')"
+									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="">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>
+		<!-- 5 -->
+		<section class="five-container">
+			<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-orbits/feature-1.png" 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-orbits/feature-2.png" 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-orbits/feature-3.png" 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-orbits/feature-4.png" 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-orbits/feature-5.png" 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-orbits/feature-6.png" 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>
+			<div class="light2 visible-pc"></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-orbits/process-01.png')
+							" 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-orbits/process-02.png')
+							" 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-orbits/process-03.png')
+							" 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-orbits/process-04.png')
+							" 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: "home",
+	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: [],
+			// 改为计算属性
+			// teamList: [],
+		};
+	},
+	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;
+		},
+		teamList() {
+            let teamList = this.$t('media_common_team_channel') != 'media_common_team_channel' ? this.$t('media_common_team_channel') : '[]'
+			const teams = JSON.parse(teamList);
+			if (teams && teams.length) {
+				teams.forEach(item => {
+					const newName = item.name.split('|');
+					if (newName.length > 1) {
+						item.name = newName[0];
+						item.role = newName[1];
+					}
+				})
+			}
+			return teams;
+		}
+	},
+	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();
+	},
+	mounted() {
+
+
+	},
+	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 === '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-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;
+	background-color: var(--primary-color);
+	color: var(--primary-text-color);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	// &:hover{
+	//     color: #fff;
+	// }
+}
+
+.page-home {
+	background: #13111a;
+	color: #fff;
+	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;
+		// margin-left: auto;
+		// margin-right: auto;
+	}
+
+	section {
+		border-top: 1px solid transparent;
+		border-bottom: 1px solid transparent;
+		// overflow: hidden;
+		position: relative;
+	}
+
+	.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%;
+	}
+
+	.one-container {
+		margin: 0 auto;
+		background-image: url('../../../assets/component_img/index-orbits/section1_bg.png');
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+
+	.section-one {
+		display: grid;
+
+		// gap: 40px;
+		// margin-top: 60px;
+		// padding-left: calc();
+		.content {
+			p {
+				font-size: 20px;
+				line-height: 24px;
+				color: rgba(229, 229, 229, 0.5);
+			}
+
+			p.small {
+				font-size: 17px;
+				line-height: 30px;
+				color: rgba(255, 255, 255, 0.3);
+			}
+
+			p.middle {
+				font-size: 28px;
+				font-weight: bold;
+				color: var(--primary-color);
+			}
+
+			h1.big {
+				font-size: 42px;
+				font-weight: 900;
+				color: #FFF;
+				line-height: 42px;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				margin: 42px 0;
+
+				&>div {
+					display: block;
+					position: relative;
+
+					&:nth-child(2) {
+						padding: 30px 0;
+						overflow: hidden;
+
+						&::before {
+							position: absolute;
+							top: 20px;
+							left: 50%;
+							transform: translate(-50%, -50%);
+							width: 60px;
+							height: 2px;
+							background: rgba(255, 255, 255, 0.5);
+							content: '';
+						}
+
+						&::after {
+							position: absolute;
+							bottom: 10px;
+							right: 50%;
+							left: 50%;
+							transform: translate(-50%, -50%);
+							height: 2px;
+							width: 60px;
+							background: rgba(255, 255, 255, 0.5);
+							content: '';
+						}
+					}
+				}
+
+			}
+
+			.home-btn {
+				margin-top: 48px;
+			}
+		}
+	}
+
+	.two-container {
+		.light1 {
+			position: absolute;
+			width: 628px;
+			height: 1263px;
+			border-radius: 0;
+			left: 0;
+			top: 0;
+			background: url(../../../assets/component_img/index-orbits/section2_light.png);
+			background-size: contain;
+			background-repeat: no-repeat;
+			z-index: 50;
+		}
+	}
+
+	.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;
+			}
+		}
+	}
+
+	.section-three {
+		margin: 60px 20px;
+		display: grid;
+		gap: 40px;
+
+		.img {
+			img {
+				display: block;
+				margin: 20px auto;
+			}
+		}
+
+		.content {
+			.home-btn {
+				width: 238px;
+				margin-top: 48px;
+			}
+		}
+	}
+
+	.four-container-team {
+		background: linear-gradient(180deg, #141414, #12221F);
+	}
+
+	.four-container {
+		background: linear-gradient(180deg, #141414, #12221F);
+	}
+
+	.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-four-team {
+		display: grid;
+		gap: 0px;
+
+		.user-wrapper {
+			display: grid;
+			grid-column-gap: 130px;
+			grid-row-gap: 74px;
+			margin-top: 30px;
+
+			.user-item {
+				.user-row {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+
+					.avatar {
+						&>img {
+							width: 63px;
+							height: 63px;
+						}
+					}
+
+					.text {
+						margin-left: 28px;
+
+						.name {
+							font-size: 24px;
+							font-weight: bold;
+							color: #FFFFFF;
+						}
+
+						.role {
+							margin-top: 11px;
+							font-size: 16px;
+							font-weight: 500;
+							color: #808080;
+						}
+					}
+				}
+
+				.info-row {
+					margin-top: 37px;
+
+					.desc {
+						font-size: 12px;
+						font-weight: 500;
+						color: #808080;
+						line-height: 18px;
+					}
+
+					.link {
+						margin-top: 14px;
+						font-size: 12px;
+						font-weight: 500;
+						&>a {
+							color: var(--primary-color);
+							padding-bottom: 3px;
+							border-bottom: 1px solid var(--primary-color);
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.five-container {
+		.light2 {
+			background-image: url(../../../assets/component_img/index-orbits/feature-light2.png);
+			background-size: cover;
+			background-repeat: no-repeat;
+			position: absolute;
+			width: 442px;
+			height: 1330px;
+			border-radius: 0;
+			right: 0;
+			top: 150px;
+			z-index: 50;
+			opacity: 0.5;
+		}
+	}
+
+	.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: linear-gradient(-45deg, rgba(16, 16, 16, 0.7), rgba(18, 34, 31, 0.5));
+			border-radius: 31px;
+			padding: 25px;
+
+			.icon {
+				width: 90px;
+				height: 90px;
+				margin-bottom: 28px;
+			}
+
+			.title {
+				font-family: FontSemiBold;
+				font-weight: 500;
+				font-size: 24px;
+				line-height: 30px;
+				margin-bottom: 16px;
+			}
+
+			.desc {
+				font-size: 17px;
+				line-height: 21px;
+
+				color: rgba(255, 255, 255, 0.5);
+			}
+		}
+	}
+
+
+	.section-ten {
+		display: grid;
+		gap: 40px;
+
+		.process {
+			display: grid;
+			gap: 100px;
+			padding: 30px 0;
+
+			.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-home {
+		.section-four {
+			.line-wrapper {
+				grid-template-columns: repeat(2, 1fr);
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 1200px) {
+	.page-home {
+		.container {
+			margin-left: auto;
+			margin-right: auto;
+		}
+
+		.content {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			text-align: center;
+
+			p {
+				color: #cccccc;
+				font-size: 18px;
+				font-weight: 500;
+			}
+
+			h2 {
+				font-size: 50px;
+				line-height: 68px;
+			}
+		}
+
+		.one-container {
+			overflow: hidden;
+			// background: none;
+		}
+
+		.section-one {
+			height: 660px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			grid-template-columns: 1fr;
+			border-top: none;
+			margin: 0 auto;
+
+			.content {
+				align-items: flex-start;
+				max-width: 100%;
+				text-align: left;
+
+				p {
+					font-size: 25px;
+					line-height: 30px;
+				}
+
+				p.small {
+					font-size: 24px;
+					line-height: 50px;
+					color: rgba(255, 255, 255, 0.3);
+				}
+
+				p.middle {
+					font-size: 48px;
+					font-weight: bold;
+					color: var(--primary-color);
+				}
+
+				h1.big {
+					font-size: 82px;
+					line-height: 82px;
+					font-weight: 900;
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+					margin: 52px 0;
+
+					&>div {
+						display: block;
+						position: relative;
+
+						&:nth-child(2) {
+							padding: 0 40px;
+							overflow: hidden;
+
+							&::before {
+								position: absolute;
+								top: 50%;
+								left: 20px;
+								transform: translate(-50%, -50%);
+								width: 2px;
+								height: 60px;
+								background: rgba(255, 255, 255, 0.5);
+								content: '';
+							}
+
+							&::after {
+								position: absolute;
+								top: 50%;
+								right: 18px;
+								left: auto;
+								transform: translate(-50%, -50%);
+								width: 2px;
+								height: 60px;
+								background: rgba(255, 255, 255, 0.5);
+								content: '';
+							}
+						}
+					}
+
+				}
+			}
+		}
+
+		.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-team {
+			.user-wrapper {
+				grid-column-gap: 130px;
+				grid-row-gap: 74px;
+				grid-template-columns: repeat(2, 1fr);
+			}
+		}
+
+		.section-four {
+			.line-wrapper {
+				grid-template-columns: repeat(4, 1fr);
+			}
+		}
+
+		.section-five {
+			gap: 80px;
+
+			.feature-wrapper {
+				grid-template-columns: repeat(3, 1fr);
+			}
+
+			.feature-item {
+				width: 395px;
+				height: 282px;
+			}
+		}
+
+		.section-ten {
+			.process {
+				grid-template-columns: repeat(4, 1fr);
+				height: 262px;
+				width: 1227px;
+				background: url(../../../assets/component_img/index-orbits/process-bg.png);
+				background-size: cover;
+				background-repeat: no-repeat;
+
+				.process-item {
+					margin-top: 52px;
+
+					&::after {
+						content: "";
+						display: block;
+						width: 124px;
+						height: 2px;
+
+						background-color: var(--border-color-base);
+						position: absolute;
+						right: -110px;
+						top: 44px;
+					}
+				}
+			}
+		}
+	}
+}</style>