<template>
	<Layout :index="2" :titles="'我要发行'" :title_content="'我要发行'">
 <view >
  <view class="content">
       <view class="content_top">
          <view class="banner">
			   <image class="banner_img" src="../static/imgs/p_banner.png"></image>
			   <image class="banner_title" src="../static/imgs/p_t.png"></image>
			   <image class="pr" src="../static/imgs/p_r.png"></image>
			   <image class="pl" src="../static/imgs/p_l.png"></image>
			   <view class="banner_desc">利用游戏发行渠道、平台、媒体等深度合作资源优势，为产品提供差异化发行运营。</view>
			   <!-- <swiper indicator-dots autoplay>
			        <swiper-item v-for="(item, index) in imgList" :key="index">
			          <image :src="item" class="slide-image"></image>
			        </swiper-item>
			     </swiper> -->
           </view>
		  </view>
	   <!--content_bottom -->
        <view class="content_bottom">
			 <view class="content_box">
					<!-- <view class="title_box">
						<view class="index_title">
							<view><image class="t_l" src="../static/imgs/tl.png"></image></view>
							<h5>合作机构</h5>
							<view><image class="t_l" src="../static/imgs/tr.png"></image></view>
						</view> 
					</view> -->
					<view class="content_title">
						<h5>纳入<span class="color-cs">“COG 好游戏计划”</span>的产品: 获得COG投融资联合体<span class="color-cs">600 亿元</span>游戏专项项目矩阵发行资金扶持
						获得协助申报、落地政府部门游戏发行奖励资金的扶持。</h5>
						<image class="yhl" src="../static/imgs/yhl.png"></image>
						<image class="yhr" src="../static/imgs/yhr.png"></image>
					</view>
					<view class="one_list">
						<view class="one_list_items" @mouseenter="handleMouseEnter(1)" @mouseleave="handleMouseLeave()">
							<image class="c_logo" v-if="activeIndex==1" src="../static/imgs/qdx.png" mode="heightFix"></image>
							<image class="c_logo" v-else src="../static/imgs/qd.png" mode="heightFix"></image>
							<view class="one_list_item" >
								<view class="item_title">渠道优势</view>
								<view class="item_desc">充分利用游戏发行渠道、平台、媒体等资源优势，为产品提供低成本买量高收益分成运营。</view>
							</view>
						</view>
						
						<view class="one_list_items" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave()">
							<image class="c_logo" v-if="activeIndex==2" src="../static/imgs/fxfax.png" mode="heightFix"></image>
							<image class="c_logo" v-else src="../static/imgs/fxfa.png" mode="heightFix"></image>
							<view class="one_list_item" >
								<view class="item_title">定制专属发行方案</view>
								<view class="item_desc">提供专、精、准团队，开展定制化发行服务。</view>
								<!-- <view class="item_descs">
									<view class="dian"></view>
									<view class="dian_desc">定制视频拍摄，可合作的KOL数量不低于若干人，总计播放量不低于若干</view>
								</view>
								<view class="item_descs"><view class="dian"></view>
								<view class="dian_desc">直播活动安排，可合作的KOL数量不低于若干</view></view>
								<view class="item_descs"><view class="dian"></view><view class="dian_desc">举办展会活动，场次不低于若干</view></view> -->
							</view>
						</view>
						<view class="one_list_items" @mouseenter="handleMouseEnter(2)" @mouseleave="handleMouseLeave()">
							<image class="c_logo" v-if="activeIndex==3" src="../static/imgs/zjfcx.png" mode="heightFix"></image>
							<image class="c_logo" v-else src="../static/imgs/zjfc.png" mode="heightFix"></image>
							<view class="one_list_item">
								<view class="item_title">资金扶持</view>
								<view class="item_desc">依托“COG游戏可信资产综合服务平台"，提供“不间断”资金开展联合发行合作。</view>
							</view>
						</view>
					</view> 
					<view class="apply" @tap="open('need')">立即申请</view>
					
			 </view>
			 
			
        </view>

    </view>
	</view>
	
	<uni-popup mode="center" ref="need">
		<view class="need-box">
			<view class="login_desc">
				游戏发行专项扶持
			</view>
			<!-- <view class="login_descs">
				快速开始尽享COG可信资产服务平台榜单，你可申请游戏评分、申请融资或处理游戏投融资业务
			</view> -->
			<view class="input-wrap">
				<input class="input" v-model="formData.c_name" type="text" placeholder="请输入您的企业名称" placeholder-class="placeholder-class" maxlength="20">
				<input class="input" v-model="formData.name" type="text" placeholder="如何称呼您" placeholder-class="placeholder-class" maxlength="20"/>
				<input class="input" v-model="formData.phone" type="text" placeholder="请输入您的联系电话" placeholder-class="placeholder-class" maxlength="20"/>
			</view>
			<view class="login_bt" @tap="apply()">
				<text>立即申请</text>
			</view>
		</view>
	</uni-popup>
	</Layout>
