<template>
	<Layout :index="1" :banner="0" :imgs="0" :img="'/static/img/index/invest_banner.png'" :titles="'我要资金'" :title_content="'我要资金'">
		<view class="content-game bgc-02">
			<view class="invest_title">
				   <image class="invest_tj" src="../static/img/index/flow.png"></image>
			</view>
			<view class="content-invest">
				<image class="steps" src="../static/img/index/step1.png"></image>
				<image class="step" src="../static/img/index/step.png"></image>
				<image class="steps" src="../static/img/index/step2.png"></image>
				<image class="step" src="../static/img/index/step.png"></image>
				<image class="steps" src="../static/img/index/step3.png"></image>
				<image class="step" src="../static/img/index/step.png"></image>
				<image class="steps" src="../static/img/index/step4.png"></image>
			</view>
			
			<view class="content-img">
				<image class="xian" src="../static/img/index/xuxian.png" mode="widthFix"></image>
				<view class="introduce_content">
					<view class="introduce">
						<view class="introduce_title">基于游戏全生命周期可信数据，平台入驻金融机构将为之提供游戏产品小微金融、
						供应链金融、游戏研发发行项目贷款服务及游戏产品质押融资、游戏产品资产证券化等创新业务。
						</view>
						<view class=" consult" @tap="tob()">立即咨询</view>
				    </view>
					<view class="introduce_img">
						<view class="introduce_imgs">
							<image class="introduce_imgurl" src="../static/img/index/ms.png" mode="heightFix"></image>
						</view>
					</view>
				</view>
				
			</view>
			<view class="fg">
			<view class="invest_title">
				   <image class="invest_tjs" src="../static/img/index/institution.png"></image>
			</view>
			<view class="content-invests">
				<view class="gourls"><image class="imgs" src="../static/img/index/rz1.png"></image></view>
				<view class="gourls"><image class="imgs" src="../static/img/index/rz2.png"></image></view>
				<view class="gourls"><image class="imgs" src="../static/img/index/rz3.png"></image></view>
				<view class="gourls"><image class="imgs" src="../static/img/index/rz4.png"></image></view>
			</view>
			</view>
		</view>
	<Kefu></Kefu>
	</Layout>
	
</template>

<script>
	import Layout from './part/layout.vue';
	import Kefu from './part/kefu.vue';
	export default {
		components:{
			Layout,
			Kefu
		},
		data(){
			return {
				
			}
		},
		created() {
			// this.getZhishu();
		},
		beforeDestroy() {
		},
		methods:{
			tob(){
				 window.scrollTo(0, document.body.scrollHeight);
			},
			getZhishu(){
				this._get('cms.cms/home_zx',{
					
				},res=>{
					if(res.code==1){
						let list = res.data.lists;
						let arr = [];
						list.forEach(e=>{
							let categories = e.dates.split(',');
							let data = e.value.split(',');
							let max = Math.ceil(Math.max(...data)/5)*5;
							let eoptsData = this.$mUtils.deepClone(eopts);
							eoptsData.yAxis[0].max = max;
							arr.push({
								name: e.name,
								chartData: {
									categories: categories,
									series: [
										{
											name: e.name,
											data: data,
											color: '#ffb21c',
											linearGradient: [0,0,0,1,[{offset: 0, color: "#FBF4D7"},{ offset: 1, color: "#FFFFFF" }]],
											symbol:'circle',
											symbolSize: 8,
											markLine: {
												data: [
													{type: 'average', name: '平均值'}
												],
												label: {
													show: false
												}
											},
											barWidth: '50%',
											type: 'line'
										}
									]
								},
								eopts: eoptsData
							})
						});
						this.chartsList = arr;
						if(this.chartsList.length==1){
							this.listClass = ['left1 zindex'];
						}else if(this.chartsList.length==2){
							this.listClass = ['left1','left2 zindex'];
						}else if(this.chartsList.length==3){
							this.listClass = ['left1','left2','left3 zindex'];
						}else if(this.chartsList.length==4){
							this.listClass = ['left1','left2','left3','center zindex'];
						}else if(this.chartsList.length==5){
							this.listClass = ['left1','left2','left3','center','right1 zindex'];
						}else if(this.chartsList.length==6){
							this.listClass = ['left1','left2','left3','center','right1','right2'];
						}
					}
				})
			},
			getProduct(){
				this._get('product.indexs/lists',{
					page: 1,
					list_rows: 50,
				},res=>{
					this.productList = res.data.list.data;
				})
			},
			getArticle(category_id=3,list_rows=20){
				this._get('article.article/index',{
					page: 1,
					list_rows: list_rows,
					category_id: category_id,
					is_home: 1,
				},res=>{
					if(res.code==1){
						if(category_id==3){
							this.zhishuList = res.data.list.data;
						}else if(category_id==1){
							this.shichangList = res.data.list.data;
						}else if(category_id==2){
							this.wenhuanList = res.data.list.data;
						}
					}
				})
			},
			getStore(){
				this._get('store.store/lists',{
					page: 1,
					list_rows: 20,
				},res=>{
					if(res.code==1){
						this.storeList = res.data.list.data;
					}
				})
			},
			goDetail(e){
				this.$router.push({
					path: 'articleDetails',
					query: {
						id: e.article_id,
						index: 0
					}
				})
			},
			goJianjie(e){
				this.$router.push({
					path: 'companyProflie',
					query:{
						id: e.store_id,
						index: 0
					}
				})
			},
			changeNum(){
				this.listClass.unshift(this.listClass[this.listClass.length-1]);
				this.listClass.splice(this.listClass.length-1,1);
			},
			setClass(index){
				if(index==0){
					return this.listClass[0];
				}else if(index==1){
					return this.listClass[1];
				}else if(index==2){
					return this.listClass[2];
				}else if(index==3){
					return this.listClass[3];
				}else if(index==4){
					return this.listClass[4];
				}else if(index==5){
					return this.listClass[5];
				}
			},
			// 鼠标移入事件
			mouseover(e){
				this.is_xuan = false;
			},
			// 鼠标移出事件
			mouseleave(e){
				this.is_xuan = true;
			},
			change(e){
				this.currentIndex = e.detail.current;
			},
			changeSub(){
				if(this.currentIndex<=0){
					this.currentIndex = this.storeList.length-1;
				}else{
					this.currentIndex--;
				}
			},
			changeAdd(){
				if(this.currentIndex>=(this.storeList.length-1)){
					this.currentIndex = 0;
				}else{
					this.currentIndex++;
				}
			},
		}
	}
