BiKing_H5/pages/index.vue

<template>
	<view class="content">
		<view class="content-01">
			<image class="logo-img" src="@/static/img/img_02.png" mode="aspectFit"></image>
			<view class="content-01-title">
				<text>全球安全领先的数字</text>
				<text>资产交易平台</text>
			</view>
			<view class="content-01-lable">
				<text></text>
				<text></text>
				<text></text>
				<image src="@/static/img/img_03.png" mode="aspectFit"></image>
				<text></text>
				<text></text>
				<text></text>
			</view>
			<view class="content-01-text">
				<text>独创的闪电交易技术</text>
				<text>从新加坡BiKing开始</text>
				<text>风靡全球</text>
			</view>
			<view class="phone-box">
				<image class="content-01-phone" src="@/static/img/img_04.png" mode="aspectFit"></image>
				<!-- 	<view class="content-01-phone">
					
				</view> -->
			</view>

		</view>
		<view class="content-02">
			<view class="contract-title">
				CONTRACT
			</view>
			<view class="contract-item">
				<image class="contract-item-icon" src="../static/img/img_30.png" mode=""></image>
				<text class="contract-item-name">永续合约</text>
				<text class="contract-item-val">一键市价开/平仓，100%零滑点，</text>
				<text class="contract-item-val">主动出击，无惧极端的行情波动!</text>
				<image class="contract-item-icon" src="../static/img/img_31.png" mode=""></image>
				<text class="contract-item-name">快捷合约</text>
				<text class="contract-item-val">1-100倍杠杆随意调节，</text>
				<text class="contract-item-val">你的人生，充满无限可能！</text>
			</view>

		</view>
		<view class="content-03">
			<view class="stage stage-01">
				<text class="stage-time">2017-12-08</text>
				<text class="stage-money">$19891</text>
			</view>
			<view class="stage stage-02">
				<text class="stage-time">2021-04-14</text>
				<text class="stage-money">$64829</text>
			</view>
			<view class="stage stage-03">
				<text class="stage-time">2021-11-10</text>
				<text class="stage-money">$68958</text>
			</view>
			<image class="stage-image" src="@/static/img/img_32.png" mode="aspectFit"></image>
		</view>
		<view class="content-04">
			<text class="content-04-title">交易特色</text>
			<!-- <image class="content-04-title-logo" src="@/static/img/img_08.png" mode="aspectFit"></image> -->
			<view class="stage-val">
				<image class="stage-image" src="@/static/img/img_09.png" mode="aspectFit"></image>
				<text></text>
				<text></text>
				<text class="stage-dot"></text>
				<image class="stage-image" src="@/static/img/img_10.png" mode="aspectFit"></image>
				<text></text>
				<text></text>
				<text class="stage-dot"></text>
				<image class="stage-image" src="@/static/img/img_11.png" mode="aspectFit"></image>
			</view>
			<view class="feature-way">
				<text class="way-lable">社区跟单</text>
				<text class="way-val">同步顶级交易员专业操作，一键跟单</text>
				<image class="way-img" src="@/static/img/img_12.png" mode="aspectFit"></image>
				<text class="way-lable">赠金模式</text>
				<text class="way-val">与实盘合约一致，赠金模式下的收益，</text>
				<text class="way-val">并划转至合约钱包</text>
				<image class="way-img" src="@/static/img/img_12.png" mode="aspectFit"></image>
				<text class="way-lable">持仓功能</text>
				<text class="way-val">止盈止损修改、部分平仓、</text>
				<text class="way-val">反向开仓、一键平仓</text>
			</view>
		</view>
		<view class="content-05 safe-box">
			<view class="safe-img-box">
				<image class="safe-logo" src="@/static/img/img_13.png" mode="aspectFit"></image>
				<image class="safe-kine" src="@/static/img/img_14.png" mode="aspectFit"></image>
			</view>
			<view class="safe-clause ">
				<!-- father -->
				<view class="clause-item">
					<view class="clause-lable">安全高效</view>
					<view class="clause-val">140万单/秒的核心撮合技术</view>
				</view>
				<view class="clause-item">
					<view class="clause-lable"><text>Simple,but Powerful</text>
						<image class="lable-icon" src="@/static/img/img_15.png" mode="aspectFit"></image>
						<text>For Begginers And Pros</text>
					</view>
					<view class="clause-val">24/7全球多语言在线服务支持</view>
				</view>
				<view class="clause-item">
					<view class="clause-lable">资金防护</view>
					<view class="clause-val">整体资金流动均采用多重离线签名技术，银行级安全风控，资金零风险</view>
				</view>
			</view>
			<image class="safe-img" src="@/static/img/img_16.png" mode="aspectFit"></image>

			<view class="safely-content">
				<view class="safely-left">
					<text class="safely-left-lable">Exchange Crypto Safely</text>
					<text class="safely-left-val">币王将持续为用户交易增加安全保障</text>
				</view>
				<image class="safely-right" src="@/static/img/img_33.png" mode=""></image>
			</view>
		</view>

		<view class="content-06">
			<image class="ikino-name" src="@/static/img/img_17.png" mode="aspectFit"></image>
			<image class="ikino-world" src="@/static/img/img_18.png" mode="aspectFit"></image>
			<view class="ikino-stage">
				<image class="stage-icon" src="@/static/img/img_19.png" mode="aspectFit"></image>
				<text class="stage-name">3年</text>
				<text class="stage-val">数字资产服务经验</text>
				<image class="stage-jiantou" src="@/static/img/img_12.png" mode="aspectFit"></image>
				<image class="stage-icon" src="@/static/img/img_20.png" mode="aspectFit"></image>
				<text class="stage-name">26个</text>
				<text class="stage-val">国家</text>
				<image class="stage-jiantou" src="@/static/img/img_12.png" mode="aspectFit"></image>
				<image class="stage-icon" src="@/static/img/img_21.png" mode="aspectFit"></image>
				<text class="stage-name">120万</text>
				<text class="stage-val">用户的共同选择</text>
			</view>
		</view>
		<view class="content-07">
			<image class="name" src="@/static/img/img_02.png" mode="aspectFit"></image>
			<view class="text">
				安全为基 技术立本 金融筑梦 服务树人
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.content-01 {
			width: 100%;
			min-height: 1503rpx;
			background: url("@/static/img/img_01.png") no-repeat top center;
			background-size: 100% 1503rpx;
			padding: 130rpx 30rpx 0;

			.logo-img {
				// margin-top: 130rpx;
				width: 221rpx;
				height: 85rpx;
			}

			.content-01-title {
				padding: 45rpx 0 50rpx;
				font-size: 70rpx;
				font-family: PingFang SC, PingFang SC-Light;
				font-weight: 300;
				text-align: center;
				color: #ffffff;
				line-height: 1.5;
				letter-spacing: 1.4px;
			}

			.content-01-lable {
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					width: 10rpx;
					height: 10rpx;
					background: #14fded;
					border-radius: 50%;
					margin: 0 5rpx;
				}

				image {
					width: 68rpx;
					height: 68rpx;
					margin: 0 20rpx;
				}
			}

			.content-01-text {
				display: flex;
				flex-direction: column;
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				letter-spacing: 0.8px;

				text {
					padding-top: 40rpx;
				}
			}

			.phone-box {

				margin: 75rpx auto 0;
				position: relative;
				width: 353rpx;
			}

			.content-01-phone {
				// z-index: 1;
				position: absolute;
				left: 0;
				top: 0;
				width: 353rpx;
				height: 715rpx;

			}
		}

		.content-02 {
			padding: 260rpx 60rpx 0;
			width: 100%;
			min-height: 1519rpx;
			background: url("@/static/img/img_29.png") no-repeat top center;
			background-size: 100% 1519rpx;

			.contract-title {

				font-size: 103rpx;
				font-family: Bahnschrift, Bahnschrift-Bold;
				font-weight: 700;
				text-align: left;
				color: #c4c4c4;
				letter-spacing: 2.06rpx;
			}

			// <view class="contract-item">
			// 				<image class="contract-item-icon" src="../static/img/img_30.png" mode=""></image>
			// 				<text class="contract-item-name">永续合约</text>
			// 				<text class="contract-item-val">一键市价开/平仓，100%零滑点，</text>
			// 				<text class="contract-item-val">主动出击，无惧极端的行情波动!</text>
			// 				<image class="contract-item-icon" src="../static/img/img_31.png" mode=""></image>
			// 				<text class="contract-item-name">快捷合约</text>
			// 				<text class="contract-item-val">1-100倍杠杆随意调节，</text>
			// 				<text class="contract-item-val">你的人生，充满无限可能！</text>
			// 			</view>
			.contract-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 43rpx 0 0;
				.contract-item-icon {
					width: 125rpx;
					height: 125rpx;
					margin-top: 90rpx
				}

				.contract-item-name {
					padding: 31rpx 0 5rpx;
					font-size: 42rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
				}

				.contract-item-val {
					padding-top: 20rpx;
					font-size: 34rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #666666;
				}
			}

		}

		.content-03 {
			width: 100%;
			height: 866rpx;
			background: url("@/static/img/img_06.png") no-repeat center center;
			background-size: 100% 100%;
			position: relative;

			.stage {

				position: absolute;
				display: flex;
				flex-direction: column;

				.stage-time {

					font-size: 18rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ffffff;
					line-height: 1.1;
				}

				.stage-money {
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #ffffff;
					line-height: 1.1;
				}
			}

			.stage-01 {
				left: 77rpx;
				top: 280rpx;
			}

			.stage-02 {
				right: 180rpx;
				top: 105rpx;
			}

			.stage-03 {
				right: 79rpx;
				top: 28rpx;
			}

			.stage-image {
				width: 397rpx;
				height: 805rpx;
				position: absolute;
				top: 326rpx;
				left: 177rpx;
				z-index: 1;
			}
		}

		.content-04 {
			width: 100%;
			min-height: 1513rpx;
			background: url("@/static/img/img_07.png") no-repeat center center;
			background-size: 100% 100%;
			padding-top: 318rpx;
			text-align: center;

			.content-04-title {

				font-size: 74rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #ffffff;
			}

			.content-04-title-logo {
				width: 588rpx;
				height: 157rpx;
				margin: 17rpx auto;
			}

			.stage-val {
				padding-top: 189rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.stage-image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					width: 6rpx;
					height: 6rpx;
					background: #03bf72;
					border-radius: 50%;
					margin-left: 10rpx;
				}

				.stage-dot {
					margin-right: 10rpx;
				}
			}

			// <view class="feature-way">
			// 	<text class="way-lable">社区跟单</text>
			// 	<text class="way-val">同步顶级交易员专业操作，一键跟单</text>
			// 				<image class="way-img" src="@/static/img/img_12.png" mode="aspectFit"></image>
			// 	<text class="way-lable">赠金模式</text>
			// 	<text class="way-val">与实盘合约一致，赠金模式下的收益，</text>
			// 	<text class="way-val">并划转至合约钱包</text>
			// 				<image class="way-img" src="@/static/img/img_12.png" mode="aspectFit"></image>
			// 	<text class="way-lable">持仓功能</text>
			// 	<text class="way-val">止盈止损修改、部分平仓、</text>
			// 	<text class="way-val">反向开仓、一键平仓</text>
			// </view>

			.feature-way {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 11rpx;

				.way-lable {
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: center;
					color: #ffffff;
					line-height: 1.2x;
					padding: 40rpx 0 30rpx;
				}

				.way-val {

					opacity: 0.86;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
					color: #ffffff;
					line-height: 1.2;
					padding-bottom: 20rpx;
				}

				.way-img {
					width: 22rpx;
					height: 13rpx;
					margin-top: 40rpx;

				}
			}

		}

		.content-05 {
			width: 100%;
			padding: 0 60rpx;

			.safe-img-box {
				width: 100%;
				position: relative;
			}

			.safe-logo {
				width: 463rpx;
				height: 249rpx;
				position: absolute;
				left: 0;
				top: 53rpx;
				z-index: -1;
			}

			.safe-kine {
				position: absolute;
				right: -94rpx;
				top: 173rpx;
				z-index: 2;
				width: 382rpx;
				height: 528rpx;
				z-index: -1;
			}

			.safe-clause {
				// position: absolute;
				// top: 462rpx;
				// left: 50%;
				// transform: translateX(-50%);

				// height: 1000rpx;
				width: 100%;
				padding-top: 462rpx;

				.clause-item {
					width: 100%;
					height: 305rpx;
					background-color: #fff;
					border-radius: 20rpx;
					box-shadow: 0px 0px 21px 2px #c5c2c2;
					margin-bottom: 25rpx;
					padding: 57rpx 46rpx 0;

					.clause-lable {

						font-size: 44rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #0c1533;
						line-height: 1.3;


						.lable-icon {
							width: 46rpx;
							height: 52rpx;
						}
					}

					.clause-val {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #0c1533;
						line-height: 1.7;
					}
				}
			}

			.safe-img {
				width: 556rpx;
				height: 376rpx;
				margin-top: 55rpx;
			}

			.safely-content {
				width: 100%;
				padding: 123rpx 0 136rpx;
				display: flex;
				justify-content: space-between;

				.safely-left {
					width: 434rpx;
					display: flex;
					flex-direction: column;

					.safely-left-lable {
						font-size: 44rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						text-align: left;
						color: #0c1533;
						line-height: 1.4;
					}

					.safely-left-val {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: left;
						color: #0c1533;
						line-height: 1.7;
					}
				}

				.safely-right {
					width: 256rpx;
					height: 271rpx;
					right: -60rpx;
				}
			}
		}

		.content-06 {

			width: 100%;
			background-color: #0D0E13;

			.ikino-name {
				width: 630rpx;
				height: 243rpx;
				margin: 60rpx 60rpx 0;
			}

			.ikino-world {
				width: 100%;
				height: 427rpx;
				top: -60rpx;
			}

			.ikino-stage {
				transform: translateY(-120rpx);
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-bottom: 60rpx;

				.stage-icon {
					width: 91rpx;
					height: 91rpx;
				}

				.stage-name {
					padding-top: 10rpx;
					font-size: 40rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #04c174;
					line-height: 65rpx;
				}

				.stage-val {

					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: left;
					color: #cccccc;
					line-height: 65rpx;
				}

				.stage-jiantou {
					width: 15rpx;
					height: 11rpx;
					margin: 31rpx 0 35rpx;
				}
			}
		}

		// <view class="content-07">
		// 	<image class="name" src="@/static/img/img_02.png" mode="aspectFit"></image>
		// 	<view class="text">
		// 		安全为基 技术立本 金融筑梦 服务树人
		// 	</view>
		// </view>

		.content-07 {
			width: 100%;
			text-align: center;
			padding: 48rpx 0 520rpx;

			.name {
				width: 221rpx;
				height: 85rpx;
			}

			.text {
				padding-top: 18rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: center;
				color: #23283f;
				line-height: 65rpx;
			}
		}

	}
</style>