</template>

<script>
	/**
	 * 程序启动页
	 * */
	import Layout from './part/layouts.vue';
	export default {
		components: {
			Layout, 
		},
		data() {
			return {
				formData:[],
				 imgList: [
				        '../static/imgs/hy2.png',  
						'../static/imgs/hy2.png',  
						'../static/imgs/hy2.png',  
				      ],   
				activeIndex: 0, // 当前激活的选项卡索引
				Customer_service:false,
				comment:false,
				Inv:0,
				codeTime:0,
				FormData: {
					phone: '', 
					name:'',
					content:'',
				},
				articles:[],
				msg: '',
				active_num:0,
				
			}
		},
		onLoad() {
			// const eventChannel = this.getOpenerEventChannel()
			// eventChannel.on('pageData', data => {
			// 	console.log(data,3333)
			// 	// data即传过来的参数
			// })
		},
		
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop); 
		},
		onShow(params) {
			// this.getIndex();
		},
		methods: {
			open(name){
				this.$refs[name].open();
			},
			close(name){
				this.$refs[name].close();
			},
			onClickItem(index){
				   this.active_num = index;
			},
			handleMouseEnter(index){
				   this.activeIndex = index;
			},
			handleMouseLeave(){
				 this.activeIndex = 0;
			},
			del_btn(){
				this.Customer_service=false
			},
			del_comment(){
				this.comment=false
			},
			need(){
				uni.navigateTo({
					url: '/apply'
				})
			},		
			goNews(e){
				uni.navigateTo({
					url: '/news'
				})
			},
			apply(){
				this.formData.need = '我要发行'
				//return;
				this._post('game.Apply/addApply',{
					phone: this.formData.phone?this.formData.phone:'',
					name: this.formData.name?this.formData.name:'',
					c_name: this.formData.c_name?this.formData.c_name:'',
					need: this.formData.need?this.formData.need:'',
					app_id:10001,
					apply_type:1, //1云资源
				},res=>{
					this.formData = [];
					this.close('need')
					uni.showToast({
						icon:'none',
						title: '申请成功，请等待平台联系~',
						duration:2000
					})
				}
				,err=>{
					uni.showToast({
						icon:'none',
						title: err.data.msg
					})
					return;
					// this.$message(err.data.msg);
				}
				);
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	page{
		font-family:"Source Han Sans CN", sans-serif;
		background-color: #ffffff;
	}
	.banner_title{
		width: 369px !important;
		height: 161px !important;
		position: absolute;
		top: 100px;
		left: 350px;
	}
	.pr{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 210px;
		left: 361px;
	}
	.pl{
		width: 40px !important;
		height: 36px !important;
		position: absolute;
		top: 120px;
		left: 680px;
	}
	.banner_desc{
		width: 540px;
		position: absolute;
		top: 311px;
		left: 355px;
		font-weight: 400;
		font-size: 18px;
		color: #1D222C;
		line-height: 24px;
	}
	.content_box{
		overflow: hidden;
	}
	.apply{
		width: 130px;
		height: 42px;
		border: 1.6px solid #FD7403;
		line-height: 42px;
		border-radius: 42px;
		font-weight: 500;
		font-size: 16px;
		color: #FD7403;
		text-align: center;
		margin: 0px auto;
		cursor: pointer;
		margin-bottom: 93px;
	}
	.apply:hover{
			 color: #ffffff;
			 background-color: #FD7403;
	}
	.content{
	    width:100%;
	    margin: 0 auto;
	}
	.content_top{
	    width: 100%;
	    display: flex;
	    margin:0 auto;
	}
	.banner{
	    width: 100%;
	    height: 480px;
		overflow: hidden;
		position: relative;
	}
	.banner uni-swiper {
	    display: block;
	      height: 480px;
	}
	.banner .banner_img{
		width: 100%;
		height: 480px;
	}
	.slide-image {
	  width: 100%;
		height: 480px;
	}
	.index_title{
	    text-align: center;
	}
	.index_title h4{
	    font-size: 36px;
	    font-weight: inherit;
	    color: #333333;
	    margin: 40px auto 0;
	}
	.title_box p{
	    font-size: 16px;
	    color: #666;
		text-align: center;
	}
	
	>>>.uni-list-item__container{
		    padding:0!important; 
			padding-left: 0!important; 
	}
	.index_title {
		  height: 40px;
		  line-height: 40px;
		  display: flex;
		  justify-content: center;
		  margin-top: 46px;
	}
	  .index_title h5{
			font-weight: 700;
			font-size: 30px;
			color: #3D3D3D;
			margin: 0 10px;
		}
		.index_title view{
			height: 40px;
			line-height: 40px;
		}
	.index_title .t_l{
		  width: 39px;
		  height: 39px;
		  vertical-align: middle;
	}
	.content_bottom{
	    width: 100%;
	    margin:  0 auto;
		background: url(../static/imgs/p_bgs.png) no-repeat;
		background-size: 100% 100%;
	}
    /* add*/
	.one_list{
		width: 1294px;
		height: 520px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 85px;
	}
	.one_list_items{
		width: 364px;
		height: 432px;
		position: relative;
		 overflow: hidden;
	}
	.one_list_item{
		 width: 274px;
		 height: 384px;
		background: url(../static/imgs/p_bg.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		cursor: pointer;
		margin-top: 48px;
		padding: 0 44px;
	}	
	.item_title{
		font-weight: 500;
		font-size: 22px;
		color: #3D3D3D;
		line-height: 32px;
		margin-top: 80px;
	}
	.item_desc{
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		margin-top: 26px;
		line-height: 24px;
		margin-bottom: 26px;
	}
	.item_descs{
		font-weight: 400;
		font-size: 14px;
		color: #3D3D3D;
		margin-top: 14px;
		line-height: 22px;
		display: flex;
	}
	.dian{
		width: 8px;
		height: 8px;
		border-radius: 100%;
		background: linear-gradient( 180deg, #FF6C11 0%, #FF9C35 100%);
		position: relative;
		top: 6px;
		z-index: 8;
		margin-right: 10px;
	}
	.dians{
		width: 5px;
		height: 5px;
		border-radius: 100%;
		background:#3D3D3D;
		position: relative;
		top: 8px;
		z-index: 8;
		margin-right: 10px;
		margin-left: 4px;
		
	}
	.dian_desc{
		width: 250px;
	}
	.c_logo{
		height: 98px;
		position: absolute;
		top: 6px;
		left: 32px;
		z-index: 9;
	}
   .one_list_item:hover{
	  background: url(../static/imgs/p_bgx.png) no-repeat;
	  background-size: 100% 100%;
	}
	.one_list_item:hover .item_title{
		 color: #ffffff;
		}
	.one_list_item:hover .item_desc{
		 color: #ffffff;
		}
   .one_list_item:hover .item_descs{
		 color: #ffffff;
		}
	/* add */	
	.content_title{     width: 1280px;
     height: 118px;
     border-radius: 16px 16px 16px 16px;
      border: 1px solid transparent;      background-clip: padding-box, border-box;      background-origin: padding-box, border-box;      background-image: linear-gradient(to right, #fff, #fff),linear-gradient(to right, #fff7f4, #ffaa93);
	  margin: 66px auto;
	  position: relative;
	  overflow: hidden;    }
	.content_title h5{
		width: 892px;
		height: 64px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 550;
		font-size: 20px;
		color: #3D3D3D;
		line-height: 32px;
		text-align: center;
		margin: 25px auto;
	}
	.color-cs{
		color: #EE6E04;
	}
	.yhl{
		width: 44px;
		height: 31px;
		position: absolute;
		left: 97px;
		top: 21px;
	}
	.yhr{
		width: 44px;
		height: 31px;
		position: absolute;
		right: 80px;
		top: 60px;
	}
	
	
	.need-box{
		width: 640px;
		min-height: 468px;
		background: #fafafa;
		box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
		text-align: center;
		.login_descs{
			margin-top: 20px;
			height: 55px;
			font-size: 21px;
			font-weight: 400;
			color: #9E9E9E;
			text-align: center;
			padding: 0 60px;
			text-align: left;
		}
		.login_desc{
			height: 55px;
			font-size: 24px;
			font-weight: 400;
			color: #333333;
			text-align: center;
			padding: 40px 60px 0;
		}
		.login_bt{
			width: 85%;
			height: 53px;
			background: #F48612;
			border-radius: 5px;
			line-height: 53px;
			margin: 0 auto;
			color: #ffffff;
			cursor: pointer;
			margin-top: 40px;
		}
		.login_bt:hover{
			background: #F48612;
			color: #ffffff;
		}
		.login_check{
			font-size: 19px;
			font-weight: 400;
			color: #9E9E9E;
			margin-top: 60px;
		}
		.login_code{
			width: 85%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin:0 auto
		}
		.login_checks{
			font-size: 19px;
			font-weight: 400;
			color: #9E9E9E;
			margin-top: 10px;
		}
		.uni-checkbox-input{
			border-radius: 100% !important;
		}
		.input{
			width: 81%;
			height: 53px;
			border: 1px solid #dddddd;
			border-radius: 5px;
			margin: 0 auto;
			color: #333333;
			margin-bottom: 25px;
			text-align: left;
			padding: 0 2%;
		}
		.input2{
			width: 60%;
			height: 53px;
			border: 1px solid #dddddd;
			border-radius: 5px;
			color: #ffffff;
			padding: 0 2%;
			text-align: left;
		}
		.dynacode{
			width: 30%;
			height: 53px;
			background: #F48612;
			border-radius: 5px;
			color: #ffffff;
			line-height: 53px;
			cursor: pointer;
		}
		.input:hover{
			border: 1px solid #F48612;
		}
		.input2:hover{
			border: 1px solid #F48612;
		}
		.placeholder-class{
			font-size: 21px;
			font-weight: 400;
			color: #9E9E9E;
			text-align: left;
		}
	}
	@media screen and (max-width: 768px) {
		.need-box{
			width: 150%;
			background: #fafafa;
			box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
			text-align: center;
			overflow: hidden;
			min-height:180px;
			margin-left: -25%;
			.login_desc{
				width: 100%;
				font-size: 14px;
				color: #333333;
				text-align: center;
				padding: 0 ;
				margin-top: 10px;
			}
			.input-wrap{
				margin-top: 20px;
			}
			.input{
				height: 24px;
				line-height: 24px;
				font-size: 12px;
			}
			.login_bt{
				height: 24px;
				line-height: 24px;
				font-size: 12px;
			}
		}
		  .banner_desc{
			  line-height: 10px !important;
		  }
		.banner{
		    height: 130px !important;
		}
		.banner uni-swiper {
		       height: 130px !important;
		}
		.banner .banner_img{
			  height: 130px !important;
		}
		.content_title{
			height: auto !important;
		}
		.content_title h5{
			line-height: 14px !important;
			font-size: 10px !important;
			height: auto !important;
		}
		.one_list{
			flex-direction: column;
			height: auto;
			width: 150px !important;
		}
		.one_list_items{
			width: 180px !important;
			height:190px !important;
		}
		.one_list_item{
			width: 150px !important;
			height: 158px !important;
		}
		.item_title{
			font-size: 14px !important;
			margin-top: 20px;
		}
		.item_desc{
			margin-top: 20px;
			line-height: 15px !important;
			font-size: 10px !important;
		}
		.apply{
			width: 100px;
			height: 22px;
			line-height: 22px;
			border-radius: 22px;
			font-size: 10px !important;
		}
	}
</style> 