</script>

<style lang="scss">
	.content-game{
		width: 100%;
		min-height: 800px;
		margin: 0 auto;
		.content-img{
			width: 1600px;
			margin:0 auto;	
			margin-top: 80px;
			text-align: center;
			.xian{
				width: 1600px;
				margin: 0 auto;
			}
			.introduce_content{
                 display: flex;
                 justify-content: space-around;
				 padding: 40px 0;
			}
			.introduce{
				width: 533px;
				height: 96px;
				// margin-left: 130px;
				// margin-right: 84px;
				
				.introduce_title{
					font-size: 24px;
					font-weight: 400;
					color: #E9E9E9;
					line-height: 35px;
					text-align: left;
					margin-top: 40px;
				}
				.consult{
					width: 168px;
					height: 45px;
					border: 1px solid #F48612;
					border-radius: 23px;
					font-size: 21px;
					font-weight: 400;
					color: #EF8312;
					line-height: 45px;
					text-align: center;
					margin-top: 30px;
					cursor: pointer;
				}
			}
			.introduce_img{
				width: 600px;
				height: 340px;
				background: #252527;
				border: 1px solid #383838;
				border-radius: 11px;
				.introduce_imgs{
					width: 600px;
					height: 340px;
					background: #383838;
					border-radius: 11px;
					position: relative;
					    top: -10px;
					    left: -10px;
				}
				.introduce_imgurl{
					height: 320px;
					transition: transform 1.2s ease;
					margin-top: 8px;
					    border-radius: 10px;
				}
				// .introduce_imgurl:active {
				//   transform: scale(2.5);
				//   z-index: 999;
				// }
				// .introduce_imgurl:hover {
				//   transform: scale(2.5);
				//    z-index: 999;
				// }
			}
			.introduce_ren{
				width: 403px;
				height: 519px;
				margin-left: -40px;
				.ren{
					margin-top: 100px;
					width: 403px;
					height: 419px;
				}
			}
			
		}
		.content-invest{
			width: 1600px;
			margin:0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.step{
				width: 55px;
				height: 19px;
			}
			.steps{
				width: 234px;
				height: 157px;
			}
			
		}
		.fg{
			box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
			border-radius: 5px;
		}
		.content-invests{
			width: 1600px;
			margin:0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 70px;
			
			.gourls{
				width: 353px;
				height: 95px;
				background: #252527;
				border: 1px solid #383838;
				border-radius: 5px;
				    display: flex;
				    align-items: center;
				    justify-content: center;
				.imgs{
					width: 257px;
					height: 56px;
				}
			}
		}
	}
	.invest_title{
				padding: 71px 160px 47px 160px;
				display: flex;
				align-items:center;
				justify-content: space-between;
				.invest_tj{
					width: 204px;
					height: 82px;
				}
				.invest_tjs{
					width: 327px;
					height: 82px;
				}
	}
</style>
