udxcms 1.0.8 → 1.0.10

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

@@ -1,1262 +0,0 @@
-
-<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 '@cms/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>