<template>
	<div class="footer">
		<div class="content">
			<div class="footer-title">
				<hr>
				<h3>全方位 一站式服务</h3>
				<hr>
			</div>
			<h4>All-around one-stop service</h4>
			<ul class="server">
				<li v-for="msg in serverList" @mouseenter="msg.servershow=true" @mouseleave="msg.servershow=false">
					<div class="item" v-show="msg.servershow==false">
						<img :src="msg.src">
					</div>
					<div class="item2" v-show="msg.servershow==true">
						{{msg.cont1}}
						<br>
						{{msg.cont2}}
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export	default{
		data(){
			return{
				
				serverList:[
				{
					src:'../../../static/img/shandian.png',
					servershow:false,
					cont1:'FX66具备一键交易功能，',
					cont2:'闪电交易，专业快捷！'
				},
				{
					src:'../../../static/img/phone.png',
					servershow:false,
					cont1:'手机客户端，',
					cont2:'随时随地，紧跟市场!'
				},
				{
					src:'../../../static/img/asses.png',
					servershow:false,
					cont1:'专业分析指导，',
					cont2:'价值评估市场!'
				},
				{
					src:'../../../static/img/kefu.png',
					servershow:false,
					cont1:'价值评估市场!',
					cont2:'一小时教您炒币入门'
				}
				]
			}
		},
		methods:{

		}
	}
</script>

<style scoped>
.footer{
	position: relative;
	height: 600px;
	background: #f5f8ff;
	.content{
		width: 1200px;
		height: 100%;
		margin: 0 auto;
		padding-top: 66px;
		.footer-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: 11px;
		}
		.server{
			margin-top: 80px;
			margin-left: 70px;
    	display: flex;
    	justify-content: center;
    	list-style: none;
    	li{
    		border: 1px solid #dcdcdc;
    		width: 176px;
    		height: 176px;
    		transform: rotate(45deg);
    		margin-right: 72px;
    		background-color: #fff;
    		.item{
    			width: 100%;
    			height: 100%;
    			line-height: 176px;
    			transform: rotate(-45deg);
    			img{
    				margin-top: 55px;
    			}
    		}
    		.item2{
    			width: 100%;
    			height: 100%;
    			display: flex;
    			justify-content: center;
    			align-items: center;
    			transform: rotate(-45deg);
    			color: #fff;
    			font-size: 15px;
    		}
    	}
    	li:hover{
    		background: #1a6fa6;
    	}
		}
	}
}
	
</style>