fx66/src/views/home/contTwo.vue

<template>
	<div class="cont-two">
		<div class="content">
			<div class="t-title">
				<hr>
				<h3>加入我们 ，可以获得</h3>
				<hr>
			</div>
			<h4>To join our agent you will gain the following advantages</h4>
			<div class="t-box">
				<div class="line-box" v-for='msg in boxList'>
					<div class="box" @mouseenter='msg.hover1=true' @mouseleave='msg.hover1=false'>
						<h4>{{msg.title1}}</h4>
						<h5>{{msg.tip1}}</h5>
						<p>{{msg.detail1}}</p>
						<img :src="msg.src1">
						<router-link to='/apply'>
							<div class="apply-btn" v-show='msg.hover1==true'>立即申请经纪商<span>></span></div>
						</router-link>
					</div>
					<div class="box right" @mouseenter='msg.hover2=true' @mouseleave='msg.hover2=false'>
						<h4>{{msg.title2}}</h4>
						<h5>{{msg.tip2}}</h5>
						<p>{{msg.detail2}}</p>
						<img :src="msg.src2">
						<router-link to='/apply'>
							<div class="apply-btn" v-show='msg.hover2==true'>立即申请经纪商<span>></span></div>
						</router-link>
					</div>
				</div>	
			</div>

			<div class="w-box">
				<img src="../../../static/img/platBlock.png">
				<div class="w-title">
					<p class="word1">专业严谨</p>
					<p class="word2">的交易平台</p>
					<p class="word3">
						Professional and rigorous trading 
						<br>
						 platform
					</p>
					<hr>
				</div>
				<p class="inner-box">
					<span>FX66是基于区块链底层技术的数字资产交易所，</span>
					<span>拥有撮合交易系统低延迟、高并发的核心技术</span>
					<span>勇于突破传统交易所的局限，</span>
					<span>把交易、资产写入区块链当中。</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				boxList:[
				{
					title1:'超高返佣',
					tip1:'High commission',
					detail1:'推荐FX66给他人，可以获取被推荐人等比例的交易手续费做为佣金。',
					src1:'../../../static/img/add01.png',
					title2:'VIP奖励',
					top2:'VIP rewards',
					detail2:'每个经纪商都会有相应的业绩排名，凡是每个月业绩排名靠前者，均可以得到我们平台的VIP级别奖励。',
					src2:'../../../static/img/add02.png',
					hover1:false,
					hover2:false
				},
				{
					title1:'市场支持',
					tip1:'Marketing support',
					detail1:'FX66经纪商可以使用我们所可以提供的全部交易工具和交易资源，并且会在市场宣传方面给予相应的支持！',
					src1:'../../../static/img/add03.png',
					title2:'技术支持',
					top2:'Technical support',
					detail2:'我们拥有强大的技术开发团队，可以制定符合客户营销特点的网站，只收成本费。',
					src2:'../../../static/img/add04.png',
					hover1:false,
					hover2:false
				}
				]
			}
		}
	}
</script>

<style scoped>
.cont-two{
	position: relative;
	height: 1780px;
	background: url(../../assets/img/platBg.png) no-repeat center bottom #f5f8ff;
	.content{
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		padding-top: 60px;
		.t-title{
			display: flex;
    	align-items: center;
    	justify-content: space-between;
			hr{
				width: 420px;
    		height: 1px;
    		background-color: #e5e5e5;
    		border: 0;
			}
			h3{
				font-size: 35px;
    		font-weight: 700;
			}
		}
		h4{
			font-size: 20px;
    	color: #999;
    	margin-top: 12px;
		}
		.t-box{
			height: 580px;
			margin-top: 80px;
			.line-box{
				width: 100%;
				height: 250px;
				margin-top: 80px;
			}
			.box{
				position: relative;
    		text-align: left;
    		float: left;
    		margin-right: 205px;
    		width: 430px;
    		height: 250px;
    		border: 1px solid #eee;
    		color: #333;
    		padding: 32px 0 0 20px;
    		background-color: #fff;
    		h4{
    			color: #333;
    			font-size: 25px;
    			font-weight: 700;
    			line-height: 1;
    		}
    		h5{
    			font-size: 20px;
    			line-height: 1;
    			color: #999;
    			font-weight: 500;
    			margin-top: 10px;
    			margin-bottom: 40px;
    		}
    		p{
					width: 255px;
    			font-size: 15px;
    		}
    		img{
    			position: absolute;
    			top: 20px;
    			right: -135px;
    			width: 270px;
    		}
    		.apply-btn{
    			position: absolute;
    			top: 225px;
    			width: 170px;
    			height: 45px;
    			background: #1a6fa6;
    			font-size: 15px;
					line-height: 45px;
					color: #f5f8ff;
					text-align: center;
					cursor: pointer;
    			span{
    				width: 47px;
    				height: 45px;
    				float: right;
    				font-size: 30px;
    				background: #2580bb;
    			}
    		}
			}
			.box:hover{
				border: 1px solid #1a6fa6;
				border-left: 2px solid #1a6fa6;
			}
			.right{
				margin-right: 0;
			}
		}
		.w-box{
			width: 1200px;
    	height: 250px;
    	position: absolute;
    	left: 50%;
    	transform: translateX(-50%);
    	bottom: 85px;
    	background-color: rgba(2,134,219,.83);
    	padding-left: 195px;
    	text-align: left;
    	color: #fff;
    	img{
        position: absolute;
    		top: -37px;
    		left: 158px;
    	}
		}
		.w-title{
	    line-height: 1;
	    .word1{
	    	font-size: 35px;
    		margin-top: 30px;
    		font-weight: 700;
	    }
	    .word2{
				font-size: 24px;
    		margin-left: 80px;
    		margin-top: 10px;
    		font-weight: 700;
	    }
	    .word3{
	    	margin-top: 16px;
    		font-size: 12px;
    		line-height: 1.5;
	    }
	    hr{
	    	width: 45px;
    		height: 2px;
    		background-color: #fff;
    		border: 0;
    		margin-top: 20px;
	    }
		}
		.inner-box{
			position: absolute;
   		width: 400px;
   		right: 250px;
   		top: 56px;
   		font-size: 18px;
   		text-align: center;
   		line-height: 1.6;
		}
		.inner-box span{
			display: block;
    	padding: 5px 0;
		}
	}
}
</style>